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.

Modern Web Architecture<br>based on JS, API and Markup

814 views

Published on

jsDevMeetup about JAMStack - Hugo, Gatsby.js

Published in: Technology
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Modern Web Architecture<br>based on JS, API and Markup

  1. 1. Modern Web Architecture based on JS, API and Markup Ladislav Prskavec jsDevMeetup Ladislav Prskavec - jsDevMeetup, 10.4. 2018 1
  2. 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. 3. J A M Ladislav Prskavec - jsDevMeetup, 10.4. 2018 3
  4. 4. Javascript A M Ladislav Prskavec - jsDevMeetup, 10.4. 2018 4
  5. 5. Javascript API M Ladislav Prskavec - jsDevMeetup, 10.4. 2018 5
  6. 6. Javascript API Markup Ladislav Prskavec - jsDevMeetup, 10.4. 2018 6
  7. 7. 7
  8. 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. 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. 10. ShowCase Ladislav Prskavec - jsDevMeetup, 10.4. 2018 10
  11. 11. 4 https://support.1password.com/ Ladislav Prskavec - jsDevMeetup, 10.4. 2018 11
  12. 12. 4 https://letsencrypt.org/, source: https://github.com/letsencrypt/website Ladislav Prskavec - jsDevMeetup, 10.4. 2018 12
  13. 13. 4 https://www.smashingmagazine.com/, source: smashing-magazine-just-got-10x-faster Ladislav Prskavec - jsDevMeetup, 10.4. 2018 13
  14. 14. 4 https://reactjs.org/ Ladislav Prskavec - jsDevMeetup, 10.4. 2018 14
  15. 15. 4 https://mozilladevelopers.github.io/playground/ Ladislav Prskavec - jsDevMeetup, 10.4. 2018 15
  16. 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. 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. 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. 19. When is your site not built with the JAMstack? Ladislav Prskavec - jsDevMeetup, 10.4. 2018 19
  20. 20. Why the JAMstack? Ladislav Prskavec - jsDevMeetup, 10.4. 2018 20
  21. 21. Why the JAMstack? 4 Better Performance Ladislav Prskavec - jsDevMeetup, 10.4. 2018 21
  22. 22. Why the JAMstack? 4 Better Performance 4 Cheaper, Easier Scaling Ladislav Prskavec - jsDevMeetup, 10.4. 2018 22
  23. 23. Why the JAMstack? 4 Better Performance 4 Cheaper, Easier Scaling 4 Higher Security Ladislav Prskavec - jsDevMeetup, 10.4. 2018 23
  24. 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. 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. 26. Gatsby.js Ladislav Prskavec - jsDevMeetup, 10.4. 2018 26
  27. 27. Ladislav Prskavec - jsDevMeetup, 10.4. 2018 27
  28. 28. Install (Node.js >8) $ npm install --global gatsby-cli gatsby-generator Ladislav Prskavec - jsDevMeetup, 10.4. 2018 28
  29. 29. Select starter project $ gatsby-generator Ladislav Prskavec - jsDevMeetup, 10.4. 2018 29
  30. 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. 31. Big CMS as API Ladislav Prskavec - jsDevMeetup, 10.4. 2018 31
  32. 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. 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. 34. Plugins 4 https://www.gatsby js.org/plugins/#official-plugins Ladislav Prskavec - jsDevMeetup, 10.4. 2018 34
  35. 35. DEMO https://jamstack.166.cz/ https://gatsby.166.cz/ Ladislav Prskavec - jsDevMeetup, 10.4. 2018 35
  36. 36. Thanks Questions? Ladislav Prskavec - jsDevMeetup, 10.4. 2018 36
  37. 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

×