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
61
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
70
How do we create the first impressions?
Avatar for Cheesecake Labs cheesecakelabs
0
78
Menstrual cup: suit and freedom
Avatar for Cheesecake Labs cheesecakelabs
0
97
Life is a cycle, better with a bicycle
Avatar for Cheesecake Labs cheesecakelabs
0
80
Interview Process: how to get the best of people
Avatar for Cheesecake Labs cheesecakelabs
1
130
My capsule wardrobe experience
Avatar for Cheesecake Labs cheesecakelabs
3
83
Stonewall Rebellion and its impact on LGBTQIA+ history
Avatar for Cheesecake Labs cheesecakelabs
1
64
Pregnancy, childbirth and breastfeeding: What do I have to do with it?
Avatar for Cheesecake Labs cheesecakelabs
0
66
MBTI - Psychological types described by Jung
Avatar for Cheesecake Labs cheesecakelabs
0
160

Other Decks in Programming

See All in Programming
Modding RubyKaigi for Myself
Avatar for yui-knk yui_knk
0
870
セキュリティの専門家じゃなくてもできる。「セキュリティ意識」をアップデートして サプライチェーン攻撃への耐性を高めよう。
Avatar for tk3fftk tk3fftk
5
570
Spec Driven Development | AI Summit Lisbon
Avatar for Daniel Sogl danielsogl
PRO
0
130
Java × distroless で 軽量なコンテナイメージを / Java on Distroless
Avatar for Daisuke Garaike contour_gara
0
470
Composerを使ったサプライチェーン攻撃の様子を眺めてみる #phpstudy
Avatar for hideki kinjyo o0h
PRO
2
220
柔軟なPDFレイアウトエディタを支える型システム設計 — Discriminated UnionとConditional Typeの実践
Avatar for minako-ph minako__ph
4
1.3k
Swiftのレキシカルスコープ管理
Avatar for kntk kntkymt
0
210
Oxlintのカスタムルールの現況
Avatar for syumai syumai
5
980
ふつうのFeature Flag実践入門
Avatar for irof irof
7
3.5k
次世代リンターで探る、tsgo 時代における型認識カスタムルールの現実解
Avatar for Yuta Takahashi ytakahashii
3
1.4k
net-httpのHTTP/2対応について
Avatar for NARUSE, Yui naruse
0
430
AI 時代のソフトウェア設計の学び方
Avatar for 増田 亨 masuda220
PRO
29
12k

Featured

See All Featured
Abbi's Birthday
Avatar for Violet Bock coloredviolet
2
7.9k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
210k
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
2
570
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
720
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.9k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
66k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
65
55k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
780
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
1
230
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
320
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.8k

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