Bleeding edge JS

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

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

<meta name="viewport"
      content="width=device-width, initial-scale=1">

<style>
.menu { width: 100% }
.facet_sidebar {
  display: none;
}
@media (min-width: 600px) {
  .facet_sidebar {
    display: block;
  }
}
</style>

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

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?
  • The default language is TypeScript

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

Deets

• Slides: stuff.coffeecode.net/2017/javascript_bloody_js
• Email: dscott@laurentian.ca
• Social: @denials / +DanScottCAN
• Blog: coffeecode.net

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