frontend infrastructure (emberconf 2015)

63
Bring Sanity to your Frontend Infrastructure with EmberJS @samselikoff

Upload: samselikoff

Post on 15-Jul-2015

593 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Frontend infrastructure (EmberConf 2015)

Bring Sanity to your!Frontend Infrastructure!with EmberJS

@samselikoff

Page 2: Frontend infrastructure (EmberConf 2015)

Sam Selikoff

TED

Burlington, VT

Economics, snowboarding, music

Page 3: Frontend infrastructure (EmberConf 2015)

A story

Page 4: Frontend infrastructure (EmberConf 2015)

Acme, Inc

Page 5: Frontend infrastructure (EmberConf 2015)

Web appCodebase

Page 6: Frontend infrastructure (EmberConf 2015)

monolith

Page 7: Frontend infrastructure (EmberConf 2015)

growth

Page 8: Frontend infrastructure (EmberConf 2015)

Data layer Interfaces

API

Page 9: Frontend infrastructure (EmberConf 2015)

infrastructure

Page 10: Frontend infrastructure (EmberConf 2015)

Backend

Page 11: Frontend infrastructure (EmberConf 2015)
Page 12: Frontend infrastructure (EmberConf 2015)

Independent

Page 13: Frontend infrastructure (EmberConf 2015)

Scalable

Page 14: Frontend infrastructure (EmberConf 2015)

Consistent

Page 15: Frontend infrastructure (EmberConf 2015)

Frontend

Page 16: Frontend infrastructure (EmberConf 2015)

Web appCodebase

Page 17: Frontend infrastructure (EmberConf 2015)

Data layer Interfaces

API

Page 18: Frontend infrastructure (EmberConf 2015)

js/css libs!build pipeline!data layer!deployments!testing

?

Page 19: Frontend infrastructure (EmberConf 2015)

• Wastes time!• Hard to share!• Slows down new devs

Page 20: Frontend infrastructure (EmberConf 2015)

Hampers growth

Page 21: Frontend infrastructure (EmberConf 2015)

Ember/CLIImprove!infrastructure!today

Discover!infrastructure!tomorrow

Page 22: Frontend infrastructure (EmberConf 2015)

Today

Page 23: Frontend infrastructure (EmberConf 2015)

Less boilerplate

Page 24: Frontend infrastructure (EmberConf 2015)

ember new serve test generate …

Page 25: Frontend infrastructure (EmberConf 2015)

Similar!directory structure

Page 26: Frontend infrastructure (EmberConf 2015)

Similar!architecture

Page 27: Frontend infrastructure (EmberConf 2015)

Consistent answers

Page 28: Frontend infrastructure (EmberConf 2015)

Conventionseliminate trivial differences

that hold us back

Page 29: Frontend infrastructure (EmberConf 2015)

Deploys

Page 30: Frontend infrastructure (EmberConf 2015)

ember build

Page 31: Frontend infrastructure (EmberConf 2015)

wrote a build script for CI

Page 32: Frontend infrastructure (EmberConf 2015)

Index JS CSS

Page 33: Frontend infrastructure (EmberConf 2015)

configure backends

Page 34: Frontend infrastructure (EmberConf 2015)

wrote an addon

Page 35: Frontend infrastructure (EmberConf 2015)

ember deploy

Page 36: Frontend infrastructure (EmberConf 2015)

Deploy Server

Page 37: Frontend infrastructure (EmberConf 2015)

1. manual!2. shared script!3. deploy addon!4. deploy server

Page 38: Frontend infrastructure (EmberConf 2015)

Testing

Page 39: Frontend infrastructure (EmberConf 2015)

ember test

Page 40: Frontend infrastructure (EmberConf 2015)

xhr intercpetor

Page 41: Frontend infrastructure (EmberConf 2015)

wrote an addon

Page 42: Frontend infrastructure (EmberConf 2015)

Server Client

Page 43: Frontend infrastructure (EmberConf 2015)

ember generate factory product

Page 44: Frontend infrastructure (EmberConf 2015)

1. manual!2. shared script!3. test addon!4. clientside server

Page 45: Frontend infrastructure (EmberConf 2015)

Redundancies

Abstractions

identify

and

Page 46: Frontend infrastructure (EmberConf 2015)

Tomorrow

Page 47: Frontend infrastructure (EmberConf 2015)

Staying up to date

Page 48: Frontend infrastructure (EmberConf 2015)

semver +!

CLI conventions

Page 49: Frontend infrastructure (EmberConf 2015)

Flexibility

Page 50: Frontend infrastructure (EmberConf 2015)
Page 51: Frontend infrastructure (EmberConf 2015)
Page 52: Frontend infrastructure (EmberConf 2015)

New standards and best practices

Page 53: Frontend infrastructure (EmberConf 2015)

best practices!standards

Page 54: Frontend infrastructure (EmberConf 2015)

Promises!Rendering layer!API standards!ES6 modules!CLI tools!FastBoot

Page 55: Frontend infrastructure (EmberConf 2015)

Closing

Page 56: Frontend infrastructure (EmberConf 2015)
Page 57: Frontend infrastructure (EmberConf 2015)

?

Page 58: Frontend infrastructure (EmberConf 2015)

Acme was right tostart with a monolith

Page 59: Frontend infrastructure (EmberConf 2015)

But they don’t what their apps will look

like in 5 years

Page 60: Frontend infrastructure (EmberConf 2015)

Ember is not just a frameworkIt’s a philosophy

Page 61: Frontend infrastructure (EmberConf 2015)

1. Give real devs the tools to tinker

Page 62: Frontend infrastructure (EmberConf 2015)

2. Deliberately fold in shared solutions

Page 63: Frontend infrastructure (EmberConf 2015)

InnovateShare

&

@samselikoff