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
42

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
53
Menstrual cup: suit and freedom
Avatar for Cheesecake Labs cheesecakelabs
0
62
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
59
Stonewall Rebellion and its impact on LGBTQIA+ history
Avatar for Cheesecake Labs cheesecakelabs
1
37
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
WebAssemblyインタプリタを書く ～Component Modelを添えて～
Avatar for ruccho ruccho
1
480
実践 Dev Containers × Claude Code
Avatar for Yuto Akiba touyu
1
140
DataformでPythonする / dataform-de-python
Avatar for snhryt snhryt
0
150
GitHub Copilotの全体像と活用のヒント AI駆動開発の最初の一歩
Avatar for 74th(Atsushi Morimoto) 74th
7
2k
decksh - a little language for decks
Avatar for Anthony Starks ajstarks
4
21k
Flutter로 Gemini와 MCP를 활용한 Agentic App 만들기 - 박제창 2025 I/O Extended Seoul
Avatar for JaiChangPark itsmedreamwalker
0
100
階層化自動テストで開発に機動力を
Avatar for ICKX ickx
1
470
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
Avatar for Takuma Kajikawa kajitack
3
530
What's new in Adaptive Android development
Avatar for Sungyong An fornewid
0
130
コーディングは技術者(エンジニア)の嗜みでして / Learning the System Development Mindset from Rock Lady
Avatar for mackey0225 mackey0225
2
130
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
Avatar for azukiazusa azukiazusa1
3
790
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
Avatar for ShuyaKinjo shuyakinjo
0
210

Featured

See All Featured
Building Applications with DynamoDB
Avatar for Matt Wood mza
95
6.5k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
23
3.6k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
614
210k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.7k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
56
5.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
790
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
110
19k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
10
1k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
30
6k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k

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