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

Intro to Astro

Avatar for Dimitri Dimitri
March 14, 2023
Programming
170
0

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

More Decks by Dimitri

See All by Dimitri
Moduliths
Avatar for Dimitri g00glen00b
0
140
Tech talk: Micronaut
Avatar for Dimitri g00glen00b
0
240
Better monitoring with Spring boot Actuator
Avatar for Dimitri g00glen00b
0
350
From WordPress to Gatsby
Avatar for Dimitri g00glen00b
3
400
GraphQL
Avatar for Dimitri g00glen00b
1
290
Reactive programming with Spring boot 2
Avatar for Dimitri g00glen00b
1
440
Introduction to Meteor
Avatar for Dimitri g00glen00b
0
500
JavaScript essentials
Avatar for Dimitri g00glen00b
3
470
Fronteers - JavaScript at your enterprise (Dutch)
Avatar for Dimitri g00glen00b
0
260

Other Decks in Programming

See All in Programming
TypeScriptだけでAIエージェントを作る フロント・エージェント・インフラのフルスタック実践
Avatar for Har1101 har1101
6
1.2k
「エンジニアインターン、どうやって取った？」準備のリアルを語るLT会 Progate BAR
Avatar for akio akiomatic
0
100
JJUG CCC 2026 Spring: JSpecify で実現する Kotlin フレンドリーな Java API 設計
Avatar for ternbusty ternbusty
1
110
GitHub Copilot CLIのいいところ
Avatar for tkym htkym
2
1.2k
生成AI時代にこそ効くGo | Why Go Works in the Age of Generative AI
Avatar for mom0tomo mom0tomo
8
3k
AI駆動開発で崩れていくコードベースを立て直す
Avatar for Kyoko NR kyoko_nr_nr
1
400
LLM Plugin for Node-REDの利用方法と開発について
Avatar for 404background 404background
0
140
さぁV100、メモリをお食べ・・・
Avatar for nilpe nilpe
0
110
OCRを使ってゲームのアイテムをデータ化する
Avatar for Kishikawa Katsumi kishikawakatsumi
0
120
開発体験を左右するライブラリの API 設計 - GraphQL スキーマ構築ライブラリから考える #tskaigi
Avatar for izumin5210 izumin5210
2
1.4k
色即是空、空即是色、データサイエンス
Avatar for KamoNeggi kamoneggi
1
210
Technical Debt: Understanding it Rightly, Engaging it Rightly #LaravelLiveJP
Avatar for shogogg shogogg
0
180

Featured

See All Featured
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.3k
It's Worth the Effort
Avatar for 3n 3n
188
29k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
520
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
3
3.4k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.9k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.2k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
67k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
22k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.7k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
25k

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!