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
150

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
230

Other Decks in Programming

See All in Programming
Apache Iceberg V3 and migration to V3
Avatar for Tomohiro Tanaka tomtanaka
0
130
Architectural Extensions
Avatar for Denys Poltorak denyspoltorak
0
260
OCaml 5でモダンな並列プログラミングを Enjoyしよう!
Avatar for Haochen Kotoi-Xie haochenx
0
110
余白を設計しフロントエンド開発を 加速させる
Avatar for karacoro / からころ tsukuha
7
2.1k
AgentCoreとHuman in the Loop
Avatar for Har1101 har1101
5
210
Denoのセキュリティに関する仕組みの紹介 (toranoana.deno #23)
Avatar for uki00a uki00a
0
280
それ、本当に安全？ ファイルアップロードで見落としがちなセキュリティリスクと対策
Avatar for ikechi penpeen
7
2.4k
副作用をどこに置くか問題：オブジェクト指向で整理する設計判断ツリー
Avatar for Koya Masuda koxya
1
570
AIエージェント、”どう作るか”で差は出るか？ / AI Agents: Does the "How" Make a Difference?
Avatar for r-kagaya rkaga
4
2k
Fluid Templating in TYPO3 14
Avatar for Simon Praetorius s2b
0
120
Grafana：建立系統全知視角的捷徑
Avatar for Blueswen blueswen
0
320
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
Avatar for mackey0225 mackey0225
3
360

Featured

See All Featured
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
320
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
9.8k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.8k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.9k
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
0
1.1k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
61
49k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
88
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
640
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
0
170
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
67
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.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!