Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Gatsby, fast content based websites with React

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Cheesecake Labs Cheesecake Labs
December 04, 2019
Programming
77
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
88
How do we create the first impressions?
Avatar for Cheesecake Labs cheesecakelabs
0
98
Menstrual cup: suit and freedom
Avatar for Cheesecake Labs cheesecakelabs
0
120
Life is a cycle, better with a bicycle
Avatar for Cheesecake Labs cheesecakelabs
0
96
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
110
Stonewall Rebellion and its impact on LGBTQIA+ history
Avatar for Cheesecake Labs cheesecakelabs
1
78
Pregnancy, childbirth and breastfeeding: What do I have to do with it?
Avatar for Cheesecake Labs cheesecakelabs
0
86
MBTI - Psychological types described by Jung
Avatar for Cheesecake Labs cheesecakelabs
0
180

Other Decks in Programming

See All in Programming
WebAssembly in Android Apps 〜 WASMはJNIの夢を見るか
Avatar for ARIYAMA Keiji keiji
1
110
AgentCore CLI で進化した AWS での AI エージェントの作り方 : 必要な機能を必要な時に
Avatar for Takahiro Kubo icoxfog417
PRO
3
350
GraphRAGのKnowledge Graphを 直接！見る/View-GraphRAG's-KnowledgeGraph-directly!
Avatar for tyumugiko tyumugi1113
1
330
What We Talk About When We Talk About XP
Avatar for seki at druby.org m_seki
2
640
From 6 People Classroom Meetup to 100 People Regional Conference / FOSS4G Hiroshima 2026
Avatar for YFurukawa furukawayasuto
0
210
Webの地図
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
6
4.6k
LL言語やWebフレームワークの PostgreSQL対応 〜DBの機能がユーザーに届くまで〜
Avatar for 武田 憲太郎 kentaroutakeda
1
150
Streamlitで実現する自然言語データアプリ開発
Avatar for Ayumu Yamaguchi ayumu_yamaguchi
1
290
AI が書く Go コードの品質を劇的に向上させる Linter: “declscope”
Avatar for mpyw mpyw
0
350
Jetpack Compose メカニズム
Avatar for Jaewoong skydoves
0
430
setup-vp GitLab対応の裏側
Avatar for Naoki Haba naokihaba
0
100
AI に Inclusive UI を書かせよう — Design Rules Skill で Compose UI を作り直す
Avatar for テオリア・テクノロジーズ theoriatec2024
1
490

Featured

See All Featured
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
464
34k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
570
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.5k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
510
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9.2k
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
310
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
1
510
HDC tutorial
Avatar for Michiel Stock michielstock
2
870
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
670
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
23k
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
480
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k

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