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