JAMStack
- 1. JAMStack is a revolution or evolution in web world? which benefits does it bring and why you must know about it? IVAN BRYGAR Senior Software Developer at Sitecore
- 2. © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners. 1 2 3 4 5 6 7 What is it JAMStack? Benefits Sitecore vs Sitecore with JAMStack CDN as a key point SSG – Static Site Generator Demo Useful links Agenda
- 3. © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners. It's a relatively new architecture for the web. Approach to deliver website. For the longest time we have used the traditional server side or rather server-dependent architecture. But now the JAMStack allows us to create incredibly fast and reliable sites without any of complicated and fragile server-side dependencies. What is it JAMStack? Database Web Server Browser
- 4. © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners. What is JAM? J A M avaScript PI arkup L A M P inux pache ySQL HP Stack - the layer of technology which deliver your website or application.
- 5. © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners. Speed – it’s static site which serve very quickly, has a great cache invalidation. Security – nothing to break, doesn’t have the backend, hence and server-side logic. Scalability – easy to scale on CDNs. Development – easy to develop, many solutions for developers. Benefits
- 6. © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners. Sitecore vs Sitecore with JAMStack SITECORE INSTANCE SITECORE INSTANCE Client Client with JAMStack experience CDN CSS JS HTML Indexes DB ASP.NET Lifecycle Pipelines Jobs Get data via JSS during App build Request Request Processors Backend execution Backend execution CSS JS HTML Done! Done! CDN LB
- 7. © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners. How CDN have the necessary data? SITECORE INSTANCE CDN (Netlify) CSS JS HTML Getting data via JSS during App build https://jss.sitecore.com/ Sitecore JavaScript SDK JSS SSG App Static Site Generator 1) Create SSG App which will fetch Sitecore content. 2) Push source code to GitHub repository. 3) Services, like Netlify consume source code, build and publish app with content to CDNs. 1 2 3 Content Delivery Network Actual content fetch happens during the SSG App Build
- 8. © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners. • Next.js • Hugo • Gatsby • Jekyll • etc. SSG – Static Site Generator https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation
- 9. © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners. Demo of SSG with NextJS and Netlify
- 10. © 2001-2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners. 1 2 3 4 5 https://www.netlify.com/ https://jamstack.org/generators/ https://jamstackthemes.dev/ https://nextjs.org/learn/basics/data-fetching/ https://jsonplaceholder.typicode.com/ Useful links
- 11. Thank you FOR DISCUSSION PURPOSES ONLY. Sitecore Confidential and Proprietary. ©2019 Sitecore Corporation A/S. Sitecore® and Own the Experience® are registered trademarks of Sitecore Corporation A/S. All other brand names are the property of their respective owners.