Challenges in Scaling a Rapidly Growing Ember App and Team

Ember.js allows us to build ambitious web applications, but particular challenges arise with large apps, large teams, and rapid growth. We'll talk about how we build Intercom and some of the lessons we've learned in the past two years.

Transcript

1. Challenges in Scaling a Rapidly Growing Ember App and Team Lorcan Coyle - Intercom October 28 2016
2. • makes messaging apps for businesses that help them understand & talk to consumers. • mission to make web business personal
3. Intercom and Ember • Intercom is an ember-app (backend is rails) • migrated from a rails monolith, starting early 2014
4. Big App & Big Team • large surface area
5. User List
6. Message Composer
7. Inbox
8. Big App & Big Team • large surface area • >50 contributors with >10 commits so far in 2016
9. Big Teams and Big Apps • single code-base for the front-end • many engineers • engineer fungibility
10. Engineer Fungibility • strong conventions are crucial! opinionatedness pays off!!! • ❤ ember ❤ • code looks much the same everywhere in the app • moving teams • changing code • onboarding engineers
14. Software Evolution • Lehman’s laws of software evolution • as a system evolves, its complexity increases unless work is done to maintain or reduce it
15. Growth and Evolution
16. Shrinking the Codebase • finding and eliminating dead code • removing unnecessary libraries/modules • depending on third-party libraries • extracting functionality into addons
17. Shrinking the Codebase
18. Improving Startup Time • internal efforts • external efforts
19. Improving Startup Time • measure time to render • defer loading of 3rd party scripts • service workers • just in time loading
20. External Efforts • Glimmer 2 • Engines
21. Tracking Ember’s Release Cycle • often late to upgrade, occasionally quite late • never ran betas • ultimately got stuck on 1.12 • initial component render times significantly slower with Glimmer 1
23. Tracking the Release Cycle • often late to upgrade, occasionally quite late • never ran betas • ultimately got stuck on 1.12 • initial component render times significantly slower with Glimmer 1 • wake up call for us
24. Our Problem - generating links on a performance-sensitive page
25. Fixing our Problem • link-to is the default way of doing this in ember • must be an quicker way • let’s write a helper (v. fast) • done.
26. Sharing our Solution • this actually looks useful • let’s build an ember addon and open-source it • https://github.com/intercom/ember-href-to
27. ember-href-to • In the last year • thirty commits • sixteen from seven public contributors • some fairly significant, e.g., upgrading to support latest version of ember
28. Engaging with Community • great! but maybe this is so helpful it should just be part of the framework? • let’s write an RFC • https://github.com/emberjs/rfcs/pull/92 • led to discussions on a routing service, and fed into another RFC • https://github.com/emberjs/rfcs/pull/95
29. ember-model / ember-data • we chose ember-model • ember-data pre-beta, hadn’t settled on an API • worked great but now we’re migrating our code to ember-data • linking models
30. ember-model in ember-data
31. ember-data in ember-model
32. Computed Properties or Logic in Templates • balance to be struck here • more/better logic in templates • ember-truth-helpers • ember-composable-helpers
33. Computed Property Macros • found common patterns, extracted these into computed property macros • ternary • trim • subtractFrom • ember-computed-template-string • (presented by Serena Fritsch at EmberCamp 2016)
34. Code Bloat - God Models • representation of a customer • if everyone is responsible, nobody is responsible • ends up as a dumping ground • slower to retrieve • more difficult to grok
35. Message Editor • two way binding hell • dirty tracking hell • difficulties with model validity
36. Two Way Binding Hell
37. Dirty Tracking Hell • our message editor is pretty complicated • message model has a bunch of sub-relationships • just observe model.isDirty and autosave… easy right?
38. Data Down Actions Up • explicitly mutate the model • check did the model change? • schedule an autosave
39. Model Validation Difficulty
40. Model Validation • want to know whether we can set a message live • great choices here: • ember-changeset - for form validation • ember-cp-validations - for complex model validation
41. Ember Concurrency • async is hard • ember-concurrency allows us to eliminate complex code • droppable ajax calls • task groups to tie actions together
42. Continuous Deployment • ember-cli-deploy • since February, before 1.0, some rough edges • lots of great plugins • ember-cli-deploy populates index.html • but Intercom is a rails app
43. Continuous Deployment • double deploy (backend & frontend) - not great • takes longer, harder to rollback • later wrote an api endpoint that takes asset revision hashes and spits our the right data in our index.html’s view • rapid rollbacks, bisects using query params
44. Testing • previously heavy on acceptance tests, very few unit tests • component integration tests to the rescue! • tests much faster, so we write many many more
45. Testing • previously heavy on acceptance tests, very few unit tests • component integration tests to the rescue! • tests much faster, so we write many many more • ember-data-factory-guy • traits, test setup very easy
46. Ember Watson • migrating big codebases is sometimes very tedious, mechanical work • e.g., eliminating deprecations • https://github.com/abuiles/ember- watson
47. Thanks Challenges in Scaling a Rapidly Growing Ember App and Team @lorcancoyle @intercom lorcan@intercom.com