TechTalk #85 : Latest Frontend Technologies

FRONTEND
IN 2015
CLEAR THE DECKS
VIEW ON GITHUB

USER EXPERIENCE
CLIENT EXPERIENCE
DEVELOPER EXPERIENCE

Always bet on JS!
- Brendan Eich

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

INLINE JAVASCRIPT
AJAX (ASYNC)
SINGLE PAGE APPLICATIONS
UNIVERSAL JAVASCRIPT

PICK YOUR POISON
FRAMEWORKS LIBRARIES

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

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

{{#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}}

<section id="main">
  <input id="toggle‐all" type="checkbox">
  <ul id="todo‐list"></ul>
</section>
// bindings at JavaScript side!

<section id="main">
  <input id="toggle‐all" type="checkbox"
    {{#unless todos_not_completed}}checked="checked"{{/unless}}>
    {{#each todos}}
      {{> todo}}
    {{/each}}
  </ul>
</section>

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

LIBRARIESFOR SPECIFIC PROBLEMS

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

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

CAT COUNTER
I've seen 0 cats
Saw a Cat

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 });
  }
}

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

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

<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 }}'>
    {{#items:i}}
      <!‐‐ The {{>item}} partial is defined in the script tag below ‐‐>
      {{>item}}
    {{/items}}
  </ul>
</section>

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
        })
      )
    )
  ])
}

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

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

ARCHITECTURE
THE ART OF WASTING
SPACE

STATIC SITES
DYNAMIC SITES
REST
RELAY/FALCOR

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

npmFOR KEEPING THINGS
TOGETHER

Module Counts
modulecounts.com

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

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": {...},
  ...
}

BUILD TOOLS
HARD TO LIVE WITHOUT

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

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

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

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

browserify index.js ‐o bundle.js

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()
  ]
};

<!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

PRODUCTIVITY
FOR FUN AND PROFIT

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

CSS PROCESSORS
BECAUSE VANILLA ISN'T
ENOUGH

BEM, OOCSS,
SMACSS
SOLVING CSS WITHIN CSS

SASS, LESS, STYLUS
BETTER LANGUAGES

Deconfusing Pre- and Post-processing

INLINE CSS (REACT)
BACK TO THE FUTURE?

CSS MODULES
ELIMINATES GLOBALS,
MODULARITY++

ES2015, ES2016, ...
VERSION PER YEAR

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

CoffeeScript
TypeScript
Flow - Gradual typing
And many others

ESLINT
PLUGGABLE LINTING FOR
JAVASCRIPT

CSSLINT
RULES FOR IMPROVING
YOUR CSS

TESTINGTO MAKE THINGS WORK
FOR SURE

SELENIUM
PROTRACTOR
JASMINE
MOCHA
...

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

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

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

READ MY BOOK
SURVIVEJS - WEBPACK AND REACT

TechTalk #85 : Latest Frontend Technologies

More Related Content

Viewers also liked (20)

Similar to TechTalk #85 : Latest Frontend Technologies (11)

More from bincangteknologi (7)

Recently uploaded (20)

TechTalk #85 : Latest Frontend Technologies