SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
Once upon a time, there were css, js and server-side rendering
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.
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
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.
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.
NodeJS is so cool! Why I can’t use it on my
frontend development?
I need a magic!
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
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.
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...