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

Intro to Astro

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
410
Introduction to Meteor
Avatar for Dimitri g00glen00b
0
480
JavaScript essentials
Avatar for Dimitri g00glen00b
3
450
Fronteers - JavaScript at your enterprise (Dutch)
Avatar for Dimitri g00glen00b
0
240

Other Decks in Programming

See All in Programming
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
Avatar for izumin5210 izumin5210
7
2.3k
CSC307 Lecture 06
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
690
HTTPプロトコル正しく理解していますか？ 〜かわいい猫と共に学ぼう。ฅ^•ω•^ฅ ﾆｬ〜
Avatar for ♛Heitor Hirose hekuchan
2
690
例外処理とどう使い分ける？Result型を使ったエラー設計 #burikaigi
Avatar for Takuma Kajikawa kajitack
16
6.1k
dchart: charts from deck markup
Avatar for Anthony Starks ajstarks
3
990
20260127_試行錯誤の結晶を1冊に。著者が解説 先輩データサイエンティストからの指南書 / author's_commentary_ds_instructions_guide
Avatar for nash_efp nash_efp
1
980
SourceGeneratorのススメ
Avatar for tkym htkym
0
200
Package Management Learnings from Homebrew
Avatar for Mike McQuaid mikemcquaid
0
230
humanlayerのブログから学ぶ、良いCLAUDE.mdの書き方
Avatar for Yuto tsukamoto1783
0
200
CSC307 Lecture 07
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
550
Apache Iceberg V3 and migration to V3
Avatar for Tomohiro Tanaka tomtanaka
0
160
Basic Architectures
Avatar for Denys Poltorak denyspoltorak
0
680

Featured

See All Featured
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
Between Models and Reality
Avatar for mayunak mayunak
1
190
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
55k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.5k
A Soul's Torment
Avatar for Nat Ma seathinner
5
2.3k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2k
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.3k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.6k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
527
40k

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!