'

Wrangling Large Scale Frontend Web Applications

Понравилась презентация – покажи это...





Слайд 0

WRANGLING LARGE SCALE FRONTEND WEB APPLICATIONS @ryan_roemer | surge2015.formidablelabs.com


Слайд 1

The web is massively moving to the frontend


Слайд 2

Users want rich and seamless experiences


Слайд 3

Product owners want fast and nimble apps


Слайд 4

Browser apps are now business critical


Слайд 5

And, yes, even for the enterprise


Слайд 6

... which means


Слайд 7

LOTS OF JAVASCRIPT IN THE BROWSER WRITTEN BY LARGE TEAMS


Слайд 8

Let’s dig into some large frontends at a high-traffic, top-five e-commerce site


Слайд 9


Слайд 10

The Numbers $10 billion FY 2014, $13 billion FY 2015 (est) 1.5 billion page views for Thanksgiving Cyber Monday 2014


Слайд 11

The Code 50+ JS applications 650K lines, 2500 files of JavaScript source More JavaScript lines & files than Java


Слайд 12

The Technologies


Слайд 13

The Dev Team A 2+ year website rewrite 50+ core frontend engineers 14 vertical teams / "tracks" ... and many external teams / partners


Слайд 14

A TOUR THROUGH THE TRENCHES


Слайд 15


Слайд 16

My wrangling adventures as the JavaScript lead for the website & dev teams


Слайд 17

A few battle-tested tips from the field...


Слайд 18

... with a focus on four personas


Слайд 19

ARCHITECTS GUIDES   GATEKEEPERS LIFEGUARDS  


Слайд 20

ARCHITECTS 


Слайд 21

Plan & build a strong foundation


Слайд 22

Architects A real build Code organization


Слайд 23

THE FUNDAMENTAL CHALLENGE: JAVASCRIPT IS THE WILD, WILD WEST


Слайд 24

Architecture Challenges Browser is a single execution environment Code size / duplication is critical Hard to manage, easy to do wrong "Cowboy" legacy vs. large scale organization


Слайд 25

Let's look at the architectural complexities of just one page...


Слайд 26

THE HOMEPAGE 


Слайд 27


Слайд 28

The Homepage Multiple, independent JS apps Code from 8 different teams Exemplary "in transition" page, somewhere between raw JavaScript & a SPA


Слайд 29

 JavaScript ON PAGE Direct page scripts 10 remote scripts 18 inline scripts LAZY LOADED Injected script tags 6 app entry points


Слайд 30

 On Page 2 application code 2 CDN infrastructure 2 internal ads 2 Google ads 1 fonts 1 IE-conditional polyfill 18 inline scripts


Слайд 31

 Lazy (Code) wno.etyfnto( { idw_nr(ucin) rqie[hae/edr] fnto ( { eur("edrhae", ucin ) rqie[hae/edrdfre") eur("edrhae-eerd]; }; ) / .. / . rqie[hmpg/oeae]; eur("oeaehmpg") / .. / . }; )


Слайд 32

 Lazy (App) Asynchronously loaded 1 shared library 4 primary entry points 2 deferred entry points


Слайд 33

THE TAKEAWAY? IT'S COMPLICATED.


Слайд 34

A "REAL" BUILD


Слайд 35

Build Challenges Modern JS apps are complicated (compression, polyfills, transpiling, etc.) Multiple JS apps on the same page is even more complex Supporting development & production / CDN


Слайд 36

Use a Build Tool Choose an paradigm: AMD, CommonJS Choose a build tool / loader: RequireJS, Browserify, Webpack Take time to learn & evaluate the tradeoffs


Слайд 37

Our Build Tools Legacy: AMD + RequireJS Modern: CommonJS + Webpack Transition: AMD & CommonJS + Webpack


Слайд 38

Keep prod & dev builds blazingly fast


Слайд 39

Make development identical to production


Слайд 40

Build Complexities Sharing / caching common code (l b j ) i.s Varying repository structures Sharing frontend & backend code Combining application, OSS, & 3rd party code


Слайд 41

CODE ORGANIZATION


Слайд 42

Plan your repository structure 1 → 14 → many repos


Слайд 43

Have a bias for small & flexible


Слайд 44

GUIDES 


Слайд 45

Coordinate the chaos, level up the development teams


Слайд 46

Guides & Guidance The Meta team Educate Review everything


Слайд 47

Guidance Challenges Thinking of the project as a whole Onboarding unfamiliar / junior developers Helping teams be consistent / complementary


Слайд 48

THE META TEAM


Слайд 49

Code from multiple teams all combined on one page


Слайд 50

These folks represent the whole page


Слайд 51

The Meta Team Set conventions & best practices Lead code reviews for consistency / DRY Develop common utilities & the deployment infrastructure


Слайд 52

YOUR META TEAM TASK: HAVE ONE.


Слайд 53

Our Meta JS Team 1.5 dedicated developers 6 "loaned" track developers


Слайд 54

Our Meta JS Duties ~1 day of code review / week Chat channel participation Cross-track JS initiatives (i18n, multi-tenancy, PCI, etc.)


Слайд 55

Meta JS Benefits Project-wide consistency & support Help tracks consider other teams Represent track interests in the core More engineers to support the whole project


Слайд 56

EDUCATION


Слайд 57

Continually write living documentation, close to the code


Слайд 58

Take a "hands on approach"


Слайд 59

Invest in rising developers & spread knowledge back to teams


Слайд 60

CODE REVIEW


Слайд 61

All code gets substantive & meta review


Слайд 62

Including all third party & internal to the org vendor code


Слайд 63

GATEKEEPERS 


Слайд 64

Protect the frontend through process & architecture


Слайд 65

Gates & Gatekeepers Automate quality Minimize risks / exposure Require performance


Слайд 66

Gatekeeping Challenges Feature pressure Poor quality code Unknown included code


Слайд 67

AUTOMATE QUALITY


Слайд 68

Static checking (eslint, jshint, jscs, etc.)


Слайд 69

Clientside unit tests


Слайд 70

Integration / E2E tests


Слайд 71

Code coverage


Слайд 72

Continuous integration (CI)


Слайд 73

MINIMIZE RISK


Слайд 74

Learn / identify your biggest risk areas


Слайд 75

Protect yourself wherever possible


Слайд 76

Architecture risks: Injected HTML/CSS/JS


Слайд 77

Code pattern risks: Defer & pray / Imgesn.. / ' usig. vrHPFLYEOG_IE=20; a OEUL_NUHTM 00 / Wi utlrayfrnx se. / at ni ed o et tp stieu(ucin( { eTmotfnto ) teettp) hNxSe(; } HPFLYEOG_IE; , OEUL_NUHTM)


Слайд 78

Deployment / process risks: "Hotfeatures"


Слайд 79

REQUIRE PERFORMANCE


Слайд 80

Frontend code must be small & fast


Слайд 81

Teams are "feature-driven" unless performance is enforced & required


Слайд 82

Enforce with audits "Web App Performance Measurement, Monitoring and Resiliency" www.webpagetest.org


Слайд 83

Enforce with process


Слайд 84

Enforce with automation "Automating Web Performance Measurement"


Слайд 85

Build your own tools where necessary


Слайд 86

LIFEGUARDS 


Слайд 87

Create escape hatches & lifelines in production


Слайд 88

Lifeguards & Life Savers Logging, Monitoring Debugging helpers


Слайд 89

Lifeguarding Challenges Code executes remotely on different browsers Frontend errors are costly & often invisible


Слайд 90

LOGGING & MONITORING


Слайд 91

Your code runs & fails on a variety of browsers out in the wild


Слайд 92

Log & capture everything


Слайд 93

Get errors & messages to a remote store


Слайд 94

And then aggregate, report, & alert


Слайд 95

Providers Rollbar Loggly Sentry Airbrake


Слайд 96

DEBUGGING SUPPORT


Слайд 97

Give developers life lines when things go wrong


Слайд 98

You ship this: !ucin)vre"el Sre"a$"h /"; fnto({a =Hlo ug!,=(<1 >) atx()$"oy)apn()(; .ete,(bd".peda})


Слайд 99

Your devs want this: (ucin( { fnto ) vrmsae="el Sre" a esg Hlo ug!; vr$edn =$"h /"; a haig (<1 >) $edn.etmsae; haigtx(esg) $"oy)apn(haig; (bd".ped$edn) }); ()


Слайд 100

Source Maps / ..LT MR CD ..* * . OS OE OE . / [,idw_nr=}) ]wno.etyc(; /#sucMpigR=tp/dvwlatcm97/sds-rned / oreapnULht:/e.amr.o:83j-itfotn


Слайд 101

Publish in VPN on deployment


Слайд 102

Hidden from end users Available to developers


Слайд 103

All Together Now A "real" build Organized code The Meta team Education Code Review Automate quality Minimize risks Require performance Logging, Monitoring Debugging helpers


Слайд 104

Some parting thoughts on the future


Слайд 105

Embrace change


Слайд 106

Reevaluate & refactor your infrastructure & organization


Слайд 107

Have a transition strategy


Слайд 108

HAPPY WRANGLING


Слайд 109

THANKS! surge2015.formidablelabs.com


Слайд 110


×

HTML:





Ссылка: