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

Gatsby, fast content based websites with React

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Cheesecake Labs Cheesecake Labs
December 04, 2019
Programming
74
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
83
How do we create the first impressions?
Avatar for Cheesecake Labs cheesecakelabs
0
89
Menstrual cup: suit and freedom
Avatar for Cheesecake Labs cheesecakelabs
0
110
Life is a cycle, better with a bicycle
Avatar for Cheesecake Labs cheesecakelabs
0
90
Interview Process: how to get the best of people
Avatar for Cheesecake Labs cheesecakelabs
1
150
My capsule wardrobe experience
Avatar for Cheesecake Labs cheesecakelabs
3
96
Stonewall Rebellion and its impact on LGBTQIA+ history
Avatar for Cheesecake Labs cheesecakelabs
1
75
Pregnancy, childbirth and breastfeeding: What do I have to do with it?
Avatar for Cheesecake Labs cheesecakelabs
0
80
MBTI - Psychological types described by Jung
Avatar for Cheesecake Labs cheesecakelabs
0
180

Other Decks in Programming

See All in Programming
Go を使い始めて 2 ヶ月の学び / My first two months with Go
Avatar for Daisuke Garaike contour_gara
0
390
源内ハンズオン概要編
Avatar for Hideyuki Nagata hideg
0
220
信頼性の目標を誰も求めてない
Avatar for Shuma shubox
0
210
関東Kaggler会_NVIDIA_Nemotron_コンペ_振り返り
Avatar for rick rick_ds
0
730
My Marp Sample
Avatar for Shota Inoue sinoue0108
0
130
初めての模倣学習とVLA
Avatar for Minoru Natsutani natsutan
0
310
【QA Test Talk Vol.8】AI-DLC による Whole Team Approach の加速
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
0
250
【デモ】Kiroで体験する仕様駆動開発｜設計からコーディングまでAIと進める開発フロー
Avatar for 工藤皓夢 cmkudo
0
500
「つくるAI」だけではバグは見つからない　～テストに必要な「見つけるAI」を分離させる戦略～
Avatar for Masahiko Funaki(舟木 将彦) mfunaki
0
200
Dockerfile CMD for Node.js
Avatar for Ohno Keita grazie1999
0
140
複数の Claude Code が"放置"されてしまう問題をCLI ダッシュボードを自作して解決した話
Avatar for sumihiro3 sumihiro3
1
740
Pythonの実行はどこまで賢くなったのか？ CPythonとPyPyから見る最適化のしくみ
Avatar for curekoshimizu curekoshimizu
3
2.2k

Featured

See All Featured
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
52k
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
400
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
7.1k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
400
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
6.1k
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
1
710
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
560
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
2.4k

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