Bleeding edge JS

the 2017 edition

Dan Scott (dscott@laurentian.ca)

Associate Librarian, Chair of the Library & Archives, Systems Librarian, …

March 24, 2017

Review!

  • Polyfills
  • JS library development pushes ECMAScript, CSS, HTML to evolve
  • Free software licenses enable everyone to benefit and contribute
  • Browser Dev Tools

Current JS build tools


nodejs, npm, Grunt, and Gulp

  • Chrome V8 JavaScript engine was really fast, but sandboxed for security reasons
  • Free software license allowed a group to fork V8 to allow file I/O, etc
  • … and thus nodejs was born!
  • Asynchronous and event-driven, not forking processes or threads
  • https://nodejs.org/en/about/

  • nodejs Package Manager
    "The npm registry hosts almost half a million packages of free, reusable code — the largest software registry in the world." https://www.npmjs.com/
  • package.json lists the packages your project depends on
  • npm install downloads those packages and their dependencies

  • npm and package.json are not just for nodejs:
    • Manages any JavaScript package in the npm registry
    • Identifies test and build scripts, like grunt serve
    • Let's take a look…

JS build tools: why?

  • Automated testing (linting, regression, unit, integration, performance)
  • Bundling hundreds of packages into one or more vendor files
  • Minifying and uglifying JSS & CSS; optimizing images
  • Transpiling:
    • Write ECMAScript 2017 (or other languages)
    • Generate ECMAScript 2015 (or lower) to run in targeted environments

JS build tools face-off

GruntGulp
File nameGruntfile.jsgulpfile.js
FormatJSONJavaScript
GoalsBuilding, testing, deploying packages

Grunt vs. Gulp?

It's really a wash...

Moving the web forward


Progressive Web Apps (PWAs)

From graceful degradation to progressive enhancement

Progressive Web Apps (PWAs)

  • Making web apps more like native apps:
    • Responsive: UI adapts to different devices
    • Fast to load and render
    • Secured by HTTPS
    • Reliable even with spotty (or no) network connectivity
    • Installable to your device home screen

Responsive web design

  • <meta name="viewport"> attribute
  • CSS media queries and relative units
  • Modernizr

Fast to load and render

  • Minimize your payloads
  • Cache common assets
  • Avoid synchronous loading
  • Load data as needed

Secured by HTTPS

  • Let's Encrypt offers free TLS certificates
  • There's no catch.
  • No, really! You just need to prove you control the hostname.
  • There's also (now) no excuse!

Reliable with spotty/no network

  • Introducing service workers (Chrome and Firefox)
    • Special JS that can intercept and modify network fetch requests
    • Requests can populate and access dedicated IndexedDB
  • Mozilla's Service Worker Cookbook: great examples
  • Google's sw-toolbox and sw-precache JS packages 👍

Installable to your device

  • manifest.json makes a web app installable
  • Like a native app as of March 2017
{
  "name": "Forest VR",
  "icons": [{
      "src": "./images/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
  }],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "start_url": "./index.html",
  "display": "standalone",
  "orientation": "landscape"
}

Auditing your PWA progress

  • Lighthouse audits web apps for quality
  • Focused on PWAs, but generally applicable
  • Chrome extension & command line tool

Free online course!

Intro to Progressive Web Apps (Udacity)

You know, in all your spare time…

Moving the web forward


Accelerated Mobile Pages (AMP)

We did an awful thing to the web

We made it slow

  • Ads (so many ads)
  • Trackers
  • Big blobs of JavaScript
  • Blocking images and videos

We made it slow

AMP is one way to fix that

Frameworks


Angular

Angular

  • It's a Google thing
  • 2.0.0 released September 2016
  • Rethink and rewrite of the AngularJS model-view-controller framework (released 2012)
  • Why the name change?

Angular: Hello World

npm install -g @angular/cli
ng new hello-world
cd hello-world
ng serve
ng eject --aot -pr
webpack -p

Angular: Components

Encapsulation of properties, style, and behaviour

import { Component, Input } from '@angular/core';
import { Faculty } from './faculty';
@Component({
  selector: 'faculty-detail',
  styleUrls: [ './faculty-detail.component.css' ],
  template: `
    <div *ngIf="faculty">
      <h2>{{faculty.name}} details!</h2>
      <div><label>id: </label>{{faculty.id}}</div>
      <div>
        <label>name: </label>
        <input [(ngModel)]="faculty.name" placeholder="name"/>
      </div>
    </div>
  `
})
export class FacultyDetailComponent {
  @Input() faculty: Faculty;
}

Angular: Services

  • Services isolate data access from component internals
  • Asynchronous (non-blocking)
  • Reusable by different components

Angular: Routing

Routes map URL paths and parameters to components

{
  path: 'detail/:id',
  component: FacultyDetailComponent
},

Angular: Tutorial

Get hands-on!

Frameworks


React

React

  • Components are a key React concept; they:
    • Return descriptions of how to be rendered
    • Can include methods attached to DOM lifecycle events
    • Favour composition and props over inheritance

React: Hello World

npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start

Preact

  • Clones the React ES6 API, with a 3kb payload
  • Discards some features needed only by IE8
  • preactjs.com

Polymer project

  • MOAR COMPONENTS
  • Building on the Web Component W3 standard
  • Declarative syntax
  • 2.0 will be released soon

Deets

Creative Commons License
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License