The Chirpolith: Successfully Migrating A Messy App To Ember

Transcript

1. The Chirpolith: Successfully Migrating A Messy App To Ember Alex Rothenberg @alexrothenberg IoraHealth
4. Chirp Architecture over Time
6. 1. No clear end goal 2. Big Bang Releases 3. Getting more 
 complex 4. Lost momentum Aim towards a clean Ember App Small incremental releases Simplify Techniques to stay motivated Past mistakes New Guiding Principles
7. Router Url DOM Load Data DOM Same Architecture
8. Router Url DOM Load Data DOM Backbone with React View
9. DOM Load Data DOM Router Url DOM Ember using Backbone
10. Router Url DOM Load Data DOM Desired End State
12. Aiming towards a 
 greenfield Ember app
13. • 3 day training with Mike North Leveling up the team
14. $ ember new chirpolith
15. Small incremental releases by using existing
 Backbone code
16. AppRouter.map(function() { this.route('facesheet', { path: '/facesheet/:guid' }, function() { this.route('notes', function() { this.route('show', { path: '/:noteId' }); }); }); }); Router
17. export default Ember.Route.extend({ async model({ noteId }) { return await Iora.notes.getOrFetch(noteId); }); }); Route: facesheet/notes/show
18. export default Ember.Component.extend({ didRender() { this._super(...arguments); const bbView = new Iora.Views.Notes.Show({ note: this.get('note') }); this.set('_bbView', bbView); bbView.setElement(this.$()); bbView.render(); } }); Component: note-detail
19. export default Ember.Component.extend({ … willDestroyElement() { this._super(...arguments); const bbView = this.get('_bbView'); if (bbView) { bbView.leave(); this.set('_bbView', null); } } }); Component: note-detail
22. <a href=“#facesheet/charles-123/notes”>
23. export function initialize(appInst) { const router = appInst.lookup(‘router:main'); const hashLoc = appInst.lookup('location:hash'); hashLoc.onUpdateURL((url)=> { if (url.startsWith(‘/#facesheet’)) { const restOfUrl = url.substr(2); router.replaceWith(`/${restOfUrl}`); } }); } An instance initializer
24. export default Route.extend({ beforeModel(transition) { transition.abort(); const locationHash = window.location.hash; const bbUrl = this.bbUrl(locationHash); window.location.replace(bbUrl); } }); Route: not-found
25. • We kept releasing behind a feature toggle
 • After 6 weeks migrated all 32 routes … and enabled for our users Navigation was sloooow
27. Small incremental releases Unwrap one component
29. Ember Wrap Component BB View BB View A Decompose into a Smaller Problem BB View B BB View C
30. Ember Wrap Component B Ember Wrap Component A Ember Wrap Component C Ember Wrap Component Ember Component BB View A Decompose into a Smaller Problem BB View B BB View C
31. Ember Wrap Component B Ember Component B Ember Wrap Component A Ember Wrap Component C Ember Component A Ember Component C Ember Wrap Component Ember Component Decompose into a Smaller Problem
32. What about the data?
33. • Root elements usually
 • Same resource with multiple URLs
 • Some non-restful URLs
 • Homegrown errors & pagination Our API Was Not as Conventional 
 (as We Had Thought)
34. Should we convert our API to JSON-API or GraphQL? Maybe … but not right now
36. Simplify Merging two apps
38. Facesheet + Schedule 
 
 Chirpolith Chirp
 Facesheet Chirp
 Schedule
39. Eliminate Conflicts
40. facesheet/patient-detail schedule/patient-detail patient-detail patient-detail namespace all the things In our Code • routes • models • components • services
41. Make them identical In package.json
42. ...but it distracted us from deleting Backbone code. Was there an less complex way? Merged Successfully
43. iFrame
44. Staying Motivated
46. Speed up our ability to deliver changes to Chirp! Business Objective:
47. Keep shipping features
49. Conclusions
51. • 95 routes • 75 models • 225 components The Chirpolith Today
52. • Aim towards a greenfield Ember app • Small incremental releases • Reuse existing Backbone code • Rewrite one component at a time • Defer what you can • One Chirpolith to rule them all • Merge apps • Fake merge with an iFrame • Stay motivated Guiding Principles
53. Thank You!
54. Image Credits http://learn.genetics.utah.edu/content/basics/telomeres/images/ paintedintocorner.png https://www.flickr.com/photos/massgovernor/16982469949 http://maxpixel.freegreatpicture.com/Running-Start-Athletes-Fun-Run-Street- Running-Race-1590051 http://toamke.tumblr.com/post/119417007773 https://pixabay.com/en/turtle-brown-green-shell-animal-304426/ https://giphy.com/gifs/H7FIKgh5aRfK8 https://www.justapinch.com/photo/view/4wzPljFh7XliDFsTDaI4fQ? gallery=7JVt5YBjzWBTAe_Hlypjtg|ZNynCo7Mx99SLvL_9HVreQ https://www.quora.com/On-GitHub-what-is-the-significance-of-the-Ship-It- squirrel