Skip to content

Latest commit

 

History

History
331 lines (235 loc) · 7.1 KB

slides.md

File metadata and controls

331 lines (235 loc) · 7.1 KB
Raw
theme class fonts layout background title
seriph
text-center
sans serif mono
Arial
Arial
Fira Code
cover
./images/slide-title.png
Using Astro

Using Astro

Who am I

  • I am Jan, 36 years old
  • currently DevOps Engineer, doing web development since a long time
  • passionate about new technologies and learning

What are we talking about today

  • What is Astro ?
  • Goals of Astro
  • Mechanisms (Project Structure, Routing, ...)
  • Things I'd like you to know about
  • Future outlook
  • Feedback, Questions & Open Discussion

What is Astro ?

  • Static Site Generator
  • Bring your own JavaScript Framework
  • Islands Architecture
  • HTML first build tool
  • Based on Snowpack (Module Bundler, heavily relies on ES Modules)

Goals

  • make better and faster webpages
    • power web applications
    • expression and possibilities of JavaScript
    • ship as less as possible through the browser (Simplicity of Webpages / Speed of Static HTML)
  • have a nice developer experience

Mechanisms

  • Project Structure
  • Astro files (pages / components without runtime)
  • Markdown OOB
  • Hydration
  • Routing

Initializing a new project

# create your project
mkdir new-project-directory
cd new-project-directory
npm init astro

# install your dependencies
npm install

# start the dev server and open your browser
npm start

layout: cover background: './images/folder-structure.jpg'

Project Structure

Astro files

  • have the .astro extension
  • can be pages
  • can be components
  • consist of HTML
    • add frontmatter script section for server side rendering
    • add JSX for templating

layout: cover background: './images/markdown-cutted.png'

Markdown Support

Islands architecture & Partial Hydration

Where is Vue ?

Let's integrate Vue in our project...

layout: image-right image: './images/astro-routing-rendering.png'

Routing

Other features I want you to know about

  • Collections API
  • Tailwind support
  • Generation of sitemap.xml
  • State libraries (Vuex)
  • Styling
Framework Global CSS Scoped CSS CSS Modules
Astro (.astro) ✅ ✅ N/A
React / Preact ✅ ❌ ✅
Vue ✅ ✅ ✅
Svelte ✅ ✅ ❌

Future Outlook

  • Currently positioned as Static Site Generator
  • support of more frameworks (possible)
  • mixture between static and dynamic sites (possible)
  • Named Slots
  • Image Support

Resources

Join Discord

Show Cases

layout: center

Thank you for listening

Feedback, Questions & Open Discussion