Modern Web Architecture<br>based on JS, API and Markup
2 likes1,370 views
The document discusses modern web architecture using JavaScript, APIs and markup. It focuses on static site generators like Gatsby.js and how they can be used to build sites sourced from headless CMS APIs or large CMSs like WordPress and Drupal. The key benefits of a JAMstack architecture are also covered, such as performance, scalability, security and developer experience. Examples of sites built with Gatsby.js are shown and the speaker demonstrates building a simple site with Gatsby.js.
Modern Web Architecture<br>based on JS, API and Markup
- 1. Modern Web Architecture based on JS, API and Markup Ladislav Prskavec jsDevMeetup Ladislav Prskavec - jsDevMeetup, 10.4. 2018 1
- 2. About me 4 Site Reliability Engineer (SRE) 4 https://keybase.io/abtris 4 https://blog.prskavec.net 4 @abtris Ladislav Prskavec - jsDevMeetup, 10.4. 2018 2
- 3. J A M Ladislav Prskavec - jsDevMeetup, 10.4. 2018 3
- 4. Javascript A M Ladislav Prskavec - jsDevMeetup, 10.4. 2018 4
- 5. Javascript API M Ladislav Prskavec - jsDevMeetup, 10.4. 2018 5
- 6. Javascript API Markup Ladislav Prskavec - jsDevMeetup, 10.4. 2018 6
- 7. 7
- 8. Static Site Generators 4 Jekyll (Ruby) 4 Middleman (Ruby, Rails based) 4 Hugo (Golang) 4 Spike (JS, Webpack based) 4 Gatsby.js (JS, React.JS based) 4 https://www.staticgen.com/ Ladislav Prskavec - jsDevMeetup, 10.4. 2018 8
- 9. Themes for static generators 4 templating depends on technology 4 200 themes in https://themes.gohugo.io/ 4 commercial in https://themeforest.net/.../jekyll 4 Sites build with Gatsby.js Ladislav Prskavec - jsDevMeetup, 10.4. 2018 9
- 10. ShowCase Ladislav Prskavec - jsDevMeetup, 10.4. 2018 10
- 11. 4 https://support.1password.com/ Ladislav Prskavec - jsDevMeetup, 10.4. 2018 11
- 12. 4 https://letsencrypt.org/, source: https://github.com/letsencrypt/website Ladislav Prskavec - jsDevMeetup, 10.4. 2018 12
- 13. 4 https://www.smashingmagazine.com/, source: smashing-magazine-just-got-10x-faster Ladislav Prskavec - jsDevMeetup, 10.4. 2018 13
- 14. 4 https://reactjs.org/ Ladislav Prskavec - jsDevMeetup, 10.4. 2018 14
- 15. 4 https://mozilladevelopers.github.io/playground/ Ladislav Prskavec - jsDevMeetup, 10.4. 2018 15
- 16. APIs 4 Smashingmagazine - post about that 4 Comments - GoTell, Disqus, IntenseDebate, isso 4 Search - Algolia 4 Payments - GoJoin, Stripe 4 Auth - GoTrue, Auth0 4 E-commerce - GoCommerce, Snipcart 4 Images - Cloudinary 4 Lambda, GraphQL, Webtask.io - for yours serverless backends Ladislav Prskavec - jsDevMeetup, 10.4. 2018 16
- 17. Headless CMS 4 Contentful - API based, hosted 4 NetlifyCMS - Git based, hosted 4 strapi - API based, self-hosted 4 Forestry 4 https://headlesscms.org/ Ladislav Prskavec - jsDevMeetup, 10.4. 2018 17
- 18. NetlifyCMS 4 Content management in a single-page app 4 Built in React.js with extensible components 4 Integrate with any build tool 4 Plug in to any static site generator 4 www.netlifycms.org 4 Test it! Ladislav Prskavec - jsDevMeetup, 10.4. 2018 18
- 19. When is your site not built with the JAMstack? Ladislav Prskavec - jsDevMeetup, 10.4. 2018 19
- 20. Why the JAMstack? Ladislav Prskavec - jsDevMeetup, 10.4. 2018 20
- 21. Why the JAMstack? 4 Better Performance Ladislav Prskavec - jsDevMeetup, 10.4. 2018 21
- 22. Why the JAMstack? 4 Better Performance 4 Cheaper, Easier Scaling Ladislav Prskavec - jsDevMeetup, 10.4. 2018 22
- 23. Why the JAMstack? 4 Better Performance 4 Cheaper, Easier Scaling 4 Higher Security Ladislav Prskavec - jsDevMeetup, 10.4. 2018 23
- 24. Why the JAMstack? 4 Better Performance 4 Cheaper, Easier Scaling 4 Higher Security 4 Better Developer Experience (DX) Ladislav Prskavec - jsDevMeetup, 10.4. 2018 24
- 25. JAMstack 4 https://jamstack.org/ Podcast - Jamstack Radio 4 https://www.heavybit.com/library/podcasts/ jamstack-radio/ Ladislav Prskavec - jsDevMeetup, 10.4. 2018 25
- 26. Gatsby.js Ladislav Prskavec - jsDevMeetup, 10.4. 2018 26
- 27. Ladislav Prskavec - jsDevMeetup, 10.4. 2018 27
- 28. Install (Node.js >8) $ npm install --global gatsby-cli gatsby-generator Ladislav Prskavec - jsDevMeetup, 10.4. 2018 28
- 29. Select starter project $ gatsby-generator Ladislav Prskavec - jsDevMeetup, 10.4. 2018 29
- 30. Develop $ gatsby develop 4 you get local preview with hot reload 4 you get graphql playground for queries Ladislav Prskavec - jsDevMeetup, 10.4. 2018 30
- 31. Big CMS as API Ladislav Prskavec - jsDevMeetup, 10.4. 2018 31
- 32. Using Wordpress API 4 https://www.gatsby js.org/packages/gatsby-source- wordpress/ 4 https://developer.wordpress.org/rest-api/reference/ 4 https://using-wordpress.gatsby js.org/ 4 https://github.com/gatsby js/gatsby/tree/master/ examples/using-wordpress Ladislav Prskavec - jsDevMeetup, 10.4. 2018 32
- 33. Using Drupal API A back end for your front end: a content repository. Powered by Drupal 8, JSON API and OAuth2. - https://github.com/acquia/reservoir 4 https://www.drupal.org/project/jsonapi 4 https://www.gatsby js.org/packages/gatsby-source-drupal/ 4 https://using-drupal.gatsby js.org/ 4 https://github.com/gatsby js/gatsby/tree/master/examples/using- drupal Ladislav Prskavec - jsDevMeetup, 10.4. 2018 33
- 34. Plugins 4 https://www.gatsby js.org/plugins/#official-plugins Ladislav Prskavec - jsDevMeetup, 10.4. 2018 34
- 35. DEMO https://jamstack.166.cz/ https://gatsby.166.cz/ Ladislav Prskavec - jsDevMeetup, 10.4. 2018 35
- 36. Thanks Questions? Ladislav Prskavec - jsDevMeetup, 10.4. 2018 36
- 37. References 4 https://www.gatsby js.org/ 4 https://github.com/prayasht/awesome-gatsby 4 https://github.com/bntzio/gatsby-generator Ladislav Prskavec - jsDevMeetup, 10.4. 2018 37