Building Customer.io with Ember.js

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 [email protected] THANKS THANKS @JRALLISON [email protected] Wednesday, July 18, 12