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
40

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
60
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
45
MBTI - Psychological types described by Jung
Avatar for Cheesecake Labs cheesecakelabs
0
130

Other Decks in Programming

See All in Programming
PicoRuby on Rails
Avatar for makicamel makicamel
2
140
ふつうの技術スタックでアート作品を作ってみる
Avatar for Akira Yagi akira888
1
1.3k
『自分のデータだけ見せたい！』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
Avatar for AkitoTsukahara akitotsukahara
2
660
The Niche of CDK Grant オブジェクトって何者？/the-niche-of-cdk-what-isgrant-object
Avatar for hassaku63 hassaku63
1
610
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
Avatar for Oikon s4yuba
16
13k
코딩 에이전트 체크리스트: Claude Code ver.
Avatar for nacyot nacyot
0
930
Deep Dive into ~/.claude/projects
Avatar for Yuya Hirayama hiragram
14
14k
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
Avatar for のんちゃん non0113
2
220
なぜ「共通化」を考え、失敗を繰り返すのか
Avatar for Rinchoku rinchoku
1
680
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
Avatar for shimabox shimabox
2
620
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ～継続的な取り組みを添えて～
Avatar for Takuya TAKAHASHI takutakahashi
4
1.3k
ソフトウェア設計とAI技術の活用
Avatar for 増田 亨 masuda220
PRO
17
3.5k

Featured

See All Featured
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
695
190k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
21
1.3k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
351
21k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
223
9.7k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.5k
Side Projects
Avatar for Sacha Greif sachag
455
42k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
25
1.7k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
86
4.8k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.7k

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