Tweet
Tweet

Slide 1

Slide 1 text

@EmberSherpa

Slide 2

Slide 2 text

WRK TG Ember Mentoring Support Upgrades

Slide 3

Slide 3 text

A framework for creating ambitious web applications

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Why choose ?

Slide 9

Slide 9 text

ambitious web applications !== code

Slide 10

Slide 10 text

ambitious web applications ≈ code + team

Slide 11

Slide 11 text

ambitious web applications ≈ code + team + tools

Slide 12

Slide 12 text

ambitious web applications ≈ code + team + tools + ideas

Slide 13

Slide 13 text

code team tools ideas

Slide 14

Slide 14 text

happy paths around icebergs

Slide 15

Slide 15 text

Your team

Slide 16

Slide 16 text

Your team Experience

Slide 17

Slide 17 text

Your team Experience Architecture

Slide 18

Slide 18 text

Your team Experience Architecture Best Practices

Slide 19

Slide 19 text

Your team Experience Architecture Best Practices Improving

Slide 20

Slide 20 text

Your team Experience Architecture Best Practices Improving Changes

Slide 21

Slide 21 text

Your team Problem humans have limits

Slide 22

Slide 22 text

Problem humans have limits Solution Conventions Your team

Slide 23

Slide 23 text

Conventions best practices baked in Your team

Slide 24

Slide 24 text

Conventions best practices baked in Being expert not required • Excellent Guides • Readable source code • Common solutions • Strong community Your team

Slide 25

Slide 25 text

Conventions best practices baked in Architecture • URLs are important • URLs matched to route • URLs converted to params • Params used to query data • Data bound to template Your team

Slide 26

Slide 26 text

Conventions best practices baked in Nested Routes • Parent route loaded first • Child rendered into parent • Free loading and error states Your team

Slide 27

Slide 27 text

Conventions best practices baked in Project layout • EmberCLI based on conventions • Every project looks same • Predictable directory structure • Hierarchy mirrored by directories Your team

Slide 28

Slide 28 text

makes you Pro’s with conventions Your team

Slide 29

Slide 29 text

Build tools

Slide 30

Slide 30 text

Build tools AMD or CommonJS

Slide 31

Slide 31 text

Build tools Grunt, Gulp & Webpack AMD or CommonJS

Slide 32

Slide 32 text

Build tools SASS, LESS, PostCSS … AMD or CommonJS Grunt, Gulp & Webpack

Slide 33

Slide 33 text

Build tools ES5, ES6, ES7 AMD or CommonJS Grunt, Gulp & Webpack SASS, LESS, PostCSS …

Slide 34

Slide 34 text

Build tools Build AMD or CommonJS Grunt, Gulp or Webpack SASS, LESS, PostCSS … ES5, ES6 or ES7

Slide 35

Slide 35 text

Build tools Test AMD or CommonJS Grunt, Gulp or Webpack SASS, LESS, PostCSS … ES5, ES6 or ES7 Build

Slide 36

Slide 36 text

Build tools Test AMD or CommonJS Grunt, Gulp or Webpack SASS, LESS, PostCSS … ES5, ES6 or ES7 Build Deploy

Slide 37

Slide 37 text

Build tools Problem How do you wire all of this together?

Slide 38

Slide 38 text

Problem How do you wire all of this together? Solution EmberCLI Build tools

Slide 39

Slide 39 text

Build tools EmberCLI everything developer needs to be productive

Slide 40

Slide 40 text

Build tools EmberCLI everything developer needs to be productive Preprocessors • ES6 & ES7 with Babel.js • SASS, LESS, PostCSS… • HTMLBars

Slide 41

Slide 41 text

Build tools EmberCLI everything developer needs to be productive Generators • Routes & Components • Tests • HTTP Mocks & Proxy

Slide 42

Slide 42 text

Build tools EmberCLI everything developer needs to be productive Test Runner • Acceptance, Integration & Unit Tests • CI server test runner • Browser test runner

Slide 43

Slide 43 text

Build tools EmberCLI everything developer needs to be productive Addons • 1000+ addons • emberaddons.com - all addons • emberobserver.com - by categories

Slide 44

Slide 44 text

Build tools EmberCLI everything developer needs to be productive Built in commands • new - start new app • server - run server with Live Reload • install - install addon • addon - generate addon

Slide 45

Slide 45 text

start building today with EmberCLI Build tools

Slide 46

Slide 46 text

New ideas

Slide 47

Slide 47 text

New ideas • Class based structure • Models • Custom Events

Slide 48

Slide 48 text

New ideas • Easy to get started • HTML templates • Two-way bindings • Directives

Slide 49

Slide 49 text

New ideas • One-way data flow • Virtual DOM • DOM Diffing • Server side rendering

Slide 50

Slide 50 text

New ideas Problem adopting new ideas requires complete rewrite

Slide 51

Slide 51 text

New ideas Problem adopting new ideas requires complete rewrite Solution Stability without stagnation

Slide 52

Slide 52 text

New ideas Stability without Stagnation future-proof your application

Slide 53

Slide 53 text

New ideas Stability without Stagnation future-proof your application 6 week release cycles • New features every 6 weeks • Canary for experimentation • Beta on path to stable

Slide 54

Slide 54 text

New ideas Stability without Stagnation future-proof your application Semver • MAJOR - remove deprecations • MINOR - add features & deprecations • PATCH - bug fixes MAJOR.MINOR.PATCH

Slide 55

Slide 55 text

New ideas Stability without Stagnation future-proof your application Incremental upgrades • Acceptance Tests • deprecation warnings • 1 iteration per Ember version

Slide 56

Slide 56 text

New ideas Stability without Stagnation future-proof your application Adopt new ideas • React’s VirtualDOM & DOM Diffing • Ember 1.13 shipped DOM Diffing • Free Upgrade

Slide 57

Slide 57 text

adopt new ideas without rewrites New ideas

Slide 58

Slide 58 text

Choose Turns your team into Pros Gives your team tools to be productive Makes it easy to adopt new ideas

Slide 59

Slide 59 text

@EmberSherpa