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

Andrea Giannantonio
Andrea GiannantonioWeb Developer
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
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
PHP template engines
● Smarty (2002)
● Twig (Symfony)
● Mustache (Logic-less templates)
● Blade (Laravel 4)
● Volt (Phalcon)
// guestbook.tpl
Style inline is a smell
but...
File too big
Organize styles logically
Once upon a time, there were css, js and server-side rendering
// index.html
// main.css
Once upon a time, there were css, js and server-side rendering
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.
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
├── fonts/
└── images/
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
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
│ │ ├── 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/
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
Meanwhile the assets directory ...
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
$ bower install jquery
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/
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’))
● Encapsulated code with specific exports (module.exports = PokemonGo)
● No more self-invoking functions!
● Small files
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
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
More tools
browserify index.js > bundle.js
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/
Once upon a time, there were css, js and server-side rendering
*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
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...
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": "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"
}
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
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
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
Demo Time?
@JellyBellyDev @MatteoManchi
Thank You!
1 of 44

Recommended

Webpack: your final module bundler by
Webpack: your final module bundlerWebpack: your final module bundler
Webpack: your final module bundlerAndrea Giannantonio
801 views24 slides
Hey webpack by
Hey webpackHey webpack
Hey webpackAndrew Makarow
924 views22 slides
An Intro into webpack by
An Intro into webpackAn Intro into webpack
An Intro into webpackSquash Apps Pvt Ltd
1.1K views20 slides
Webpack slides by
Webpack slidesWebpack slides
Webpack slidesАндрей Вандакуров
4.7K views33 slides
Webpack by
Webpack Webpack
Webpack DataArt
5.8K views35 slides
Webpack DevTalk by
Webpack DevTalkWebpack DevTalk
Webpack DevTalkAlessandro Bellini
504 views24 slides

More Related Content

What's hot

Webpack Tutorial, Uppsala JS by
Webpack Tutorial, Uppsala JSWebpack Tutorial, Uppsala JS
Webpack Tutorial, Uppsala JSEmil Öberg
1.3K views30 slides
Webpack Introduction by
Webpack IntroductionWebpack Introduction
Webpack IntroductionAnjali Chawla
2.1K views18 slides
Packing it all: JavaScript module bundling from 2000 to now by
Packing it all: JavaScript module bundling from 2000 to nowPacking it all: JavaScript module bundling from 2000 to now
Packing it all: JavaScript module bundling from 2000 to nowDerek Willian Stavis
755 views126 slides
Browserify by
BrowserifyBrowserify
Browserifydavidchubbs
1.6K views14 slides
Webpack by
WebpackWebpack
WebpackAnjali Chawla
753 views16 slides
Integrating Browserify with Sprockets by
Integrating Browserify with SprocketsIntegrating Browserify with Sprockets
Integrating Browserify with SprocketsSpike Brehm
1.8K views34 slides

What's hot(20)

Webpack Tutorial, Uppsala JS by Emil Öberg
Webpack Tutorial, Uppsala JSWebpack Tutorial, Uppsala JS
Webpack Tutorial, Uppsala JS
Emil Öberg1.3K views
Packing it all: JavaScript module bundling from 2000 to now by Derek Willian Stavis
Packing it all: JavaScript module bundling from 2000 to nowPacking it all: JavaScript module bundling from 2000 to now
Packing it all: JavaScript module bundling from 2000 to now
Integrating Browserify with Sprockets by Spike Brehm
Integrating Browserify with SprocketsIntegrating Browserify with Sprockets
Integrating Browserify with Sprockets
Spike Brehm1.8K views
Lightning Talk: Making JS better with Browserify by crgwbr
Lightning Talk: Making JS better with BrowserifyLightning Talk: Making JS better with Browserify
Lightning Talk: Making JS better with Browserify
crgwbr826 views
JavaScript Dependencies, Modules & Browserify by Johan Nilsson
JavaScript Dependencies, Modules & BrowserifyJavaScript Dependencies, Modules & Browserify
JavaScript Dependencies, Modules & Browserify
Johan Nilsson8.4K views
Bower & Grunt - A practical workflow by Riccardo Coppola
Bower & Grunt - A practical workflowBower & Grunt - A practical workflow
Bower & Grunt - A practical workflow
Riccardo Coppola5.8K views
Node.js & Twitter Bootstrap Crash Course by Aaron Silverman
Node.js & Twitter Bootstrap Crash CourseNode.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash Course
Aaron Silverman28.7K views
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other Tools by Ryan Weaver
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other ToolsCool like a Frontend Developer: Grunt, RequireJS, Bower and other Tools
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other Tools
Ryan Weaver54.9K views
WordPress as the Backbone(.js) by Beau Lebens
WordPress as the Backbone(.js)WordPress as the Backbone(.js)
WordPress as the Backbone(.js)
Beau Lebens4.9K views
JSConf US 2014: Building Isomorphic Apps by Spike Brehm
JSConf US 2014: Building Isomorphic AppsJSConf US 2014: Building Isomorphic Apps
JSConf US 2014: Building Isomorphic Apps
Spike Brehm5.4K views
Building Isomorphic Apps (JSConf.Asia 2014) by Spike Brehm
Building Isomorphic Apps (JSConf.Asia 2014)Building Isomorphic Apps (JSConf.Asia 2014)
Building Isomorphic Apps (JSConf.Asia 2014)
Spike Brehm9.5K views
Advanced WordPress Development Environments by Beau Lebens
Advanced WordPress Development EnvironmentsAdvanced WordPress Development Environments
Advanced WordPress Development Environments
Beau Lebens2.4K views
Bower - A package manager for the web by Larry Nung
Bower - A package manager for the webBower - A package manager for the web
Bower - A package manager for the web
Larry Nung847 views
Put a little Backbone in your WordPress by adamsilverstein
Put a little Backbone in your WordPressPut a little Backbone in your WordPress
Put a little Backbone in your WordPress
adamsilverstein2.5K views

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

I Just Want to Run My Code: Waypoint, Nomad, and Other Things by
I Just Want to Run My Code: Waypoint, Nomad, and Other ThingsI Just Want to Run My Code: Waypoint, Nomad, and Other Things
I Just Want to Run My Code: Waypoint, Nomad, and Other ThingsMichael Lange
35 views57 slides
HTML, CSS & Javascript Architecture (extended version) - Jan Kraus by
HTML, CSS & Javascript Architecture (extended version) - Jan KrausHTML, CSS & Javascript Architecture (extended version) - Jan Kraus
HTML, CSS & Javascript Architecture (extended version) - Jan KrausWomen in Technology Poland
2K views69 slides
Docker 101 by
Docker 101 Docker 101
Docker 101 Kevin Nord
71 views30 slides
Node.js an Exectutive View by
Node.js an Exectutive ViewNode.js an Exectutive View
Node.js an Exectutive ViewManuel Eusebio de Paz Carmona
339 views29 slides
Architektura html, css i javascript - Jan Kraus by
Architektura html, css i javascript - Jan KrausArchitektura html, css i javascript - Jan Kraus
Architektura html, css i javascript - Jan KrausWomen in Technology Poland
852 views64 slides
Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf... by
Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...
Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...Develcz
2K views14 slides

Similar to Once upon a time, there were css, js and server-side rendering(20)

I Just Want to Run My Code: Waypoint, Nomad, and Other Things by Michael Lange
I Just Want to Run My Code: Waypoint, Nomad, and Other ThingsI Just Want to Run My Code: Waypoint, Nomad, and Other Things
I Just Want to Run My Code: Waypoint, Nomad, and Other Things
Michael Lange35 views
Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf... by Develcz
Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...
Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...
Develcz2K views
Practical Use of MongoDB for Node.js by async_io
Practical Use of MongoDB for Node.jsPractical Use of MongoDB for Node.js
Practical Use of MongoDB for Node.js
async_io19.9K views
JS & NodeJS - An Introduction by Nirvanic Labs
JS & NodeJS - An IntroductionJS & NodeJS - An Introduction
JS & NodeJS - An Introduction
Nirvanic Labs6.5K views
A Gentle Introduction to Docker and Containers by Docker, Inc.
A Gentle Introduction to Docker and ContainersA Gentle Introduction to Docker and Containers
A Gentle Introduction to Docker and Containers
Docker, Inc.1.6K views
Nodejs web service for starters by Bruce Li
Nodejs web service for startersNodejs web service for starters
Nodejs web service for starters
Bruce Li170 views
Docker 0.11 at MaxCDN meetup in Los Angeles by Jérôme Petazzoni
Docker 0.11 at MaxCDN meetup in Los AngelesDocker 0.11 at MaxCDN meetup in Los Angeles
Docker 0.11 at MaxCDN meetup in Los Angeles
Jérôme Petazzoni6.1K views
ENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScript by Horacio Gonzalez
ENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScriptENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScript
ENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScript
Horacio Gonzalez619 views
Настройка окружения для кросскомпиляции проектов на основе docker'a by corehard_by
Настройка окружения для кросскомпиляции проектов на основе docker'aНастройка окружения для кросскомпиляции проектов на основе docker'a
Настройка окружения для кросскомпиляции проектов на основе docker'a
corehard_by174 views
Developing realtime apps with Drupal and NodeJS by drupalcampest
Developing realtime apps with Drupal and NodeJS Developing realtime apps with Drupal and NodeJS
Developing realtime apps with Drupal and NodeJS
drupalcampest9.8K views
Super powered Drupal development with docker by Maciej Lukianski
Super powered Drupal development with dockerSuper powered Drupal development with docker
Super powered Drupal development with docker
Maciej Lukianski362 views
Django dev-env-my-way by Robert Lujo
Django dev-env-my-wayDjango dev-env-my-way
Django dev-env-my-way
Robert Lujo941 views
Docker primer and tips by Samuel Chow
Docker primer and tipsDocker primer and tips
Docker primer and tips
Samuel Chow108 views
Introduction to Docker and Containers by Docker, Inc.
Introduction to Docker and ContainersIntroduction to Docker and Containers
Introduction to Docker and Containers
Docker, Inc.1.3K views
Desktop apps with node webkit by Paul Jensen
Desktop apps with node webkitDesktop apps with node webkit
Desktop apps with node webkit
Paul Jensen33.3K views

Recently uploaded

Digital Personal Data Protection (DPDP) Practical Approach For CISOs by
Digital Personal Data Protection (DPDP) Practical Approach For CISOsDigital Personal Data Protection (DPDP) Practical Approach For CISOs
Digital Personal Data Protection (DPDP) Practical Approach For CISOsPriyanka Aash
158 views59 slides
Updates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBIT by
Updates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBITUpdates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBIT
Updates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBITShapeBlue
206 views8 slides
Transcript: Redefining the book supply chain: A glimpse into the future - Tec... by
Transcript: Redefining the book supply chain: A glimpse into the future - Tec...Transcript: Redefining the book supply chain: A glimpse into the future - Tec...
Transcript: Redefining the book supply chain: A glimpse into the future - Tec...BookNet Canada
41 views16 slides
"Node.js Development in 2024: trends and tools", Nikita Galkin by
"Node.js Development in 2024: trends and tools", Nikita Galkin "Node.js Development in 2024: trends and tools", Nikita Galkin
"Node.js Development in 2024: trends and tools", Nikita Galkin Fwdays
32 views38 slides
Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or... by
Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or...Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or...
Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or...ShapeBlue
198 views20 slides
Business Analyst Series 2023 - Week 4 Session 8 by
Business Analyst Series 2023 -  Week 4 Session 8Business Analyst Series 2023 -  Week 4 Session 8
Business Analyst Series 2023 - Week 4 Session 8DianaGray10
123 views13 slides

Recently uploaded(20)

Digital Personal Data Protection (DPDP) Practical Approach For CISOs by Priyanka Aash
Digital Personal Data Protection (DPDP) Practical Approach For CISOsDigital Personal Data Protection (DPDP) Practical Approach For CISOs
Digital Personal Data Protection (DPDP) Practical Approach For CISOs
Priyanka Aash158 views
Updates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBIT by ShapeBlue
Updates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBITUpdates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBIT
Updates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBIT
ShapeBlue206 views
Transcript: Redefining the book supply chain: A glimpse into the future - Tec... by BookNet Canada
Transcript: Redefining the book supply chain: A glimpse into the future - Tec...Transcript: Redefining the book supply chain: A glimpse into the future - Tec...
Transcript: Redefining the book supply chain: A glimpse into the future - Tec...
BookNet Canada41 views
"Node.js Development in 2024: trends and tools", Nikita Galkin by Fwdays
"Node.js Development in 2024: trends and tools", Nikita Galkin "Node.js Development in 2024: trends and tools", Nikita Galkin
"Node.js Development in 2024: trends and tools", Nikita Galkin
Fwdays32 views
Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or... by ShapeBlue
Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or...Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or...
Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or...
ShapeBlue198 views
Business Analyst Series 2023 - Week 4 Session 8 by DianaGray10
Business Analyst Series 2023 -  Week 4 Session 8Business Analyst Series 2023 -  Week 4 Session 8
Business Analyst Series 2023 - Week 4 Session 8
DianaGray10123 views
Mitigating Common CloudStack Instance Deployment Failures - Jithin Raju - Sha... by ShapeBlue
Mitigating Common CloudStack Instance Deployment Failures - Jithin Raju - Sha...Mitigating Common CloudStack Instance Deployment Failures - Jithin Raju - Sha...
Mitigating Common CloudStack Instance Deployment Failures - Jithin Raju - Sha...
ShapeBlue180 views
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ... by Jasper Oosterveld
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...
Live Demo Showcase: Unveiling Dell PowerFlex’s IaaS Capabilities with Apache ... by ShapeBlue
Live Demo Showcase: Unveiling Dell PowerFlex’s IaaS Capabilities with Apache ...Live Demo Showcase: Unveiling Dell PowerFlex’s IaaS Capabilities with Apache ...
Live Demo Showcase: Unveiling Dell PowerFlex’s IaaS Capabilities with Apache ...
ShapeBlue126 views
The Power of Generative AI in Accelerating No Code Adoption.pdf by Saeed Al Dhaheri
The Power of Generative AI in Accelerating No Code Adoption.pdfThe Power of Generative AI in Accelerating No Code Adoption.pdf
The Power of Generative AI in Accelerating No Code Adoption.pdf
Saeed Al Dhaheri32 views
Why and How CloudStack at weSystems - Stephan Bienek - weSystems by ShapeBlue
Why and How CloudStack at weSystems - Stephan Bienek - weSystemsWhy and How CloudStack at weSystems - Stephan Bienek - weSystems
Why and How CloudStack at weSystems - Stephan Bienek - weSystems
ShapeBlue238 views
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue by ShapeBlue
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlueWhat’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue
ShapeBlue263 views
Don’t Make A Human Do A Robot’s Job! : 6 Reasons Why AI Will Save Us & Not De... by Moses Kemibaro
Don’t Make A Human Do A Robot’s Job! : 6 Reasons Why AI Will Save Us & Not De...Don’t Make A Human Do A Robot’s Job! : 6 Reasons Why AI Will Save Us & Not De...
Don’t Make A Human Do A Robot’s Job! : 6 Reasons Why AI Will Save Us & Not De...
Moses Kemibaro34 views
KVM Security Groups Under the Hood - Wido den Hollander - Your.Online by ShapeBlue
KVM Security Groups Under the Hood - Wido den Hollander - Your.OnlineKVM Security Groups Under the Hood - Wido den Hollander - Your.Online
KVM Security Groups Under the Hood - Wido den Hollander - Your.Online
ShapeBlue221 views
Future of AR - Facebook Presentation by Rob McCarty
Future of AR - Facebook PresentationFuture of AR - Facebook Presentation
Future of AR - Facebook Presentation
Rob McCarty64 views
LLMs in Production: Tooling, Process, and Team Structure by Aggregage
LLMs in Production: Tooling, Process, and Team StructureLLMs in Production: Tooling, Process, and Team Structure
LLMs in Production: Tooling, Process, and Team Structure
Aggregage42 views

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

  • 1. Once upon a time… there were css, js and server-side rendering
  • 2. A long time ago... in a galaxy far far away A long time ago... in a galaxy far far away
  • 6. PHP template engines ● Smarty (2002) ● Twig (Symfony) ● Mustache (Logic-less templates) ● Blade (Laravel 4) ● Volt (Phalcon)
  • 8. Style inline is a smell but...
  • 14. 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.
  • 17. Assets file tree assets/ ├── css │ ├── bootstrap.min.css │ ├── magnific-popup.min.css │ ├── videojs.min.css │ └── main.css ├── fonts/ └── images/
  • 18. 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
  • 19. More tools! $ lessc main.less main.css $ sass input.scss output.css
  • 20. 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/
  • 21. 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
  • 22. Meanwhile the assets directory ...
  • 23. 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
  • 24. $ bower install jquery
  • 25. 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/
  • 26. Wait… There were also some small jquery javascript script for carousels and popups. And then?
  • 28. 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
  • 29. 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
  • 30. NodeJS is so cool! Why I can’t use it on my frontend development? I need a magic!
  • 31. 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
  • 32. 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/
  • 34. *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
  • 35. 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...
  • 37. Recap tools ● less / sass ● browserify / webpack / rollup ● uglify ● transpilers ● imagemin ● watch ● livereload ● ...
  • 38. I need a task runner
  • 39. 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" }
  • 40. 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
  • 41. 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
  • 42. 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