Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Once upon a time…
there were css, js
and server-side rendering
A long time ago...
in a galaxy far far away
A long time ago...
in a galaxy far far away
PHP template engines
● Smarty (2002)
● Twig (Symfony)
● Mustache (Logic-less templates)
● Blade (Laravel 4)
● Volt (Phalco...
// guestbook.tpl
Style inline is a smell
but...
File too big
Organize styles logically
// index.html
// main.css
Designers’ hell at 2000s
● CSS
○ Cascading Style Sheet
○ Browser compatibility
○ Huge single file or external HTTP imports...
Designers’ hell at 2000s
Designers’ hell at 2000s
Assets file tree
assets/
├── css
│ ├── bootstrap.min.css
│ ├── magnific-popup.min.css
│ ├── videojs.min.css
│ └── main.css...
The birth of preprocessors
LESS and SASS were born to solve the bad things of CSS inspired by software
development.
● loca...
More tools!
$ lessc main.less main.css
$ sass input.scss output.css
Assets file tree with less
assets/
├── less
│ ├── global.less
│ ├── main.less
│ ├── utils
│ │ ├── animations.less
│ │ ├── ...
Why reinvent the wheel?
● jQuery
● Bootstrap
● Foundation
● Magnific Popup
● JWPlayer
● jQuery Mobile
● Video.js
● Sencha ...
Meanwhile the assets directory ...
Bower
● Package Manager by Twitter
● Bower.json: single configuration file with all frontend dependencies
● Automatic down...
$ bower install jquery
Assets file tree with bower
assets/
├── bower_components
│ ├── bootstrap/
│ ├── magnific-popup/
│ └── videojs/
├── less
│ ...
Wait… There were also some small jquery
javascript script for carousels and popups.
And then?
And then …
BOOM!
NodeJS
CommonJS
● NodeJS love
● Explosion of packages and tools written for node.js
● Modularization as hell (require(‘left-pad’)...
Front-end developers’ problem
● Code complexity grows as the site gets bigger
● Assembly gets harder
● Developer wants dis...
NodeJS is so cool! Why I can’t use it on my
frontend development?
I need a magic!
Browserify
● Small wrapper for the require function
● Build process that keeps track of dependencies
● Bundle to one file
...
Assets file tree with browserify
assets/
├── bower_components/
├── node_modules/
├── less/
├── dist
│ ├── bundle.js
│ └── ...
*choose-a-language* to JavaScript
● Coffeescript to JavaScript - coffeescript.org
● TypeScript to JavaScript - typescriptl...
A new frontend environement
● Single page application
● Web App
● Front-end frameworks:
○ Backbone + jQuery
○ Angular
○ Em...
API REST
Recap tools
● less / sass
● browserify / webpack / rollup
● uglify
● transpilers
● imagemin
● watch
● livereload
● ...
I need a task runner
But before I need to node and npm
// package.json - created with '$ npm init'
{
"name": "my-awesome-project",
"version": "...
Grunt
module.exports = function(grunt) {
grunt.initConfig({
sass: {
dist: {
files: {
'style/style.css': 'sass/style.scss'
...
Gulp
var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('scripts', function() {
return gulp.src(['bower_co...
Webpack
module.exports = {
entry: './src/js/main.js',
module: {
loaders: [{
test: /.js$/,
loader: 'babel',
query: {
preset...
Demo Time?
@JellyBellyDev @MatteoManchi
Thank You!
Once upon a time, there were css, js and server-side rendering
Once upon a time, there were css, js and server-side rendering
Once upon a time, there were css, js and server-side rendering
Once upon a time, there were css, js and server-side rendering
Once upon a time, there were css, js and server-side rendering
Once upon a time, there were css, js and server-side rendering
Upcoming SlideShare
Loading in …5
×

Once upon a time, there were css, js and server-side rendering

299 views

Published on

22 July 2016 - RomaJS meetup

Video: https://www.youtube.com/watch?v=Xr9TItuNxLg

Once upon a time, there were css, js and server-side rendering by @JellyBellyDev and @MatteoManchi

Published in: Technology
  • Be the first to comment

Once upon a time, there were css, js and server-side rendering

  1. 1. Once upon a time… there were css, js and server-side rendering
  2. 2. A long time ago... in a galaxy far far away A long time ago... in a galaxy far far away
  3. 3. PHP template engines ● Smarty (2002) ● Twig (Symfony) ● Mustache (Logic-less templates) ● Blade (Laravel 4) ● Volt (Phalcon)
  4. 4. // guestbook.tpl
  5. 5. Style inline is a smell but...
  6. 6. File too big
  7. 7. Organize styles logically
  8. 8. // index.html // main.css
  9. 9. Designers’ hell at 2000s ● CSS ○ Cascading Style Sheet ○ Browser compatibility ○ Huge single file or external HTTP imports ○ Selector Priority (a#a-02 is more specific than a[id=”a-02”]?) ○ Cascading.
  10. 10. Designers’ hell at 2000s
  11. 11. Designers’ hell at 2000s
  12. 12. Assets file tree assets/ ├── css │ ├── bootstrap.min.css │ ├── magnific-popup.min.css │ ├── videojs.min.css │ └── main.css ├── fonts/ └── images/
  13. 13. The birth of preprocessors LESS and SASS were born to solve the bad things of CSS inspired by software development. ● local imports ● variables ● functions ● reusable code
  14. 14. More tools! $ lessc main.less main.css $ sass input.scss output.css
  15. 15. Assets file tree with less assets/ ├── less │ ├── global.less │ ├── main.less │ ├── utils │ │ ├── animations.less │ │ ├── device-label.less │ │ ├── generators.less │ │ ├── helpers.less │ │ ├── media-queries.less │ │ ├── positions.less │ │ ├── shadows.less │ │ └── sizes.less │ └── webfonts.less ├── css │ ├── bootstrap.min.css │ ├── magnific-popup.min.css │ ├── videojs.min.css │ └── main.min.css ├── fonts/ └── images/
  16. 16. Why reinvent the wheel? ● jQuery ● Bootstrap ● Foundation ● Magnific Popup ● JWPlayer ● jQuery Mobile ● Video.js ● Sencha Touch ● Backbone ● jQuery UI ● D3.js ● Chosen ● Handlebars ● Underscore ● JQuery-File-Upload ● Prototype ● Dojo ● jquery-select ● jquery-gallery ● jquery-pokemon-go
  17. 17. Meanwhile the assets directory ...
  18. 18. Bower ● Package Manager by Twitter ● Bower.json: single configuration file with all frontend dependencies ● Automatic download ● Flat dependencies tree ● Dependency upgrade with one command MORE TOOLS ● bower init ● bower install <package> --save ● bower install
  19. 19. $ bower install jquery
  20. 20. Assets file tree with bower assets/ ├── bower_components │ ├── bootstrap/ │ ├── magnific-popup/ │ └── videojs/ ├── less │ ├── global.less │ ├── main.less │ ├── utils/ │ └── webfonts.less ├── css │ └── main.min.css ├── fonts/ └── images/
  21. 21. Wait… There were also some small jquery javascript script for carousels and popups. And then?
  22. 22. And then … BOOM! NodeJS
  23. 23. CommonJS ● NodeJS love ● Explosion of packages and tools written for node.js ● Modularization as hell (require(‘left-pad’)) ● Encapsulated code with specific exports (module.exports = PokemonGo) ● No more self-invoking functions! ● Small files
  24. 24. Front-end developers’ problem ● Code complexity grows as the site gets bigger ● Assembly gets harder ● Developer wants discrete JS files/modules ● Deployment wants optimized code in just one or a few HTTP calls
  25. 25. NodeJS is so cool! Why I can’t use it on my frontend development? I need a magic!
  26. 26. Browserify ● Small wrapper for the require function ● Build process that keeps track of dependencies ● Bundle to one file More tools browserify index.js > bundle.js
  27. 27. Assets file tree with browserify assets/ ├── bower_components/ ├── node_modules/ ├── less/ ├── dist │ ├── bundle.js │ └── main.min.css ├── js │ ├── Components │ │ ├── Modals.js │ │ └── Slideshow.js │ ├── Models │ │ ├── User.js │ │ └── Product.js │ └── main.js ├── fonts/ └── images/
  28. 28. *choose-a-language* to JavaScript ● Coffeescript to JavaScript - coffeescript.org ● TypeScript to JavaScript - typescriptlang.org ● Dart to JavaScript - dartlang.org ● C/C++ to JavaScript - Emscripten ● ES6 to ES5 - babel ● JavaScript to JavaScript - js2js
  29. 29. A new frontend environement ● Single page application ● Web App ● Front-end frameworks: ○ Backbone + jQuery ○ Angular ○ Ember ○ Meteor ○ React.js ● The V of MVC is moved to browsers ● Front-end designers became Front-end developers ● Backend developers and Front-end developers meet together only in one way...
  30. 30. API REST
  31. 31. Recap tools ● less / sass ● browserify / webpack / rollup ● uglify ● transpilers ● imagemin ● watch ● livereload ● ...
  32. 32. I need a task runner
  33. 33. But before I need to node and npm // package.json - created with '$ npm init' { "name": "my-awesome-project", "version": "0.1.0", "description": "My Awesome Project", "scripts": { "build": "node_modules/grunt-cli/bin/grunt dist", "start": "node_modules/grunt-cli/bin/grunt dev" }, "devDependencies": { "grunt": "~0.4.5", "grunt-cli": "~1.2.0", "grunt-contrib-sass": "~1.0.0" } "author": "RomaJS" }
  34. 34. Grunt module.exports = function(grunt) { grunt.initConfig({ sass: { dist: { files: { 'style/style.css': 'sass/style.scss' } } }, watch: { css: { files: '**/*.scss', tasks: ['sass'] } } }); grunt.loadNpmTasks('grunt-contrib-sass'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.registerTask('start',['sass', 'watch']); grunt.registerTask('build',['sass']); } ● grunt-contrib-cssmin ● grunt-contrib-less ● grunt-contrib-concat ● grunt-contrib-uglify ● grunt-contrib-imagemin ● grunt-contrib-copy ● grunt-contrib-clean ● grunt-contrib-livereload ● grunt-contrib-jshint ● grunt-eslint ● grunt-pokemon-go ● ... // gruntfile.js
  35. 35. Gulp var gulp = require('gulp'), sass = require('gulp-sass'); gulp.task('scripts', function() { return gulp.src(['bower_components/jquery/jquery-1.11.1.js', 'src/**/*.js']) .pipe(concat('main.js')) .pipe(uglify()) .pipe(gulp.dest('dist/build')); }); gulp.task('styles', function() { gulp.src('sass/**/*.scss') .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('./css/')) }); //Watch task gulp.task('default', ['scripts', 'styles'], function() { gulp.watch('sass/**/*.scss',['styles']); gulp.watch(['js/**/*.js'], ['scripts']) }); ● gulp-cssmin ● gulp-less ● gulp-concat ● gulp-uglify ● gulp-imagemin ● gulp-copy ● gulp-clean ● gulp-livereload ● gulp-jshint ● gulp-eslint // gulpfile.js
  36. 36. Webpack module.exports = { entry: './src/js/main.js', module: { loaders: [{ test: /.js$/, loader: 'babel', query: { presets: ['es2015', 'react', 'stage-0'] } }, { test: /.less$/, loader: ExtractTextPlugin.extract('style-loader', 'css!less') }] }, output: { filename: 'bundle.js', path: __dirname + '/../web/assets' } }; ● creates one or many bundles ● allow commonjs and es6 ● webpack-dev-server ○ watch ○ livereload ● loaders +150 ○ sass ○ less ● plugins +30 ○ uglifyJs ○ imagemin ○ commonsChunk // webpack.config.js
  37. 37. Demo Time?
  38. 38. @JellyBellyDev @MatteoManchi Thank You!

×