This document discusses how to avoid getting lost in the current JavaScript landscape. It begins by looking at modern web development trends like HTML5, CSS3, ES6, and expectations of fast page loads. It then examines traditional page lifecycles versus single page applications and various JavaScript frameworks. The document advocates for progressive enhancement and outlines strategies like "Hijax" and using the HTML5 History API to improve traditional approaches. It also discusses issues like code duplication, the benefits of isomorphic JavaScript, and tools for frontend development including Grunt, Gulp, asset bundlers, and test runners. It concludes by providing recommendations on technologies to adopt, consider, or stop using to develop with a progressive enhancement approach.

1. How NOT to get lost
in the current
JS landscape
@rscheibinger

2. Radosław Scheibinger
@rscheibinger
codeabroad.com
Software Engineer at

3. This talk is about

4. In the context of
Progressive enhancement
Single Page Applications

5. 2015
● HTML5 certified last year
● IE8 Usage ~ 2%
● CSS3
● EcmaScript 6
● NodeJS
● HTTP2
● Users expect page load time < 1 second

6. Seriously?
● JSP
● JSF
● *** Faces
● XHTML
● Google Web Toolkit

7. Embrace The Web

8. How do we build
web apps nowadays?

9. Traditional Page lifecycle
Server
Client
HTML
Initial request
User Action - Post Request
HTML & Page Reload

10. Single page application
...
Server
Client
HTML
Initial request
User Action - Ajax Request
JSON

12. Feeling fast?
0 -100ms Instant Perception
100 - 300ms Small perceptible delay
300 -1000ms Machine is not working
1000+ ms Likely mental context switch
10000+ ms Task is abandoned

13. Permanent abandonment rate
People who never come back
- Outage 9%
- Slow performance 28%
source: Akamai: The impact of Web Performance on E-Retail Success

14. Taking step back to
Progressive Enhancement

15. Progressive Enhancement
● Content (HTML)
● Presentation (CSS)
● Behaviour (JavaScript)

16. Progressive Enhancement
is important:
● Improving web performance
● page load < 1s
● SEO

17. SPA How to

18. 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?

19. SPA Frameworks
- AngularJS
- Backbone
- ember

20. 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

22. Cannot afford SPA?
Build your App with:
• Traditional Page Lifecycle model
• progressive enhancement

23. Fixing Traditional Page Lifecycle
problems
- Reloading entire pages when submitting
forms causes Flash of the content
- Apps are not interactive
- Feels slow

24. Hijax
only using AJAX techniques to 'hijack' form
submissions and responses

25. HIJAX
Server
Client
HTML
Initial request
User Action - Ajax Request
JSON/ HTML Partial

26. 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?

27. HTML5 History Api
and PJAX

28. PJAX
Server
Client
HTML
Initial request
User Action - Ajax Request
JSON/ HTML Partial
+ History pushState

31. Code duplication Problem
- Localization
- Rendering Templates
- Date/Currency formatting
- Form Validation
- Routing Logic

33. Isomorphic JavaScript
- JavaScript on the Frontend
- JavaScript on the Backend

34. http://nerds.airbnb.com/wp-
content/uploads/2013/11/Screen-
Shot-2013-11-07-at-10.29.32-
AM.png

35. REST
Services
Web Browsers - Multiscreen
Mobile Apps
UI Backend
Presentation
Logic
Business
Logic

36. 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.

37. Hold on ?
Best ecosystem for frontend tooling

38. Getting Started with nodejs tooling
meet Yeoman

41. 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 ?

42. Build tools
● gulp ☆ 13006
● grunt ☆ 9381
● brunch ☆ 4018
● broccoli ☆ 2092

43. GRUNT

44. 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.

46. https://github.com/osscafe/gulp-
cheatsheet

47. https://github.com/osscafe/gulp-
cheatsheet

48. Grunt - Intermediary files issue
source: http://jaysoo.ca/2014/01/27/gruntjs-vs-gulpjs/

49. 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/'))
});

50. 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.

51. Gulp vs Grunt
- No intermediary files
- Fast builds
- Code over Configuration
- Streaming api

52. Structuring your code

53. Sock Drawer
+ Good for medium size
project
+ Easy to decide where to
put each file
+ Well known pattern

54. Modular
- easy to identify
dependencies from specific
domain

55. Modular with assets
+ everything in one place
- need for advanced code
bundling tools

56. Module Pattern

57. 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'
]
...

58. 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

59. CommonJS
var thing1 = require('./thing1');
var thing2 = require('./thing2');
var thing3 = require('./thing3');
// Tell the module what to return/export
module.exports = function() {
console.log(thing1, thing2, thing3);
};

60. - CommonJS modules support
- First step to isomorphic JS
- works with dependency managers like npm
Webpack

61. Manage your dependencies
- npm
- Bower
- WebJars

62. npm install calendar-widget
npm install date-formatter
npm install dropdown-widget
Modular payoff

63. Asset Bundling
Optimize Web Performance
- concat
- minify
- gzip
- cache-busting

64. Simple asset bundling with Grunt
● grunt
● uglify
● gzip
● browser cache busting

65. Advanced Asset Bundling
Tools that support:
- code splitting
- CommonJS syntax
- pluggable transforms
- e.g. precompiling templates

66. ● webpack ☆ 4922
● browserify ☆ 7274
● lasso-js ☆ 69
Advanced Asset Bundlers

67. Test runners
● karma
● jsdom + mocha
● phantomjs + mocha

68. Choosing the right tech
For progressive enhancement

69. Build your tech incrementally
Avoid Technology Lock-in

70. {dust}
Easy Medium Advanced

71. Frontend Technology Radar 2015

72. Adopt
● HTML5 History Api
● PJAX
● Grunt/Gulp
● CommonJS
● Asset Bundlers
● karma
● AngularJS for SPA

73. Consider
● NodeJS as a UI Backend
● Isomorphic JS
● ReactJS

74. Stop
● AMD
● JSF
● WebJars
● GWT

75. Q/A