Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

[DevDay2019] JAM Stack - By Ngo Thi Ni, Web Developer at Agility IO

47 views

Published on

JAM Stack is modern web development architecture based on client-side JavaScript, reusable APIs, an prebuilt Markup. You can check it here: jamstack.org

Published in: Technology
  • Be the first to comment

  • Be the first to like this

[DevDay2019] JAM Stack - By Ngo Thi Ni, Web Developer at Agility IO

  1. 1. CONTENT MANAGEMENT WITH GATSBY . CONTENTFUL . NETLIFY SPEAKER: NI NGO
  2. 2. AUDIENCE Students/developers who knows about web, static page but be new to JAM Stack.
  3. 3. 1. All about JAM Stack 2. Sample Stacks 3. Demo 4. Q&A AGENDA
  4. 4. “According to statistics From 40,000+ WordPress Websites in Alexa Top 1 Million, more than 70% of WordPress installations are vulnerable to hacker attacks.” – EnableSecurity 4
  5. 5. – Tealeaf/Harris Interactive 5
  6. 6. TIMELINE 2015 2016 2017 2018 6
  7. 7. Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup. JAM STACK 7
  8. 8. J A MJ A M Javascript APIs Markup 8
  9. 9. 9
  10. 10. ● Better performance. ● Higher security. ● Cheaper, easier scaling. ● Better developer experience. WHY USE IT? 10
  11. 11. ● A site built with a server-side CMS. ● The single page is kind of server rendering (isomorphic). ● The page that contains architecture all in one piece (monolithic). WHEN NOT USING JAM? 11
  12. 12. WHO USE IT? https://serverless.com/ https://www.smashingmagazine.com/ https://lodash.com/ 12
  13. 13. ● Entire site on a CDN ● Atomic Deploys ● Instant Cache Invalidation ● Everything lives in Git ● Automated Builds BEST PRACTICES 13
  14. 14. STATIC SITE GENERATOR 14
  15. 15. DATA SOURCES BUILD DEPLOY Powered by GraphQL HTML - CSS - REACT CMS, Markdown, Data,... Amplify, Netlify,... GATSBY -WHY & HOW IT WORK? 15
  16. 16. It is a CMS online tool that allows to create and distribute content to any platform. CONTENTFUL - WHAT IS IT? 16
  17. 17. ● It is a great hosting service ideal for static sites. ● Has a nice free plan, free CDN ● It is blazing fast. NETLIFY - WHAT IS IT? 17
  18. 18. CMS BUILD CDN Contentful Graphql Gatsby Netlify HOW THEY WORK? Fetch content W ebhook Deploy Client Request 18
  19. 19. DEMO Live: https://jam-stack-devday.netlify.com/ Source: https://github.com/ningo-agilityio/jam-stack
  20. 20. REFERENCES ● https://jamstack.org/ ● https://gatsbyjs.org ● https://contentful.com ● http://netlify.com 20
  21. 21. Q&A
  22. 22. THANK YOU!

×