JAMStack in 2019

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

Main new things 2019:
- StackBit
- tinaCMS

Transcript

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

   View 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 Slide

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

   View Slide

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

   View 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 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 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 Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 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 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 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 Slide

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

    View Slide

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

    View Slide

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

    View 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 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 Slide

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

    View 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 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 Slide

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

    View Slide

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

    View 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 Slide