How NOT to get lost in the current JavaScript landscape
-
Upload
radoslaw-scheibinger -
Category
Software
-
view
545 -
download
6
Transcript of How NOT to get lost in the current JavaScript landscape
![Page 1: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/1.jpg)
How NOT to get lost in the current JS landscape
@rscheibinger
![Page 2: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/2.jpg)
Radosław Scheibinger
@rscheibingercodeabroad.com
Software Engineer at
![Page 3: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/3.jpg)
This talk is about
![Page 4: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/4.jpg)
In the context of
Progressive enhancement
Single Page Applications
![Page 5: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/5.jpg)
2015
● HTML5 certified last year● IE8 Usage ~ 2%● CSS3● EcmaScript 6● NodeJS● HTTP2● Users expect page load time < 1 second
![Page 6: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/6.jpg)
Seriously?
● JSP
● JSF
● *** Faces
● XHTML
● Google Web Toolkit
![Page 7: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/7.jpg)
Embrace The Web
![Page 8: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/8.jpg)
How do we build web apps nowadays?
![Page 9: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/9.jpg)
Traditional Page lifecycleServer
Client
HTML
Initial request
User Action - Post Request
HTML & Page Reload
![Page 10: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/10.jpg)
Single page application
...
ServerClient
HTML
Initial request
User Action - Ajax Request
JSON
![Page 11: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/11.jpg)
![Page 12: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/12.jpg)
Feeling fast?
0 -100ms Instant Perception100 - 300ms Small perceptible delay300 -1000ms Machine is not working1000+ ms Likely mental context switch10000+ ms Task is abandoned
![Page 13: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/13.jpg)
Permanent abandonment rate
People who never come back- Outage 9%- Slow performance 28%
source: Akamai: The impact of Web Performance on E-Retail Success
![Page 14: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/14.jpg)
Taking step back toProgressive Enhancement
![Page 15: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/15.jpg)
Progressive Enhancement
● Content (HTML)● Presentation (CSS)● Behaviour (JavaScript)
![Page 16: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/16.jpg)
Progressive Enhancement
is important:● Improving web performance● page load < 1s● SEO
![Page 17: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/17.jpg)
SPA How to
![Page 18: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/18.jpg)
SPA Checklist
- do I need SEO?- is your app behind a login?- is my app content driven?
- learning curve- frameworks
- do I need first page load performance?- is my app small enough for SPA?
![Page 19: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/19.jpg)
SPA Frameworks
- AngularJS- Backbone - ember
![Page 20: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/20.jpg)
SPA Frameworks
Metric AngularJS Backbone.js Ember.js
Stars on Github 27.2k 18.8k 11k
Third-Party Modules 800 ngmodules 236 backplugs 21 emberaddons
StackOverflow Questions 49.5k 15.9k 11.2k
YouTube Results ~75k ~16k ~6k
GitHub Contributors 928 230 393
Chrome Extension Users 150k 7k 38.3k
![Page 21: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/21.jpg)
![Page 22: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/22.jpg)
Cannot afford SPA?
Build your App with:• Traditional Page Lifecycle model• progressive enhancement
![Page 23: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/23.jpg)
Fixing Traditional Page Lifecycle problems
- Reloading entire pages when submitting forms causes Flash of the content
- Apps are not interactive- Feels slow
![Page 24: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/24.jpg)
Hijax
only using AJAX techniques to 'hijack' form submissions and responses
![Page 25: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/25.jpg)
HIJAXServer
Client
HTML
Initial request
User Action - Ajax Request
JSON/ HTML Partial
![Page 26: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/26.jpg)
Hijax problems
- back button issue- abuse of hashbangs: #!/no/more- I like to share links to stuff I see- can’t bookmark without proper url
We need proper URLs - why?
![Page 27: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/27.jpg)
HTML5 History Apiand PJAX
![Page 28: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/28.jpg)
PJAXServer
Client
HTML
Initial request
User Action - Ajax Request
JSON/ HTML Partial
+ History pushState
![Page 29: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/29.jpg)
![Page 30: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/30.jpg)
![Page 31: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/31.jpg)
Code duplication Problem
- Localization- Rendering Templates- Date/Currency formatting- Form Validation- Routing Logic
![Page 32: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/32.jpg)
![Page 33: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/33.jpg)
Isomorphic JavaScript
- JavaScript on the Frontend- JavaScript on the Backend
![Page 34: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/34.jpg)
http://nerds.airbnb.com/wp-content/uploads/2013/11/Screen-Shot-2013-11-07-at-10.29.32-AM.png
![Page 35: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/35.jpg)
REST Services
Web Browsers - Multiscreen
Mobile Apps
UI Backend
PresentationLogic
Business Logic
![Page 36: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/36.jpg)
Need for tools
● No one likes writing plain CSS?● Reduce boilerplate code● Reduce manual work● Sprites, fonts etc...● Optimization, Website has to load super fast.
![Page 37: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/37.jpg)
Hold on ?
Best ecosystem for frontend tooling
![Page 38: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/38.jpg)
Getting Started with nodejs tooling
meet Yeoman
![Page 39: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/39.jpg)
![Page 40: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/40.jpg)
![Page 41: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/41.jpg)
module.exports = function (grunt) { require('load-grunt-tasks')(grunt); var pkgConfig = grunt.file.readJSON('package.json'); grunt.initConfig({ pkg: pkgConfig,
webpack: {...}, 'webpack-dev-server': {...}, connect: {...}, open: {...}, karma: {...}, copy: {...}, clean: {...} }); grunt.registerTask('serve', function (target) {}); grunt.registerTask('test', ['karma']); grunt.registerTask('build', ['clean', 'copy', 'webpack']); grunt.registerTask('default', []);};
Gruntfile.js ?
![Page 42: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/42.jpg)
Build tools
● gulp 13006☆● grunt 9381☆● brunch 4018☆● broccoli 2092☆
![Page 43: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/43.jpg)
GRUNT
![Page 44: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/44.jpg)
Grunt(trial)
Grunt is rapidly becoming the de facto JavaScript build tool with high adoption and a growing ecosystem. While slower than newer alternatives, such as Gulp, in terms of file processing, Grunt covers a broader set of build-related activities, has a proliferation of plugins and makes it easy to author and publish self-written plugins to npm.
![Page 45: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/45.jpg)
![Page 46: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/46.jpg)
https://github.com/osscafe/gulp-cheatsheet
![Page 47: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/47.jpg)
https://github.com/osscafe/gulp-cheatsheet
![Page 48: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/48.jpg)
Grunt - Intermediary files issue
source: http://jaysoo.ca/2014/01/27/gruntjs-vs-gulpjs/
![Page 49: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/49.jpg)
Fast incremental Builds
gulp.task('scripts', function () { return gulp.src('src/**/*.js') .pipe(cache('scripts')) .pipe(header('(function () {')) .pipe(footer('})();')) .pipe(remember('scripts')) .pipe(concat('app.js')) .pipe(gulp.dest('public/'))});
![Page 50: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/50.jpg)
Gulp
In the last radar we called out Gulp as a strong competitor to Grunt, with a clean API and fast builds thanks to its streaming approach.
...
We do see some teams successfully using Gulp inside Grunt, when the speed of intermediate result caching is required, but we are not recommending it as the default JavaScript build tool.
![Page 51: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/51.jpg)
Gulp vs Grunt
- No intermediary files- Fast builds- Code over Configuration- Streaming api
![Page 52: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/52.jpg)
Structuring your code
![Page 53: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/53.jpg)
Sock Drawer
+ Good for medium size project
+ Easy to decide where to put each file
+ Well known pattern
![Page 54: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/54.jpg)
Modular
- easy to identify dependencies from specific domain
![Page 55: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/55.jpg)
Modular with assets
+ everything in one place- need for advanced code
bundling tools
![Page 56: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/56.jpg)
Module Pattern
![Page 57: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/57.jpg)
Namespace pattern
helloWorld.js
var app = app || {};var thing1 = app.thing1;var thing2 = app.thing2;var thing3 = app.thing3;
app.helloWorld = function () { console.log(thing1, thing2, thing3);}
Gruntfile.js
uglify: { dist: { files: { 'dest/output.min.js': [ 'src/thing1.js' 'src/thing2.js' 'src/thing3.js' 'src/helloWorld.js' ]...
![Page 58: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/58.jpg)
AMD
require([ './thing1', './thing2', './thing3'], function(thing1, thing2, thing3) { // Tell the module what to return/export return function() { console.log(thing1, thing2, thing3); };});
Asynchronous module definition
![Page 59: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/59.jpg)
CommonJS
var thing1 = require('./thing1');var thing2 = require('./thing2');var thing3 = require('./thing3');
// Tell the module what to return/exportmodule.exports = function() { console.log(thing1, thing2, thing3);};
![Page 60: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/60.jpg)
- CommonJS modules support
- First step to isomorphic JS
- works with dependency managers like npm
Webpack
![Page 61: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/61.jpg)
Manage your dependencies
- npm- Bower- WebJars
![Page 62: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/62.jpg)
npm install calendar-widgetnpm install date-formatternpm install dropdown-widget
Modular payoff
![Page 63: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/63.jpg)
Asset Bundling Optimize Web Performance
- concat- minify- gzip- cache-busting
![Page 64: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/64.jpg)
Simple asset bundling with Grunt
● grunt● uglify● gzip● browser cache busting
![Page 65: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/65.jpg)
Advanced Asset Bundling
Tools that support:- code splitting- CommonJS syntax- pluggable transforms
- e.g. precompiling templates
![Page 66: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/66.jpg)
● webpack 4922☆● browserify 7274☆● lasso-js 69☆
Advanced Asset Bundlers
![Page 67: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/67.jpg)
Test runners
● karma● jsdom + mocha● phantomjs + mocha
![Page 68: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/68.jpg)
Choosing the right tech
For progressive enhancement
![Page 69: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/69.jpg)
Build your tech incrementally
Avoid Technology Lock-in
![Page 70: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/70.jpg)
{dust}
Easy Medium Advanced
![Page 71: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/71.jpg)
Frontend Technology Radar 2015
![Page 72: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/72.jpg)
Adopt
● HTML5 History Api● PJAX● Grunt/Gulp● CommonJS● Asset Bundlers● karma● AngularJS for SPA
![Page 73: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/73.jpg)
Consider
● NodeJS as a UI Backend● Isomorphic JS● ReactJS
![Page 74: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/74.jpg)
Stop
● AMD● JSF● WebJars● GWT
![Page 75: How NOT to get lost in the current JavaScript landscape](https://reader035.fdocuments.us/reader035/viewer/2022081515/55b6e39ebb61eb7e268b4918/html5/thumbnails/75.jpg)
Q/A