Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Gatsby, fast content based websites with React

Avatar for Cheesecake Labs Cheesecake Labs
December 04, 2019
Programming
0
45

Gatsby, fast content based websites with React

Avatar for Cheesecake Labs

Cheesecake Labs

December 04, 2019
Tweet

More Decks by Cheesecake Labs

See All by Cheesecake Labs
Cats' wellness & care
Avatar for Cheesecake Labs cheesecakelabs
0
49
How do we create the first impressions?
Avatar for Cheesecake Labs cheesecakelabs
0
54
Menstrual cup: suit and freedom
Avatar for Cheesecake Labs cheesecakelabs
0
66
Life is a cycle, better with a bicycle
Avatar for Cheesecake Labs cheesecakelabs
0
51
Interview Process: how to get the best of people
Avatar for Cheesecake Labs cheesecakelabs
1
84
My capsule wardrobe experience
Avatar for Cheesecake Labs cheesecakelabs
3
60
Stonewall Rebellion and its impact on LGBTQIA+ history
Avatar for Cheesecake Labs cheesecakelabs
1
40
Pregnancy, childbirth and breastfeeding: What do I have to do with it?
Avatar for Cheesecake Labs cheesecakelabs
0
47
MBTI - Psychological types described by Jung
Avatar for Cheesecake Labs cheesecakelabs
0
130

Other Decks in Programming

See All in Programming
iOSアプリの信頼性を向上させる取り組み/ios-app-improve-reliability
Avatar for yuki shinohara shino8rayu9
0
140
大規模アプリのDIフレームワーク刷新戦略 ～過去最大規模の並行開発を止めずにアプリ全体に導入するまで～
Avatar for GO Inc. dev mot_techtalk
0
360
どの様にAIエージェントと 協業すべきだったのか？
Avatar for Takepepe takefumiyoshii
1
580
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
Avatar for aokirishima aokswork3
0
100
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
Avatar for TOMIKAWA Sotaro ssssota
2
1.1k
プロダクト開発をAI 1stに変革する〜SaaS is dead時代で生き残るために〜 / AI 1st Product Development
Avatar for Keisuke Kobayashi kobakei
0
460
AIエージェント時代における TypeScriptスキーマ駆動開発の新たな役割
Avatar for おおいし bicstone
4
1.5k
iOSDC.pdf
Avatar for ビスター chronos2500
2
650
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
Avatar for masato hommaru mbook
0
710
タスクの特性や不確実性に応じた最適な作業スタイルの選択（ペアプロ・モブプロ・ソロプロ）と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
Avatar for yuki honyanya
2
130
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
Avatar for Takeru Hayasaka takehaya
7
1.5k
defer f()とdefer fの挙動を 誤解していた話
Avatar for kogamochiduki kogamochiduki
2
170

Featured

See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
114
20k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
37
2.9k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
139
7.1k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
30
2.9k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
6.9k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
27
2k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
A better future with KSS
Avatar for Kyle Neath kneath
239
17k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
332
24k

Transcript

  1. Gatsby Gatsby is a free and open source framework based

    on React that helps developers build blazing fast websites and apps

  2. Gatsby is a "static" website generator

  3. None
  4. None

  5. 1. Modern web tech without the headache 2. Speed past

    the competition 3. Progressive Web App by default 4. Bring your own data https://www.gatsbyjs.org/

  6. Content is the king (Data sources)

  7. None

  8. https://www.gatsbyjs.org/docs/how-plugins-apis-are-run/

  9. Node runner Data sources Create node (reducer) Call onCreateNode Provide

    data to query Build

  10. How to query the data

  11. None
  12. None
  13. None

  14. Data can be queried inside pages, components, or the gatsby-node.js

    file, using one of these options: 1. The pageQuery component 2. The StaticQuery component 3. The useStaticQuery hook
  15. None

  16. Performance Optimization Performance is hard. Let’s make Gatsby do the

    work.

  17. https://www.gatsbyjs.org/blog/2017-09-13-why-is-gatsby-so-fast/#reach-skip-nav

  18. Image performance Ohhh myyyyy

  19. https://using-gatsby-image.gatsbyjs.org/ The problem: Large, unoptimized images dramatically slow down your

    site.
  20. None

  21. Everything is a plugin 1480 plugins today

  22. None
  23. None

  24. Nothing is perfect Pages (solves with a plugin), variables inside

    query), cache and build time problems on deploy (netlify)

  25. Why we should use at CKL?

  26. Real world projects

  27. Questions?

  28. Thanks