It's lean, it's crazily fast and it's packed with features: Gatsby is a game changing static PWA generator. This talk starts with a short intro into the consolidated GraphQL content interface and how Gatsby builds pages. We’re then digging into custom content plugins that allow you to connect nearly any data source, explain Gatsby's page generation process and how editors can use MDX to embed dynamic components into their content. We conclude with a build time performance demo that renders and updates a huge amount of pages at once.
Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...
Gatsby (Code.Talks) 2019
1. Stefan Adolf
Pump up the JAM with Gatsby
what‘s this field good for?
Please sendtemplates in openformats next time
2. pump up the JAM with
Gatsby
Generates super fast static PWAs
Stefan Adolf, Turbine Kreuzberg
3. Hello, I am
Stefan Adolf
Developer Ambassador
Foostack developer
Turbine Kreuzberg
@stadolf
#reactjs #mongodb #ethereum #codingberlin
# Apps #symfony #turbinejetzt #microservicesĐApps #symfony #turbinejetzt #microservices
4. A brief history of “CMS”
CMS Systems
Run software on
your own
infrastructure
Website build kits
Let a dentist create
her own website
without any knowledge
Flat file CMS
Render and cache
content server side
The do it yourself desaster
“Could you please add
this commerce
component and
change text to RTL?”
Let a 3rd
party shoot
in your foot
“Yet another
outdated server
template language
to learn”
Content smells past due
“Damn, someone
broke into my
Apache because I
forgot to upgrade
my Linux server”
6. Javascript APIs Markup
JAM in a nutshell
SPAs / PWAs
Rich frontend applications (J/M)
fetch, post & interpolate content when it’s needed
All user interaction logic happens in frontend / JS
Oh hello, I found a public API here.. .
7. Javascript APIs Markup
Static site generators
Prebuild everything as static markup
Deploy on a web server: painless & brainless
Deploy on CDNs & edges
API never needed at render time (only at build)
8. How “static site generators” work
Static page 1
Static page 2
Static page N
Optimized assets
./_site
Layout/pipeline
9. middleman
❍
creates layouts using erb
❍
provides content by json
❍
renders assets using gulp
❍
runs bundle exec middleman build on deployment
❍
upload results from ./build
10. jekyll
❍
creates layouts using liquid
❍
provides content by markdown
❍
renders assets using ruby-sass
❍
runs jekyll b on deployment
❍
upload results from ./_site
11. hugo
❍
creates layouts using go
❍
provides content by yaml
❍
renders assets using pipes
❍
runs hugo on deployment
❍
upload results from ./public
12. “Gatsby.js is a static Progressive Web App generator.”
“Don't build a website with last decade's tech.”
“Liberate your sites from legacy CMSs and fly into the future.”
13. gatsby
❍
creates layouts using React
❍
provides content by GraphQL
❍
renders “assets” using webpack
❍
runs gatsby build on deployment
❍
uploads results from ./public
❍
generates (re-)active PWA!
24. Frontmatter, JSON & MDX
❍Frontmatter: (meta)data in your MD files
❐ Becomes part of GraphQL schema queryable!→ queryable!
❍Use plain JSON files to store tabular data
❍MDX: embed React JSX components in MD, e.g for
❐ Slideshows
❐ Signups / interactive forms
❐ Dynamic advertisments
❐ Tweets & Youtube Videos, all inlined in content
30. Speed (frontend)
❍“performance isn’t optional, it’s built in”
❍inlines critical CSS
❍code/data splitting per route
❍Prefetch page data (JSON) on link hovers
❍offline support: service workers cache content
locally
31.
32. Speed (backend)
❍All API queries are serialized in a Redux cache
❍Only impacts of changed data are rerendered
❍20.000 product pages = 180s (cold start)
~ 1000 pages/s = 20s for complete page build
❐ =3.5 min overall build
❐ =600M of statically generated output
❍Rebuilds = ~30s
33. Wrapup
❍ Not yet another “static site generator”
❐ content agnostic, GQL driven, React PWA SSR engine
❐ Forget all your server side performance issues
❍ connects to any CMS (even Wordpress) or DB
❍ Gatsby Image
❍ incredibly simple to deploy
❐ Just upload your files.
❐ Run npm install && gatsby build on your CD