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
25
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
ひとり情シスなCTOがLLMと始めるオペレーション最適化 / CTO's LLM-Powered Ops
yamitzky
0
430
AIのAIによるAIのための出力評価と改善
chocoyama
2
550
LinkX_GitHubを基点にした_AI時代のプロジェクトマネジメント.pdf
iotcomjpadmin
0
170
AIエージェント最前線! Amazon Bedrock、Amazon Q、そしてMCPを使いこなそう
minorun365
PRO
14
5.1k
Amazon ECS & AWS Fargate 運用アーキテクチャ2025 / Amazon ECS and AWS Fargate Ops Architecture 2025
iselegant
16
5.5k
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
4
1.5k
Yamla: Rustでつくるリアルタイム性を追求した機械学習基盤 / Yamla: A Rust-Based Machine Learning Platform Pursuing Real-Time Capabilities
lycorptech_jp
PRO
3
120
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
140
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
140
フィンテック養成勉強会#54
finengine
0
180
Oracle Audit Vault and Database Firewall 20 概要
oracle4engineer
PRO
3
1.7k
なぜ私はいま、ここにいるのか? #もがく中堅デザイナー #プロダクトデザイナー
bengo4com
0
410
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
53
7.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Being A Developer After 40
akosma
90
590k
Typedesign – Prime Four
hannesfritz
42
2.7k
The Cult of Friendly URLs
andyhume
79
6.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Why You Should Never Use an ORM
jnunemaker
PRO
57
9.4k
KATA
mclloyd
29
14k
Gamification - CAS2011
davidbonilla
81
5.3k
Building an army of robots
kneath
306
45k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
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