Nine Things I've Learned

Slides from my 2015 TXJS talk: Nine things I've learned maintaining JavaScript frameworks

Transcript

1. Nine Things I’ve Learned A listicle in talk form Now that Ember has had its fourth birthday, one may be tempted to reflect back on the successes and failures we've experienced in those four years. One may be particularly tempted to do so if this is the subject of a talk you've been asked to give. Sir Isaac Newton said, “If I have seen further, it is by standing on the shoulders of giants.” On reflection, I note that he did not mention anything about the willingness of those giants to be stood upon. And indeed there have been flare-ups between the warring tribes on that modern battlefield of thought, Twitter dot com. Let me assure you that I have nothing but intense respect for other open source projects. In fact, without their criticism and stiff competition, Ember would be a significantly worse framework today. We spend an inordinate amount of time evaluating other projects so that we can truly understand what they're doing better, then integrating what we discover back into Ember.
2. #1 Client-Side JavaScript is the Future Ember is unapologetic about being designed to help you build entirely client-side JavaScript applications. This is in contrast to most other frameworks, which are optimized for sprinkling additional interactivity on top of traditional, server-rendered apps. This focus can be traced directly back to Ember's SproutCore lineage.
3. Ember started its life as SproutCore 2.0, though I now consider this a misnomer since there was zero code shared between SproutCore 1.6 and SproutCore 2.0. (Contrast this with Ember 1.13 and 2.0, where the code is nearly identical, minus the deprecated code that has been removed.) SproutCore was an absolutely revolutionary framework that was ahead of its time, but suffered several fatal flaws that prevented it from ever seeing widespread adoption.
4. A tale of two supercomputers Every time a user uses a web application, there are two supercomputers involved: the server sitting in a data center somewhere, and the device in the user's hands.
5. A tale of two supercomputers
6. A tale of two supercomputers
7. JavaScript apps allow our apps to act autonomously. • Offline • Fast even when network is slow • Stateful (e.g. music playing in the background) Even when the network is unreliable or non-existent
8. But you can’t do it in half-measures. Even a little bit of dependence on the server means you lose these advantages
9. “Sprinkles of JavaScript” We’re all in on client-side, since it unlocks so many possibilities. This focus lets us build the best tool for this job, rather than worrying about bending the framework to support many different use cases.
10. #2 Evolution is a Powerful Force
11. A lesson we learned from the Web Platform
12. Think back to 2010/2011 when the most popular JavaScript frameworks were trying to abstract the web Cappuccino went so far as to replace even the language, introducing the first transpiled JavaScript language with Objective- J.
13. “Throw it away and start over.”
14. Developers have internalized that the web is always behind native.
15. • Can’t vertically center a div • Can’t directly allocate memory • Can’t work with binary data • Can’t open a socket and keep it open • Can’t store data to the file system • Can’t access while offline • Can’t draw directly to a buffer • Can’t access GPU • Can’t make cross-origin requests • Can’t display video or play audio • Can’t compete with native performance • Can’t run code off main UI thread • Old IEs will be around forever • JavaScript is slow • Standards move slowly To be fair, there is a lot that still sucks about web development
16. • Flexbox • Typed Arrays • Blob • WebSockets • IndexedDB • Service Worker • Canvas • WebGL • CORS • Web Audio • WebASM • Web Workers • Old IEs will be around forever • JavaScript is slow • Transpilers (Babel) Actually, those were all things that felt impossible to fix in 2010… but now many of us use these in production
17. HTML, CSS and JavaScript are the lingua franca of the web. It’s better to meet users where they are—even if imperfect— than to try to build the world from scratch We were pouring all of this effort into rebuilding stuff that the browser already gave us for free, and we had our lunch eaten by Backbone, which was an order of magnitude less code and didn’t try to abstract the web
18. You don’t have to love HTML, CSS or JavaScript, but they’re the lingua franca of the web.
19. Stability without Stagnation Ember’s Semantic Versioning and six-week release cycle. Additive only, until you garbage collect at major version numbers.
20. #3 Ease of Use Trumps Everything It doesn’t matter how great your technology is, if people don’t see wins right away they’re not going to keep on it
22. New users extrapolate first-day and first-week experiences.
23. #4 Be Humble
24. Developers are not idiots. most It was easy for us to say that people just didn’t “get it,” but the truth was that Angular was far, far easier for new developers to pick up
25. I see this attitude a lot and it’s really destructive.
26. FastBoot We agree with the progressive enhancement-istas about the problem but not the solution. We don’t think scolding our told- you-sos work—better to meet developers where they are today.
27. #5 “Nobody ever got fired for quoting Dijkstra.”
31. Component Component Component Component Component Component App Monad Component Component Flux Store Flux Store Flux Store Flux Store Dispatcher
32. Quick, somebody decomplect it!
33. Model View View View Controller
34. Diagrams are horsepuckey.
35. Be skeptical, and ask to see the code.
36. ________ is a minimal, lightweight and focused library that does one thing and does it well. It brings a decomplected yet unopinionated architecture to your applications that helps you rethink best practices. As Dijkstra teaches us, we must “shorten the conceptual gap between the static program and the dynamic process.” That’s why ________ makes distributed monadic functors a first class citizen. By ensuring your components are functionally pure, referentially transparent low-level optimizations can be made declaratively. It’s simple made easy. JavaScript Marketing Starter Kit Just $9!
37. –Actual Dijkstra quote “Write a paper promising salvation, make it a 'structured' something or a 'virtual' something, or 'abstract', 'distributed' or 'higher-order' or 'applicative' and you can almost be certain of having started a new cult.”
38. #6 Coalitions Make the Strongest Open Source For large-scale open source projects, it's flat-out impossible for one or two people to manage everything. Just triaging tickets and pull requests can be a full-time job. In order to ensure your project survives under the load of popular usage, you're going to need to muster as much humanpower as possible.
39. • Venture-backed (Meteor) • Corporate-backed (Angular, React, SproutCore) • BDFL (Backbone) • Coalition (Ember)
41. Open Source “Pathogens” • Maintainer burnout • Corporate interference (e.g. Oracle buying MySQL) • Large backwards-incompatible changes (e.g. Python 2 to Python 3) • Technical stagnation • Corporations yanking support/closing the source (e.g. Apple no longer upstreaming SproutCore commits)
42. –Greg Sabino Mullane, PostgreSQL In conclusion, the state of the Postgres project is in great shape, due to the depth and breadth of the community (and the depth and breadth of the developer subset). There is no danger of Postgres going the MySQL route; the PG developers are spread across a number of businesses, the code (and documentation!) is BSD, and no one firm holds sway in the project.
43. –DHH Second, the growth of the Rails ecosystem has been staggering. There are so many shops out there offering Rails consulting and training. I believe part of that proliferation is due to the fact that there's no core-group monopoly that can dominate the market. I believe a Rails Inc consisting of a large group of core committers would have an unfair advantage in the training and consulting space — easily siphoning off all the best juice and leaving little for anything else. There are plenty of examples in our industry of that happening around open source tools. It's much more satisfying to see a broader pool of companies all competing on a level playing field.
44. #7 Value Non-Coders
46. • Infrastructure • Events & Meetups • Documentation • Issue Triage • Merchandise • Evangelism
47. #8 Reusable UI components are like catnip for developers
49. I was definitely trolling a bit, but Angular caught us off guard with directives and it took us too long to catch up
50. Maximum Flexibility ⟺ Good Defaults The fact that Angular had isolated scopes before we did is, in retrospect, deeply embarrassing to me
51. #9 React was basically right about everything
52. Folks like to use a lot of high-falutin’ terminology to describe why React is good.
53. In my opinion, it boils down to: • Easy to reason about inputs and outputs • Ember & Angular bindings made it easy to create spooky action at a distance • “Re-render everything” programming model • Speed
54. <h1>{{title}}</h1> New Posts: <ul> {{#each posts as |post|}} <li>{{post.title}}</li> {{/each}} </ul> { "title": "My sick blog", "posts": [ { "title": "In Defense of Semicolons" } ] } template /blogs/1.json
55. { "title": "My sick blog", "posts": [ { "title": "In Defense of Semicolons" } ] } { "title": "My sick blog", "posts": [ { "title": "In Defense of Semicolons" }, { "title": "Re-rethinking Best Practices" } ] } { "title": "My sick blog", "posts": [ { "title": "In Defense of Semicolons" }, { "title": "Re-rethinking Best Practices" } ] } ➙
56. Ember Pre-Glimmer <h1>{{title}}</h1> New Posts: <ul> {{#each posts as |post|}} <li>{{post.title}}</li> {{/each}} </ul> { "title": "My sick blog", "posts": [ { "title": "In Defense of Semicolons" }, { "title": "Re-rethinking Best Practices" } ] } template JSON
57. Glimmer/React <h1>{{title}}</h1> New Posts: <ul> {{#each posts as |post|}} <li>{{post.title}}</li> {{/each}} </ul> { "title": "My sick blog", "posts": [ { "title": "In Defense of Semicolons" }, { "title": "Re-rethinking Best Practices" } ] } template JSON
58. 1. Client-Side JavaScript is the Future 2. Evolution is a Powerful Force 3. Ease of Use Trumps Everything 4. Be Humble 5. Nobody ever got fired for quoting Dijkstra 6. Coalitions Make the Strongest Open Source 7. Value Non-Coders 8. Reusable UI components are like catnip for developers 9. React was basically right about everything
59. A warning to Ember competitors:
61. You will be assimilated
62. In the immortal wisdom of HorseJS, it’s always Ember vs. somebody. Our secret weapon is that we intensely study our competition, and that gives us a cockroach-like ability to survive each round of the JavaScript Wars.
63. Thank you! @tomdale