Designing very large (JavaScript) applications

Slide text: Hello, I used to build very large JavaScript applications.
Slide text: I thought React was good.
Picture of lots of people.
Picture of very old building.
Tweet saying: A team of senior engineers without junior engineers is a team of engineers.
Slide text: Junior -> Senior -> ?
Slide text: “I know how I would solve the problem”
Slide text: “I know how others would solve the problem”
Slide text: “I can anticipate how API choices and abstractions impact the way other people would solve the problem.”
Slide text: An application of empathy.
Slide text: Empathy on easy mode.
Slide text: Programming model
Slide text: Programming model impact examples: React, Preact, Redux, Date picker from npm, npm
Slide text: Code splitting
Slide text: Sync -> Async
Slide text: Human
Slide text: Route based code splitting
Google Search query screenshot for “public speaking 101”
Google Search query screenshot for “weath”
Google Search query screenshot for “20 usd to aud”
Slide text: Lazy load at component level?
Slide text: React component statically depend on their children.
ES6 import example.
Loadable component example.
Slide text: Static -> Dynanic
Slide text: Who decides what to lazy load when?
Slide text: Static or dynamic?
Slide text: Split logic and rendering
Slide text: Only load logic if it was rendered.
Slide text: Currency converter on search result page.
Slide text: 2017 Happy New Year
Slide text: Avoid central configuration at all cost
Slide text: routes.js
Slide text: webpack.config.js
Slide text: package.json
Slide text: Dependency trees
Slide text: Example dependency tree with router and 3 root components.
Slide text: The central import problem.
Slide text: Example dependency tree with router and 3 root components. Router imports root components.
Slide text: Import -> Enhance
Slide text: Import -> Enhance
Slide text: Example dependency tree with router and 3 root components. Root components enhance router.
Slide text: Who decides when to use enhance?
Image: Danger. Hazardous chemicals.
Slide text: Single file component pointing to its parts that enhance a router.
Slide text: The base bundle
Slide text: Base bundle pointing to 3 different dependencies.
Slide text: Forbidden dependency tests.
Slide text: Assert that base bundle does not depend on React.Component
Forbidden dependencies crossed out.
Slide text: The most natural path
Slide text: Most straightforward way must be the right way.
Slide text: Otherwise add a test that ensure the right way,
Slide text: Avoid human judgement outside of application domain.
Slide text: Make it easy to delete code.
Slide text: No abstraction is better than the wrong abstraction.

We have to become good at finding the right abstractions.

Slide text: Empathy and experience -> Right abstractions.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store