Building Customer.io with Ember.js

We recently rebuilt Customer.io's app in Ember.js from "first commit" to a production deploy over 10 days. I describe the process that worked well for us, and share some lessons learned.

Transcript

1. 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
2. JOHN ALLISON @JRALLISON Wednesday, July 18, 12
3. PREVIOUSLY: CHALLENGEPOST GILT GROUPE WEPLAY CO-FOUNDER CUSTOMER.IO Wednesday, July 18, 12
4. Wednesday, July 18, 12
5. WHY EMBER? Wednesday, July 18, 12 Rails background looking for ways to create great experiences community same philosophy as rails convention over configuration
6. START PLAYING. Wednesday, July 18, 12 Gain experience with ember before rebuilding your app
7. 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
8. 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
9. 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
10. 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
11. NAVIGATION NAVIGATION Wednesday, July 18, 12 Routers and outlets: gamechanger for me gave the app a skeleton
12. Screenshot of layout and sidebar Wednesday, July 18, 12
13. YoUR APP’S LAYOUT APPLICATION VIEW TEMPLATE Wednesday, July 18, 12
14. CONNECTING THE SIDEBAR TO THE APPLICATION EMBER’S ROUTER Wednesday, July 18, 12
15. 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
16. Router Controller Template View Gets DATA from controller SENDS ACTIONS To THE ROUTER View handles all dom events Template context Wednesday, July 18, 12
17. Router Controller Template View An Example WHAT DOES CONNECTOUTLET DO? Wednesday, July 18, 12 looks like data flying everywhere but, based on solid conventions
18. 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
19. Screenshot of layout and sidebar Wednesday, July 18, 12
20. VIEWS BUILDING VIEWS Wednesday, July 18, 12
21. Build your views with stubbed Data objects Wednesday, July 18, 12
22. 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
23. 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
24. UI TRANSITIONS UI UI TRANSITIONS TRANSITIONS TRANSITIONS Wednesday, July 18, 12
25. 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
26. DATA Ember DATA Wednesday, July 18, 12
27. 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
28. Modifying DATA Wednesday, July 18, 12
29. isLoaded isDirty isSaving isDeleted EMBER DATA MODEL PROPERTIES isError isNew isValid isPending Wednesday, July 18, 12
30. 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.
31. EDIT WITHOUT FEAR (OF SAVING TO THE DATABASE) Wednesday, July 18, 12
32. Wednesday, July 18, 12
33. EMBER DATA Showing Unsaved CHANGES Wednesday, July 18, 12
34. PERSISTING DATA Wednesday, July 18, 12
35. great for simple things Wednesday, July 18, 12
36. Customize to your API Wednesday, July 18, 12
37. 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.
38. 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
39. 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.
40. NAVIGATION BUILD VIEWS Modify DATA PERSIST DATA HANDLE ERRORS UI TRANSITIONS NOW ITERATE Wednesday, July 18, 12
41. 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.
42. RTFS (Read the FANTASTIC SOURCE) Wednesday, July 18, 12
43. @JRALLISON john@CUstomer.io THANKS THANKS @JRALLISON john@CUstomer.io Wednesday, July 18, 12