Bringing the JAMstack to the Enterprise
0 likes661 views
The document discusses the transition to a JAMstack architecture at PayPal, focusing on its benefits for improving developer experience and deployment speeds. It emphasizes the importance of building stable and fast static applications that leverage APIs while optimizing for caching and performance. The proposed architecture aims to streamline development with minimal moving parts and faster deployment times, ultimately enhancing user experience and developer satisfaction.
![> gatsby develop
success open and validate gatsby-configs — 0.006 s
success load plugins — 0.144 s
success onPreInit — 0.797 s
success delete html and css files from previous builds — 0.004 s
success initialize cache — 0.006 s
success copy gatsby files — 0.074 s
success onPreBootstrap — 0.005 s
success source and transform nodes — 0.047 s
success building schema — 0.262 s
success update schema — 0.100 s
Generating image thumbnails [==============================] 6/6 0.2 secs 100%
info bootstrap finished - 7.107 s
DONE Compiled successfully in 3592ms
You can now view qcon2019 in the browser.
http://localhost:8000/](https://image.slidesharecdn.com/jamstack-190612182654/85/Bringing-the-JAMstack-to-the-Enterprise-63-320.jpg)
![{
"hosting": {
"redirects": [{
"source": "/beta",
"destination": "/",
"type": 301
}],
"rewrites": [{
"source": "/profiles/*",
"destination": "/profiles.html"
}],
"headers": [{
"source": “**/*.js”,
"headers": [{
"key": “Access-Control-Allow-Origin“,
"value": “*"
}]
}]
}
EASILY APPLY
CORS HEADERS
REDIRECTS FOR
OUTDATED URLS
REWRITES FOR
WILDCARD URLS](https://image.slidesharecdn.com/jamstack-190612182654/85/Bringing-the-JAMstack-to-the-Enterprise-77-320.jpg)
Bringing the JAMstack to the Enterprise
- 1. BRINGING THE JAMSTACK TO THE ENTERPRISE
- 2. JAMUND FERGUSON ➡ Been at PayPal for 5.5yrs ➡ Brought in during Java to Node transition ➡ Currently leading consumer web platform team ➡ Focused on improving developer experience ➡ Do a lot of training and talking about JavaScript internally and externally
- 4. LACK OF STABILITY INCREDIBLY SLOW DEPLOY TIMES CLIENT-SIDE PERF
- 6. WE HAVE A LOT OF SERVERS
- 10. DEPLOYS CAN TAKE HOURS
- 11. DEPLOYS CAN TAKE HOURS
- 12. DEPLOYS CAN TAKE HOURS
- 20. WHAT IF DOING THE RIGHT THING IS TOO HARD?
- 21. WE NEED TO RE-THINK THE ARCHITECTURE
- 22. GOLANG MACHINE LEARNINGCLOUD FUNCTIONS TECHNOLOGY ENVY
- 23. UI Application Servers Java JavaJava C++ Backend Services Node.jsJSX REST API ReactHTML CSS CDN
- 25. UI Application Servers Java JavaJava C++ Backend Services Node.jsJSX REST API ReactHTML CSS CDN
- 26. UI Application Servers Java JavaJava C++ Backend Services Node.jsJSX REST API ReactHTML CSS CDN
- 27. UI Application Servers Java JavaJava C++ Backend Services Node.jsJSX REST API ReactHTML CSS CDN
- 28. UI Application Servers Java JavaJava C++ Backend Services JSX REST API ReactHTML CSS CDN
- 29. UI Application Servers Java JavaJava C++ Backend Services JSX REST API ReactHTML CSS CDN
- 30. UI Application Servers Java JavaJava C++ Backend Services JSX REST API ReactHTML CSS CDN
- 31. UI Application Servers Java JavaJava C++ Backend Services JSX REST API ReactHTML CSS CDN GRAPHQL
- 32. UI Application Servers Java JavaJava C++ Backend Services JSX ReactHTML CSS CDN GRAPHQL PROXY
- 34. HELLO JAMSTACK, MY OLD FRIEND
- 39. JAMSTACK
- 41. THEIR DEVICEGEOGRAPHICAL NEAR (CDN) CLOUD KEEP CONTENT CLOSER TO THE CUSTOMER
- 42. FEW MOVING PARTS NO DATABASE NO APP SERVER NO PROGRAMMING LANGUAGE
- 43. GREAT TOOLING & DX DEPLOY IN SECONDS REACT & GATSBY SINGLE STACK
- 44. JAMSTACK IS GREAT FOR STATIC SITES
- 45. YOU CAN ALSO MAKE FULLY INTERACTIVE WEB APPS
- 46. STATIC APPS ARE FULLY INTERACTIVE WEB APPS, POWERED BY STATIC ASSETS* * and some APIs too
- 47. LOAD THE DYNAMIC BITS LOAD THE STATIC PART <300MS CDN / EDGE BROWSER 300ms TTFB IS SUPER FAST. MOST OF PAGE READY TO GO RIGHT AWAY! 300ms 30ms 400ms500ms CDN / EDGE LOAD BALANCER GRAPHQLBROWSER SERVICES OR DATABASE ~1000MS WAITING TIME IS LOWER THAN SSR BECAUSE I’M ONLY DOING API PROCESSING
- 48. CDN / EDGE LOAD BALANCER NODE.JSNGINXBROWSER SERVICES OR DATABASE SERVER-SIDE RENDERED JAVASCRIPT 300ms 30ms 800ms10ms 1000ms 2140MS PRE-RENDERED HTML AT THE CDN 300MS CDN / EDGE BROWSER 300ms
- 49. PPME: PARTIALLY SERVER-RENDERED VERSION 3 SECONDS OF WHITE SCREEN 1000MS OF JS & IMAGES TOTAL LOAD TIME (THROTTLED): ~4000MS
- 50. PPME: STATIC APP VERSION INITIAL PAGE LOAD IS UNDER 1S 1500MS PARSING JS & WAITING ON CONTENT 500MS RECEIVE CONTENT TOTAL LOAD TIME (THROTTLED): ~3000MS
- 51. ENTERPRISE JAMSTACK WHEN BUILDING STATIC APPS ‣ Think files not routes ‣ Pre-render as much as possible (how frequently?) ‣ Load additional content with APIs ‣ Cache / optimize aggressively
- 52. PayPal.me Settings Page - How much of this page can be static? - Load it up with an API - Optimize using SessionStorage by pre-loading the users basic settings at log-in TO 300MS + 200MS = 500MS FROM 300MS + 1200MS = 1500MS 2 3 4 /PAYPALME/SETTINGS SETTINGS.HTML1
- 53. My PayPal.me Profile PAYPAL.ME/JAMUND JAMUND.HTML PAYPAL.ME/* PROFILE.HTML 1 2 How much we we pre-render? Make an API call for more data3 Optimizations: • Cache user info / API request • We can also load things like the URL directly from memory • <img src=“/images/:slug” /> 4
- 54. EVEN IN WORST CASE SCENARIOS, WHERE MOST OF THE PAGE IS DYNAMIC, STATIC APPS ARE FAST
- 55. BRINGING IT TO THE ENTERPRISE
- 56. ADOPTION AND BUY-IN Hold Workshops / Build Hype
- 57. WE DECIDED TO BUILD A PROTOTYPE VERSION OF PAYPAL.ME
- 58. BUILD OUT TOOLING SO THAT ANY TEAM COULD MAKE A STATIC APP
- 59. A TOOL TO GENERATE OUR STATIC ASSETS A PLACE TO HOST THEM
- 62. > gatsby new qcon2019 info Creating new site from git: https://github.com/gatsbyjs/gatsby-starter-default.g Cloning into 'qcon2019'... remote: Enumerating objects: 5, done. remote: Counting objects: 100% (5/5), done. remote: Compressing objects: 100% (5/5), done. remote: Total 1077 (delta 0), reused 2 (delta 0), pack-reused 1072 Receiving objects: 100% (1077/1077), 1.93 MiB | 1.72 MiB/s, done. Resolving deltas: 100% (610/610), done. success Created starter directory layout info Installing packages... ✔ cwebp pre-build test passed successfully ✔ mozjpeg pre-build test passed successfully ✔ pngquant pre-build test passed successfully added 1884 packages from 1136 contributors in 53.286s
- 63. > gatsby develop success open and validate gatsby-configs — 0.006 s success load plugins — 0.144 s success onPreInit — 0.797 s success delete html and css files from previous builds — 0.004 s success initialize cache — 0.006 s success copy gatsby files — 0.074 s success onPreBootstrap — 0.005 s success source and transform nodes — 0.047 s success building schema — 0.262 s success update schema — 0.100 s Generating image thumbnails [==============================] 6/6 0.2 secs 100% info bootstrap finished - 7.107 s DONE Compiled successfully in 3592ms You can now view qcon2019 in the browser. http://localhost:8000/
- 67. Pages Folder
- 69. GATSBY IS MAGIC
- 70. { PORTING AN EXISTING REACT SITE TO GATSBY ISN’T VERY HARD }
- 72. > gatsby build success open and validate gatsby-configs — 0.063 s success load plugins — 0.130 s success onPreInit — 0.741 s success onPreBootstrap — 0.004 s success source and transform nodes — 0.035 s success building schema — 0.211 s success createPages — 0.000 s success update schema — 0.096 s success extract queries from components — 0.096 s success run graphql queries — 0.046 s — 8/8 177.64 queries/second success write out page data — 0.003 s success write out redirect data — 0.001 s success onPostBootstrap — 0.284 s info bootstrap finished - 4.976 s success Building production JavaScript and CSS bundles — 8.634 s success Building static HTML for pages — 0.604 s — 5/5 22.57 pages/second info Done building in 14.22 sec
- 75. LET’S BUILD THE JAMSTACK DX INSIDE OUR OWN PRIVATE CLOUD
- 77. { "hosting": { "redirects": [{ "source": "/beta", "destination": "/", "type": 301 }], "rewrites": [{ "source": "/profiles/*", "destination": "/profiles.html" }], "headers": [{ "source": “**/*.js”, "headers": [{ "key": “Access-Control-Allow-Origin“, "value": “*" }] }] } EASILY APPLY CORS HEADERS REDIRECTS FOR OUTDATED URLS REWRITES FOR WILDCARD URLS
- 78. GRAPHQL Java JavaJava ASF CDN GatsbyHTMLCSS Backend Services Frontend Services
- 79. STATIC APP SERVER GRAPHQL Java JavaJava ASF Frontend Services GatsbyHTMLCSS Backend Services Application Servers
- 80. PRODUCTION STAGING EACH APP SERVER CONTAINS ITS OWN ASSETS
- 81. ▸ Developer can completely ignore app server ▸ “1-minute deploy” to production ▸ Infra team on the hook now if anything stops working ▸ Add static app capabilities to our current build & deploy pipeline ▸ Allow app devs to mostly focus on UI server piece ▸ “1-minute deploy” to staging PHASE 1: STATIC APP SUPPORT PHASE 2: STATIC APPS AS A SERVICE STATIC APPS ADOPTION PLAN
- 82. STATIC APP SERVICE APP MAPPINGS CLOUD STORAGE ALL TEAMS SHARE A SINGLE SERVICE TO SERVE THEIR APPS /paypalme /summary /home
- 83. STATIC APP SERVICE APP MAPPINGS CLOUD STORAGE 1. Generates Files 2. Push them to Cloud 3. Update Mappings ROLLBACK /paypalme /summary /home
- 85. WHEN DOING THE RIGHT THING IS POSSIBLE, BUT NOT EASY, CONSIDER CHANGING YOUR ARCHITECTURE
- 86. JAMSTACK PROVIDES A STABLE & PERFORMANT ARCHITECTURE BY DEFAULT
- 87. INSTEAD OF SIMPLE STATIC SITES WE ARE CHOOSING TO TO BUILD FULLY INTERACTIVE STATIC APPS
- 88. THESE APPS ARE VERY STABLE AND VERY FAST AND THE DEVELOPER EXPERIENCE IS AWESOME
- 89. EVEN AFTER HAVING TO BUILD A LOT OF OUR OWN INFRASTRUCTURE WE THINK ITS GOING TO BE WORTH THE INVESTMENT
- 90. OUR DEVELOPERS ARE GOING TO LOVE IT AND WE THINK YOU WILL TOO
- 91. JAMSTACK IS GOING TO BE HUGE
- 92. THANK YOU