Life After Assetic: State of the Art Symfony 2 Frontend Dev

@michellesanver SymfonyCon Madrid 2014 Life After Assetic State of the
Art Symfony 2 Frontend Dev

@michellesanver

@michellesanver Intro A simple Symfony2 application

@michellesanver A simple Symfony2 Application JavaScript

@michellesanver A simple Symfony2 Application jQuery / Angular.js

@michellesanver A simple Symfony2 Application Custom Files

@michellesanver A simple Symfony2 Application SASS / LESS

@michellesanver A simple Symfony2 Application Minimise for performance

@michellesanver Audience Do you use assetic?

@michellesanver Audience Do you use grunt or gulp?

@michellesanver Audience Do you use bower?

@michellesanver Audience Manually!? (Or not at all)

@michellesanver

@michellesanver Michelle Sanver

@michellesanver Michelle Sanver Body Text Co-President of PHPWomen

@michellesanver Michelle Sanver Accent(s)!?

@michellesanver Michelle Sanver

@michellesanver Table Of Contents • Assetic - Symfony2 front-end manager
• Bower - Front-end package manager • Gulp - A modular task runner • Gulp + Bower in Symfony2 • Life After Assetic

@michellesanver Disclaimer There are several good solutions.

@michellesanver Assetic

@michellesanver Life *before* assetic <script src="{{ asset('js/script.js') }}" type=“text/javascript"> </script>

@michellesanver Life *before* assetic Minify manually

@michellesanver Life *before* assetic Compile SASS/LESS The “old” way

@michellesanver Life *before* assetic Or use third party tools, still
not well integrated.

@michellesanver Assetic An awesome tool for asset management!

@michellesanver Assetic Minify and combine CSS and JS ﬁles

@michellesanver Assetic Your ﬁles can live anywhere!

@michellesanver Assetic Compilers LESS, SASS, CoffeeScript

@michellesanver Assetic Image Optimisation

@michellesanver Assetic Assets and ﬁlters

@michellesanver Assetic: Assets {% javascripts '@AcmeFooBundle/Resources/public/js/*' %} <script type="text/javascript" src="{{
asset_url }}”></script> {% endjavascripts %}

@michellesanver Assetic: Assets {% stylesheets 'bundles/acme_foo/css/*' ﬁlter='cssrewrite' %} <link rel="stylesheet"
href="{{ asset_url }}" /> {% endstylesheets %}

@michellesanver Assetic: Filters {% stylesheets 'bundles/acme_foo/css/*' ﬁlter='cssrewrite' %} <link rel="stylesheet"
href="{{ asset_url }}" /> {% endstylesheets %}

@michellesanver Assetic: Compilers Deﬁne them in the conﬁg

@michellesanver Bower

@michellesanver Before Bower Downloading .zip ﬁles

@michellesanver Before Bower Dependencies: Trial and error

@michellesanver Bower Bower solved this!

@michellesanver Bower The Composer of JavaScript

@michellesanver Installing Bower npm init

@michellesanver Installing Bower npm install -g bower

@michellesanver Installing Bower: Locally npm install --save-dev bower

@michellesanver Installing Bower: Locally bower command available at ./ node_modules/.bin/bower

@michellesanver Installing Bower: Locally alias npm-exec='PATH=$(npm bin): $PATH'

@michellesanver Using Bower Every project is an installable library

@michellesanver Using Bower bower init

@michellesanver Using Bower bower.init main ﬁle

@michellesanver Using Bower bower.init what types of modules does this
package expose?

@michellesanver Using Bower bower.init set currently installed components as dependencies?

@michellesanver Using Bower bower.init add commonly ignored ﬁles to ignore
list?

@michellesanver Using Bower bower.init would you like to mark this
package as private which prevents it from being accidentally published to the registry?

@michellesanver Using Bower bower.json

@michellesanver bower.json $ bower install --save jquery bootstrap

@michellesanver bower.json "dependencies": { "jquery": "~2.1.1", "bootstrap": "~3.1.1" }

@michellesanver bower.json bower install

@michellesanver bower.json { "directory": "public/bower_components" }

@michellesanver bower.json rm -Rf bower_components bower install

@michellesanver bower.json /bower_components/<package>/dist/ <ﬁles>

@michellesanver bower.json <link href= "/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">  <link href= "/bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet"> 
  <script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.min.js">

@michellesanver Updating Libraries bower update bootstrap

@michellesanver No more .zip ﬁles \o/

@michellesanver Gulp

@michellesanver Gulp Task Runner

@michellesanver Gulp Gulp vs. Grunt

@michellesanver Gulp vs .Grunt Grunt is conﬁg based

@michellesanver Gulp. vs Grunt Gulp is module based

@michellesanver Gulp: Out of the box Task, Watch, Src, Dest.

@michellesanver Gulp: Out of the box gulp.task()

@michellesanver Gulp: Out of the box gulp.watch()

@michellesanver Gulp: Out of the box gulp.src()

@michellesanver Gulp: Out of the box gulp.dest()

@michellesanver Default Task is automatic

@michellesanver Gulp pipe()

@michellesanver Virtual ﬁle system and streaming

@michellesanver Virtual ﬁle system and streaming vinylfs

@michellesanver Virtual ﬁle system and streaming Multi-pipe without temporary ﬁles!

@michellesanver Installation is just like bower Gulp

@michellesanver Gulp npm install -g gulp

@michellesanver An example workﬂow

@michellesanver An example workﬂow A simple PHP application with generated
templates

@michellesanver An example workﬂow • Find all the ﬁles being
used • Minify them • Concat them • Save them • Replace the references in our templates

@michellesanver Plugins gulp-uglifyjs gulp-minify-css gulp-usemin

@michellesanver Installing Plugins npm install --save-dev gulp-usemin gulp-uglify gulp-minify-css

@michellesanver An example workﬂow gulp.src()

@michellesanver An example workﬂow uglifyjs and minify-css with concat options

@michellesanver An example workﬂow gulp.dest()

@michellesanver An example workﬂow usemin (replace)

@michellesanver Add directives   <link href="/bower_components/bootstrap/dist/ css/bootstrap.css"
rel="stylesheet">  <link href="/bower_components/bootstrap/dist/ css/bootstrap-theme.css" rel="stylesheet">

@michellesanver Add directives   …   usemin (replace)

@michellesanver Add directives   <script type="text/javascript" src=“/
bower_components/jquery/dist/jquery.js"> </script>  <script type="text/javascript" src="/ bower_components/bootstrap/dist/js/ bootstrap.js"></script>

@michellesanver Pull in modules var gulp = require('gulp');  var usemin
= require('gulp-usemin');  var uglify = require('gulp-uglify');  var minifyCss = require('gulp-minify-css');

@michellesanver Deﬁne our default task gulp.task('default', function() {  gulp.src('src/templates/layout.src.tpl')  .pipe(usemin({ 
assetsDir: 'public',  css: [minifyCss(), 'concat'],  js: [uglify(), 'concat']  }))  .pipe(gulp.dest('public'));  });

@michellesanver Running gulp $ gulp [09:11:05] Using gulpﬁle /path/to/gulpﬁle.js [09:11:05]
Starting 'default'... [09:11:07] Finished 'default' after 2.01 s

@michellesanver Let’s dig deeper!

@michellesanver Cleaning up our template ﬁx-template task

@michellesanver Cleaning up our template var rename = require('gulp-rename');  var
rimraf = require('del');    gulp.task('fix-template', ['minify'], function() { return gulp.src('public/layout.src.tpl')  pipe(del())  pipe(rename("layout.tpl"))  pipe(gulp.dest('src/templates'));  });

@michellesanver Task Dependency Rename default to minify

@michellesanver Task Dependency gulp.task('ﬁx-template', ['minify'], function() {

@michellesanver Task Dependency $ gulp fix-template [16:48:29] Using gulp file
/path/to/gulpfile.js [16:48:29] Starting 'minify'... [16:48:29] Finished 'minify' after 44 ms [16:48:29] Starting 'fix-template'... [16:48:29] Finished 'fix-template' after 6.14 ms

@michellesanver Task Dependency Still doesn’t work

@michellesanver Task Dependency gulp.task('minify', function() {  return gulp.src('src/templates/layout.src.tpl')

@michellesanver Task Dependency gulp.task('default', ['ﬁx-template']);

@michellesanver Task Dependency gulp.task('default', ['minify', 'ﬁx- template']);

@michellesanver Moving Stuff Bootstrap Fonts

@michellesanver Moving Stuff ../fonts.

@michellesanver Moving Stuff gulp-replace

@michellesanver Moving Stuff var replace = require('gulp-replace');    gulp.task('fix-paths', ['minify'],
function() {  gulp.src('public/css/site.css')  .pipe(replace('../', '../bower_components/ bootstrap/dist/'))  .pipe(gulp.dest('public/css'));  });

@michellesanver Moving Stuff Add the task to default

@michellesanver Moving Stuff gulp.task('default', ['minify', 'fix- template', 'fix-paths']);

@michellesanver Automatisation: Watch gulp.watch

@michellesanver Automatisation: Watch gulp.task('watch', ['default'], function() {  var watchFiles =
[  'src/templates/layout.src.tpl',  'public/bower_components/*/dist/js/*.js',  '!public/bower_components/*/dist/js/*.min.js',  'public/bower_components/*/dist/*.js',  'public/bower_components/*/dist/css/*.css',  '!public/bower_components/*/dist/css/*.min.css',  'public/bower_components/*/dist/font/*'  ];    gulp.watch(watchFiles, ['default']);  });

@michellesanver Automatisation: Watch $ gulp watch [23:05:01] Using gulpﬁle /path/to/gulpﬁle.js
[23:05:01] Starting 'watch'... [23:05:01] Finished 'watch' after 30 ms

@michellesanver Automatisation: Watch Run on startup

@michellesanver Automatisation: Watch gulp.task('watch', ['default'], function() {

@michellesanver Automating the Automation Too much requires!

@michellesanver Automating the Automation gulp-load-plugins

@michellesanver Automating the Automation $ = require('gulp-load-plugins')();

@michellesanver Automating the Automation $.<plugin>

@michellesanver Automating the Automation gulp-usemin -> $.usemin

@michellesanver Gulp + Bower in Symfony

@michellesanver OmNomHub: A real example

@michellesanver Bower.json in OmNomHub { "name": "OmNomHub", "dependencies": { "bootstrap-sass":
"~3.0.2" }

@michellesanver Let’s look at our gulp ﬁle! Requiring modules

@michellesanver Let’s look at our gulp ﬁle! var gulp =
require('gulp'); var sass = require('gulp-sass'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var cssmin = require('gulp-cssmin');

@michellesanver Let’s look at our gulp ﬁle! SASS Task

@michellesanver Let’s look at our gulp ﬁle! gulp.task('sass', function() {
gulp.src('src/Omnomhub/Bundle/ MainBundle/Resources/sass/*.scss') .pipe(sass()) .pipe(cssmin()) .pipe(gulp.dest('web/css/')); });

@michellesanver Let’s look at our gulp ﬁle! Move compiled .CSS
ﬁles

@michellesanver Let’s look at our gulp ﬁle! .pipe(gulp.dest('web/css/'));

@michellesanver Let’s look at our gulp ﬁle! JavaScript

@michellesanver Gulp: JavaScript gulp.task('bootstrapjs', function() { gulp.src([ 'bower_components/bootstrap-sass/js/transition.js', … 'bootstrap-sass/js/afﬁx.js'
]) .pipe(concat('bootstrap.js')) .pipe(uglify()) .pipe(gulp.dest('web/js/')); });

@michellesanver Let’s look at our gulp ﬁle! List all the
ﬁles

@michellesanver Let’s look at our gulp ﬁle! gulp.src([ ‘bower_components/bootstrap-sass/js/transition.js', 'bower_components/bootstrap-sass/js/alert.js',
'bower_components/bootstrap-sass/js/button.js', 'bower_components/bootstrap-sass/js/carousel.js', … 'bootstrap-sass/js/afﬁx.js' ])

@michellesanver Let’s look at our gulp ﬁle! Concatenate them

@michellesanver Let’s look at our gulp ﬁle! .pipe(concat('bootstrap.js'))

@michellesanver Let’s look at our gulp ﬁle! Uglify them

@michellesanver Let’s look at our gulp ﬁle! .pipe(uglify())

@michellesanver Let’s look at our gulp ﬁle! Put the result
in web/js

@michellesanver Let’s look at our gulp ﬁle! .pipe(gulp.dest('web/js/'));

@michellesanver Let’s look at our gulp ﬁle! When you run
“gulp” gulp.task('default', ['sass', 'bootstrapjs']);

Life After Assetic @michellesanver

@michellesanver Cleaner Twig No more tasks in the twig ﬁles

@michellesanver Faster workﬂow Node.js tools == asynchronous

@michellesanver More features Gulp and Node.JS have a lot of
possibilities and modules.

@michellesanver No more manual .ZIP downloads Can’t believe it took
this long.

@michellesanver Life After Assetic Third party assetic bundles?

@michellesanver Life After Assetic Will they use bower?

@michellesanver Life After Assetic Other bundles are popping up!

@michellesanver Life After Assetic Gassetic

Limitations and Wrapup @michellesanver

Assetic is dead @michellesanver Or at least is should be…

@michellesanver Thank you for listening! https://joind.in/12950

@michellesanver @frankdejonge is still not famous.

@michellesanver Bonus

@michellesanver BowerPHP

@michellesanver BowerPHP Alpha!

@michellesanver BowerPHP http://bowerphp.org

Life After Assetic: State of the Art Symfony 2 Frontend Dev

Life After Assetic: State of the Art Symfony 2 Frontend Dev

More Decks by Michelle Sanver

Other Decks in Programming

Featured

Transcript