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

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

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
58
How do we create the first impressions?
Avatar for Cheesecake Labs cheesecakelabs
0
67
Menstrual cup: suit and freedom
Avatar for Cheesecake Labs cheesecakelabs
0
82
Life is a cycle, better with a bicycle
Avatar for Cheesecake Labs cheesecakelabs
0
68
Interview Process: how to get the best of people
Avatar for Cheesecake Labs cheesecakelabs
1
100
My capsule wardrobe experience
Avatar for Cheesecake Labs cheesecakelabs
3
76
Stonewall Rebellion and its impact on LGBTQIA+ history
Avatar for Cheesecake Labs cheesecakelabs
1
55
Pregnancy, childbirth and breastfeeding: What do I have to do with it?
Avatar for Cheesecake Labs cheesecakelabs
0
55
MBTI - Psychological types described by Jung
Avatar for Cheesecake Labs cheesecakelabs
0
150

Other Decks in Programming

See All in Programming
今からFlash開発できるわけないじゃん、ムリムリ! (※ムリじゃなかった!?)
Avatar for Sora Arakawa arkw
0
110
守る「だけ」の優しいEMを抜けて、 事業とチームを両方見る視点を身につけた話
Avatar for Mitsui maroon8021
3
1.1k
AI Assistants for Your Angular Solutions
Avatar for Manfred Steyer manfredsteyer
PRO
0
150
社内規程RAGの精度を73.3% → 100%に改善した話
Avatar for oharu121 oharu121
13
8.2k
Linux Kernelの1文字のミスで 権限昇格ができた話
Avatar for rona rqda
0
1.8k
go directiveを最新にしすぎないで欲しい話──あるいは、Go 1.26からgo mod initで作られるgo directiveの値が変わる話 / Go 1.26 リリースパーティ
Avatar for Arthur arthur1
2
570
ふつうのRubyist、ちいさなデバイス、大きな一年 / Ordinary Rubyists, Tiny Devices, Big Year
Avatar for chobishiba chobishiba
1
480
new(1.26) ← これすき / kamakura.go #8
Avatar for utagawa kiki utgwkk
0
2.5k
The free-lunch guide to idea circularity
Avatar for Holly Cummins hollycummins
0
270
CS教育のDX AIによる育成の効率化
Avatar for ニフティ株式会社 niftycorp
PRO
0
140
DevinとClaude Code、SREの現場で使い倒してみた件
Avatar for karia/Y.Hisamatsu karia
1
1.1k
PHPで TLSのプロトコルを実装してみる
Avatar for higaki higaki_program
0
170

Featured

See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.8k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
5.4k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
790
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
48k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
180
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
760
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
150
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
1
3.5k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.2k
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
86

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