Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JAMStack in 2019

JAMStack in 2019

Summary about JAMStack and new things that was added into ecosystem in 2019.

Main new things 2019:
- StackBit
- tinaCMS

Ladislav Prskavec

November 01, 2019
Tweet

More Decks by Ladislav Prskavec

Other Decks in Technology

Transcript

  1. JAMstack in 2019
    Ladislav Prskavec
    Ladislav Prskavec - ReactiveConf, 1. 11. 2019 1

    View full-size slide

  2. About me
    4 Site Reliability Engineer (SRE)
    4 https://keybase.io/abtris
    4 https://blog.prskavec.net
    4 @abtris
    Ladislav Prskavec - ReactiveConf, 1. 11. 2019 2

    View full-size slide

  3. Javascript
    API
    Markup
    Ladislav Prskavec - ReactiveConf, 1. 11. 2019 3

    View full-size slide

  4. Ladislav Prskavec - ReactiveConf, 1. 11. 2019 4

    View full-size slide

  5. Static Site Generators
    4 Next.js (JS, React)
    4 Nuxt (JS, Vue)
    4 Gatsby.js (JS, React.JS based)
    4 Hugo (Golang)
    4 Jekyll (Ruby)
    4 https://www.staticgen.com/
    Ladislav Prskavec - ReactiveConf, 1. 11. 2019 5

    View full-size slide

  6. StackBit
    4 https://www.stackbit.com/
    4 Build Modern JAMstack Websites in Minutes
    4 Combine any Theme, Site Generator and CMS
    without complicated integrations
    Ladislav Prskavec - ReactiveConf, 1. 11. 2019 6

    View full-size slide

  7. 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 - ReactiveConf, 1. 11. 2019 7

    View full-size slide

  8. ShowCase
    Ladislav Prskavec - ReactiveConf, 1. 11. 2019 8

    View full-size slide

  9. 4 https://support.1password.com/
    Ladislav Prskavec - ReactiveConf, 1. 11. 2019 9

    View full-size slide

  10. 4 https://letsencrypt.org/, source: https://github.com/letsencrypt/website
    Ladislav Prskavec - ReactiveConf, 1. 11. 2019 10

    View full-size slide

  11. 4 https://www.smashingmagazine.com/, source: smashing-magazine-just-got-10x-faster
    Ladislav Prskavec - ReactiveConf, 1. 11. 2019 11

    View full-size slide

  12. 4 https://reactjs.org/
    Ladislav Prskavec - ReactiveConf, 1. 11. 2019 12

    View full-size slide

  13. 4 https://mozilladevelopers.github.io/playground/
    Ladislav Prskavec - ReactiveConf, 1. 11. 2019 13

    View full-size slide

  14. 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
    4 CloudFlare worker, Lambda Edge - originless
    Ladislav Prskavec - ReactiveConf, 1. 11. 2019 14

    View full-size slide

  15. Headless CMS
    4 Contentful - API based, hosted
    4 NetlifyCMS - Git based, hosted
    4 strapi - API based, self-hosted
    4 Forestry
    4 TinaCMS - side project from Forestry.io
    4 https://headlesscms.org/
    Ladislav Prskavec - ReactiveConf, 1. 11. 2019 15

    View full-size slide

  16. Tina CMS
    4 https://tinacms.org/
    4 Content management in a single-page app
    4 Built in React.js with GraphQL
    4 Gatsby + Next.js
    4 Directly store all in Git
    Ladislav Prskavec - ReactiveConf, 1. 11. 2019 16

    View full-size slide

  17. Why the JAMstack?
    Ladislav Prskavec - ReactiveConf, 1. 11. 2019 17

    View full-size slide

  18. Why the JAMstack?
    4 Better Performance
    Ladislav Prskavec - ReactiveConf, 1. 11. 2019 18

    View full-size slide

  19. Why the JAMstack?
    4 Better Performance
    4 Cheaper, Easier Scaling
    Ladislav Prskavec - ReactiveConf, 1. 11. 2019 19

    View full-size slide

  20. Why the JAMstack?
    4 Better Performance
    4 Cheaper, Easier Scaling
    4 Higher Security
    Ladislav Prskavec - ReactiveConf, 1. 11. 2019 20

    View full-size slide

  21. Why the JAMstack?
    4 Better Performance
    4 Cheaper, Easier Scaling
    4 Higher Security
    4 Better Developer Experience (DX)
    Ladislav Prskavec - ReactiveConf, 1. 11. 2019 21

    View full-size slide

  22. JAMstack
    4 https://jamstack.org/
    Podcast - Jamstack Radio
    4 https://www.heavybit.com/library/podcasts/
    jamstack-radio/
    JAMStack conference - videos from
    Ladislav Prskavec - ReactiveConf, 1. 11. 2019 22

    View full-size slide

  23. Gatsby.js + TinaCMS
    Ladislav Prskavec - ReactiveConf, 1. 11. 2019 23

    View full-size slide

  24. Ladislav Prskavec - ReactiveConf, 1. 11. 2019 24

    View full-size slide

  25. Install (Node.js >8)
    $ npm install --global gatsby-cli
    Ladislav Prskavec - ReactiveConf, 1. 11. 2019 25

    View full-size slide

  26. Select starter project
    $ gatsby new my-tina-starter \
    https://github.com/tinacms/gatsby-starter-tinacms
    Ladislav Prskavec - ReactiveConf, 1. 11. 2019 26

    View full-size slide

  27. Develop
    $ cd my-tina-starter
    $ gatsby develop
    4 you get local preview with hot reload
    4 you get graphql playground for queries
    Ladislav Prskavec - ReactiveConf, 1. 11. 2019 27

    View full-size slide

  28. Big CMS as API
    Ladislav Prskavec - ReactiveConf, 1. 11. 2019 28

    View full-size slide

  29. 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 - ReactiveConf, 1. 11. 2019 29

    View full-size slide

  30. Using Drupal API
    A back end for your front end: a content repository. Powered by Drupal 8,
    JSON API and OAuth2.
    4 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 - ReactiveConf, 1. 11. 2019 30

    View full-size slide

  31. Plugins
    4 https://www.gatsby js.org/plugins/#official-plugins
    Ladislav Prskavec - ReactiveConf, 1. 11. 2019 31

    View full-size slide

  32. Thanks
    Questions?
    Ladislav Prskavec - ReactiveConf, 1. 11. 2019 32

    View full-size slide

  33. References
    4 https://www.gatsby js.org/
    4 https://github.com/prayasht/awesome-gatsby
    4 https://github.com/bntzio/gatsby-generator
    Ladislav Prskavec - ReactiveConf, 1. 11. 2019 33

    View full-size slide