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

Intro to Astro

Avatar for Dimitri Dimitri
March 14, 2023
Programming
0
130

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
110
Tech talk: Micronaut
Avatar for Dimitri g00glen00b
0
210
Better monitoring with Spring boot Actuator
Avatar for Dimitri g00glen00b
0
320
From WordPress to Gatsby
Avatar for Dimitri g00glen00b
3
370
GraphQL
Avatar for Dimitri g00glen00b
1
260
Reactive programming with Spring boot 2
Avatar for Dimitri g00glen00b
1
380
Introduction to Meteor
Avatar for Dimitri g00glen00b
0
400
JavaScript essentials
Avatar for Dimitri g00glen00b
3
420
Fronteers - JavaScript at your enterprise (Dutch)
Avatar for Dimitri g00glen00b
0
200

Other Decks in Programming

See All in Programming
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
Avatar for uki00a uki00a
0
150
GoのGenericsによるslice操作との付き合い方
Avatar for syumai syumai
3
690
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
Avatar for 이가은 gaeun5744
3
320
Elixir で IoT 開発、 Nerves なら簡単にできる！？
Avatar for pojiro pojiro
1
150
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
Avatar for Koichi NAKAGAWA knakagawa
1
120
既存デザインを変更せずにタップ領域を広げる方法
Avatar for Tiphaine tahia910
1
240
Deep Dive into ~/.claude/projects
Avatar for Yuya Hirayama hiragram
8
1.5k
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
Avatar for ANDPAD inc andpad
0
260
地方に住むエンジニアの残酷な現実とキャリア論
Avatar for nakamichi ichimichi
5
1.3k
XP, Testing and ninja testing
Avatar for seki at druby.org m_seki
3
190
XSLTで作るBrainfuck処理系
Avatar for MakKi makki_d
0
210
ASP.NETアプリケーションのモダナイズ インフラ編
Avatar for tomokusaba tomokusaba
1
410

Featured

See All Featured
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
270
20k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
234
140k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
252
21k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
51
8.4k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
207
24k
Adopting Sorbet at Scale
Avatar for Ufuk Kayserilioglu ufuk
77
9.4k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
330
24k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
53
2.8k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
524
40k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1031
460k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
36
2.8k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k

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!