Slide 1

Slide 1 text

FIRST COMMIT TO PRODUCTION DEPLOY IN 10 days FIRST COMMIT TO PRODUCTION DEPLOY IN 10 days Ember.js A love story. Wednesday, July 18, 12

Slide 2

Slide 2 text

JOHN ALLISON @JRALLISON Wednesday, July 18, 12

Slide 3

Slide 3 text

PREVIOUSLY: CHALLENGEPOST GILT GROUPE WEPLAY CO-FOUNDER CUSTOMER.IO Wednesday, July 18, 12

Slide 4

Slide 4 text

Wednesday, July 18, 12

Slide 5

Slide 5 text

WHY EMBER? Wednesday, July 18, 12 Rails background looking for ways to create great experiences community same philosophy as rails convention over configuration

Slide 6

Slide 6 text

START PLAYING. Wednesday, July 18, 12 Gain experience with ember before rebuilding your app

Slide 7

Slide 7 text

Create An APP INSIDE YOUR APP BUILD A SIDE PROJECT Wednesday, July 18, 12 give yourself time to learn Ember conventions - managing/listening to state vs. callbacks - how ember objects work together great for small features in an existing application great for tinkering with on side projects

Slide 8

Slide 8 text

WIZARD: OUR FIRST EMBER PROJECT Wednesday, July 18, 12 enough complexity see gains by building it in ember small enough to not be overwhelmed learned a lot stubbed our toes

Slide 9

Slide 9 text

AFTER “WIZARD”, WE WERE CONFIDENT TO AFTER “WIZARD”, WE WERE CONFIDENT TO REBUILD OUR ENTIRE APP IN EMBER Wednesday, July 18, 12 Had several other experiences we thought Ember would be great for Wasn’t excited about having a ton of separate ember apps Start from scratch and get to feature parity ASAP

Slide 10

Slide 10 text

Separate THE concerns NAVIGATION BUILD VIEWS Modify DATA PERSIST DATA HANDLE ERRORS UI TRANSITIONS Wednesday, July 18, 12 When rebuilding, how do we make measurable progress? Ember decouples many concerns of the frontend You can focus on any one area at a time without impact the others

Slide 11

Slide 11 text

NAVIGATION NAVIGATION Wednesday, July 18, 12 Routers and outlets: gamechanger for me gave the app a skeleton

Slide 12

Slide 12 text

Screenshot of layout and sidebar Wednesday, July 18, 12

Slide 13

Slide 13 text

YoUR APP’S LAYOUT APPLICATION VIEW TEMPLATE Wednesday, July 18, 12

Slide 14

Slide 14 text

CONNECTING THE SIDEBAR TO THE APPLICATION EMBER’S ROUTER Wednesday, July 18, 12

Slide 15

Slide 15 text

WHAT DOES CONNECTOUTLET DO? SidebarController SidebarView sidebar_view.handlebars Wednesday, July 18, 12 connectOutlet creates the relationships that you need to render the view on the page

Slide 16

Slide 16 text

Router Controller Template View Gets DATA from controller SENDS ACTIONS To THE ROUTER View handles all dom events Template context Wednesday, July 18, 12

Slide 17

Slide 17 text

Router Controller Template View An Example WHAT DOES CONNECTOUTLET DO? Wednesday, July 18, 12 looks like data flying everywhere but, based on solid conventions

Slide 18

Slide 18 text

An Example WHAT DOES CONNECTOUTLET DO? Wednesday, July 18, 12 finds the controller and view with the name email passes in the email that matched the id in the URL, as an object

Slide 19

Slide 19 text

Screenshot of layout and sidebar Wednesday, July 18, 12

Slide 20

Slide 20 text

VIEWS BUILDING VIEWS Wednesday, July 18, 12

Slide 21

Slide 21 text

Build your views with stubbed Data objects Wednesday, July 18, 12

Slide 22

Slide 22 text

HOW DO I WANT TO DISPLAY MY DATA? WHAT DATA DO I NEED? Why use stubbed data? Wednesday, July 18, 12 A lot of this talk is from the perspective of exploring your interface Free to focus on building the experience you want without worrying about the rest of the stack

Slide 23

Slide 23 text

Parallelization Parallelization ParallelizationParallelization ParallelizationParallelization ParallelizationParallelization ParallelizationParallelization ParallelizationParallelization ParallelizationParallelization ParallelizationParallelization ParallelizationParallelization ParallelizationParallelization ParallelizationParallelization ParallelizationParallelization ParallelizationParallelization ParallelizationParallelization ParallelizationParallelization ParallelizationParallelization ParallelizationParallelization ParallelizationParallelization ParallelizationParallelization ParallelizationParallelization ParallelizationParallelization ParallelizationParallelization Wednesday, July 18, 12 Once you have views with stubbed data, a nice opportunity arises: two tracks: - focus on polishing the design with stubbed data - focus on replacing stubbed data with actual data worked great for our team due to our strengths

Slide 24

Slide 24 text

UI TRANSITIONS UI UI TRANSITIONS TRANSITIONS TRANSITIONS Wednesday, July 18, 12

Slide 25

Slide 25 text

DIRTY HACK? Wednesday, July 18, 12 debate on best way to do this in the ember community love to hear other ideas or ways of doing this at the bar

Slide 26

Slide 26 text

DATA Ember DATA Wednesday, July 18, 12

Slide 27

Slide 27 text

IS Alpha software EMBER DATA ! Wednesday, July 18, 12 great for modeling single objects (or lists of single types) not quite ready IMO for complex model descriptions (complex properties, etc) - some great work going into this as we speak from Tom & Yehuda, so will be much better shortly however, provides some great advantages

Slide 28

Slide 28 text

Modifying DATA Wednesday, July 18, 12

Slide 29

Slide 29 text

isLoaded isDirty isSaving isDeleted EMBER DATA MODEL PROPERTIES isError isNew isValid isPending Wednesday, July 18, 12

Slide 30

Slide 30 text

EMAIL EDITOR WHY WE BUILT IT LIKE THIS Wednesday, July 18, 12 our customers are editing live emails which can be sent in the background at any time. super important to change and review before saving.

Slide 31

Slide 31 text

EDIT WITHOUT FEAR (OF SAVING TO THE DATABASE) Wednesday, July 18, 12

Slide 32

Slide 32 text

Wednesday, July 18, 12

Slide 33

Slide 33 text

EMBER DATA Showing Unsaved CHANGES Wednesday, July 18, 12

Slide 34

Slide 34 text

PERSISTING DATA Wednesday, July 18, 12

Slide 35

Slide 35 text

great for simple things Wednesday, July 18, 12

Slide 36

Slide 36 text

Customize to your API Wednesday, July 18, 12

Slide 37

Slide 37 text

r a w Supplement with requests AJAX Wednesday, July 18, 12 instead of fighting ember-data in a few edge cases, I just went with ajax to get stuff done.

Slide 38

Slide 38 text

Error HANDLING Wednesday, July 18, 12 when saving data to your backend, ember-data doesn’t really handle errors right now. for a production app, we want to inform the users that there was an error

Slide 39

Slide 39 text

Modify adapter to add errors reported by the server Wednesday, July 18, 12 NOTE: server side errors aren’t fully fleshed out yet, and this is more of a hack.

Slide 40

Slide 40 text

NAVIGATION BUILD VIEWS Modify DATA PERSIST DATA HANDLE ERRORS UI TRANSITIONS NOW ITERATE Wednesday, July 18, 12

Slide 41

Slide 41 text

EMBER IS MOVING FAST 90k LINES OF CODE 20K CHANGED JUST 8 WEEKS AGO Wednesday, July 18, 12 good and bad caveat: lines of code includes a lot of supporting code doesn’t reflect lines of code in the ember.js library itself.

Slide 42

Slide 42 text

RTFS (Read the FANTASTIC SOURCE) Wednesday, July 18, 12

Slide 43

Slide 43 text

@JRALLISON [email protected] THANKS THANKS @JRALLISON [email protected] Wednesday, July 18, 12