In the last few years, there has been a trend towards shifting the business logic of web apps from the backend to the frontend, with the backend being delegated to a simple API. This makes the choice of a frontend framework that much more important. In 2015 we've seen a vast amount of new innovation in web development. We'll discuss the trends in this techtalk. source : http://survivejs.github.io/frontend-in-2015/#/

1. FRONTEND
IN 2015
CLEAR THE DECKS
VIEW ON GITHUB

2. USER EXPERIENCE
CLIENT EXPERIENCE
DEVELOPER EXPERIENCE

3. Always bet on JS!
- Brendan Eich

4. JAVASCRIPT USAGE
2011 2013 2015
None 61.8% 39.6% 35.0%
jQuery 28.3% 54.5% 61.5%
Modernizr 7.2%
Bootstrap 5.9%
W3Techs

8. INLINE JAVASCRIPT
AJAX (ASYNC)
SINGLE PAGE APPLICATIONS
UNIVERSAL JAVASCRIPT

9. PICK YOUR POISON
FRAMEWORKS LIBRARIES

11. FRAMEWORKS
SWISS KNIVES

12. ANGULARJS
EMBER.JS
BACKBONE.JS
KNOCKOUT.JS
POLYMER
METEOR

14. <section id="main" ng‐show="todos.length" ng‐cloak>
<input id="toggle‐all" type="checkbox" ng‐model="allChecked"
ng‐click="markAll(allChecked)">
<label for="toggle‐all">Mark all as complete</label>
<ul id="todo‐list">
<li ng‐repeat="todo in todos | filter:statusFilter track by $index"
ng‐class="{completed: todo.completed, editing: todo == editedTodo}">
<div class="view">
<input class="toggle" type="checkbox" ng‐model="todo.completed">
<label ng‐dblclick="editTodo(todo)">{{todo.title}}</label>
<button class="destroy" ng‐click="removeTodo(todo)"></button>
</div>
<form ng‐submit="doneEditing(todo)">
<input class="edit" ng‐trim="false" ng‐model="todo.title"
ng‐blur="doneEditing(todo)"
todo‐escape="revertEditing(todo)"
todo‐focus="todo == editedTodo">
</form>
</li>
</ul>
</section>

16. {{#if length}}
<footer id="footer">
<span id="todo‐count"><strong>{{remaining.length}}</strong>
{{pluralize 'item' remaining.length}} left</span>
<ul id="filters">
<li>
{{#link‐to "todos.index" activeClass="selected"}}All{{/link‐to}}
</li>
<li>
{{#link‐to "todos.active" activeClass="selected"}}Active{{/link‐to}}
</li>
<li>
{{#link‐to "todos.completed" activeClass="selected"}}Completed{{/link‐to}}
</li>
</ul>
{{#if completed.length}}
<button id="clear‐completed" {{action "clearCompleted"}}>Clear completed</button>
{{/if}}
</footer>
{{/if}}

18. <section id="main">
<input id="toggle‐all" type="checkbox">
<label for="toggle‐all">Mark all as complete</label>
<ul id="todo‐list"></ul>
</section>
// bindings at JavaScript side!

20. <section id="main" data‐bind="visible: todos().length">
<input id="toggle‐all" data‐bind="checked: allCompleted" type="checkbox">
<label for="toggle‐all">Mark all as complete</label>
<ul id="todo‐list" data‐bind="foreach: filteredTodos">
<li data‐bind="css: { completed: completed, editing: editing }">
<div class="view">
<input class="toggle" data‐bind="checked: completed" type="checkbox">
<label data‐bind="text: title, event: { dblclick: $root.editItem }"></label>
<button class="destroy" data‐bind="click: $root.remove"></button>
</div>
<input class="edit" data‐bind="value: title, valueUpdate: 'afterkeydown',
enterKey: $root.saveEditing, escapeKey: $root.cancelEditing,
selectAndFocus: editing, event: { blur: $root.stopEditing }">
</li>
</ul>
</section>

22. <section id="main" hidden?="{{model.items.length == 0}}">
<input id="toggle‐all" type="checkbox"
on‐change="{{toggleAllCompletedAction}}"
checked="{{model.allCompleted}}">
<label for="toggle‐all">Mark all as complete</label>
<ul id="todo‐list"
on‐td‐item‐changed="{{itemChangedAction}}"
on‐td‐destroy‐item="{{destroyItemAction}}">
<template repeat="{{model.filtered}}">
<li is="td‐item" item="{{}}"></li>
</template>
</ul>
</section>

24. <section id="main">
<input id="toggle‐all" type="checkbox"
{{#unless todos_not_completed}}checked="checked"{{/unless}}>
<label for="toggle‐all">Mark all as complete</label>
<ul id="todo‐list">
{{#each todos}}
{{> todo}}
{{/each}}
</ul>
</section>

25. COMPARISON
Framework Description
AngularJS Google backed, full featured, 2.0 in sight
Ember.js Niche, popular with rubists, reached 2.0 recently
Backbone.js Used to be popular, still in use, focus on model
Knockout.js MVVM, niche, focus on data binding
Polymer Web Components
Meteor Both front-end and back-end

26. LIBRARIESFOR SPECIFIC PROBLEMS

27. VIEW LIBRARIES

28. REACT.JS
VUE.JS
RACTIVE.JS
CYCLE.JS
+ 1 000 MORE

30. OVERVIEW OF REACT
Virtual DOM
Component oriented!
state, props, lifecycle
React Native
react-blessed

31. CAT COUNTER
I've seen 0 cats
Saw a Cat

32. import React from "react";
import Heading from "../src/heading";
export default class CatCounter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
this.sawCat = this.sawCat.bind(this);
}
render() {
const styles = {
padding: 20,
background: "black",
border: "none",
color: "white",
fontWeight: "bold",
fontSize: "2em"
};
return (
<div>
<Heading size={5} textColor="black">I've seen {this.state.count} cats</Heading>
<button style={styles} type="button" onClick={this.sawCat}>Saw a Cat</button>
</div>
);
}
sawCat() {
this.setState({ count: this.state.count + 1 });
}
}

33. // app.jsx
<section className="main">
<input
className="toggle‐all"
type="checkbox"
onChange={this.toggleAll}
checked={activeTodoCount === 0}
/>
<ul className="todo‐list">
{todoItems}
</ul>
</section>

35. <section class="main" v‐show="todos.length" v‐cloak>
<input class="toggle‐all" type="checkbox" v‐model="allDone">
<ul class="todo‐list">
<li class="todo" v‐repeat="todo: filteredTodos"
v‐class="completed: todo.completed, editing: todo == editedTodo">
<div class="view">
<input class="toggle" type="checkbox" v‐model="todo.completed">
<label v‐on="dblclick: editTodo(todo)">{{todo.title}}</label>
<button class="destroy" v‐on="click: removeTodo(todo)"></button>
</div>
<input class="edit" type="text" v‐model="todo.title"
v‐todo‐focus="todo == editedTodo"
v‐on="blur: doneEdit(todo), keyup: doneEdit(todo) | key 'enter',
keyup: cancelEdit(todo) | key 'esc'">
</li>
</ul>
</section>

37. <section id="main">
<!‐‐ Here, we compare the total number of tasks (`items.length`) with
the number of completed tasks (`completedTasks().length`). This calculation
happens reactively, so we never need to manually trigger an update.
When the `change` event fires on the input, the `toggleAll` event fires
on the Ractive instance. ‐‐>
<input id="toggle‐all" type="checkbox" on‐change="toggleAll"
checked='{{ items.length === completedTasks().length }}'>
<label for="toggle‐all">Mark all as complete</label>
<ul id="todo‐list">
{{#items:i}}
<!‐‐ The {{>item}} partial is defined in the script tag below ‐‐>
{{>item}}
{{/items}}
</ul>
</section>

39. function vrenderMainSection(todosData) {
let allCompleted = todosData.list.reduce((x, y) => x && y.completed, true);
return h('section#main', {
style: {'display': todosData.list.length ? '' : 'none'}
}, [
h('input#toggle‐all', {
type: 'checkbox',
checked: allCompleted
}),
h('ul#todo‐list', todosData.list
.filter(todosData.filterFn)
.map(todoData =>
h('todo‐item.todo‐item', {
key: todoData.id,
todoid: todoData.id,
content: todoData.title,
completed: todoData.completed
})
)
)
])
}

40. COMPARISON
Library Description
React.js Backed by Facebook, strong ecosystem
Vue.js Niche alternative
Ractive.js Reactive templates by The Guardian
Cycle.js Reactive newcomer

41. ROUTERS

42. ROUTERS
react-router - React
reactive-router - React
flow-router - Meteor
router5

43. Job Trends
Indeed

44. Job Trends II
Indeed

45. ARCHITECTURE
THE ART OF WASTING
SPACE

46. STATIC SITES
DYNAMIC SITES
REST
RELAY/FALCOR

47. THE GRID

48. Design is the beauty of
turning constraints into
advantages
- Aza Raskin

49. npmFOR KEEPING THINGS
TOGETHER

50. Module Counts
modulecounts.com

51. 182k+ packages and growing fast
Dependency management
Package authoring
Both frontend/backend

52. package.json
{
"name": "react‐component‐boilerplate",
"description": "Boilerplate for React.js components",
"author": "Juho Vepsalainen",
"version": "0.6.0",
"scripts": {
"start": "node lib/dev_server.js",
"test": "jest && npm run lint",
"gh‐pages": "webpack ‐‐colors",
"deploy‐gh‐pages": "node ./lib/deploy_gh_pages.js",
"dist‐all": "npm run dist && npm run dist‐min",
"dist": "webpack ‐‐colors",
...
},
"main": "dist‐modules/index.js",
"dependencies": {...},
"devDependencies": {...},
...
}

53. BUILD TOOLS
HARD TO LIVE WITHOUT

54. 1ST GEN.
Make
2ND GEN.
Grunt
Gulp
Broccoli
3RD GEN.
Browserify
Webpack
JSPM

55. MAKE

56. PATH := node_modules/.bin:$(PATH)
SHELL := /bin/bash
build/templates.js: templates/*.handlebars
mkdir ‐p $(dir $@)
handlebars templates/*.handlebars > $@
Building JavaScript projects with Make

58. module.exports = function(grunt) {
grunt.initConfig({
jshint: {
files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
options: {
globals: {
jQuery: true
}
}
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
}
});
grunt.loadNpmTasks('grunt‐contrib‐jshint');
grunt.loadNpmTasks('grunt‐contrib‐watch');
grunt.registerTask('default', ['jshint']);
};
Grunt documentation

60. var gulp = require('gulp');
var del = require('del');
var paths = {
scripts: ['client/js/**/*.coffee', '!client/external/**/*.coffee']
};
// Not all tasks need to use streams
// A gulpfile is just another node program and you can use all packages available on npm
gulp.task('clean', function(cb) {
// You can use multiple globbing patterns as you would with `gulp.src`
del(['build'], cb);
});
...
// Rerun the task when a file changes
gulp.task('watch', function() {
gulp.watch(paths.scripts, ['scripts']);
});
// The default task (called when you run `gulp` from cli)
gulp.task('default', ['watch', 'scripts']);
Gulp README

62. ...
// create tree for files in the app folder
var app = 'app'
app = pickFiles(app, {
srcDir: '/',
destDir: 'appkit' // move under appkit namespace
})
app = preprocess(app)
// create tree for files in the styles folder
var styles = 'styles'
styles = pickFiles(styles, {
srcDir: '/',
destDir: 'appkit' // move under appkit namespace
})
styles = preprocess(styles)
...
broccoli-sample-app

64. browserify index.js ‐o bundle.js

66. var webpack = require('webpack');
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /.css$/,
loaders: ['style', 'css']
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin()
]
};

68. <!doctype html>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('lib/main');
</script>
JSPM - Getting Started Glen Maddern's video tutorial
HTTP2

69. PRODUCTIVITY
FOR FUN AND PROFIT

70. CLASSIC
ERA
Ctrl-R
AUTOMATIC
ERA
LiveReload
Browsersync
LIVE
EDITING
React Hot Loader
LiveReactload

71. CSS PROCESSORS
BECAUSE VANILLA ISN'T
ENOUGH

72. BEM, OOCSS,
SMACSS
SOLVING CSS WITHIN CSS

73. SASS, LESS, STYLUS
BETTER LANGUAGES

74. POSTCSS, CSSNEXT
EXTENSIONS

75. Deconfusing Pre- and Post-processing

76. INLINE CSS (REACT)
BACK TO THE FUTURE?

77. CSS MODULES
ELIMINATES GLOBALS,
MODULARITY++

78. ES2015, ES2016, ...
VERSION PER YEAR

79. BABEL
THE FUTURE NOW

80. JavaScript compiler
JSX support out of box
Easy to set up
See also Google Traceur

81. altJSALTERNATIVES TO
VANILLA

82. CoffeeScript
TypeScript
Flow - Gradual typing
And many others

83. LINTINGTO KEEP BUGS AT BAY

84. ESLINT
PLUGGABLE LINTING FOR
JAVASCRIPT

85. CSSLINT
RULES FOR IMPROVING
YOUR CSS

86. TESTINGTO MAKE THINGS WORK
FOR SURE

87. SELENIUM
PROTRACTOR
JASMINE
MOCHA
...

88. WEB COMPONENTS
THE FUTURE?

89. Fragmentation (Bootstrap for AngularJS, Ember, React, ...)
What if there was only one canonical version of libraries?
Improved reuse, sharing across projects, less waste

90. CONCLUSION
TO RECAP

91. Prepare to clear the decks often
A lot to learn but focus pays off
Towards a component based future?

92. QUESTIONS?

93. MADE WITH LOVE IN FINLAND BY
JUHO VEPSÄLÄINEN

94. READ MY BOOK
SURVIVEJS - WEBPACK AND REACT