• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Terrific Composer Workshop
 

Terrific Composer Workshop

on

  • 2,680 views

The Terrific Composer is a Frontend Development Framework – based on Symfony2 – that aims to make your life easier. It takes the modularization approach of Terrific and provides you a project ...

The Terrific Composer is a Frontend Development Framework – based on Symfony2 – that aims to make your life easier. It takes the modularization approach of Terrific and provides you a project structure that enables you to start right away.

The slides are part of the Terrific Composer Workshop and includes tips & tricks for working with the Composer.

Statistics

Views

Total Views
2,680
Views on SlideShare
2,450
Embed Views
230

Actions

Likes
1
Downloads
8
Comments
0

7 Embeds 230

http://local-frontend-crashkurs.com 119
http://localhost 48
http://local.frontend-crashkurs 33
http://frontend-crashkurs.nx 23
http://www.sfexception.com 3
http://fe-students.nx 3
http://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Terrific Composer Workshop Terrific Composer Workshop Presentation Transcript

    • Terrific ComposerMakes your life easier…
    • AgendaConceptTerrific Composer ‣ Installation ‣ Twig ‣ Pages ‣ Modules & Skins ‣ Layout ‣ Dev -> ProdRemo Brunschwiler 10. July 2012 # 3
    • GithubTake it. Make it better. Together.
    • RepositoriesTerrificJS ‣ https://github.com/brunschgi/terrificjsTerrific Composer (Symfony2 Edition) ‣ https://github.com/brunschgi/terrific-composerTerrific Symfony2 Bundles ‣ https://github.com/brunschgi/TerrificCoreBundle ‣ https://github.com/brunschgi/TerrificComposerBundleRemo Brunschwiler 10. July 2012 # 5
    • ShowcasesSee Terrific in action
    • Remo Brunschwiler 14. August 2012 # 7
    • ConceptIt’s really easy…
    • Hold on a minute!Before we dive deeper into the Terrific Composer…Remo Brunschwiler # 9
    • Hold on a minute!Before we dive deeper into the Terrific Composer…Lets refresh our Terrificknowledge!http://www.slideshare.net/brunschgi/terrific-frontendsRemo Brunschwiler # 9
    • Terrific ComposerMakes your life easier…
    • Terrific ComposerFrontend Development Framework ‣ Designed for building frontends / applications based on the Terrific concept ‣ Integrates TerrificJS ‣ Based on Symfony ‣ … still very youngRemo Brunschwiler 10. July 2012 # 11
    • Terrific ComposerFrontend Development Framework ‣ Designed for building frontends / applications based on the Terrific concept ‣ Integrates TerrificJS ‣ Based on Symfony ‣ … still very young… melts dozens of best practices!Remo Brunschwiler 10. July 2012 # 11
    • DocumentationTerrific Composer ‣ Unfortunately, a specific documentation does not exist yet ‣ Any help is gladly appreciated!!Symfony Documentation ‣ http://symfony.com/doc/current/quick_tour/the_big_picture.html – quick tour ‣ http://symfony.com/doc/current/book/ – really great in-depth documentation! ‣ http://symfony.com/doc/current/cookbook/ – solutions and tutorials for common tasks ‣ http://symfony.com/doc/current/components/index.html – symfony components documentationRemo Brunschwiler 10. July 2012 # 12
    • InstallationVery fast setup for your project!
    • Download it from: http://terrifically.org/composer/ InstallationRemo Brunschwiler 10. July 2012 # 14
    • Explore… the sidebar and their possibilities
    • Create Add new Modules & Skins to your project. The Skeleton is generated for you so that you can start right away.Remo Brunschwiler 10. July 2012 # 16
    • Open The Open dialog provides you fast access to all of your Modules and Pages.Remo Brunschwiler 10. July 2012 # 17
    • Inspect The inspect mode shows you which modules are in use on the current page.Remo Brunschwiler 10. July 2012 # 18
    • TwigThe flexible, fast, and secure template engine for PHP
    • TwigSymfony comes with a powerful templating language called Twig ‣ http://symfony.com/doc/current/book/templating.html ‣ http://twig.sensiolabs.org/documentation…I couldn’t have explained it better, so have a look at the linksabove :-)Remo Brunschwiler 10. July 2012 # 20
    • IDE IntegrationTwig is a quite young project, but there is already support forseveral IDEs: ‣ PhpStorm (native as of 2.1) – recommended!! ‣ Textmate via the Twig bundle ‣ Vim via the Jinja syntax plugin ‣ Netbeans via the Twig syntax plugin ‣ Eclipse via the Twig plugin ‣ Sublime Text via the Twig bundle ‣ Coda 2 via the other Twig syntax modeRemo Brunschwiler 10. July 2012 # 21
    • Hands on!Terrific Composer – Step by Step
    • Step by StepCommon Tasks ‣ Create a new page ‣ Create a new Module / Skin ‣ Create a new layout ‣ Development -> ProductiveRemo Brunschwiler 10. July 2012 # 23
    • PagesPlay Lego!
    • … Let’s see it in actionRemo Brunschwiler 10. July 2012 # 25
    • Create a new pageThings to do 1. Create a new or extend an existing controller 2. Create an action in the controller 3. Set annotations (@Template, @Route, @Composer) 4. Create a view (twig file) in /Resources/views/Remo Brunschwiler 10. July 2012 # 26
    • 1. Create / Extend Controller<?phpnamespace TerrificCompositionController;use SymfonyBundleFrameworkBundleControllerController;use TerrificComposerBundleAnnotationComposer;use SensioBundleFrameworkExtraBundleConfigurationRoute;use SensioBundleFrameworkExtraBundleConfigurationTemplate;class DefaultController extends Controller{}Things to consider ‣ PHP 5.3 namespace describes where the class is located ‣ Filename = ClassName, eg. DefaultController.php -> needed for classloading ‣ PHP 5.3 use statements for base controller and annotationsRemo Brunschwiler 10. July 2012 # 27
    • 2. Create Actionclass DefaultController extends Controller{ /** * @Composer("Welcome") * @Route("/", name="home") * @Template() */ public function indexAction() { return array(); }}Things to consider ‣ action name must end in Action ‣ return statement of an action is a Response object -> in our case it is and array: because of @Template()Remo Brunschwiler 10. July 2012 # 28
    • 3. Set Annotations/** * @Composer("Welcome") * @Route("/", name="home") * @Template() */public function indexAction(){ return array();}@Composer(<name>) ‣ The given name will appear in the open dialog@Route(“<path>”, name=”<name”) ‣ Describes the path under which the page is available ‣ For more options have a look at @Route@Template() ‣ Specifies which template should be rendered (@Template documentation)Remo Brunschwiler 10. July 2012 # 29
    • 4. Create Twig View/Resources/views/<ControllerName>/<actionName>.html.twig {% extends TerrificComposition::base.html.twig %} {% block title %}Terrific Composer - Welcome{% endblock %} {% block body %} <div class="page"> … here comes your stuff … </div> {% endblock %}Things to consider‣ Extend the layout of your choice‣ Override / Extend the twig blocks you needRemo Brunschwiler 10. July 2012 # 30
    • Twig BlocksProvided from TerrificCoreBundle::base.html.twig ‣ title – content of the <title> element ‣ meta – for meta tags (<meta charset="UTF-8"/> is always set) ‣ styles – the place for your stylesheets ‣ body_class – allows you to give your body a class ‣ composition – your content goes here ‣ jquery – jquery script element ‣ terrificjs – terrificjs script element ‣ scripts – the place for your javascripts ‣ bootstrap – the default terrificjs bootstrapRemo Brunschwiler 10. July 2012 # 31
    • Hands on!Create a new page that… ‣ is available under /workshop ‣ appears in the open dialog as “Workshop” ‣ has the same content as the homepageRemo Brunschwiler 10. July 2012 # 32
    • Hands on!Create a new page that… ‣ is available under /workshop ‣ appears in the open dialog as “Workshop” ‣ has the same content as the homepageEnhance the page, so that… ‣ you can type an URL like /workshop/{title} ‣ the {title} is displayed as heading before the Intro module ‣ and if no title is given, “Terrific Composer” should be displayed insteadRemo Brunschwiler 10. July 2012 # 32
    • Twig Module Macro{# Renders terrific modules. @param name {String} name of the module @param view {String} name of the view to render (without html.twig suffix) [optional] @param skins {Array} contains the skins to apply [optional] @param connectors {Array} contains the channel ids to connect to [optional] @param attrs {Object} contains the additional html attributes for the module [optional] @param data {Object} contains the data to pass to embedded controllers [optional]#}{% macro module(name, view, skins, connectors, attrs, data) %}To consider ‣ Twig 1.x does not support things like: {{ tc.module(Intro, attrs={data-name : einstein}) }} -> this is going to change with Twig 2.0Remo Brunschwiler 10. July 2012 # 33
    • Render Modules #1Simple views without logic{# this render the template with the same name (intro.html.twig) #}{{ tc.module(Intro) }}{# this renders the mrterrific template from the Hero Module #}{{ tc.module(Hero, mrterrific)}}{# the 3rd param is the Skins array, ie. Mr. Terrific is getting decoratedwith the Stealth Skin #}{{ tc.module(Hero, mrterrific, [ Stealth ])}}{# the 4th param is an array with communication channel ids, ie. allmodules with the same id can talk with each other #}{{ tc.module(Hero, mrterrific, [Stealth], [talk])}}{# the 5th param is the attrs object #}{{ tc.module(Hero, mrterrific, null, null, { ‘data-name’ :‘Mr. Terrific‘})}}Remo Brunschwiler 10. July 2012 # 34
    • Render Modules #2Complex views‣ the concept is – thanks to TWIG – very simple http://symfony.com/doc/current/book/ templating.html#embedding-controllers‣ have their own controllers, actions & templates‣ gives you Multi-MVC out-of-the-box‣ are used rarely in plain “templating” projects{{ tc.module(Filter,Filter:overspeed, null, null, null, {segment:washing})}} embeds the view of the FilterController/ the data passed to the overspeedAction in the Filter module overspeedActionRemo Brunschwiler 10. July 2012 # 35
    • Hands on!Enhance your workshop page, so that… ‣ only two of the heroes can talk with each other ‣ the {title} is rendered inside the speech bubble of EinsteinRemo Brunschwiler 10. July 2012 # 36
    • Modules & SkinsGet more flexibility…
    • What we want to achieveCreate a new «Victim» module, that… ‣ consists of a normal image (drowning man) & a background image (bubble) ‣ uses less for better code ‣ is able to call our heroes for helpRemo Brunschwiler 10. July 2012 # 38
    • Markup<div class="bubble"> <span class="message">help!</span></div><img src=" {{ asset("bundles/terrificmodulevictim/img/drowning-victim.png") }}"/><a class="base" href="#help">Call for help!</a> links to image asset in /web/bundles/…But how is the drowning-victim.png got there? ‣ The composer copies all module images on the fly to /web/bundles/<bundle>/img/ (configurable in config_dev.yml)How did you come up with that path? ‣ Symfony standard: app/console assets:installRemo Brunschwiler 10. July 2012 # 39
    • Import directive (mixins, variables etc.)/* import.less */@import "colors.less";@import "mixins.less";/* colors.less */@text: #74AE00; variable/* mixins.less*/.scale(@ratio) { mixin function -webkit-transform: scale(@ratio); -moz-transform: scale(@ratio); -ms-transform: scale(@ratio); -o-transform: scale(@ratio); transform: scale(@ratio);}Remo Brunschwiler 10. July 2012 # 40
    • /* @group Module: victim */@import "../../../../../Composition/Resources/public/css/import.less";@media screen { cascaded import – import.less has other imports .mod-victim { position: relative; .bubble { nested rules -> .mod-victim .bubble { … } background: transparent url(../bubble.png) no-repeat 0 0; ... } access variable relative to less file .message { color: @text; font-size: 36 / 16em; ... } calculation ... }}Remo Brunschwiler 10. July 2012 # 41
    • There is even more to less! Have a look at the documentation ‣ http://lesscss.orgRemo Brunschwiler 10. July 2012 # 42
    • TerrificJSon:function (callback) { var self = this, $ctx = this.$ctx; $(a, $ctx).on(click, function() { var message = $(.message, $ctx).text(); self.fire(message, { name: drowner, message: message }); return false; }); callback();}Nothing special here, but mention the new naming of the hooks inTerrificJS v2.0Remo Brunschwiler 10. July 2012 # 43
    • Hands on!Create a skin for your Victim that lets him drown when there is nohelp from one of the heroes ‣ Create skin “Drown” for your Victim ‣ Write a simple drown functionality (eg. fadeOut) ‣ Trigger this functionality automatically after ~5 seconds ‣ Do not let your Victim drown when he calls for help within the given time frameRemo Brunschwiler 10. July 2012 # 44
    • LayoutsLet’s say thanks to TWIG & Assetic
    • LayoutsA layouts job is to do stuff that is common to several pages ‣ javascripts ‣ styles ‣ meta tags ‣ header, footer, sidebar etc.Thanks to TWIG & Assetic, layouts are no longer a big & inflexiblething…Remo Brunschwiler 10. July 2012 # 46
    • Twig Layout ApproachIn Twig a layout is nothing more than an inherited template ‣ http://symfony.com/doc/current/book/templating.html#template- inheritance-and-layoutsIn your page: this is your layout {% extends TerrificComposition::base.html.twig %} {% block title %}Terrific Composer - Welcome{% endblock %} {% block body %} <div class="page"> … here comes your stuff … </div> {% endblock %}Remo Brunschwiler 10. July 2012 # 47
    • Twig Layout ApproachIn TerrificComposition::base.html.twig{% extends TerrificCoreBundle::base.html.twig %} Terrific Core Layout{% block title %}Terrific Composer{% endblock %}…{# content that is the same on every page goes into composition #}{% block composition %}{# your page content goes into body #}{% block body %} this block is overridden in your page{% endblock %}{% endblock %}…Remo Brunschwiler 10. July 2012 # 48
    • Including JavaScriptsSymfony comes bundled with a very nice Assetic integrationIncluding JavaScripts has never been easier concatenates – and minifies in production{% block scripts %} mode – all files in this directory {# here comes your scripts #} {% javascripts @TerrificComposition/Resources/public/js/*.* output=js/compiled/statics.js the name of the compiled file %} <script src="{{ asset_url }}" type="text/javascript"></script> {% endjavascripts %} {# scripts from parent (terrific core) layout #} {{ parent() }} includes the content of the parent block{% endblock %}Remo Brunschwiler 10. July 2012 # 49
    • Including Stylesheets… and the same for stylesheets concatenates – and minifies in production mode – all of the given files{% block styles %} {% stylesheets @TerrificComposition/Resources/public/css/reset.less @TerrificComposition/Resources/public/css/grid.less @TerrificComposition/Resources/public/css/elements.less output="css/compiled/project.css" the name of the compiled file %} <link rel="stylesheet" href="{{ asset_url }}" /> {% endstylesheets %} {# styles from parent (terrific core) layout #} {{ parent() }} includes the content of the parent block{% endblock %}Remo Brunschwiler 10. July 2012 # 50
    • Dev -> ProdPrepare your assets for the real world
    • ProductiveThe productive version is… ‣ available under / (instead of /app_dev.php)Dumping assets ‣ php app/console assets:install webCompile CSS / JS ‣ php app/console assetic:dump --env=prodRemo Brunschwiler 10. July 2012 # 52
    • Questions?
    • More…
    • More…Lets keep talking ‣ http://terrifically.org ‣ remo@terrifically.org ‣ https://github.com/brunschgi ‣ http://twitter.com/#!/brunschgiRemo Brunschwiler 10. July 2012 # 55
    • Remo Brunschwiler 10. July 2012 # 56
    • Thank you!