Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
•
46 likes•52,637 views
We take great care in our back end coding workflow, optimising, automating and abstracting as much as is possible. So why don't we do that with our front end code? We'll take a look at some tools to help us take our front end workflow to the next level, and hopefully optimise our load times in the process! We'll be looking at using Twig templates and optimising them for the different areas of your application, integrating Bower and Gulp for managing assets and processing our front-end code to avoid repetitive tasks - looking at how that impacts the typical Symfony workflow.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
Similar to Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp (20)
Recently uploaded
Recently uploaded (20)
Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
- 7. Advances in back end code
- 8. D DD COM POSI TION ENICS STH CALI Advances in back end code Y R D TDD PSR ES FAC TER IN SOLID
- 9. COMPOSER
- 10. When we look at front end code…
- 12. Cool tools for front end code
- 13. BOWER S S LE SASS ANGULAR GRU NT I PT R for front end code SC E tools Cool FFE CO IG W GU T LP N MA EO Y REQUI RE JS
- 14. * more And a GAZILLION
- 15. * more And a GAZILLION *approximately
- 16. Lack of practical examples
- 17. 😢
- 19. 😄
- 21. Example Project Simple Article Management https://github.com/mdavis1982/workflow
- 22. Example Project Simple Article Management Administration Area https://github.com/mdavis1982/workflow
- 23. Twig
- 25. Insanely powerful Compiled and cached
- 26. Insanely powerful Compiled and cached Often overlooked
- 27. Translate all the things
- 29. But it’s easy to keep them organised
- 31. Article.php /** * The title of the Article * * @var string * * @ORMColumn(type="string", length=255) * * @AssertNotBlank(message="article.title.not_blank") * @AssertLength( * max=255, * maxMessage="article.title.length.max" * ) */ protected $title;
- 32. validators.en.yml article: title: not_blank: You must enter a title length: max: The title cannot be longer than {{ limit }} characters content: not_blank: You must enter some content
- 34. ArticleType.php $builder ->add( 'title', 'text', [ 'label' => 'article.label.title' ] ) For all properties in the form
- 36. forms.en.yml?!
- 37. ArticleType.php /** * {@inheritdoc} */ public function setDefaultOptions(OptionsResolverInterface $resolver) { $resolver->setDefaults([ 'data_class' => 'MDEntityArticle', 'translation_domain' => 'forms' ]); }
- 39. When your translations don’t work…
- 40. CLEAR THE CACHE!
- 41. CLEAR THE CACHE! Even in the dev environment
- 43. Translate everything All titles, actions, single words
- 44. Translate everything All titles, actions, single words Translations per ‘section’
- 45. admin.en.yml article: title: list: All Articles create: Add a New Article action: create: Add New cancel: Cancel
- 46. list.html.twig {% block body %} <h1>{{ 'article.title.list'|trans({}, 'admin') }}</h1> {% if articles %} <ul class="articles"> {% for article in articles %} <li>{{ article.title }}</li> {% endfor %} </ul> {% endif %} <a href="{{ path('admin.article.create') }}”> {{ 'article.action.create'|trans({}, 'admin') }} </a> {% endblock body %}
- 47. Messy
- 50. base.html.twig <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>{% block title %}Welcome!{% endblock %}</title> {% block stylesheets %}{% endblock %} <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" /> </head> <body> {% block body %}{% endblock %} {% block javascripts %}{% endblock %} </body> </html>
- 51. Doesn’t promote great code
- 52. base.html.twig <!doctype html> <!--[if lt IE 7 ]> <html lang="en" class="no-js ie6 lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7 ]> <html lang="en" class="no-js ie7 lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8 ]> <html lang="en" class="no-js ie8 lt-ie9"> <![endif]--> <!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"><!--<![endif]--> <head> <meta charset="utf-8" /> <title>{% block title %}{% endblock title %}</title> <!-- Set up mobile viewport for responsive design --> <meta name="viewport" content="width=device-width" /> {% block stylesheets %}{% endblock stylesheets %} </head> <body> {% block content %}{% endblock content %} {% block javascripts %}{% endblock javascripts %} </body> </html>
- 53. Gives us a better foundation
- 55. The same HTML structure and assets per ‘section’?
- 58. admin.html.twig {% extends "::base.html.twig" %} {% block title %} {{ 'defaults.title'|trans({}, 'admin') }} {% endblock title %} {% block content %} {% block body %}{% endblock body %} {% endblock content %}
- 59. frontend.html.twig {% extends "::base.html.twig" %} {% block title %}{{ 'defaults.title'|trans }}{% endblock title %} {% block content %} {% block header %}{% endblock header %} {% block body %}{% endblock body %} {% block footer %}{% endblock footer %} {% endblock content %}
- 60. What?!
- 62. list.html.twig {% extends "MDMainBundle:Layouts:admin.html.twig" %} {% block body %} <h1>{{ 'article.title.list'|trans({}, 'admin') }}</h1> {% if articles %} <ul class="articles"> {% for article in articles %} <li>{{ article.title }}</li> {% endfor %} </ul> {% endif %} <a href="{{ path('admin.article.create') }}”> {{ 'article.action.create'|trans({}, 'admin') }} </a> {% endblock body %}
- 63. Given ourselves flexible base
- 64. Given ourselves flexible base All boilerplate code is DRY
- 65. Given ourselves flexible base All boilerplate code is DRY Defaults per ‘section’
- 67. list.html.twig {% extends "MDMainBundle:Layouts:admin.html.twig" %} {% trans_default_domain "admin" %} {% block body %} <h1>{{ 'article.title.list'|trans }}</h1> {% if articles %} <ul class="articles"> {% for article in articles %} <li>{{ article.title }}</li> {% endfor %} </ul> {% endif %} <a href="{{ path('admin.article.create') }}”> {{ 'article.action.create'|trans }} </a> {% endblock body %}
- 68. But wait!
- 70. NOPE
- 71. And it won’t be fixed
- 74. Node.js Server-side JavaScript Adds extra functionality http://nodejs.org
- 75. npm
- 77. npm Composer for node Install globally or into project
- 78. OMG!!1!
- 80. Demo: Installing Bower With No Sudo - Eek!
- 81. 👎
- 82. Demo: Installing Bower Successfully - Yay!
- 83. 👍
- 84. Getting stuff into your project
- 86. Demo: Using Bower To Search For Packages - Modernizr
- 88. Demo: Using Bower To Install Packages - Modernizr
- 89. We can do better
- 90. .bowerrc
- 91. Demo: Using .bowerrc To Customise Installation Directory
- 92. Better
- 94. bower.json
- 95. Demo: Using Bower To Save Dependencies To bower.json
- 97. Easy to reference assets
- 98. Easy to reference assets {% block javascripts %} <script src="{{ asset('/vendor/modernizr/modernizr.js') }}"></script> {% endblock javascripts %}
- 99. Easy to reference assets {% block javascripts %} <script src="{{ asset('/vendor/modernizr/modernizr.js') }}"></script> {% endblock javascripts %} Globally or per ‘section’
- 100. Different locations?
- 101. Non-standard install
- 102. Non-standard install Make it clear
- 103. Non-standard install Make it clear Potentially more flexibility
- 105. Build tool
- 106. “ Every week someone who doesn’t understand Make writes a new build system in JavaScript. #gruntjs #gearjs #gulpjs #broccolijs. Laugh or cry? https://twitter.com/aslak_hellesoy/status/435506106496851968
- 107. Streaming
- 108. Plugin architecture
- 109. Demo: Installing Gulp Globally With npm
- 110. One extra step
- 111. Demo: Installing Gulp and Gulp-Util Into A Project With npm
- 113. Minify JavaScript
- 114. Demo: Using Gulp To Minify JavaScript
- 115. Use it in our project
- 116. frontend.html.twig {% block javascripts %} <script src="{{ asset('/web/js/vendor/modernizr.js') }}"></script> {% endblock javascripts %}
- 117. ITCHY NOSE!!!
- 118. We have 2 copies in web/
- 119. We have 2 copies in web/ Bower install to /assets/vendor
- 120. We have 2 copies in web/ Bower install to /assets/vendor Prevents source being public
- 121. (S)CSS
- 122. Normal SCSS workflow
- 123. frontend.scss @import "assets/vendor/normalize-scss/normalize"; $body-width: 60% !default; body { width: $body-width; margin: 0 auto; }
- 124. gulpfile.js var scss = require('gulp-sass'); ! ! gulp.task('scss', function() { return gulp.src('assets/scss/*.scss') .pipe(scss()) .pipe(gulp.dest('web/css')); });
- 125. frontend.html.twig {% block stylesheets %} <link rel="stylesheet" href="{{ asset('/css/frontend.css') }}" /> {% endblock stylesheets %}
- 126. matt at Chloe in ~/Sites/workflow.dev on dev * 🍔 $ gulp scss [gulp] Using file /Users/matt/Sites/workflow.dev/gulpfile.js [gulp] Working directory changed to /Users/matt/Sites/workflow.dev [gulp] Running 'scss'... [gulp] Finished 'scss' in 11 ms
- 128. Running commands manually gets old real fast
- 129. Watching!
- 130. gulpfile.js gulp.task('watch', function() { gulp.watch('assets/scss/**/*.scss', ['scss']); });
- 131. Demo: Gulp Watch In Action
- 132. Awesomesauce!
- 133. Only scratching the surface!
- 134. Gulp plugins
- 135. TESTS T IN L CONCAT ONS plugins ATIGulp IFIC OT N IG W T SE I TIM BROW P O SERIF Y RENAME COP Y GI T
- 136. Custom actions are easy
- 137. Setting up a project can be tedious
- 138. Can be taken much further!
- 139. GAZILLIONS of tools available
- 140. GAZILLIONS of tools available Don’t use all of them!
- 141. Plan it!
- 142. Plan it! **groan**
- 143. Questions?
- 144. Thanks! @mdavis1982