Successfully reported this slideshow.

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

3

Share

Loading in …3
×
1 of 44
1 of 44

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

3

Share

Download to read offline

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

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

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

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!

×