Going live with ES2015

by Mike Cravey

Mike Cravey

Head of Web Development at Student.com

Process

  • Problem
  • Solution
  • POC
  • Pilot
  • Iterate

Symptom

  • race conditions
  • regression in "untouched" code

Cause

  • lack of modularlization/dependency mgmt
  • concat
  • globals
  • auto-executing

Goals

  • modularized
  • invokable
  • extensible
  • testable
  • loosely coupled
    • separation of DOM and service layers
    • pub/sub

Discussion

  • team-wide
  • research ahead of time
  • discussed based on goals plus:
    • expected future-proofness
    • ease of comprehension
    • excitement

ES2015 -> CommonJS -> Browser bundle

POC

bare minimum to prove the idea can work

Testing pyramid

Resourcing

Pilot

  • proving of implementation
  • resist urge to fix "all the things"

Iterate

  • long-tail: module by module

Future

  • changes in decisions

ES2015

  • modules
  • classes
  • default parameters + destructuring
  • const & let
  • arrows
  • template strings
  • future

modules

  • explicit method scoping
    • use linter to expose unused declarations
import * as stringUtils from 'student/src/utilities/helpers/string';
import { renderTemplate } from 'student/src/utilities/templates/render';

export default function articlesFactory( element, options ) {
...
}

Default parameters & destructuring

  • holy first class language, batman!
  • low arity
// stickyNav.js
export function init( {
    yScrollPos: yScrollPos = 240,
    fixedClass: fixedClass = 'fixed',
    stickySelector: stickySelector = '.page-nav',
    breakpoint: breakpoint = 800,
} = {} ) {
    ...
}

// main.js
import { init as stickyNav } from './stickyNav';

stickyNav();

Const & let

  • block scoped
  • define a policy and enforce

Future

  • loader spec
    • system.js
  • set
  • Extended Native APIs

Build

  • POC vs prod
  • Babel
  • browserify
  • npm

POC vs prod

  • npm scripts vs make

Babel

  • ES2015 in, CommonJS out
  • babel-core v6+ is explicit in configuration

Browserify & npm

  • CommonJS
  • picks up npm modules
    • Assert - wrote for file size and simpler use case
    • RSVP - file size and finally functionality

Lessons learned

  • process
  • technology roadmap
  • build process

Process lessons

  • mitigate risk by keeping proofs small and deliverable

problem -> solution -> poc -> pilot -> rinse & repeat

Tech lessons

  • be intentional
  • everything has a trade-off
  • no sacred cows
  • nothing is written in stone

Build lessons

  • don't solve problems before their time
  • adoption comes with responsibility
  • theory is great and all, but shipping code matters

We are hiring

Join us @ https://www.student.com/careers

  • Frontend
  • Web (full stack/backend)
  • Micro-service

Thank you

Slides available @ http://craveytrain.com/slides/live_with_es2015/

References