Wrangling Large Scale Frontend Web Applications
-
Upload
ryan-roemer -
Category
Software
-
view
18.214 -
download
0
Transcript of Wrangling Large Scale Frontend Web Applications
![Page 1: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/1.jpg)
@ryan_roemer | surge2015.formidablelabs.com
WRANGLINGLARGE SCALEFRONTEND WEB APPLICATIONS
![Page 2: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/2.jpg)
The web ismassively moving
to the frontend
![Page 3: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/3.jpg)
Users want richand seamlessexperiences
![Page 4: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/4.jpg)
Product ownerswant fast andnimble apps
![Page 5: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/5.jpg)
Browser apps arenow business
critical
![Page 6: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/6.jpg)
And, yes, even forthe enterprise
![Page 7: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/7.jpg)
... which means
![Page 8: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/8.jpg)
LOTS OF JAVASCRIPTIN THE BROWSERWRITTEN BY LARGE TEAMS
![Page 9: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/9.jpg)
Let’s dig into some largefrontends at a high-traffic,top-five e-commerce site
![Page 11: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/11.jpg)
The Numbers$10 billion FY 2014, $13 billion FY 2015 (est)1.5 billion page views for Thanksgiving -Cyber Monday 2014
![Page 12: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/12.jpg)
The Code50+ JS applications650K lines, 2500 files of JavaScript sourceMore JavaScript lines & files than Java
![Page 14: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/14.jpg)
The Dev TeamA 2+ year website rewrite50+ core frontend engineers14 vertical teams / "tracks"... and many external teams / partners
![Page 15: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/15.jpg)
A TOUR THROUGHTHE TRENCHES
![Page 17: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/17.jpg)
My wrangling adventures
as the JavaScript lead for
the website & dev teams
![Page 18: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/18.jpg)
A few battle-tested
tips from the field...
![Page 19: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/19.jpg)
... with a focus on
four personas
![Page 20: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/20.jpg)
ARCHITECTS
GUIDES
GATEKEEPERS
LIFEGUARDS
![Page 21: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/21.jpg)
ARCHITECTS
![Page 22: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/22.jpg)
Plan & build a strongfoundation
![Page 23: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/23.jpg)
ArchitectsA real buildCode organization
![Page 24: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/24.jpg)
THE FUNDAMENTAL CHALLENGE:JAVASCRIPT IS THEWILD, WILD WEST
![Page 25: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/25.jpg)
Architecture ChallengesBrowser is a single execution environmentCode size / duplication is criticalHard to manage, easy to do wrong"Cowboy" legacy vs. large scale organization
![Page 26: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/26.jpg)
Let's look at the
architectural complexities
of just one page...
![Page 27: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/27.jpg)
THE HOMEPAGE
![Page 29: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/29.jpg)
The HomepageMultiple, independent JS appsCode from 8 different teamsExemplary "in transition" page, somewherebetween raw JavaScript & a SPA
![Page 30: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/30.jpg)
JavaScript
ON PAGE
Direct page scripts10 remote scripts18 inline scripts
LAZY LOADED
Injected script tags6 app entry points
![Page 31: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/31.jpg)
On Page
2 application code2 CDN infrastructure2 internal ads2 Google ads
1 fonts1 IE-conditional polyfill18 inline scripts
![Page 32: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/32.jpg)
Lazy (Code)window._entry(function() { require(["header/header"], function () { require(["header/header-deferred"]); }); // ... require(["homepage/homepage"]); // ...});
![Page 33: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/33.jpg)
Lazy (App)Asynchronously loaded1 shared library4 primary entry points2 deferred entry points
![Page 34: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/34.jpg)
THE TAKEAWAY?IT'S COMPLICATED.
![Page 35: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/35.jpg)
A "REAL" BUILD
![Page 36: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/36.jpg)
Build ChallengesModern JS apps are complicated(compression, polyfills, transpiling, etc.)Multiple JS apps on the same page is evenmore complexSupporting development & production / CDN
![Page 37: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/37.jpg)
Use a Build ToolChoose an paradigm: AMD, CommonJSChoose a build tool / loader: RequireJS,Browserify, WebpackTake time to learn & evaluate the tradeoffs
![Page 38: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/38.jpg)
Our Build ToolsLegacy: AMD + RequireJSModern: CommonJS + WebpackTransition: AMD & CommonJS + Webpack
![Page 39: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/39.jpg)
Keep prod & dev buildsblazingly fast
![Page 40: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/40.jpg)
Make development
identical to production
![Page 41: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/41.jpg)
Build ComplexitiesSharing / caching common code (lib.js)Varying repository structuresSharing frontend & backend codeCombining application, OSS, & 3rd party code
![Page 42: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/42.jpg)
CODE ORGANIZATION
![Page 43: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/43.jpg)
Plan your repositorystructure
1 → 14 → many repos
![Page 44: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/44.jpg)
Have a bias for small &flexible
![Page 45: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/45.jpg)
GUIDES
![Page 46: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/46.jpg)
Coordinate the chaos,
level up the developmentteams
![Page 47: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/47.jpg)
Guides & GuidanceThe Meta teamEducateReview everything
![Page 48: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/48.jpg)
Guidance ChallengesThinking of the project as a wholeOnboarding unfamiliar / junior developersHelping teams be consistent /complementary
![Page 49: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/49.jpg)
THE META TEAM
![Page 50: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/50.jpg)
Code from multiple teams
all combined on one page
![Page 51: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/51.jpg)
These folks represent thewhole page
![Page 52: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/52.jpg)
The Meta TeamSet conventions & best practicesLead code reviews for consistency / DRYDevelop common utilities & the deploymentinfrastructure
![Page 53: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/53.jpg)
YOUR META TEAM TASK:
HAVE ONE.
![Page 54: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/54.jpg)
Our Meta JS Team1.5 dedicated developers6 "loaned" track developers
![Page 55: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/55.jpg)
Our Meta JS Duties~1 day of code review / weekChat channel participationCross-track JS initiatives (i18n, multi-tenancy,PCI, etc.)
![Page 56: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/56.jpg)
Meta JS BenefitsProject-wide consistency & supportHelp tracks consider other teamsRepresent track interests in the coreMore engineers to support the whole project
![Page 57: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/57.jpg)
EDUCATION
![Page 58: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/58.jpg)
Continually write livingdocumentation,
close to the code
![Page 59: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/59.jpg)
Take a "hands on approach"
![Page 60: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/60.jpg)
Invest in rising developers &
spread knowledge back toteams
![Page 61: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/61.jpg)
CODE REVIEW
![Page 62: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/62.jpg)
All code gets substantive &
meta review
![Page 63: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/63.jpg)
Including all third party &
internal to the org vendorcode
![Page 64: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/64.jpg)
GATEKEEPERS
![Page 65: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/65.jpg)
Protect the frontend through
process & architecture
![Page 66: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/66.jpg)
Gates & GatekeepersAutomate qualityMinimize risks / exposureRequire performance
![Page 67: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/67.jpg)
GatekeepingChallenges
Feature pressurePoor quality codeUnknown included code
![Page 68: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/68.jpg)
AUTOMATE QUALITY
![Page 69: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/69.jpg)
Static checking
(eslint, jshint, jscs, etc.)
![Page 70: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/70.jpg)
Clientside unit tests
![Page 71: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/71.jpg)
Integration / E2E tests
![Page 72: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/72.jpg)
Code coverage
![Page 73: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/73.jpg)
Continuous integration (CI)
![Page 74: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/74.jpg)
MINIMIZE RISK
![Page 75: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/75.jpg)
Learn / identify your biggestrisk areas
![Page 76: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/76.jpg)
Protect yourself whereverpossible
![Page 77: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/77.jpg)
Architecture risks:
Injected HTML/CSS/JS
![Page 78: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/78.jpg)
Code pattern risks:
Defer & pray
// I'm guessing...var HOPEFULLY_ENOUGH_TIME = 2000;
// Wait until ready for next step.setTimeout(function () { theNextStep();}, HOPEFULLY_ENOUGH_TIME);
![Page 79: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/79.jpg)
Deployment / process risks:
"Hotfeatures"
![Page 80: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/80.jpg)
REQUIRE PERFORMANCE
![Page 81: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/81.jpg)
Frontend code must be small& fast
![Page 82: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/82.jpg)
Teams are "feature-driven"
unless performance isenforced & required
![Page 83: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/83.jpg)
Enforce with audits
"Web App PerformanceMeasurement, Monitoring and
Resiliency"
www.webpagetest.org
![Page 84: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/84.jpg)
Enforce with process
![Page 85: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/85.jpg)
Enforce with automation
"Automating WebPerformance Measurement"
![Page 86: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/86.jpg)
Build your own tools wherenecessary
![Page 87: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/87.jpg)
LIFEGUARDS
![Page 88: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/88.jpg)
Create escape hatches &
lifelines in production
![Page 89: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/89.jpg)
Lifeguards & LifeSavers
Logging, MonitoringDebugging helpers
![Page 90: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/90.jpg)
LifeguardingChallenges
Code executes remotely on differentbrowsersFrontend errors are costly & often invisible
![Page 91: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/91.jpg)
LOGGING & MONITORING
![Page 92: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/92.jpg)
Your code runs & fails
on a variety of browsers
out in the wild
![Page 93: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/93.jpg)
Log & capture everything
![Page 94: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/94.jpg)
Get errors & messages
to a remote store
![Page 95: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/95.jpg)
And then aggregate,
report, & alert
![Page 96: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/96.jpg)
ProvidersRollbar Loggly
Sentry Airbrake
![Page 97: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/97.jpg)
DEBUGGING SUPPORT
![Page 98: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/98.jpg)
Give developers life lines
when things go wrong
![Page 99: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/99.jpg)
You ship this:
!function(){var e="Hello Surge!",a=$("<h1 />");a.text(e),$("body").append(a)}();
![Page 100: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/100.jpg)
Your devs want this:
(function () { var message = "Hello Surge!"; var $heading = $("<h1 />");
$heading.text(message);
$("body").append($heading);}());
![Page 101: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/101.jpg)
Source Maps
/* ... LOTS MORE CODE ... */[],window._entry=c}();//# sourceMappingURL=http://dev.walmart.com:9873/js-dist-frontend/core-bundle.js.map
![Page 102: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/102.jpg)
Publish in VPN ondeployment
![Page 103: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/103.jpg)
Hidden from end users
Available to developers
![Page 104: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/104.jpg)
All Together Now
A "real" buildOrganized codeThe Meta teamEducationCode Review
Automate qualityMinimize risksRequire performanceLogging, MonitoringDebugging helpers
![Page 105: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/105.jpg)
Some partingthoughts on the
future
![Page 106: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/106.jpg)
Embrace change
![Page 107: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/107.jpg)
Reevaluate & refactor your
infrastructure & organization
![Page 108: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/108.jpg)
Have a transition strategy
![Page 109: Wrangling Large Scale Frontend Web Applications](https://reader031.fdocuments.us/reader031/viewer/2022022412/58f9adbd760da3da068b9b67/html5/thumbnails/109.jpg)
HAPPYWRANGLING