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
70
0

Gatsby, fast content based websites with React

Avatar for Cheesecake Labs

Cheesecake Labs

December 04, 2019

More Decks by Cheesecake Labs

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

Other Decks in Programming

See All in Programming
Even G2とAWSで推しのエージェントを召喚しよう！
Avatar for Har1101 har1101
1
170
1年で人数1.5倍、PR数5.5倍増。 品質とアウトカムはどうなったか、 何が効いたか
Avatar for ike ike002jp
0
140
JAWS-UG横浜 #102 AWSサ終供養LT会 成仏できない AWS サービスたち 〜本日、三体供養します〜
Avatar for maroon1st maroon1st
0
210
『コードを書く以外の』エンジニアリング〜課金基盤移行プロジェクト推進のためのTips4選
Avatar for yuriko yuriko1211
0
500
エンジニアにデザインハーネスを 〜デザインプロセスを規定するためのハーネス〜 / Design harness from an engineer's perspective
Avatar for r-kagaya rkaga
2
1.5k
壊れたパーサから始める関数型設計と構成的なパーサ #fp_matsuri
Avatar for ライガー raiga0310
2
230
AI時代、エンジニアはどう育つのか -未経験エンジニアの成長を間近で見て考えたこと-
Avatar for ta-hasunuma thasu0123
0
130
関数型プログラミングのメリットって何だろう？
Avatar for わんこ(Wanko_IT) wanko_it
0
180
SREの積み重ねがAI駆動開発のガードレールになった ― 7つの実践/SRE Guardrails The 7
Avatar for TomoyaKitaura tomoyakitaura
8
4.4k
自作OSでスライド発表する
Avatar for uyuki uyuki234
1
3.8k
地域 SRE コミュニティ最前線 - ホンマでっかSRE勉強会
Avatar for tk3fftk tk3fftk
0
240
初めてのKubernetes 本番運用でハマった話
Avatar for Kobujee_53 oku053
0
130

Featured

See All Featured
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
8
830
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.5k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.6k
Fireside Chat
Avatar for paigeccino paigeccino
42
4k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
220
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.3k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
280
New Earth Scene 8
Avatar for Sydney Stone popppiees
3
2.4k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
440
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
180

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