Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JamStack PoSobota 29.9.2018
Search
Ladislav Prskavec
September 29, 2018
Technology
0
220
JamStack PoSobota 29.9.2018
Modern Web Architecturebased on JS, API and Markup #poSobota
Ladislav Prskavec
September 29, 2018
Tweet
Share
More Decks by Ladislav Prskavec
See All by Ladislav Prskavec
How to make own observability solution?
abtris
0
82
OpenTelemetry as best way how to instrument your CICD pipeline
abtris
0
130
Prague Go Meetup #12 Introductions
abtris
0
21
How we run stateful services for customers in Kubernetes
abtris
0
180
Go Release 1.20
abtris
0
99
CI pipelines should be code! Dagger Go SDK
abtris
1
210
Getting started with fuzzing
abtris
0
210
Jamstack in 2021
abtris
0
44
How we build services in Oracle Cloud Infrastructure
abtris
1
70
Other Decks in Technology
See All in Technology
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
14
35k
**強い**エンジニアのなり方 - フィードバックサイクルを勝ち取る / grow one day each day
soudai
61
18k
NgRx Signal Store
rainerhahnekamp
0
120
コンテナセキュリティの基本と脅威への対策
kyohmizu
3
700
シン・Kafka / shin-kafka
oracle4engineer
PRO
7
2.7k
巨大なテーブルのテーブル定義を無停止で安全に誰でも変更できるようにする / Table-definitions-for-huge-tables-can-be-modified-by-anyone-safely-and-non-disruptively
freee
1
740
クラウドサインにおけるプロダクトマネージャーの役割と開発プロセス / 20240410_cloudsign-PdM
bengo4com
1
680
Janus
bkuhlmann
1
490
マルチアカウント環境への発見的統制の導入
ch1aki
1
1.3k
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
220
AIQ株式会社 エンジニア向け会社紹介資料
aiqlab
0
380
反実仮想機械学習とは何か
usaito
PRO
7
2.4k
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.4k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
273
13k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
154
14k
Raft: Consensus for Rubyists
vanstee
132
6.2k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
Side Projects
sachag
451
41k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
220
21k
Product Roadmaps are Hard
iamctodd
43
9.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Transcript
Modern Web Architecture based on JS, API and Markup Ladislav
Prskavec Ladislav Prskavec - poSobota, 29. 9. 2018 1
About me 4 Site Reliability Engineer (SRE) 4 https://keybase.io/abtris 4
https://blog.prskavec.net 4 @abtris Ladislav Prskavec - poSobota, 29. 9. 2018 2
J A M Ladislav Prskavec - poSobota, 29. 9. 2018
3
Javascript A M Ladislav Prskavec - poSobota, 29. 9. 2018
4
Javascript API M Ladislav Prskavec - poSobota, 29. 9. 2018
5
Javascript API Markup Ladislav Prskavec - poSobota, 29. 9. 2018
6
7
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 Sculpin, Jigsaw (PHP) 4 https://www.staticgen.com/ Ladislav Prskavec - poSobota, 29. 9. 2018 8
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 - poSobota, 29. 9. 2018 9
ShowCase Ladislav Prskavec - poSobota, 29. 9. 2018 10
4 https://support.1password.com/ Ladislav Prskavec - poSobota, 29. 9. 2018 11
4 https://letsencrypt.org/, source: https://github.com/letsencrypt/website Ladislav Prskavec - poSobota, 29. 9.
2018 12
4 https://www.smashingmagazine.com/, source: smashing-magazine-just-got-10x-faster Ladislav Prskavec - poSobota, 29. 9.
2018 13
4 https://reactjs.org/ Ladislav Prskavec - poSobota, 29. 9. 2018 14
4 https://mozilladevelopers.github.io/playground/ Ladislav Prskavec - poSobota, 29. 9. 2018 15
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 - poSobota, 29. 9. 2018 16
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 - poSobota, 29. 9. 2018 17
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 - poSobota, 29. 9. 2018 18
When is your site not built with the JAMstack? Ladislav
Prskavec - poSobota, 29. 9. 2018 19
Why the JAMstack? Ladislav Prskavec - poSobota, 29. 9. 2018
20
Why the JAMstack? 4 Better Performance Ladislav Prskavec - poSobota,
29. 9. 2018 21
Why the JAMstack? 4 Better Performance 4 Cheaper, Easier Scaling
Ladislav Prskavec - poSobota, 29. 9. 2018 22
Why the JAMstack? 4 Better Performance 4 Cheaper, Easier Scaling
4 Higher Security Ladislav Prskavec - poSobota, 29. 9. 2018 23
Why the JAMstack? 4 Better Performance 4 Cheaper, Easier Scaling
4 Higher Security 4 Better Developer Experience (DX) Ladislav Prskavec - poSobota, 29. 9. 2018 24
JAMstack 4 https://jamstack.org/ Podcast - Jamstack Radio 4 https://www.heavybit.com/library/podcasts/ jamstack-radio/
Ladislav Prskavec - poSobota, 29. 9. 2018 25
Gatsby.js Ladislav Prskavec - poSobota, 29. 9. 2018 26
Ladislav Prskavec - poSobota, 29. 9. 2018 27
Install (Node.js >8) $ npm install --global gatsby-cli gatsby-generator Ladislav
Prskavec - poSobota, 29. 9. 2018 28
Select starter project $ gatsby-generator Ladislav Prskavec - poSobota, 29.
9. 2018 29
Develop $ gatsby develop 4 you get local preview with
hot reload 4 you get graphql playground for queries Ladislav Prskavec - poSobota, 29. 9. 2018 30
Big CMS as API Ladislav Prskavec - poSobota, 29. 9.
2018 31
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 - poSobota, 29. 9. 2018 32
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 - poSobota, 29. 9. 2018 33
Plugins 4 https://www.gatsby js.org/plugins/#official-plugins Ladislav Prskavec - poSobota, 29. 9.
2018 34
DEMO https://jamstack.166.cz/ https://gatsby.166.cz/ Ladislav Prskavec - poSobota, 29. 9. 2018
35
Thanks Questions? Ladislav Prskavec - poSobota, 29. 9. 2018 36
References 4 https://www.gatsby js.org/ 4 https://github.com/prayasht/awesome-gatsby 4 https://github.com/bntzio/gatsby-generator Ladislav Prskavec
- poSobota, 29. 9. 2018 37