Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp

OPTIMISING YOUR FRONT END WORKFLOW

PhpSpec phpspec/nyan-formatters

PhpSpec R! WW AW R phpspec/nyan-formatters

D DD COM POSI TION ENICS STH CALI Advances in back end code Y R D TDD PSR ES FAC TER IN SOLID

When we look at front end code…

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

* more And a GAZILLION *approximately

Example Project https://github.com/mdavis1982/workflow

Example Project Simple Article Management https://github.com/mdavis1982/workflow

Example Project Simple Article Management Administration Area https://github.com/mdavis1982/workflow

Insanely powerful Compiled and cached

Insanely powerful Compiled and cached Often overlooked

Translations are notoriously messy

But it’s easy to keep them organised

config.yml framework:  translator: { fallback: "%locale%" }

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;

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

ArticleType.php $builder  ->add(  'title',  'text',  [  'label' => 'article.label.title'  ]  )

ArticleType.php $builder  ->add(  'title',  'text',  [  'label' => 'article.label.title'  ]  ) For all properties in the form

forms.en.yml article:  label:  title: Title  content: Content  submit: Save

ArticleType.php /**  * {@inheritdoc}  */  public function setDefaultOptions(OptionsResolverInterface $resolver)  {  $resolver->setDefaults([  'data_class' => 'MDEntityArticle',  'translation_domain' => 'forms'  ]);  }

When your translations don’t work…

CLEAR THE CACHE! Even in the dev environment

Translate everything All titles, actions, single words

Translate everything All titles, actions, single words Translations per ‘section’

admin.en.yml article:  title:  list: All Articles  create: Add a New Article    action:  create: Add New  cancel: Cancel

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 %}

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>

base.html.twig <!doctype html>              <html lang="en" class="no-js">  <head>  <meta charset="utf-8" />  <title>{% block title %}{% endblock title %}</title>      <meta name="viewport" content="width=device-width" />    {% block stylesheets %}{% endblock stylesheets %}  </head>  <body>  {% block content %}{% endblock content %}  {% block javascripts %}{% endblock javascripts %}  </body>  </html>

The same HTML structure and assets per ‘section’?

admin.html.twig {% extends "::base.html.twig" %}    {% block title %} {{ 'defaults.title'|trans({}, 'admin') }} {% endblock title %}    {% block content %}  {% block body %}{% endblock body %}  {% endblock content %}

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 %}

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 %}

Given ourselves flexible base All boilerplate code is DRY

Given ourselves flexible base All boilerplate code is DRY Defaults per ‘section’

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 %}

admin.html.twig {% trans_default_domain "admin" %}

Node.js Server-side JavaScript http://nodejs.org

Node.js Server-side JavaScript Adds extra functionality http://nodejs.org

npm Composer for node Install globally or into project

Demo: Installing Bower With No Sudo - Eek!

Demo: Installing Bower Successfully - Yay!

Getting stuff into your project

Demo: Using Bower To Search For Packages - Modernizr

Demo: Using Bower To Install Packages - Modernizr

Demo: Using .bowerrc To Customise Installation Directory

Demo: Using Bower To Save Dependencies To bower.json

Easy to reference assets {% block javascripts %} <script src="{{ asset('/vendor/modernizr/modernizr.js') }}"></script> {% endblock javascripts %}

Easy to reference assets {% block javascripts %} <script src="{{ asset('/vendor/modernizr/modernizr.js') }}"></script> {% endblock javascripts %} Globally or per ‘section’

Non-standard install Make it clear

Non-standard install Make it clear Potentially more flexibility

“ 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

Demo: Installing Gulp Globally With npm

Demo: Installing Gulp and Gulp-Util Into A Project With npm

Demo: Using Gulp To Minify JavaScript

frontend.html.twig {% block javascripts %}  <script src="{{ asset('/web/js/vendor/modernizr.js') }}"></script>  {% endblock javascripts %}

We have 2 copies in web/ Bower install to /assets/vendor

We have 2 copies in web/ Bower install to /assets/vendor Prevents source being public

frontend.scss @import "assets/vendor/normalize-scss/normalize";    $body-width: 60% !default;    body  {  width: $body-width;  margin: 0 auto;  }

gulpfile.js var scss = require('gulp-sass'); ! ! gulp.task('scss', function() {  return gulp.src('assets/scss/*.scss')  .pipe(scss())  .pipe(gulp.dest('web/css'));  });

frontend.html.twig {% block stylesheets %}  <link rel="stylesheet" href="{{ asset('/css/frontend.css') }}" />  {% endblock stylesheets %}

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

Running commands manually gets old real fast

gulpfile.js gulp.task('watch', function() {  gulp.watch('assets/scss/**/*.scss', ['scss']);  });

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

Setting up a project can be tedious

GAZILLIONS of tools available Don’t use all of them!

Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp

More Related Content

Viewers also liked

Similar to Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp

Recently uploaded

Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp