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
based on JS, API and
Markup
Ladislav Prskavec
jsDevMeetup
Ladislav Prskavec - jsDevMeetup, 10.4. 2...
About me
4 Site Reliability Engineer (SRE)
4 https://keybase.io/abtris
4 https://blog.prskavec.net
4 @abtris
Ladislav Prsk...
J
A
M
Ladislav Prskavec - jsDevMeetup, 10.4. 2018 3
Javascript
A
M
Ladislav Prskavec - jsDevMeetup, 10.4. 2018 4
Javascript
API
M
Ladislav Prskavec - jsDevMeetup, 10.4. 2018 5
Javascript
API
Markup
Ladislav Prskavec - jsDevMeetup, 10.4. 2018 6
7
Static Site Generators
4 Jekyll (Ruby)
4 Middleman (Ruby, Rails based)
4 Hugo (Golang)
4 Spike (JS, Webpack based)
4 Gatsb...
Themes for static generators
4 templating depends on technology
4 200 themes in https://themes.gohugo.io/
4 commercial in ...
ShowCase
Ladislav Prskavec - jsDevMeetup, 10.4. 2018 10
4 https://support.1password.com/
Ladislav Prskavec - jsDevMeetup, 10.4. 2018 11
4 https://letsencrypt.org/, source: https://github.com/letsencrypt/website
Ladislav Prskavec - jsDevMeetup, 10.4. 2018 12
4 https://www.smashingmagazine.com/, source: smashing-magazine-just-got-10x-faster
Ladislav Prskavec - jsDevMeetup, 10.4. ...
4 https://reactjs.org/
Ladislav Prskavec - jsDevMeetup, 10.4. 2018 14
4 https://mozilladevelopers.github.io/playground/
Ladislav Prskavec - jsDevMeetup, 10.4. 2018 15
APIs
4 Smashingmagazine - post about that
4 Comments - GoTell, Disqus, IntenseDebate, isso
4 Search - Algolia
4 Payments -...
Headless CMS
4 Contentful - API based, hosted
4 NetlifyCMS - Git based, hosted
4 strapi - API based, self-hosted
4 Forestr...
NetlifyCMS
4 Content management in a single-page app
4 Built in React.js with extensible components
4 Integrate with any b...
When is your site not built
with the JAMstack?
Ladislav Prskavec - jsDevMeetup, 10.4. 2018 19
Why the JAMstack?
Ladislav Prskavec - jsDevMeetup, 10.4. 2018 20
Why the JAMstack?
4 Better Performance
Ladislav Prskavec - jsDevMeetup, 10.4. 2018 21
Why the JAMstack?
4 Better Performance
4 Cheaper, Easier Scaling
Ladislav Prskavec - jsDevMeetup, 10.4. 2018 22
Why the JAMstack?
4 Better Performance
4 Cheaper, Easier Scaling
4 Higher Security
Ladislav Prskavec - jsDevMeetup, 10.4. ...
Why the JAMstack?
4 Better Performance
4 Cheaper, Easier Scaling
4 Higher Security
4 Better Developer Experience (DX)
Ladi...
JAMstack
4 https://jamstack.org/
Podcast - Jamstack Radio
4 https://www.heavybit.com/library/podcasts/
jamstack-radio/
Lad...
Gatsby.js
Ladislav Prskavec - jsDevMeetup, 10.4. 2018 26
Ladislav Prskavec - jsDevMeetup, 10.4. 2018 27
Install (Node.js >8)
$ npm install --global gatsby-cli gatsby-generator
Ladislav Prskavec - jsDevMeetup, 10.4. 2018 28
Select starter project
$ gatsby-generator
Ladislav Prskavec - jsDevMeetup, 10.4. 2018 29
Develop
$ gatsby develop
4 you get local preview with hot reload
4 you get graphql playground for queries
Ladislav Prskave...
Big CMS as API
Ladislav Prskavec - jsDevMeetup, 10.4. 2018 31
Using Wordpress API
4 https://www.gatsby js.org/packages/gatsby-source-
wordpress/
4 https://developer.wordpress.org/rest-...
Using Drupal API
A back end for your front end: a content repository. Powered by Drupal
8, JSON API and OAuth2.
- https://...
Plugins
4 https://www.gatsby js.org/plugins/#official-plugins
Ladislav Prskavec - jsDevMeetup, 10.4. 2018 34
DEMO
https://jamstack.166.cz/
https://gatsby.166.cz/
Ladislav Prskavec - jsDevMeetup, 10.4. 2018 35
Thanks
Questions?
Ladislav Prskavec - jsDevMeetup, 10.4. 2018 36
References
4 https://www.gatsby js.org/
4 https://github.com/prayasht/awesome-gatsby
4 https://github.com/bntzio/gatsby-ge...
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
What to Upload to SlideShare
Next
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

Share

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

Download to read offline

jsDevMeetup about JAMStack - Hugo, Gatsby.js

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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
  • ssuser2a2001

    Apr. 11, 2018

jsDevMeetup about JAMStack - Hugo, Gatsby.js

Views

Total views

1,313

On Slideshare

0

From embeds

0

Number of embeds

26

Actions

Downloads

14

Shares

0

Comments

0

Likes

1

×