Your SlideShare is downloading. ×
0
Terrific ComposerMakes your life easier…
AgendaConceptTerrific Composer   ‣ Installation   ‣ Twig   ‣ Pages   ‣ Modules & Skins   ‣ Layout   ‣ Dev -> ProdRemo Brun...
GithubTake it. Make it better. Together.
RepositoriesTerrificJS   ‣ https://github.com/brunschgi/terrificjsTerrific Composer (Symfony2 Edition)   ‣ https://github....
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...
Terrific ComposerMakes your life easier…
Terrific ComposerFrontend Development Framework   ‣ Designed for building frontends / applications based on the     Terrif...
Terrific ComposerFrontend Development Framework   ‣ Designed for building frontends / applications based on the     Terrif...
DocumentationTerrific Composer   ‣ Unfortunately, a specific documentation does not exist yet   ‣ Any help is gladly appre...
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 ...
Open                                    The Open dialog provides you fast access to                                    all...
Inspect                                    The inspect mode shows you which modules                                    are...
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 ...
IDE IntegrationTwig is a quite young project, but there is already support forseveral IDEs:   ‣ PhpStorm (native as of 2.1...
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 -> P...
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  ...
1. Create / Extend Controller<?phpnamespace TerrificCompositionController;use   SymfonyBundleFrameworkBundleControllerCont...
2. Create Actionclass DefaultController extends Controller{    /**      * @Composer("Welcome")      * @Route("/", name="ho...
3. Set Annotations/**  * @Composer("Welcome")  * @Route("/", name="home")  * @Template()  */public function indexAction(){...
4. Create Twig View/Resources/views/<ControllerName>/<actionName>.html.twig   {% extends TerrificComposition::base.html.tw...
Twig BlocksProvided from TerrificCoreBundle::base.html.twig   ‣ title – content of the <title> element   ‣ meta – for meta...
Hands on!Create a new page that…   ‣ is available under /workshop   ‣ appears in the open dialog as “Workshop”   ‣ has the...
Hands on!Create a new page that…   ‣ is available under /workshop   ‣ appears in the open dialog as “Workshop”   ‣ has the...
Twig Module Macro{#      Renders terrific modules.      @param   name {String} name of the module      @param   view {Stri...
Render Modules #1Simple views without logic{# this render the template with the same name (intro.html.twig) #}{{ tc.module...
Render Modules #2Complex views‣ the concept is – thanks to TWIG – very simple  http://symfony.com/doc/current/book/  templ...
Hands on!Enhance your workshop page, so that…   ‣ only two of the heroes can talk with each other   ‣ the {title} is rende...
Modules & SkinsGet more flexibility…
What we want to achieveCreate a new «Victim» module, that…   ‣ consists of a normal image (drowning man) & a background   ...
Markup<div class="bubble">    <span class="message">help!</span></div><img src="  {{ asset("bundles/terrificmodulevictim/i...
Import directive (mixins, variables etc.)/* import.less */@import "colors.less";@import "mixins.less";/* colors.less */@te...
/* @group Module: victim */@import "../../../../../Composition/Resources/public/css/import.less";@media screen {          ...
There is even more to less! Have a look at the documentation   ‣ http://lesscss.orgRemo Brunschwiler   10. July 2012      ...
TerrificJSon:function (callback) {    var self = this,        $ctx = this.$ctx;      $(a, $ctx).on(click, function() {    ...
Hands on!Create a skin for your Victim that lets him drown when there is nohelp from one of the heroes   ‣ Create skin “Dr...
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, f...
Twig Layout ApproachIn Twig a layout is nothing more than an inherited template   ‣ http://symfony.com/doc/current/book/te...
Twig Layout ApproachIn TerrificComposition::base.html.twig{% extends TerrificCoreBundle::base.html.twig %}          Terrif...
Including JavaScriptsSymfony comes bundled with a very nice Assetic integrationIncluding JavaScripts has never been easier...
Including Stylesheets… and the same for stylesheets                                       concatenates – and minifies in p...
Dev -> ProdPrepare your assets for the real world
ProductiveThe productive version is…   ‣ available under / (instead of /app_dev.php)Dumping assets   ‣ php app/console ass...
Questions?
More…
More…Lets keep talking   ‣ http://terrifically.org   ‣ remo@terrifically.org   ‣ https://github.com/brunschgi   ‣ http://t...
Remo Brunschwiler   10. July 2012   # 56
Thank you!
Terrific Composer Workshop
Upcoming SlideShare
Loading in...5
×

Terrific Composer Workshop

3,187

Published on

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.

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,187
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
11
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Terrific Composer Workshop"

  1. 1. Terrific ComposerMakes your life easier…
  2. 2. AgendaConceptTerrific Composer ‣ Installation ‣ Twig ‣ Pages ‣ Modules & Skins ‣ Layout ‣ Dev -> ProdRemo Brunschwiler 10. July 2012 # 3
  3. 3. GithubTake it. Make it better. Together.
  4. 4. 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
  5. 5. ShowcasesSee Terrific in action
  6. 6. Remo Brunschwiler 14. August 2012 # 7
  7. 7. ConceptIt’s really easy…
  8. 8. Hold on a minute!Before we dive deeper into the Terrific Composer…Remo Brunschwiler # 9
  9. 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
  10. 10. Terrific ComposerMakes your life easier…
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. InstallationVery fast setup for your project!
  15. 15. Download it from: http://terrifically.org/composer/ InstallationRemo Brunschwiler 10. July 2012 # 14
  16. 16. Explore… the sidebar and their possibilities
  17. 17. 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
  18. 18. Open The Open dialog provides you fast access to all of your Modules and Pages.Remo Brunschwiler 10. July 2012 # 17
  19. 19. Inspect The inspect mode shows you which modules are in use on the current page.Remo Brunschwiler 10. July 2012 # 18
  20. 20. TwigThe flexible, fast, and secure template engine for PHP
  21. 21. 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
  22. 22. 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
  23. 23. Hands on!Terrific Composer – Step by Step
  24. 24. Step by StepCommon Tasks ‣ Create a new page ‣ Create a new Module / Skin ‣ Create a new layout ‣ Development -> ProductiveRemo Brunschwiler 10. July 2012 # 23
  25. 25. PagesPlay Lego!
  26. 26. … Let’s see it in actionRemo Brunschwiler 10. July 2012 # 25
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. 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
  31. 31. 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
  32. 32. 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
  33. 33. 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
  34. 34. 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
  35. 35. 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
  36. 36. 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
  37. 37. 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
  38. 38. 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
  39. 39. Modules & SkinsGet more flexibility…
  40. 40. 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
  41. 41. 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
  42. 42. 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
  43. 43. /* @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
  44. 44. There is even more to less! Have a look at the documentation ‣ http://lesscss.orgRemo Brunschwiler 10. July 2012 # 42
  45. 45. 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
  46. 46. 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
  47. 47. LayoutsLet’s say thanks to TWIG & Assetic
  48. 48. 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
  49. 49. 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
  50. 50. 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
  51. 51. 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
  52. 52. 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
  53. 53. Dev -> ProdPrepare your assets for the real world
  54. 54. 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
  55. 55. Questions?
  56. 56. More…
  57. 57. More…Lets keep talking ‣ http://terrifically.org ‣ remo@terrifically.org ‣ https://github.com/brunschgi ‣ http://twitter.com/#!/brunschgiRemo Brunschwiler 10. July 2012 # 55
  58. 58. Remo Brunschwiler 10. July 2012 # 56
  59. 59. Thank you!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×