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
39

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
57
Life is a cycle, better with a bicycle
Avatar for Cheesecake Labs cheesecakelabs
0
49
Interview Process: how to get the best of people
Avatar for Cheesecake Labs cheesecakelabs
1
79
My capsule wardrobe experience
Avatar for Cheesecake Labs cheesecakelabs
3
56
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
43
MBTI - Psychological types described by Jung
Avatar for Cheesecake Labs cheesecakelabs
0
130

Other Decks in Programming

See All in Programming
DevDay2025-OracleDatabase-kernel-addressing-history
Avatar for oracle4engineer oracle4engineer
PRO
7
1.6k
Feature Flag 自動お掃除のための TypeScript プログラム変換
Avatar for azarashi azrsh
PRO
4
630
TypeScript製IaCツールのAWS CDKが様々な言語で実装できる理由 ～他言語変換の仕組み～ / cdk-language-transformation
Avatar for k.goto gotok365
7
380
TypeScript LSP の今までとこれから
Avatar for Yosuke Kurami quramy
0
110
ts-morph実践：型を利用するcodemodのテクニック
Avatar for ypresto ypresto
1
540
UPDATEがシステムを複雑にする？ イミュータブルデータモデルのすすめ
Avatar for a.shimomura shimomura
0
220
Javaに鉄道指向プログラミング (Railway Oriented Pro　gramming) のエッセンスを取り入れる/Bringing the Essence of Railway-Oriented Programming to Java
Avatar for takumi.okamoto cocet33000
1
120
Use Perl as Better Shell Script
Avatar for karupanerura karupanerura
0
660
『Python → TypeScript』オンボーディング奮闘記
Avatar for takumi_tatsuno takumi_tatsuno
1
140
CRUD から CQRS へ ～ 分離が可能にする柔軟性
Avatar for Takashi Kawae tkawae
0
230
SpringBootにおけるオブザーバビリティのなにか
Avatar for irof irof
1
890
Cloudflare Realtime と Workers でつくるサーバーレス WebRTC
Avatar for Taiyu Yoshizawa nekoya3
0
240

Featured

See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
750
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
205
24k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
35
6.7k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
269
20k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
45
9.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
137
34k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
40
7.3k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
1
89
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
30
2.1k

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