Front End from the Front LinesBuilding, Testing and Deploying Modern Web Apps

Nick Van Exan @nvanexan

Outline• The Velocity Economy (VE) + Moneyball for UX

• The Modern Front End Workflow:

• Design: Rapid Prototyping with Sketch + InVision

• Build: Automated Front-End Builds and Tooling

• Test: Automated E2E tests

• Deploy: Continuous integration + deployment to the cloud with VSTS and Azure

• Q&A / AMA

The Velocity Economy

The Velocity Economy

• Small teams

• Fixed sums of capital

• Testable hypotheses

• Rapid iteration

• Strong focus on design (esp. UX design)

Success in the Velocity Economy is intimately tied to the quality of UX.

- Geoff Teehanhttps://medium.com/habit-of-introspection/the-ux-fund-

investing-50-000-in-10-companies-10-years-later-6fc65bd35e7a#.cdbe2qcqd

The UX Fund: Investing $50,000 in 10 companies, 10 years later

Hypothesis: “Companies that focus on delivering great user experiences will see it

reflected in their stock price.”

• Apple • Google • JetBlue • Netflix • Nike • Progressive Insurance • Target • Yahoo! • RIM (Blackberry) • Electronic Arts

UX Fund Companies

UX Fund vs. Indices (1 Year Results)

UX Fund: 39.3% The Nasdaq: 29.1% Nasdaq 100: 28.7%

NYSE: 15.0% S&P 500: 10.3%

UX Fund vs. Indices (1 Year Results)

Year 1: Gain $19,533.48 Year 10: Gain $250,044.52 (unrealized)

Year 1: 6 of 10 stocks gained Year 10: 9 of 10 stocks gained

Year 1: NASDAQ 29.1%, UX Fund 39.3% Year 10: NASDAQ 93.2%, UX Fund 450.1%

UX Fund vs. NASDAQ (1 Year and 10 Year Growth)

If a solid UX is the foundation of success in the Velocity Economy, how can we

guarantee more successful outcomes?

Moneyball for Digital ProductsWhat’s our key metric?

What’s the on-base-percentage for UX?

Time to User Feedback

UX involves a lot of assumptions. Great designers and teams will get many right.

But there’s always things you did not / could not foresee.

– http://firstround.com/review/From-0-to-1B-Slacks-Founder-Shares-Their-Epic-Launch-Strategy/

From 0 to $1B - Slack's Founder Shares Their Epic Launch Strategy

–Stewart Butterfield

“We begged and cajoled our friends at other companies to try it out and give us feedback,” Butterfield recalls. There was Cozy, which sells rental management software for landlords and tenants, and the music service Rdio. “We had maybe six to ten companies to start with that

we found this way.”

–Stewart Butterfield

“Suddenly we saw what the product looked like from the perspective of a much larger

team, and it was pretty gnarly.”

–Stewart Butterfield

“We started inviting teams in batches and watched what happened. Then we made some changes, watched what happened,

made some more changes...”

Bottom Line: Ship early. Ship often.

How to ship early, shift often?

• Rapidly prototype design solutions with Sketch and Invision

• Automate tedious build processes with tooling and task runners

• Automate E2E tests with tools like Protractor

• Use VSTS + Azure to set up a CI / CD pipeline

1. DesignRapid Prototyping with Sketch and Invision

Sketch

• Lightweight vector graphics tool specifically designed for creating digital products

• Rendering is close to web

• Built in grids

• Multiple artboards / plugins make workflow super nice

Invision

• Web application for creating and sharing simple prototypes glued together with hotspots

• Super useful for gaining multi-stakeholder commentary on mock-ups

• Great features like hotspot templates, liveshare, inspect mode (beta), real video user testing

• Plays real nice with Sketch and can pair a prototype with any JIRA issue

Demo

2. BuildAutomating UX Dev with Tooling and Task Runners

Building front-end web applications is no longer a

simple affair

Lots of front-end dependencies / libraries to

manage

Some code like SCSS has to be compiled before you can

preview results

May be writing JS in ES6/ES7 or writing TypeScript, in which case you need to transpile your code

All of your code needs to be minified / uglified for production

Code needs to be cached so that browser downloads only

updated modules

Code needs to be split and chunked so that only the minimal code necessary to render a view

is sent down the wire

May have dead code in your app not being used, don’t want to

ship into prod

May have several release environments, each with different

configuration settings / params that have to be injected before runtime

Strategies for Successful Automated Front-End Build Systems

• Use Yarn + NPM as package manager for app and dev dependencies

• Use Gulp as task runner to automate build / compile steps for different environments

• Angular2 / React - use Webpack as module bundler and base build system

• Goal: to control/run builds with simple CLI commands and JSON config files

NPM

• Package Manager that runs on Node

• Makes it super easy to add, remove, upgrade dev and app dependencies

• Can store common tasks in scripts in package.json, which get run by team members or cloud servers

Yarn

• A new JavaScript package manager built by Facebook, Google, Exponent and Tilde

• Makes NPM installs more consistent (100% deterministic) and much faster with better caching

• Big code bases have seen a 10x reduction in install times

• Also locks down your NPM dependencies by default

Gulp

• Task runner / streaming build system

• Lets your devs write highly customizable build code in the language they use every day / best language ever: JS

• Uses Node’s file streaming to give you fast builds that don't write intermediary files to disk

Webpack

• Began as a module bundler but has become incredibly powerful tool for building modern web apps

• Treats everything - literally everything (JS/HTML/CSS/Images/Fonts) as a module - and then figures out what modules need to be loaded at any time

Webpack

• Powerful features:

• Hot Module Replacement

• Tree Shaking

• Caching

• Code Splitting / Commons Chunking

Dev Prod

Test

Demo

3. TestEnsuring UX Quality with E2E Tests

Modern browsers are better at following standards / spec than 5-10 years ago, but still lots of

gotchas…

And how do you know what you just built / added didn’t break

something else?

Problem: you may have to actually click / interact with app

to verify UX

Solution: Automated E2E Tests

1. Script a browser to do what your users commonly do

2. Record browser’s activity and save to the cloud

3. QA and Chill

Selenium Webdriver

• Selenium is a suite of tools specifically for automating web browsers

• Webdriver allows you to drive a browser natively as a user would either locally or on a remote machine using the Selenium Server

• Key: can pilot any web browser using a standardized API

Protractor• End-to-end test framework for AngularJS

applications

• Runs tests against your application running in a real browser, interacting with it as a user would (wraps / uses Selenium Webdriver)

• Key: automatic waiting - don’t have to worry about waiting for your test and webpage to sync, can automatically execute the next step in your test the moment the webpage finishes pending tasks

Other Tools

• Nightwatch.js

• runs on NodeJS, still leverages Selenium

• big in the React community

• has it’s own cloud testing platform, NightCloud

Demo

4. DeployEnabling CI and CD with Azure and VSTS

Basic Setup

• 2 builds (debug + release)

• 1 Linux build agent

• 3 release environments (dev + test + prod)

• 1 Cloud test capture service (Browserstack)

Build Process

Release Process

1. Unpackage relevant zip

2. Replace

config tokens with env vars

3. Repackage relevant zip

Release Process Cont’d…

• Automatic release to dev and test

• Dev gets debug build, test gets release build

• For test environment

• Run e2e / smoke tests

• Store videos in Browserstack and test results in VSTS

• Deploy to prod

• Can be manual (after review of e2e / smoke tests)

• Or can be automatic if e2e tests are passing

Thank You!