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

Intro to Astro

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Dimitri Dimitri
March 14, 2023
Programming
0
160

Intro to Astro

This presentation contains an introduction to Astro by creating a Pokédex using the PokéAPI.

Avatar for Dimitri

Dimitri

March 14, 2023
Tweet

More Decks by Dimitri

See All by Dimitri
Moduliths
Avatar for Dimitri g00glen00b
0
130
Tech talk: Micronaut
Avatar for Dimitri g00glen00b
0
230
Better monitoring with Spring boot Actuator
Avatar for Dimitri g00glen00b
0
340
From WordPress to Gatsby
Avatar for Dimitri g00glen00b
3
390
GraphQL
Avatar for Dimitri g00glen00b
1
280
Reactive programming with Spring boot 2
Avatar for Dimitri g00glen00b
1
420
Introduction to Meteor
Avatar for Dimitri g00glen00b
0
480
JavaScript essentials
Avatar for Dimitri g00glen00b
3
460
Fronteers - JavaScript at your enterprise (Dutch)
Avatar for Dimitri g00glen00b
0
240

Other Decks in Programming

See All in Programming
Geminiの機能を調べ尽くしてみた
Avatar for yosshi naruyoshimi
0
190
文字コードの話
Avatar for Masaki Hara qnighy
43
16k
朝日新聞のデジタル版を支えるGoバックエンド ー価値ある情報をいち早く確実にお届けするために
Avatar for JunkiIshida junkiishida
1
330
AHC061解説
Avatar for Shun_PI shun_pi
0
290
メタプログラミングで実現する「コードを仕様にする」仕組み/nikkei-tech-talk43
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
0
150
クライアントワークでSREをするということ。あるいは事業会社におけるSREと同じこと・違うこと
Avatar for nnaka2992 nnaka2992
1
290
JPUG勉強会 OSSデータベースの内部構造を理解しよう
Avatar for Atsushi Ogawa oga5
2
220
「ブロックテーマでは再現できない」は本当か？
Avatar for Takashi Kitajima inc2734
0
1.1k
15年目のiOSアプリを1から作り直す技術
Avatar for TAKEDA Yuki teakun
0
580
並行開発のためのコードレビュー
Avatar for Miyuki miyukiw
2
2.2k
DevinとClaude Code、SREの現場で使い倒してみた件
Avatar for karia/Y.Hisamatsu karia
1
860
TROCCOで実現するkintone+BigQueryによるオペレーション改善
Avatar for shota sato ssxota
0
120

Featured

See All Featured
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
620
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
380
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
180
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
97
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.2k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.8k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.1k

Transcript

  1. Intro to Astro

  2. 👋 Who am I? • Dimitri “g00glen00b” Mestdagh • Full-stack

    developer at Optis • Works with Java and JavaScript • https://dimitri.codes • @g00glen00b

  3. 🚀 What is Astro?

  4. Key features • SSR / SSG framework • Integration with

    React, Vue, … • Server first • Zero JavaScript by default • Multi-Page Application

  5. Why SSR / SSG? Client-Side Server-Side Static Site Fast build

    time Dynamic content Interactive Good SEO Fast page serve ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔

  6. Why zero JavaScript? • No hydration • Less compute-heavy for

    browsers • Better performance • Less bandwidth • Astro Islands

  7. 󰳕 Live coding time!

  8. Conclusion

  9. Personal thoughts • Great Development Experience • Mind-switch SSG/MPA •

    Minimal IDE support

  10. Resources Code: https://github.com/g00glen00b/astro-pokedex

  11. Resources Blogpost: https://dimitri.codes/astro-pokedex/

  12. 🙏 Thank you for listening!