An evening with gusto UPDATED - Amazon S3 · scaling frontend architecture an evening with gusto....
Transcript of An evening with gusto UPDATED - Amazon S3 · scaling frontend architecture an evening with gusto....
![Page 1: An evening with gusto UPDATED - Amazon S3 · scaling frontend architecture an evening with gusto. an evening with gusto hello, world!](https://reader034.fdocuments.us/reader034/viewer/2022050122/5f529ead3320b4769879e34b/html5/thumbnails/1.jpg)
SCALING FRONTEND ARCHITECTUREAN EVENING WITH GUSTO
![Page 2: An evening with gusto UPDATED - Amazon S3 · scaling frontend architecture an evening with gusto. an evening with gusto hello, world!](https://reader034.fdocuments.us/reader034/viewer/2022050122/5f529ead3320b4769879e34b/html5/thumbnails/2.jpg)
AN EVENING WITH GUSTO
HELLO, WORLD!
▸ Full Stack Software Engineer
▸ Typing #WithGusto
▸ Musician, Ocean Enthusiast, Cyclist
![Page 3: An evening with gusto UPDATED - Amazon S3 · scaling frontend architecture an evening with gusto. an evening with gusto hello, world!](https://reader034.fdocuments.us/reader034/viewer/2022050122/5f529ead3320b4769879e34b/html5/thumbnails/3.jpg)
BUILDING EXTENSIBLE UIIS HARD.
![Page 4: An evening with gusto UPDATED - Amazon S3 · scaling frontend architecture an evening with gusto. an evening with gusto hello, world!](https://reader034.fdocuments.us/reader034/viewer/2022050122/5f529ead3320b4769879e34b/html5/thumbnails/4.jpg)
STATE OF JAVASCRIPT
![Page 5: An evening with gusto UPDATED - Amazon S3 · scaling frontend architecture an evening with gusto. an evening with gusto hello, world!](https://reader034.fdocuments.us/reader034/viewer/2022050122/5f529ead3320b4769879e34b/html5/thumbnails/5.jpg)
HOW DO WE CHOOSE?
![Page 6: An evening with gusto UPDATED - Amazon S3 · scaling frontend architecture an evening with gusto. an evening with gusto hello, world!](https://reader034.fdocuments.us/reader034/viewer/2022050122/5f529ead3320b4769879e34b/html5/thumbnails/6.jpg)
AN EVENING WITH GUSTO
MAINTAINING LARGE FRONTEND APPLICATIONS
▸ Production application, large team
▸ Very selective rewrites (we’ve got a business to run, yo!)
▸ *Maintain quality
▸ Gusto’s journey to modern JavaScript
▸ Choosing a framework
▸ Formulating a build chain
![Page 7: An evening with gusto UPDATED - Amazon S3 · scaling frontend architecture an evening with gusto. an evening with gusto hello, world!](https://reader034.fdocuments.us/reader034/viewer/2022050122/5f529ead3320b4769879e34b/html5/thumbnails/7.jpg)
APP DEMO
![Page 8: An evening with gusto UPDATED - Amazon S3 · scaling frontend architecture an evening with gusto. an evening with gusto hello, world!](https://reader034.fdocuments.us/reader034/viewer/2022050122/5f529ead3320b4769879e34b/html5/thumbnails/8.jpg)
LET’S TAKE A WALK DOWN MEMORY LANE...
![Page 9: An evening with gusto UPDATED - Amazon S3 · scaling frontend architecture an evening with gusto. an evening with gusto hello, world!](https://reader034.fdocuments.us/reader034/viewer/2022050122/5f529ead3320b4769879e34b/html5/thumbnails/9.jpg)
WE WANT TO TAKE ADVANTAGE OF THE BEST TOOLS AVAILABLE TO US.
AN EVENING WITH GUSTO
![Page 10: An evening with gusto UPDATED - Amazon S3 · scaling frontend architecture an evening with gusto. an evening with gusto hello, world!](https://reader034.fdocuments.us/reader034/viewer/2022050122/5f529ead3320b4769879e34b/html5/thumbnails/10.jpg)
IF IT AIN’T BROKE, DON’T FIX IT.
AN EVENING WITH GUSTO
![Page 11: An evening with gusto UPDATED - Amazon S3 · scaling frontend architecture an evening with gusto. an evening with gusto hello, world!](https://reader034.fdocuments.us/reader034/viewer/2022050122/5f529ead3320b4769879e34b/html5/thumbnails/11.jpg)
AN EVENING WITH GUSTO
SYMPTOMS OF PAIN
▸ No centralized application state
![Page 12: An evening with gusto UPDATED - Amazon S3 · scaling frontend architecture an evening with gusto. an evening with gusto hello, world!](https://reader034.fdocuments.us/reader034/viewer/2022050122/5f529ead3320b4769879e34b/html5/thumbnails/12.jpg)
AN EVENING WITH GUSTO
SYMPTOMS OF PAIN
▸ No centralized application state
▸ Inefficient DOM manipulation
![Page 13: An evening with gusto UPDATED - Amazon S3 · scaling frontend architecture an evening with gusto. an evening with gusto hello, world!](https://reader034.fdocuments.us/reader034/viewer/2022050122/5f529ead3320b4769879e34b/html5/thumbnails/13.jpg)
AN EVENING WITH GUSTO
SYMPTOMS OF PAIN
▸ No centralized application state
▸ Inefficient DOM manipulation
▸ Non-trivial composability
![Page 14: An evening with gusto UPDATED - Amazon S3 · scaling frontend architecture an evening with gusto. an evening with gusto hello, world!](https://reader034.fdocuments.us/reader034/viewer/2022050122/5f529ead3320b4769879e34b/html5/thumbnails/14.jpg)
AN EVENING WITH GUSTO
SYMPTOMS OF PAIN
▸ No centralized application state
▸ Inefficient DOM manipulation
▸ Non-trivial composability
▸ Is this the tool to use for the next several years?
![Page 15: An evening with gusto UPDATED - Amazon S3 · scaling frontend architecture an evening with gusto. an evening with gusto hello, world!](https://reader034.fdocuments.us/reader034/viewer/2022050122/5f529ead3320b4769879e34b/html5/thumbnails/15.jpg)
AN EVENING WITH GUSTO
INSPIRING CHANGE
▸ Pick your battles
▸ Research & Experiment
▸ Create an execution/migration plan
▸ *Get buy-in from the team
![Page 16: An evening with gusto UPDATED - Amazon S3 · scaling frontend architecture an evening with gusto. an evening with gusto hello, world!](https://reader034.fdocuments.us/reader034/viewer/2022050122/5f529ead3320b4769879e34b/html5/thumbnails/16.jpg)
AN EVENING WITH GUSTO
GOALS
▸ Incremental migration
▸ Declarative
▸ Encapsulated/Composable
▸ Testable
▸ Interface well with Design React
![Page 17: An evening with gusto UPDATED - Amazon S3 · scaling frontend architecture an evening with gusto. an evening with gusto hello, world!](https://reader034.fdocuments.us/reader034/viewer/2022050122/5f529ead3320b4769879e34b/html5/thumbnails/17.jpg)
AN EVENING WITH GUSTO
GOALS
▸ Incremental migration
▸ Declarative
▸ Encapsulated/Composable
▸ Testable
▸ Interface well with Design
![Page 18: An evening with gusto UPDATED - Amazon S3 · scaling frontend architecture an evening with gusto. an evening with gusto hello, world!](https://reader034.fdocuments.us/reader034/viewer/2022050122/5f529ead3320b4769879e34b/html5/thumbnails/18.jpg)
AN EVENING WITH GUSTO
GOALS
▸ Incremental migration
▸ Declarative
▸ Encapsulated/Composable
▸ Testable
▸ Interface well with Design
![Page 19: An evening with gusto UPDATED - Amazon S3 · scaling frontend architecture an evening with gusto. an evening with gusto hello, world!](https://reader034.fdocuments.us/reader034/viewer/2022050122/5f529ead3320b4769879e34b/html5/thumbnails/19.jpg)
AN EVENING WITH GUSTO
GOALS
▸ Incremental migration
▸ Declarative
▸ Encapsulated/Composable
▸ Testable
▸ Interface well with Design
![Page 20: An evening with gusto UPDATED - Amazon S3 · scaling frontend architecture an evening with gusto. an evening with gusto hello, world!](https://reader034.fdocuments.us/reader034/viewer/2022050122/5f529ead3320b4769879e34b/html5/thumbnails/20.jpg)
AN EVENING WITH GUSTO
GOALS
▸ Incremental migration
▸ Declarative
▸ Encapsulated/Composable
▸ Testable
▸ Interface well with Design
![Page 21: An evening with gusto UPDATED - Amazon S3 · scaling frontend architecture an evening with gusto. an evening with gusto hello, world!](https://reader034.fdocuments.us/reader034/viewer/2022050122/5f529ead3320b4769879e34b/html5/thumbnails/21.jpg)
AN EVENING WITH GUSTO
GOALS
▸ Incremental migration
▸ Declarative
▸ Encapsulated/Composable
▸ Testable
▸ Interface well with Design
![Page 22: An evening with gusto UPDATED - Amazon S3 · scaling frontend architecture an evening with gusto. an evening with gusto hello, world!](https://reader034.fdocuments.us/reader034/viewer/2022050122/5f529ead3320b4769879e34b/html5/thumbnails/22.jpg)
AN EVENING WITH GUSTO
GOALS
▸ Incremental migration
▸ Declarative
▸ Encapsulated/Composable
▸ Testable
▸ Interface well with Design
![Page 23: An evening with gusto UPDATED - Amazon S3 · scaling frontend architecture an evening with gusto. an evening with gusto hello, world!](https://reader034.fdocuments.us/reader034/viewer/2022050122/5f529ead3320b4769879e34b/html5/thumbnails/23.jpg)
AN EVENING WITH GUSTO
GOALS
▸ Incremental migration
▸ Declarative
▸ Encapsulated/Composable
▸ Testable
▸ Interface well with Design
![Page 24: An evening with gusto UPDATED - Amazon S3 · scaling frontend architecture an evening with gusto. an evening with gusto hello, world!](https://reader034.fdocuments.us/reader034/viewer/2022050122/5f529ead3320b4769879e34b/html5/thumbnails/24.jpg)
AN EVENING WITH GUSTO
GOALS
▸ Incremental migration
▸ Declarative
▸ Encapsulated/Composable
▸ Testable
▸ Interface well with Design
![Page 25: An evening with gusto UPDATED - Amazon S3 · scaling frontend architecture an evening with gusto. an evening with gusto hello, world!](https://reader034.fdocuments.us/reader034/viewer/2022050122/5f529ead3320b4769879e34b/html5/thumbnails/25.jpg)
YAY!
![Page 26: An evening with gusto UPDATED - Amazon S3 · scaling frontend architecture an evening with gusto. an evening with gusto hello, world!](https://reader034.fdocuments.us/reader034/viewer/2022050122/5f529ead3320b4769879e34b/html5/thumbnails/26.jpg)
CONTINUOUS IMPROVEMENT
![Page 27: An evening with gusto UPDATED - Amazon S3 · scaling frontend architecture an evening with gusto. an evening with gusto hello, world!](https://reader034.fdocuments.us/reader034/viewer/2022050122/5f529ead3320b4769879e34b/html5/thumbnails/27.jpg)
AN EVENING WITH GUSTO
HOW DO WE LOAD JAVASCRIPT ON A PAGE?
▸ Write individual files, concatenate them together for use by the browser
▸ Compile and Polyfill
▸ In development:
▸ Compile on every file change
▸ In production:
▸ Digest Assets
▸ Minify
![Page 28: An evening with gusto UPDATED - Amazon S3 · scaling frontend architecture an evening with gusto. an evening with gusto hello, world!](https://reader034.fdocuments.us/reader034/viewer/2022050122/5f529ead3320b4769879e34b/html5/thumbnails/28.jpg)
AN EVENING WITH GUSTO
WHAT CAN YOUR BUNDLE MANAGER DO FOR YOU?
▸ Dependency management
▸ Bundle optimization (lazy loading, common package caching, tree shaking)
▸ Hot loading
▸ Fast testing
![Page 29: An evening with gusto UPDATED - Amazon S3 · scaling frontend architecture an evening with gusto. an evening with gusto hello, world!](https://reader034.fdocuments.us/reader034/viewer/2022050122/5f529ead3320b4769879e34b/html5/thumbnails/29.jpg)
AN EVENING WITH GUSTO
RAILS ASSET PIPELINE CHALLENGES
▸ Development had ground to halt, refreshes could take minutes
▸ Subject to changes on the window
▸ Little bundle optimization we could do
▸ Slow testing
▸ JavaScript was effectively a second class citizen
![Page 30: An evening with gusto UPDATED - Amazon S3 · scaling frontend architecture an evening with gusto. an evening with gusto hello, world!](https://reader034.fdocuments.us/reader034/viewer/2022050122/5f529ead3320b4769879e34b/html5/thumbnails/30.jpg)
AN EVENING WITH GUSTO
GOALS
▸ Incremental migration
▸ Speed, speed, speed
▸ Better development tooling
▸ Move towards modular JavaScript
▸ Bundle optimization
▸ Move all assets off of Rails
Webpack
![Page 31: An evening with gusto UPDATED - Amazon S3 · scaling frontend architecture an evening with gusto. an evening with gusto hello, world!](https://reader034.fdocuments.us/reader034/viewer/2022050122/5f529ead3320b4769879e34b/html5/thumbnails/31.jpg)
DEMO
![Page 32: An evening with gusto UPDATED - Amazon S3 · scaling frontend architecture an evening with gusto. an evening with gusto hello, world!](https://reader034.fdocuments.us/reader034/viewer/2022050122/5f529ead3320b4769879e34b/html5/thumbnails/32.jpg)
AN EVENING WITH GUSTO
WHAT DID WE ACCOMPLISH?
▸ Implemented React with Flux over Backbone
▸ Huge speed/productivity boosts with move to Webpack
▸ Rallied engineering team behind these upgrades
▸ What’s next?
▸ Bundle optimization
▸ Break out the assets to be standalone
▸ Optimize build speed with Webpack tools
![Page 33: An evening with gusto UPDATED - Amazon S3 · scaling frontend architecture an evening with gusto. an evening with gusto hello, world!](https://reader034.fdocuments.us/reader034/viewer/2022050122/5f529ead3320b4769879e34b/html5/thumbnails/33.jpg)
THANK YOU!
![Page 34: An evening with gusto UPDATED - Amazon S3 · scaling frontend architecture an evening with gusto. an evening with gusto hello, world!](https://reader034.fdocuments.us/reader034/viewer/2022050122/5f529ead3320b4769879e34b/html5/thumbnails/34.jpg)
Q&A