JAMStack in 2019 - Speaker Deck

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Ladislav Prskavec - ReactiveConf, 1. 11. 2019 4

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Ladislav Prskavec - ReactiveConf, 1. 11. 2019 24

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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