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
From Small Terraform Projects to Terralith
abtris
0
26
Build nice terminal UI with Bubble Tea
abtris
1
200
How to make own observability solution?
abtris
0
200
OpenTelemetry as best way how to instrument your CICD pipeline
abtris
0
230
Prague Go Meetup #12 Introductions
abtris
0
43
How we run stateful services for customers in Kubernetes
abtris
0
320
Go Release 1.20
abtris
0
180
CI pipelines should be code! Dagger Go SDK
abtris
1
330
Getting started with fuzzing
abtris
0
310
Other Decks in Technology
See All in Technology
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
180
Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review
mtpooh
2
400
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
190
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
280
解析の定理証明実践@Lean 4
dec9ue
0
180
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.1k
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
4
2.2k
Clineを含めたAIエージェントを 大規模組織に導入し、投資対効果を考える / Introducing AI agents into your organization
i35_267
4
1.6k
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
26k
急成長を支える基盤作り〜地道な改善からコツコツと〜 #cre_meetup
stefafafan
0
130
Lambda Web Adapterについて自分なりに理解してみた
smt7174
3
120
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
2
290
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
35
6.7k
How STYLIGHT went responsive
nonsquared
100
5.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
The Invisible Side of Design
smashingmag
300
51k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Code Review Best Practice
trishagee
68
18k
Visualization
eitanlees
146
16k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
A designer walks into a library…
pauljervisheath
207
24k
Facilitating Awesome Meetings
lara
54
6.4k
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