Download as PDF, PPTX
Uploaded byTessa Mero
Finding the Jelly in the JAMstack
The document presents an overview of the Jamstack approach to web development, highlighting its advantages such as speed, security, and simplicity. It outlines various use cases and examples, including freecodecamp.org and Nike's implementation of Jamstack technologies. Resources for further exploration of Jamstack are also provided.
More Related Content
Similar to Finding the Jelly in the JAMstack
![[DevDay2019] JAM Stack - By Ngo Thi Ni, Web Developer at Agility IO](https://cdn.slidesharecdn.com/ss_thumbnails/ningo-ningo-jamstack-contentmanagementwithgatsbycontentful-190408090335-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Finding the Jelly in the JAMstack
- 1. Finding the Jellyin the JAMStack ...getting a taste of awesome use cases on JAMStack, by Tessa Mero 19 Dec, 2019 - Vue.js Online The content of this presentation is proprietary information of Cloudinary. It is not intended to be distributed to any third party without the written consent of Cloudinary. © 2019 Cloudinary inc.
- 2. Oh hai ;D ●Communities: ○ (past)Joomla, PHP ○ (current) API, Vue.js, JAMStack ● Developer, Teacher, Advocate ● Gamer + Mom ● Cooking & Korean Food
- 3. Topics ● The JAMstackecosystem ● Business Use Cases (What’s in their JAM?) ● Resources Ready for a scoop?
- 4. What is JAMstack? “TheJAMstack is a static HTML site, rebuilt automatically every time you update the content, and deployed directly to a CDN” - Luca Spezzano
- 5. The Problem: webapps are getting messy ● Security ● Reliability ● Performance
- 6. JAMStack = ProblemFixed +
- 7. The JAMStack ecosystem Whyshould you use JAMStack on your next project?
- 8.
- 9. Static Site Generators: Nuxtjsfor Vue.js
- 10. Reasons for JAMStack ● Speed ●SEO ● Security ● Deployment & Workflow ● Community Image credit: builtvisible.com
- 11.
- 12. Knowing Your Basic Account Identifiersand Navigating Your Account ● Cloud Name
- 13. 3 Reasons why JAMStack isbeing used 1. Speed - CDN Delivery! 2. Scaling - No DevOps! 3. Simplicity - No Database!
- 14. FreeCodeCamp’s Jelly ● Github + ●Gatsby + ● Netlify + ● mLab + ● Auth0 ● Node/Loopback +
- 15.
- 16. System Architecture and Delivery Lifecycle ● Browser Browser- This is the first request, where a resource is requested by the user via their browser. Management Console Elastic Load Balancing: Console
- 17. Sequoia’s Jelly ● MiddleMan ●2 APIs for Content and Jobs ● Sass ● Contentful ● Netlify ● GitHub, fuse.js, google analytics
- 18.
- 19. 3 CMS Types ●Coupled CMS ● Decoupled CMS ● Headless CMS <3 (winning)
- 20. Contentful’s Jelly ● Custom designedCDN ● JSON ● RESTful API architecture
- 21.
- 22. Nike’s Jelly ● Cloudinary (HeadlessDAM) ● Frontend decoupled into a headless CMS ● GatsbyJS
- 23.
- 24. Resources ● Official JAMstackwebsite: https://jamstack.org ● “WTF is JAMstack?” : https://jamstack.wtf (the fun website) ● CMS Wire, “What is JAMstack?” https://www.cmswire.com/information-management/wha t-is-jamstack/ ● https://nuxtjs.org/guide ● Headless DAM https://cloudinary.com
- 25. << end ● Twitter:https://twitter.com/tessamero ● Email.: tessa.mero@cloudinary.com THANK YOU!