Terrific Composer Workshop
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Terrific Composer Workshop

on

  • 3,327 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
3,327
Views on SlideShare
3,097
Embed Views
230

Actions

Likes
2
Downloads
10
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 Presentation Transcript

  • 1. Terrific ComposerMakes your life easier…
  • 2. AgendaConceptTerrific Composer ‣ Installation ‣ Twig ‣ Pages ‣ Modules & Skins ‣ Layout ‣ Dev -> ProdRemo Brunschwiler 10. July 2012 # 3
  • 3. GithubTake it. Make it better. Together.
  • 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. ShowcasesSee Terrific in action
  • 6. Remo Brunschwiler 14. August 2012 # 7
  • 7. ConceptIt’s really easy…
  • 8. Hold on a minute!Before we dive deeper into the Terrific Composer…Remo Brunschwiler # 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. Terrific ComposerMakes your life easier…
  • 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. 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. 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. InstallationVery fast setup for your project!
  • 15. Download it from: http://terrifically.org/composer/ InstallationRemo Brunschwiler 10. July 2012 # 14
  • 16. Explore… the sidebar and their possibilities
  • 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. Open The Open dialog provides you fast access to all of your Modules and Pages.Remo Brunschwiler 10. July 2012 # 17
  • 19. Inspect The inspect mode shows you which modules are in use on the current page.Remo Brunschwiler 10. July 2012 # 18
  • 20. TwigThe flexible, fast, and secure template engine for PHP
  • 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. 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. Hands on!Terrific Composer – Step by Step
  • 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. PagesPlay Lego!
  • 26. … Let’s see it in actionRemo Brunschwiler 10. July 2012 # 25
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Modules & SkinsGet more flexibility…
  • 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. 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. 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. /* @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. There is even more to less! Have a look at the documentation ‣ http://lesscss.orgRemo Brunschwiler 10. July 2012 # 42
  • 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. 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. LayoutsLet’s say thanks to TWIG & Assetic
  • 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. 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. 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. 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. 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. Dev -> ProdPrepare your assets for the real world
  • 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. Questions?
  • 56. More…
  • 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. Remo Brunschwiler 10. July 2012 # 56
  • 59. Thank you!