1678203600

Come iniziare con Astro

In questo tutorial imparerai a conoscere Astro, un framework open source per la generazione di app Web: il framework Web all-in-one. Questo tutorial include utili immagini guida e codice. Astro è un framework web incentrato sui contenuti e reso disponibile per creare siti Web veloci e leggeri. Può ugualmente sostituire Gatsby come Next.js.

Iniziare con Astro

Lo sviluppo web, come la maggior parte delle tecnologie, si muove a ondate e cicli. I siti web statici erano tutto ciò che avevamo all'inizio. Ma ben presto gli sviluppatori hanno messo insieme i primi siti generati dal server grazie a Perl e PHP. Questo è stato il progresso che alla fine avrebbe dato il via a framework come Laravel, Django o Rails.

I dispositivi mobili arriverebbero a cambiare il modo in cui le persone consumano il web. Quindi lunghi siti Web generati dal server, ciao applicazioni renderizzate dal client. La prossima ondata ha portato framework che potrebbero offrire agli utenti un'esperienza più simile a un'app, senza ricaricamenti, come React o AngularJS.

Ma sebbene le applicazioni a pagina singola fornissero un'esperienza più fluida, hanno i loro svantaggi. Vale a dire, caricamenti di pagina più lunghi causati da tutto il JavaScript extra che deve essere analizzato ed eseguito. Per non parlare di tutto il lavoro necessario per l'ottimizzazione per i motori di ricerca.

Astro è un ottimo esempio dell'ondata attuale in cui ci troviamo da Next.js, portandoci al punto di partenza: un framework web che combina il rendering di server e client per ottenere il meglio da entrambi i mondi.

Cos'è Astro?

Astro è un framework open source per la generazione di applicazioni Web in cima a framework di interfaccia utente popolari come React , Preact , Vue o Svelte . Una pagina Astro è composta da diversi componenti indipendenti. Per migliorare i tempi di caricamento, Astro elimina tutti i JavaScript e esegue il prerendering delle pagine nel server a meno che gli sviluppatori non contrassegnino un componente come interattivo, nel qual caso Astro invierà la quantità minima di JavaScript richiesta per l'interattività.

Un diagramma che mostra i tipi di contenuto che Astro può generare: abbiamo siti Web HTML statici e applicazioni multipagina renderizzate dal server. Il primo tipo può essere ospitato staticamente su piattaforme come AWS S3, Google Cloud, GitHub e pagine GitLab o hosting Firebase. Quest'ultimo può essere ospitato su piattaforme come Deno Deploy, Netlify, Vercel o Cloudflare.

Astro favorisce la generazione di siti statici e con rendering del server senza JavaScript nel browser. Gli sviluppatori possono attivare il rendering lato client per determinati percorsi o parti della pagina.

Grazie a questa strategia, le pagine Astro si caricano rapidamente, poiché non è necessario eseguire JavaScript per il primo rendering. In un processo chiamato idratazione, Astro "versa" JavaScript nei componenti per renderli dinamici.

Perché Astro?

Astro si distingue dagli altri framework web in molti modi:

Velocità : Astro è reso staticamente e su server quando possibile, il che lo rende perfetto per siti Web orientati al contenuto e ottimizzati per la SEO come blog, corsi o siti di marketing.
Agnostico dell'interfaccia utente : a differenza di Next.js, che funziona solo con React, o Nuxt.js, che richiede esperienza con Vue, Astro non impone alcun framework dell'interfaccia utente. Puoi usarne nessuno, crearne uno tuo o utilizzare una qualsiasi delle numerose integrazioni supportate .
Temi : Astro ha una serie impressionante di temi e modelli già pronti per iniziare rapidamente.
Facile da imparare : non è necessario imparare React o Vue per iniziare con Astro. Il suo motore di template sembra un semplice HTML e il codice è nettamente separato dalla presentazione. Puoi scegliere un progetto vuoto e costruirlo al tuo ritmo.
Batterie incluse : Astro viene fornito con le funzionalità che ci aspettiamo da un moderno framework JavaScript/TypeScript come attende di livello superiore, supporto Markdown e MDX e include ESM.
Isole : l'architettura dell'isola ci consente di combinare contenuti statici, componenti renderizzati dal server e renderizzati dal client sulla stessa pagina senza conflitti, consentendoci di creare siti interattivi con un sovraccarico minimo. Possiamo persino combinare diversi framework nella stessa pagina, offrendoci ancora un altro modo di costruire microfrontend . Vedremo di più su come funzionano le isole tra un po'.

Iniziare con Astro

Per iniziare con Astro, installa Node versione 16.12.0 o successiva ed esegui il seguente comando. Segui la procedura guidata sullo schermo e scegli di creare un progetto vuoto quando richiesto:

$ npm create astro@latest

 astro   v1.9.1 Launch sequence initiated.

✔ Where would you like to create your new project? … awesome-website
✔ How would you like to setup your new project? › an empty project
✔ Template copied!
✔ Would you like to install npm dependencies? (recommended) … yes
✔ Packages installed!
✔ Would you like to initialize a new git repository? (optional) … yes
✔ Git repository created!
✔ How would you like to setup TypeScript? › Relaxed
✔ TypeScript settings applied!

  next   Liftoff confirmed. Explore your project!

Successivamente, puoi avviare il sito web in modalità sviluppatore entrando nella directory del progetto che hai appena creato ed eseguito: “ npm run dev” e visitando http://localhost:3000.

Pagine e percorsi

Le cose interessanti in Astro accadono all'interno della srccartella. Controllando cosa c'è, vediamo una singola directory chiamata pagescon un index.astrofile.

Le pagine Astro sono un mix di HTML, Javascript o TypeScript. Questo è il valore predefinito index.astro:

---
---

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>Astro</title>
    </head>
    <body>
        <h1>Astro</h1>
    </body>
</html>

Potresti aver notato che i file Astro iniziano con i recinti delineati con ---. Qualunque codice inseriamo all'interno di questi recinti viene eseguito sul server e sottoposto a prerendering prima di servire la pagina.

Sotto il frontmatter, troviamo il contenuto di questo percorso, un modulo HTML aumentato che consente variabili. Possiamo, ad esempio, definire una variabile nel frontmatter e usarla in HTML in questo modo:

---
// src/pages/index.astro
const title = "Astro";
---

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>{title}</title>
    </head>
    <body>
        <h1>{title}</h1>
    </body>
</html>

Astro utilizza un routing basato su file , quindi ogni file nella pagescartella viene mappato a un percorso nel sito web. Ad esempio, se creiamo un file chiamato greetings.astro, dovremmo vedere il suo contenuto in http://localhost:3000/greetings.

---
const greeting = "Hello, world!";
---

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>Astro</title>
    </head>
    <body>
        <h1>{greeting}</h1>
    </body>
</html>

Oltre ai .astrofile, Astro può analizzare i file Markdown, MDX, JSX JavaScript e TypeScript. Ad esempio, se vogliamo scrivere un post sul blog in Markdown, creiamo un post.mdfile sotto la pagescartella. Visitando il percorso Astro lo convertirà in HTML al volo:

---
title: 'Learning Astro'
pubDate: 2023-01-10
description: 'A post written in Markdown.'ma
author: 'Tommy'
---

# Learning Astro

This Markdown file should be rendered as HTML when I visit http://localhost:3000/post

Componenti

I componenti Astro sono *.astrofile con codice riutilizzabile e HTML. Possiamo utilizzare i componenti per scrivere elementi come intestazioni, piè di pagina, barre di navigazione, pulsanti e moduli: tutto ciò che può essere espresso come HTML può costituire un componente.

Creiamo il nostro primo componente in src/components/Header.astro:

---
// src/components/Header.astro
---
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" 
<title>Astro</title>

Una volta definito, possiamo importarlo in qualsiasi pagina (o altri componenti) e usarlo in questo modo:

---
import Header from "../components/Header.astro";
---

<html lang="en">
    <head>
        <Header />
    </head>
    <body>
    </body>
</html>

I componenti Astro non sono diversi dalle pagine. Qualsiasi codice definito tra i recinti viene eseguito sul server. JavaScript viene rimosso prima di inviare il contenuto al browser.

Layout

I layout vengono utilizzati per perfezionare le strutture dell'interfaccia utente riutilizzabili. Sono tecnicamente componenti, quindi la sintassi rimane la stessa.

Sostituiamo il contenuto di index.astrocon un layout:

---
// src/pages/index.astro
import SiteLayout from "../layouts/SiteLayout.astro";
---

<SiteLayout></SiteLayout>

Come puoi vedere, i layout sono memorizzati nella src/layoutscartella per convenzione.

I layout, come i componenti, possono includere altri componenti. Qui abbiamo estratto la struttura index.astroe aggiunto un Footercomponente:

---
// src/layouts/SiteLayout.astro
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
---

<html lang="en">
    <head>
        <Header />
    </head>
    <body>
        <Footer />
    </body>
</html>

Puntelli e slot

Finora, il nostro sito Web è stato completamente statico. Per trasferire i dati tra pagine e componenti, dobbiamo capire come funzionano oggetti di scena e slot .

Componenti e layout possono definire e accettare oggetti di scena (abbreviazione di proprietà) tramite il file Astro.props. I valori passati attraverso gli oggetti di scena sono accessibili al componente prima del rendering.

Possiamo leggere oggetti di scena nel nostro componente in questo modo:

---
// src/components/Header.astro
const { title } = Astro.props;
---

<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" 
<title>{title}</title>

Il valore di titlepuò essere fornito quando il componente viene chiamato, cosa che nell'esempio seguente avviene attraverso il SiteLayoutlayout.

---
// src/layouts/SiteLayout.astro
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
---
<html lang="en">
    <head>
        <Header title = "Welcome my Astro Blog!" />
    </head>
    <body>
        <Footer />
    </body>
</html>

⚠️ Nota che hai bisogno di spazi intorno al segno uguale, cioè title="Hello"NON è corretto. Invece, dovrebbe essere: title = "Hello".

Gli elementi slot creano segnaposto per il contenuto da inserire successivamente. Per vedere come funziona, possiamo aggiungere un <slot />elemento in src/layouts/SiteLayout.astro:

---
// src/layouts/SiteLayout.astro
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
---

<html lang="en">
    <head>
        <Header title = "Welcome my Astro Blog!" />
    </head>
    <body>
        <slot />
        <Footer />
    </body>
</html>

Ora l'HTML all'interno <SiteLayout>viene iniettato nel punto in cui si trova lo slot.

---
// src/pages/index.astro
import SiteLayout from "../layouts/SiteLayout.astro";
---

<SiteLayout>
    <p>This content is rendered in the slot</p>
</SiteLayout>

I componenti di nidificazione, i layout, gli oggetti di scena e gli slot ci offrono la flessibilità di creare file dell'interfaccia utente riutilizzabili in tutto il sito web.

Isole e idratazione

Fino a questo punto, non abbiamo fornito alcun JavaScript all'utente; tutto è prerenderizzato e servito come puro HTML+CSS. Come inviamo a fare in modo che Astro invii JavaScript al browser? Per questo, dobbiamo capire l' architettura delle isole .

Il modello di architettura dell'isola mira a ridurre la quantità di JavaScript necessaria sul lato browser. Meno JavaScript significa meno dati inviati e meno potenza di calcolo richiesta sul dispositivo dell'utente. Un'isola è un componente autonomo che raggruppa HTML, CSS e, facoltativamente, JavaScript. Nello schema delle isole, una pagina è composta da diverse isole indipendenti.

Una pagina web che mostra l'architettura dell'isola in azione. L'intestazione e il piè di pagina sono HTML statico e un componente di navigazione della barra laterale che utilizza React per l'interattività. Il contenuto effettivo è HTML con rendering lato server.

L'architettura delle isole consente di combinare HTML statico, contenuto visualizzato dal server e componenti interattivi visualizzati dal client in un'unica pagina senza conflitti.

Ogni isola è prerenderizzata, quindi non c'è interattività subito dopo il caricamento della pagina. Una volta che la pagina iniziale è pronta, le isole vengono convertite in contenuto interattivo in un processo chiamato idratazione. L'idratazione è una tecnica che converte il contenuto statico fornito tramite hosting statico o rendering lato server in una pagina dinamica allegando gestori di eventi agli elementi HTML.

Una sequenza temporale di una pagina idratata. Sul lato destro abbiamo il server Astro e sulla destra il browser. Il browser richiede la pagina e il server invia solo l'HTML. Questa è la "prima pittura contenta". Poco dopo, il browser richiede il JavaScript e il server lo invia. Una volta caricato ed eseguito JavaScript, la pagina è interattiva.

Come funziona l'idratazione Il primo disegno di contenuto avviene subito dopo che tutto l'HTML è stato inviato al browser, cosa che in genere avviene molto rapidamente. Il browser quindi richiede ed esegue tutto il codice JavaScript lato client necessario per rendere la pagina completamente interattiva.

Utilizzo delle isole

Un esempio che mostra come Astro implementa le isole è in ordine. Aggiungiamo innanzitutto un'integrazione dell'interfaccia utente al progetto. Il seguente comando installa @astrojs/preacte preact.

$ npx astro add preact

Creiamo un semplice pulsante per testare l'integrazione:

// src/components/MyButton.jsx

export default function MyButton() {

const clicked = () => { console.log('Hello!') };

return (
    <div>
      <button style={{ color: 'purple' }} onClick={clicked}>Click me</button>
    </div>
  )
}

Come al solito, Astro cercherà di eliminare qualsiasi JavaScript. Quindi non succederebbe nulla se istanziassimo il componente con <MyButton />. Dobbiamo dire ad Astro che vogliamo che questo componente sia trattato come un'isola e idratato di conseguenza aggiungendo la direttiva templateclient:load :

---
import MyButton from "../components/MyButton.jsx";
---

<html lang="en">
    <body>
        <MyButton client:load />
    </body>
</html>

Facendo clic sul pulsante dovrebbe essere stampato "Ciao!" nella console del browser.

La direttiva client ha fatto sì che Astro idratasse il componente. Esistono cinque livelli di idratazione con diverse priorità:

client:loadidrata il componente il prima possibile.
client:idleidrata il componente al termine del caricamento della pagina. Utile per i componenti a bassa priorità che non richiedono un'interattività immediata.
client:visible={string}idrata il componente non appena appare nel viewport.
client:media={string}accetta una query CSS come argomento e carica il componente non appena viene soddisfatto.
client:onlysalta completamente il rendering HTML ed esegue il rendering del componente all'interno del browser.

Distribuzione dell'applicazione Astro con CI/CD

Trattandosi di un'applicazione Node, configurare una build Astro con CI/CD è molto semplice. Abbiamo solo bisogno di un paio di lavori.

Uno screenshot di una pipeline CI Semaphore con due blocchi: Installa dipendenze e Crea. Ogni blocco ha un lavoro.

Una possibile pipeline di integrazione continua per Astro.

Il primo lavoro esegue npm ci per popolare node_modules. Usiamo sem-version per selezionare una versione Node corrente.

checkout
sem-version node 19.4
npm ci
cache store

Il secondo processo esegue npm run builde memorizza l'applicazione compilata (che si trova nella distcartella) come artefatto del flusso di lavoro .

checkout
sem-version node 19.4
cache restore
npm run build
artifact push workflow dist/

Una volta creato il sito, possiamo configurare la distribuzione continua .

Obiettivi di distribuzione

A seconda della natura dell'applicazione Web, Astro può essere implementato come sito statico à la Hugo o Gatsby, nel qual caso abbiamo solo bisogno di qualcosa di semplice come un bucket S3 o pagine GitHub o come un server completo con rendering lato server (SSR), in cui abbiamo bisogno di endpoint abilitati per JavaScript o TypeScript.

Astro ha il supporto integrato per vari obiettivi di distribuzione popolari come Netlify, Firebase, Vercel e Deno. Alcuni supportano solo SSR o hosting statico, mentre altri possono fare entrambi.

Una volta scelto il nostro metodo di distribuzione, possiamo aggiungere una pipeline di distribuzione continua per distribuire automaticamente il sito Web a ogni modifica.

Ecco un esempio di pipeline di distribuzione destinata a un sito statico Netlify.

Uno screenshot delle pipeline CI/CD di Semaphore. Abbiamo aggiunto alla pipeline iniziale mostrata prima di una pipeline di distribuzione continua con un lavoro che viene distribuito a Netlify.

Il flusso di lavoro CI/CD completo con implementazione continua su Netlify.

Per riferimento, i comandi di lavoro sono i seguenti. Ciò presuppone che abbiamo già ottenuto un token API e lo abbiamo salvato come segreto su Semaphore con le variabili env NETLIFY_TOKEN e NETLIFY_SITE.

checkout
artifact pull workflow dist
npm install -g netlify-cli
netlify deploy --dir=dist --prod --auth $NETLIFY_TOKEN --site $NETLIFY_SITE

Conclusione

La popolarità di questo progetto è stata a dir poco astronomica: nei primi cinque mesi dal rilascio di Astro 1.0, il progetto ha accumulato oltre 25.000 stelle su GitHub. Il successo di Astro non è casuale. Il team di Astro ha realizzato un framework web che offre una grande ergonomia per gli sviluppatori e siti Web a caricamento rapido per gli utenti, anche se si trovano su dispositivi a basso consumo o connessioni lente.

Grazie per aver letto e buona costruzione!

Fonte: https://semaphoreci.com

#astro

What is GEEK

Buddha Community

Adam Daniels

1678203600

Come iniziare con Astro

In questo tutorial imparerai a conoscere Astro, un framework open source per la generazione di app Web: il framework Web all-in-one. Questo tutorial include utili immagini guida e codice. Astro è un framework web incentrato sui contenuti e reso disponibile per creare siti Web veloci e leggeri. Può ugualmente sostituire Gatsby come Next.js.

Iniziare con Astro

Cos'è Astro?

Perché Astro?

Astro si distingue dagli altri framework web in molti modi:

Velocità : Astro è reso staticamente e su server quando possibile, il che lo rende perfetto per siti Web orientati al contenuto e ottimizzati per la SEO come blog, corsi o siti di marketing.
Agnostico dell'interfaccia utente : a differenza di Next.js, che funziona solo con React, o Nuxt.js, che richiede esperienza con Vue, Astro non impone alcun framework dell'interfaccia utente. Puoi usarne nessuno, crearne uno tuo o utilizzare una qualsiasi delle numerose integrazioni supportate .
Temi : Astro ha una serie impressionante di temi e modelli già pronti per iniziare rapidamente.
Facile da imparare : non è necessario imparare React o Vue per iniziare con Astro. Il suo motore di template sembra un semplice HTML e il codice è nettamente separato dalla presentazione. Puoi scegliere un progetto vuoto e costruirlo al tuo ritmo.
Batterie incluse : Astro viene fornito con le funzionalità che ci aspettiamo da un moderno framework JavaScript/TypeScript come attende di livello superiore, supporto Markdown e MDX e include ESM.
Isole : l'architettura dell'isola ci consente di combinare contenuti statici, componenti renderizzati dal server e renderizzati dal client sulla stessa pagina senza conflitti, consentendoci di creare siti interattivi con un sovraccarico minimo. Possiamo persino combinare diversi framework nella stessa pagina, offrendoci ancora un altro modo di costruire microfrontend . Vedremo di più su come funzionano le isole tra un po'.

Iniziare con Astro

Per iniziare con Astro, installa Node versione 16.12.0 o successiva ed esegui il seguente comando. Segui la procedura guidata sullo schermo e scegli di creare un progetto vuoto quando richiesto:

$ npm create astro@latest

 astro   v1.9.1 Launch sequence initiated.

✔ Where would you like to create your new project? … awesome-website
✔ How would you like to setup your new project? › an empty project
✔ Template copied!
✔ Would you like to install npm dependencies? (recommended) … yes
✔ Packages installed!
✔ Would you like to initialize a new git repository? (optional) … yes
✔ Git repository created!
✔ How would you like to setup TypeScript? › Relaxed
✔ TypeScript settings applied!

  next   Liftoff confirmed. Explore your project!

Pagine e percorsi

Le cose interessanti in Astro accadono all'interno della srccartella. Controllando cosa c'è, vediamo una singola directory chiamata pagescon un index.astrofile.

Le pagine Astro sono un mix di HTML, Javascript o TypeScript. Questo è il valore predefinito index.astro:

---
---

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>Astro</title>
    </head>
    <body>
        <h1>Astro</h1>
    </body>
</html>

---
// src/pages/index.astro
const title = "Astro";
---

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>{title}</title>
    </head>
    <body>
        <h1>{title}</h1>
    </body>
</html>

---
const greeting = "Hello, world!";
---

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>Astro</title>
    </head>
    <body>
        <h1>{greeting}</h1>
    </body>
</html>

---
title: 'Learning Astro'
pubDate: 2023-01-10
description: 'A post written in Markdown.'ma
author: 'Tommy'
---

# Learning Astro

This Markdown file should be rendered as HTML when I visit http://localhost:3000/post

Componenti

Creiamo il nostro primo componente in src/components/Header.astro:

---
// src/components/Header.astro
---
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" 
<title>Astro</title>

Una volta definito, possiamo importarlo in qualsiasi pagina (o altri componenti) e usarlo in questo modo:

---
import Header from "../components/Header.astro";
---

<html lang="en">
    <head>
        <Header />
    </head>
    <body>
    </body>
</html>

I componenti Astro non sono diversi dalle pagine. Qualsiasi codice definito tra i recinti viene eseguito sul server. JavaScript viene rimosso prima di inviare il contenuto al browser.

Layout

I layout vengono utilizzati per perfezionare le strutture dell'interfaccia utente riutilizzabili. Sono tecnicamente componenti, quindi la sintassi rimane la stessa.

Sostituiamo il contenuto di index.astrocon un layout:

---
// src/pages/index.astro
import SiteLayout from "../layouts/SiteLayout.astro";
---

<SiteLayout></SiteLayout>

Come puoi vedere, i layout sono memorizzati nella src/layoutscartella per convenzione.

I layout, come i componenti, possono includere altri componenti. Qui abbiamo estratto la struttura index.astroe aggiunto un Footercomponente:

---
// src/layouts/SiteLayout.astro
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
---

<html lang="en">
    <head>
        <Header />
    </head>
    <body>
        <Footer />
    </body>
</html>

Puntelli e slot

Finora, il nostro sito Web è stato completamente statico. Per trasferire i dati tra pagine e componenti, dobbiamo capire come funzionano oggetti di scena e slot .

Possiamo leggere oggetti di scena nel nostro componente in questo modo:

---
// src/components/Header.astro
const { title } = Astro.props;
---

<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" 
<title>{title}</title>

Il valore di titlepuò essere fornito quando il componente viene chiamato, cosa che nell'esempio seguente avviene attraverso il SiteLayoutlayout.

---
// src/layouts/SiteLayout.astro
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
---
<html lang="en">
    <head>
        <Header title = "Welcome my Astro Blog!" />
    </head>
    <body>
        <Footer />
    </body>
</html>

⚠️ Nota che hai bisogno di spazi intorno al segno uguale, cioè title="Hello"NON è corretto. Invece, dovrebbe essere: title = "Hello".

Gli elementi slot creano segnaposto per il contenuto da inserire successivamente. Per vedere come funziona, possiamo aggiungere un <slot />elemento in src/layouts/SiteLayout.astro:

---
// src/layouts/SiteLayout.astro
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
---

<html lang="en">
    <head>
        <Header title = "Welcome my Astro Blog!" />
    </head>
    <body>
        <slot />
        <Footer />
    </body>
</html>

Ora l'HTML all'interno <SiteLayout>viene iniettato nel punto in cui si trova lo slot.

---
// src/pages/index.astro
import SiteLayout from "../layouts/SiteLayout.astro";
---

<SiteLayout>
    <p>This content is rendered in the slot</p>
</SiteLayout>

I componenti di nidificazione, i layout, gli oggetti di scena e gli slot ci offrono la flessibilità di creare file dell'interfaccia utente riutilizzabili in tutto il sito web.

Isole e idratazione

L'architettura delle isole consente di combinare HTML statico, contenuto visualizzato dal server e componenti interattivi visualizzati dal client in un'unica pagina senza conflitti.

Utilizzo delle isole

$ npx astro add preact

Creiamo un semplice pulsante per testare l'integrazione:

// src/components/MyButton.jsx

export default function MyButton() {

const clicked = () => { console.log('Hello!') };

return (
    <div>
      <button style={{ color: 'purple' }} onClick={clicked}>Click me</button>
    </div>
  )
}

---
import MyButton from "../components/MyButton.jsx";
---

<html lang="en">
    <body>
        <MyButton client:load />
    </body>
</html>

Facendo clic sul pulsante dovrebbe essere stampato "Ciao!" nella console del browser.

La direttiva client ha fatto sì che Astro idratasse il componente. Esistono cinque livelli di idratazione con diverse priorità:

client:loadidrata il componente il prima possibile.
client:idleidrata il componente al termine del caricamento della pagina. Utile per i componenti a bassa priorità che non richiedono un'interattività immediata.
client:visible={string}idrata il componente non appena appare nel viewport.
client:media={string}accetta una query CSS come argomento e carica il componente non appena viene soddisfatto.
client:onlysalta completamente il rendering HTML ed esegue il rendering del componente all'interno del browser.

Distribuzione dell'applicazione Astro con CI/CD

Trattandosi di un'applicazione Node, configurare una build Astro con CI/CD è molto semplice. Abbiamo solo bisogno di un paio di lavori.

Uno screenshot di una pipeline CI Semaphore con due blocchi: Installa dipendenze e Crea. Ogni blocco ha un lavoro.

Una possibile pipeline di integrazione continua per Astro.

Il primo lavoro esegue npm ci per popolare node_modules. Usiamo sem-version per selezionare una versione Node corrente.

checkout
sem-version node 19.4
npm ci
cache store

Il secondo processo esegue npm run builde memorizza l'applicazione compilata (che si trova nella distcartella) come artefatto del flusso di lavoro .

checkout
sem-version node 19.4
cache restore
npm run build
artifact push workflow dist/

Una volta creato il sito, possiamo configurare la distribuzione continua .

Obiettivi di distribuzione

Astro ha il supporto integrato per vari obiettivi di distribuzione popolari come Netlify, Firebase, Vercel e Deno. Alcuni supportano solo SSR o hosting statico, mentre altri possono fare entrambi.

Una volta scelto il nostro metodo di distribuzione, possiamo aggiungere una pipeline di distribuzione continua per distribuire automaticamente il sito Web a ogni modifica.

Ecco un esempio di pipeline di distribuzione destinata a un sito statico Netlify.

Uno screenshot delle pipeline CI/CD di Semaphore. Abbiamo aggiunto alla pipeline iniziale mostrata prima di una pipeline di distribuzione continua con un lavoro che viene distribuito a Netlify.

Il flusso di lavoro CI/CD completo con implementazione continua su Netlify.

checkout
artifact pull workflow dist
npm install -g netlify-cli
netlify deploy --dir=dist --prod --auth $NETLIFY_TOKEN --site $NETLIFY_SITE

Conclusione

Grazie per aver letto e buona costruzione!

Fonte: https://semaphoreci.com

#astro

Berta Escamilla

1678185427

Cómo empezar con Astro

En este tutorial, aprenderá sobre Astro, un marco de código abierto para generar aplicaciones web: el marco web todo en uno. Este tutorial incluye código e imágenes de guía útiles. Astro es un marco web basado en contenido y renderizado para crear sitios web rápidos y livianos. Igualmente puede reemplazar a Gatsby como Next.js.

Primeros pasos con Astro

El desarrollo web, como la mayoría de las tecnologías, se mueve en ondas y ciclos. Los sitios web estáticos eran todo lo que teníamos al principio. Pero muy pronto los desarrolladores estaban pirateando juntos los primeros sitios generados por servidores gracias a Perl y PHP. Este fue el avance que eventualmente impulsaría marcos como Laravel, Django o Rails.

Los dispositivos móviles vendrían a cambiar la forma en que las personas consumen la web. Adiós a los sitios web generados por el servidor, hola a las aplicaciones renderizadas por el cliente. La próxima ola trajo marcos que podrían brindar a los usuarios una experiencia más similar a la de una aplicación, sin recargas, como React o AngularJS.

Pero si bien las aplicaciones de una sola página brindaron una experiencia más fluida, tienen sus inconvenientes. Es decir, cargas de página más largas causadas por todo el JavaScript adicional que debe analizarse y ejecutarse. Sin mencionar todo el trabajo que tomó optimizar para los motores de búsqueda.

Astro es un excelente ejemplo de la ola actual en la que hemos estado desde Next.js, llevándonos al punto de partida: un marco web que combina la representación del servidor y del cliente para obtener lo mejor de ambos mundos.

¿Qué es Astro?

Astro es un marco de código abierto para generar aplicaciones web además de marcos de interfaz de usuario populares como React , Preact , Vue o Svelte . Una página de Astro se compone de varios componentes independientes. Para mejorar los tiempos de carga, Astro elimina todo JavaScript y renderiza previamente las páginas en el servidor a menos que los desarrolladores marquen un componente como interactivo, en cuyo caso Astro enviará la cantidad mínima de JavaScript requerida para la interactividad.

Astro favorece la generación de sitios estáticos y renderizados por servidor sin JavaScript en el navegador. Los desarrolladores pueden optar por la representación del lado del cliente para determinadas rutas o partes de la página.

Gracias a esta estrategia, las páginas de Astro se cargan rápidamente, ya que no es necesario ejecutar JavaScript para el primer renderizado. En un proceso llamado hidratación, Astro "vierte" JavaScript en los componentes para hacerlos dinámicos.

¿Por qué Astro?

Astro se destaca de los otros marcos web de muchas maneras:

Velocidad : Astro se procesa de forma estática y en servidor cuando es posible, lo que lo convierte en una excelente opción para sitios web que priorizan el contenido y que son compatibles con SEO, como blogs, cursos o sitios de marketing.
Independiente de la interfaz de usuario : a diferencia de Next.js, que solo funciona con React, o Nuxt.js, que requiere experiencia en Vue, Astro no impone ningún marco de interfaz de usuario. Puede usar ninguno, crear el suyo propio o usar cualquiera de las muchas integraciones admitidas .
Temas : Astro tiene una impresionante variedad de temas y plantillas listos para usar para comenzar rápidamente.
Fácil de aprender : no necesita aprender React o Vue para comenzar con Astro. Su motor de plantillas parece HTML simple y el código está claramente separado de la presentación. Puede elegir un proyecto vacío y construirlo a su propio ritmo.
Baterías incluidas : Astro viene con las características que esperamos de un marco JavaScript/TypeScript moderno, como awaits de nivel superior, compatibilidad con Markdown y MDX, e incluye ESM.
Islas : la arquitectura de la isla nos permite mezclar contenido estático, componentes generados por el servidor y generados por el cliente en la misma página sin conflictos, lo que nos permite crear sitios interactivos con una sobrecarga mínima. Incluso podemos mezclar diferentes marcos en la misma página, brindándonos otra forma de construir microfrontends . Veremos más sobre cómo funcionan las islas en un momento.

Primeros pasos con Astro

Para comenzar con Astro, instale Node versión 16.12.0 o superior y ejecute el siguiente comando. Siga el asistente en pantalla y elija crear un proyecto vacío cuando se le solicite:

$ npm create astro@latest

 astro   v1.9.1 Launch sequence initiated.

✔ Where would you like to create your new project? … awesome-website
✔ How would you like to setup your new project? › an empty project
✔ Template copied!
✔ Would you like to install npm dependencies? (recommended) … yes
✔ Packages installed!
✔ Would you like to initialize a new git repository? (optional) … yes
✔ Git repository created!
✔ How would you like to setup TypeScript? › Relaxed
✔ TypeScript settings applied!

  next   Liftoff confirmed. Explore your project!

A continuación, puede iniciar el sitio web en modo desarrollador ingresando al directorio del proyecto que acaba de crear y ejecutar: “ npm run dev” y visitando http://localhost:3000.

paginas y rutas

Las cosas interesantes en Astro suceden dentro de la srccarpeta. Verificando lo que hay allí, vemos un solo directorio llamado pagescon un index.astroarchivo.

Las páginas Astro son una combinación de HTML, Javascript o TypeScript. Este es el valor predeterminado index.astro:

---
---

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>Astro</title>
    </head>
    <body>
        <h1>Astro</h1>
    </body>
</html>

Es posible que haya notado que los archivos Astro comienzan con cercas delineadas con ---. Cualquier código que coloquemos dentro de estas vallas se ejecuta en el servidor y se renderiza antes de servir la página.

Debajo del frontmatter, encontramos el contenido de esta ruta, un formulario HTML aumentado que permite variables. Podemos, por ejemplo, definir una variable en el frontmatter y usarla en HTML así:

---
// src/pages/index.astro
const title = "Astro";
---

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>{title}</title>
    </head>
    <body>
        <h1>{title}</h1>
    </body>
</html>

Astro utiliza un enrutamiento basado en archivos , por lo que cada archivo en la pagescarpeta se asigna a una ruta en el sitio web. Por ejemplo, si creamos un archivo llamado greetings.astro, deberíamos ver su contenido en http://localhost:3000/greetings.

---
const greeting = "Hello, world!";
---

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>Astro</title>
    </head>
    <body>
        <h1>{greeting}</h1>
    </body>
</html>

Además de .astrolos archivos, Astro puede analizar archivos Markdown, MDX, JSX JavaScript y TypeScript. Por ejemplo, si queremos escribir una publicación de blog en Markdown, creamos un post.mdarchivo en la pagescarpeta. Visitar la ruta hará que Astro la convierta a HTML sobre la marcha:

---
title: 'Learning Astro'
pubDate: 2023-01-10
description: 'A post written in Markdown.'ma
author: 'Tommy'
---

# Learning Astro

This Markdown file should be rendered as HTML when I visit http://localhost:3000/post

Componentes

Los componentes de Astro son *.astroarchivos con código reutilizable y HTML. Podemos usar componentes para escribir elementos como encabezados, pies de página, barras de navegación, botones y formularios; cualquier cosa que pueda expresarse como HTML puede constituir un componente.

Vamos a crear nuestro primer componente en src/components/Header.astro:

---
// src/components/Header.astro
---
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" 
<title>Astro</title>

Una vez definido, podemos importarlo a cualquier página (u otros componentes) y usarlo así:

---
import Header from "../components/Header.astro";
---

<html lang="en">
    <head>
        <Header />
    </head>
    <body>
    </body>
</html>

Los componentes de Astro no son diferentes de las páginas. Cualquier código definido entre vallas se ejecuta en el servidor. JavaScript se elimina antes de enviar el contenido al navegador.

Diseños

Los diseños se utilizan para refinar estructuras de interfaz de usuario reutilizables. Son técnicamente componentes, por lo que la sintaxis sigue siendo la misma.

Reemplacemos el contenido de index.astrocon un diseño:

---
// src/pages/index.astro
import SiteLayout from "../layouts/SiteLayout.astro";
---

<SiteLayout></SiteLayout>

Como puede ver, los diseños se almacenan en la src/layoutscarpeta por convención.

Los diseños, al igual que los componentes, pueden incluir otros componentes. Aquí hemos extraído la estructura index.astroy agregado un Footercomponente:

---
// src/layouts/SiteLayout.astro
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
---

<html lang="en">
    <head>
        <Header />
    </head>
    <body>
        <Footer />
    </body>
</html>

Atrezzo y tragamonedas

Hasta ahora, nuestro sitio web ha sido completamente estático. Para pasar datos entre páginas y componentes, necesitamos entender cómo funcionan los accesorios y las ranuras .

Los componentes y diseños pueden definir y aceptar accesorios (abreviatura de propiedades) a través del archivo Astro.props. Los valores pasados a través de props son accesibles para el componente antes de renderizar.

Podemos leer accesorios en nuestro componente de esta manera:

---
// src/components/Header.astro
const { title } = Astro.props;
---

<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" 
<title>{title}</title>

El valor de titlese puede proporcionar cuando se llama al componente, lo que en el siguiente ejemplo sucede a través del SiteLayoutdiseño.

---
// src/layouts/SiteLayout.astro
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
---
<html lang="en">
    <head>
        <Header title = "Welcome my Astro Blog!" />
    </head>
    <body>
        <Footer />
    </body>
</html>

⚠️ Tenga en cuenta que necesita espacios alrededor del signo igual, es decir, title="Hello"NO es correcto. En su lugar, debería ser: title = "Hello".

Los elementos de ranura crean marcadores de posición para que el contenido se inyecte más tarde. Para ver cómo funciona, podemos agregar un <slot />elemento en src/layouts/SiteLayout.astro:

---
// src/layouts/SiteLayout.astro
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
---

<html lang="en">
    <head>
        <Header title = "Welcome my Astro Blog!" />
    </head>
    <body>
        <slot />
        <Footer />
    </body>
</html>

Ahora el HTML interior <SiteLayout>se inyecta en el punto donde se encuentra la ranura.

---
// src/pages/index.astro
import SiteLayout from "../layouts/SiteLayout.astro";
---

<SiteLayout>
    <p>This content is rendered in the slot</p>
</SiteLayout>

El anidamiento de componentes, diseños, accesorios y ranuras nos brinda la flexibilidad para crear archivos de interfaz de usuario reutilizables en todo el sitio web.

Islas e hidratación

Hasta este momento, no hemos enviado ningún JavaScript al usuario; todo está renderizado previamente y se sirve como HTML+CSS puro. ¿Cómo hacemos que Astro envíe JavaScript al navegador? Para eso, necesitamos entender la arquitectura de las islas .

El patrón de arquitectura de la isla tiene como objetivo reducir la cantidad de JavaScript necesario en el lado del navegador. Menos JavaScript significa menos datos enviados y menos poder de cómputo requerido en el dispositivo del usuario. Una isla es un componente autónomo que incluye HTML, CSS y, opcionalmente, JavaScript. En el patrón de islas, una página se compone de varias islas independientes.

Una página web que muestra la arquitectura de la isla en acción. El encabezado y el pie de página son HTML estático y un componente de navegación de la barra lateral que utiliza React para la interactividad. El contenido real es HTML renderizado del lado del servidor.

La arquitectura de islas permite combinar HTML estático, contenido generado por el servidor y componentes interactivos generados por el cliente en una página sin conflictos.

Cada isla está renderizada previamente, por lo que no hay interactividad justo después de que se carga la página. Una vez que la página inicial está lista, las islas se convierten en contenido interactivo en un proceso llamado hidratación. La hidratación es una técnica que convierte el contenido estático entregado a través del alojamiento estático o la representación del lado del servidor en una página dinámica al adjuntar controladores de eventos a los elementos HTML.

Una secuencia de tiempo de una página hidratada. En el lado derecho, tenemos el servidor Astro, y en el lado derecho, el navegador. El navegador solicita la página y el servidor envía solo el HTML. Esta es la 'primera pintura con contenido'. Un poco más tarde, el navegador solicita el JavaScript y el servidor lo envía. Una vez que se carga y ejecuta JavaScript, la página es interactiva.

Cómo funciona la hidratación. La primera pintura con contenido ocurre justo después de que todo el HTML se haya enviado al navegador, lo que generalmente ocurre muy rápido. Luego, el navegador solicita y ejecuta todo el JavaScript del lado del cliente necesario para que la página sea completamente interactiva.

Uso de islas

Un ejemplo que muestra cómo Astro implementa islas está en orden. Primero agreguemos una integración de interfaz de usuario al proyecto. El siguiente comando instala @astrojs/preacty preact.

$ npx astro add preact

Vamos a crear un botón simple para probar la integración:

// src/components/MyButton.jsx

export default function MyButton() {

const clicked = () => { console.log('Hello!') };

return (
    <div>
      <button style={{ color: 'purple' }} onClick={clicked}>Click me</button>
    </div>
  )
}

Como de costumbre, Astro intentará eliminar cualquier JavaScript. Así que no pasaría nada si instanciamos el componente con <MyButton />. Necesitamos decirle a Astro que queremos que este componente sea tratado como una isla e hidratado en consecuencia agregando la directiva de plantillaclient:load :

---
import MyButton from "../components/MyButton.jsx";
---

<html lang="en">
    <body>
        <MyButton client:load />
    </body>
</html>

Al hacer clic en el botón debería imprimirse "¡Hola!" en la consola del navegador.

La directiva del cliente hizo que Astro hidratara el componente. Hay cinco niveles de hidratación con diferentes prioridades:

client:loadhidrata el componente lo antes posible.
client:idlehidrata el componente cuando la página termina de cargarse. Útil para componentes de baja prioridad que no necesitan interactividad inmediata.
client:visible={string}hidrata el componente tan pronto como aparece en la ventana gráfica.
client:media={string}toma una consulta CSS como argumento y carga el componente tan pronto como se completa.
client:onlyomite la representación HTML por completo y presenta el componente en el navegador.

Implementación de la aplicación Astro con CI/CD

Al ser una aplicación Node, configurar una compilación Astro con CI/CD es muy sencillo. Sólo necesitamos un par de trabajos.

Captura de pantalla de una canalización de Semaphore CI con dos bloques: Instalar dependencias y compilar. Cada bloque tiene un trabajo.

Una posible tubería de integración continua para Astro.

El primer trabajo ejecuta npm ci para completar node_modules. Usamos sem-version para seleccionar una versión actual de Node.

checkout
sem-version node 19.4
npm ci
cache store

El segundo trabajo ejecuta npm run buildy almacena la aplicación creada (ubicada en la distcarpeta) como un artefacto de flujo de trabajo .

checkout
sem-version node 19.4
cache restore
npm run build
artifact push workflow dist/

Una vez construido el sitio, podemos configurar la implementación continua .

Destinos de implementación

Dependiendo de la naturaleza de la aplicación web, Astro se puede implementar como un sitio estático a la Hugo o Gatsby, en cuyo caso solo necesitamos algo tan simple como un depósito S3 o páginas de GitHub, o como un servidor completo renderizado. (SSR), donde necesitamos puntos finales habilitados para JavaScript o TypeScript.

Astro tiene soporte integrado para varios objetivos de implementación populares , como Netlify, Firebase, Vercel y Deno. Algunos solo admiten SSR o alojamiento estático, mientras que otros pueden hacer ambos.

Una vez que hayamos elegido nuestro método de implementación, podemos agregar una canalización de implementación continua para implementar automáticamente el sitio web en cada cambio.

Aquí hay una canalización de implementación de ejemplo que apunta a un sitio estático de Netlify.

Una captura de pantalla de las canalizaciones de CI/CD de Semaphore. Hemos agregado a la canalización inicial que se muestra antes una canalización de implementación continua con un trabajo que se implementa en Netlify.

El flujo de trabajo completo de CI/CD con implementación continua en Netlify.

Como referencia, los comandos de trabajo son los siguientes. Esto supone que ya obtuvimos un token API y lo guardamos como secreto en Semaphore con las variables env NETLIFY_TOKEN y NETLIFY_SITE.

checkout
artifact pull workflow dist
npm install -g netlify-cli
netlify deploy --dir=dist --prod --auth $NETLIFY_TOKEN --site $NETLIFY_SITE

Conclusión

La popularidad de este proyecto ha sido nada menos que astronómica: en los primeros cinco meses desde el lanzamiento de Astro 1.0, el proyecto ha acumulado más de 25 000 estrellas en GitHub. El éxito de Astro no es casual. El equipo de Astro ha creado un marco web que ofrece una excelente ergonomía para los desarrolladores y sitios web de carga rápida para los usuarios, incluso si se encuentran en dispositivos de bajo consumo o conexiones lentas.

¡Gracias por leer y feliz construcción!

Fuente: https://semaphoreci.com

#astro

Berta Escamilla

1652733420

Astro: Cree Aplicaciones Más Rápidas Con Menos JavaScript

Astro es el generador de sitios estáticos más nuevo en la escena. ¡Y es genial! Estoy entusiasmado con Astro por cómo ve su papel como marco. Parece tener un enfoque equilibrado de las opiniones y habilidades que ofrece.

En lugar de ofrecer opiniones súper sólidas (piense: el enrutamiento de la página de Next.js , la capa GraphQL de Gatsby ), Astro toma muchos de los enfoques populares de patrones comunes y proporciona una base sobre la cual los desarrolladores pueden construir. En lugar de decir: “Hágalo usted mismo”, Astro dice: “Aquí hay algunas opciones comunes hoy en día. Elige uno (o más)”.

Puedes leer más acerca de por qué estoy tan emocionado. Además, echa un vistazo al anuncio de Astro si aún no lo has leído. Es un gran antecedente de la herramienta.

¿Qué es Astro?

Astro es nuevo en la escena, pero ya hay un puñado de tutoriales sobre él. No hagamos de esto uno más . En cambio, exploremos las partes geniales de lo que hace que Astro sea tan emocionante con un ejemplo.

¡Tomaremos el punto de partida predeterminado para los proyectos de Astro y lo convertiremos en un sitio web simple de una página que enumera algunos datos divertidos sobre los cohetes! ¿Por qué? Porque Astro y LogRocket van juntos como... ¿ aguacate y tostadas?

¡ADVERTENCIA! No
está listo para la producción Está al frente del viaje de Astro: técnicamente aún no está listo para la producción. Es probable que todavía sea una salida, pero es lo suficientemente sólido como para explorar. Y si te gusta lo suficiente, seguro, vive al límite y lleva la cosa a producción.

Primeros pasos con Astro

Comience por configurar esta cosa. Cree un nuevo directorio para su proyecto y navegue hasta él:

mkdir astro-the-cool-parts
cd astro-the-cool-parts

Luego puede comenzar un nuevo proyecto Astro:

npm init astro

Esto lo guiará a través de algunas preguntas. Aquí están las respuestas que di:

ypara confirmar
Starter Kit (Generic)como punto de partida
Reacty Sveltepara mis componentes

Una vez que haya terminado ese paso, instale las dependencias:

npm install

Entonces puedes iniciar el servidor:

npm start

Ahora, visite localhost:3000en su navegador web para mostrar el punto de inicio predeterminado.

Punto de inicio predeterminado de Astro.

Crear la compilación estática

Recomiendo explorar los contenidos de este proyecto. Proporciona una buena base para mostrar lo que Astro puede hacer. Sin embargo, vamos a extraer la mayor parte de eso para nuestro ejemplo.

Las páginas de los proyectos de Astro están en el src/pagesdirectorio. La página de inicio es src/pages/index.astro. Eliminé la mayor parte del contenido predeterminado y lo reemplacé con datos divertidos y algunos estilos en línea para admitir. Así es como se ve mi archivo .

Datos divertidos de Rocket, usando estilos del iniciador predeterminado de Astro.

Ahora vamos a construir el proyecto e inspeccionar lo que sucede. Ejecute la compilación:

npm run build

Los archivos de salida están en el distdirectorio . ¡Observe que no hay JavaScript!

Adición de componentes a Astro

Agreguemos un componente para representar un hecho divertido. Cree un nuevo archivo en src/components/FunFact.jsxcon el siguiente contenido:

import styles from "./FunFact.module.css";

export default function FunFact({ children, heading, sourceUrl }) {
  return (
    <div className={styles.wrapper}>
      <h2 className={styles.heading}>{heading}</h2>
      <p className={styles.fact}>{children}</p>
      <p>
        <a href={sourceUrl}>Source</a>
      </p>
    </div>
  );
}

Nota: este es un componente React. Le invitamos a utilizar un marco diferente. Cambie la sintaxis, las extensiones de archivo y las importaciones según sea necesario.

Tenga en cuenta que importamos un archivo para estilos (usando Módulos CSS ) que aún no existe. Vamos a crearlo ahora src/components/FunFact.module.cssy colocar estos estilos:

.wrapper {
  margin-bottom: 2rem;
}

.heading {
  margin-bottom: 0.5rem;
  font-size: 1.4rem;
}

.fact {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.source {
  font-size: 0.75rem;
}

A continuación, reorganicemos index.astropara usar los componentes.

En la parte superior del archivo, importe nuestro nuevo componente:

import FunFact from '../components/FunFact.jsx'
// ...

Luego ajuste el contenido del cuerpo principal para usar el <FunFact />componente:

<main>
  <FunFact
    heading="Rockets can reach speeds of 22,000 miles per hour!"
    sourceUrl="https://www.ulalaunch.com/explore/rocket-science/fun-facts">
      A typical rocket produces more than a million pounds of thrust that
      allows it to carry more than 6,000 pounds at speeds topping 22,000
      miles per hour. This is equivalent to the power generated by 13 Hoover
      Dams, carrying the weight of eight horses, and traveling at speeds 15
      times faster than a speeding bullet!
  </FunFact>

  <FunFact
    heading="Prior to 1926, all rockets were powered by some form of gunpowder."
    sourceUrl="https://www.factsjustforkids.com/technology-facts/rocket-facts-for-kids/">
      The first rocket to use liquid fuel was created by Robert H. Goddard
      and first launched on March 16th, 1926.
  </FunFact>

  <FunFact
    heading="The first rocket in space was launched by Germany in 1942."
    sourceUrl="https://facts.net/science/technology/rocket-facts/">
      Germany launched the first rocket capable of reaching space in 1942.
      Dubbed the V-2 rocket, it was not actually intended for space travel.
      Instead, the V-2 was constructed as a ballistic missile during WWII.
      Nonetheless, it was revealed in a flight test to be the first man-made
      object to fly into space.
  </FunFact>

  <FunFact
    heading="The first rocket was invented in China around 1100 AD"
    sourceUrl="https://facts.net/science/technology/rocket-facts/">
      The rockets invented in the 10th century China used solid propellants
      and were mainly used as weapons and fireworks. It was not until the
      1920s that rocket science was studied further. By the 1930s and 1940s,
      professional rocket engineering started to take off.
  </FunFact>
</main>

Aquí puedes ver todos los cambios que hice durante este paso.

Cuando su navegador se vea bien, vuelva a ejecutar la compilación ( npm run build) y eche un vistazo al distdirectorio .

Observe cuán mínimos fueron los cambios y, lo que es más importante, todavía no hay JavaScript, ¡aunque hemos incluido un componente React!

Marcos de mezcla

Como ejemplo rápido, digamos que otro desarrollador se siente más cómodo con Svelte, por lo que construirá el encabezado usando Svelte.

Agregue un nuevo componente src/components/Header.sveltecon el siguiente código de la página de inicio:

<header>
  <div>
    <h1>🚀 Rocket Fun Facts 🚀</h1>
  </div>
</header>

<style>
  header {
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin: 0 auto 3rem;
    max-width: min(100%, 68ch);
  }
</style>

Ahora, en index.astro, puede importar el nuevo encabezado:

import Header from '../components/Header.svelte'

Y utilícelo en el marcado de la página de inicio:

<head>
  <!-- ... -->

  <style>
    main {
      margin: 0 auto;
      max-width: 42rem;
    }
  </style>
</head>
<body>
  <Header />

  <!-- ... -->
</body>

Nota rápida: los estilos de encabezado están colgados public/style/home.css, lo que podría (y debería) limpiar si estuviera llevando esto a producción. Los dejo donde están porque esta es una prueba rápida de concepto.

Si todo salió bien, no debería haber cambios en el resultado de la pantalla, ya que solo has hecho una reorganización.

Estos son los cambios que hice , que de nuevo resultaron en cambios de compilación menores , dejando el distdirectorio agradable y limpio .

Obtención de datos con Astro

Me encanta la forma en que Astro aborda la obtención de datos justo en la parte superior de los archivos de componentes. Incluso es compatible con el nivel superiorawait , que funciona para reducir la cantidad de código repetitivo que tiene que escribir.

No quería hacer nada demasiado elegante aquí porque solo estamos jugando, así que coloqué todo el contenido en un archivo JSON en content/fun-facts.json. Se parece a esto:

[
  {
    "heading": "Rockets can reach speeds of 22,000 miles per hour!",
    "sourceUrl": "https://www.ulalaunch.com/explore/rocket-science/fun-facts",
    "body": "A typical rocket produces more than a million pounds of thrust that allows it to carry more than 6,000 pounds at speeds topping 22,000 miles per hour. This is equivalent to the power generated by 13 Hoover Dams, carrying the weight of eight horses, and traveling at speeds 15 times faster than a speeding bullet!"
  },

  {
    "heading": "Prior to 1926, all rockets were powered by some form of gunpowder.",
    "sourceUrl": "https://www.factsjustforkids.com/technology-facts/rocket-facts-for-kids/",
    "body": "The first rocket to use liquid fuel was created by Robert H. Goddard and first launched on March 16th, 1926."
  },

  {
    "heading": "The first rocket in space was launched by Germany in 1942.",
    "sourceUrl": "https://facts.net/science/technology/rocket-facts/",
    "body": "Germany launched the first rocket capable of reaching space in 1942. Dubbed the V-2 rocket, it was not actually intended for space travel. Instead, the V-2 was constructed as a ballistic missile during WWII. Nonetheless, it was revealed in a flight test to be the first man-made object to fly into space."
  },

  {
    "heading": "The first rocket was invented in China around 1100 AD",
    "sourceUrl": "https://facts.net/science/technology/rocket-facts/",
    "body": "The rockets invented in the 10th century China used solid propellants and were mainly used as weapons and fireworks. It was not until the 1920s that rocket science was studied further. By the 1930s and 1940s, professional rocket engineering started to take off."
  }
]

Luego confirmé y presioné el código, y generé una URL para ese archivo usando este servicio . Esto hará que parezca que estamos obteniendo datos de una API. Puede seguir el mismo proceso o simplemente usar la URL que generé.

Comencemos por obtener solo el contenido y registrar el resultado en la consola. Ajuste el código en la parte superior de su index.astroarchivo:

const dataUrl = 'https://raw.githack.com/seancdavis/astro-the-cool-parts/77d3b5dd2ce2253c33d50fc91a21875f90a8ced5/content/fun-facts.json'
const response = await fetch(dataUrl);
const facts = await response.json();

console.log(facts);

Ahora, reinicie el servidor. Tenga en cuenta que el contenido se registra en el servidor y no en el navegador. Esto se debe a que este código se ejecuta durante el proceso de compilación de Astro, no cuando se carga la página.

Manejo de datos iterables en
Astro Los componentes de Astro no tienen una lógica integrada en la parte de marcado. Entonces, en lugar de recorrer los datos devueltos por nuestra API falsa, crearemos otro componente para manejar el bucle.

Agregue el componente a src/components/FunFactList.jsx, así:

import FunFact from "./FunFact";

export default function FunFactList({ facts }) {
  return (
    <>
      {facts.map((fact, idx) => (
        <FunFact key={idx} heading={fact.heading} sourceUrl={fact.sourceUrl}>
          {fact.body}
        </FunFact>
      ))}
    </>
  );
}

Observe que todo lo que esto hace es tomar una matriz de datos, recorrerla y generar <FunFact />componentes individuales.

De vuelta en el index.astroarchivo, cambie importpara usar el FunFactListcomponente, no el FunFactcomponente.

import FunFactList from '../components/FunFactList.jsx'

Luego elimine console.logy reemplace sus hechos divertidos existentes con el FunFactListcomponente único:

<FunFactList facts={facts} />

Aquí están los cambios de componentes , y cuando se construye, ¡ todavía no hay JavaScript ! ¡Y estamos trayendo datos dinámicos!

Mejora progresiva con Astro

De todas las características que ofrece Astro, la mejora progresiva (o hidratación parcial) es quizás la mejor. Podemos decirle selectivamente a Astro cuándo hidratar los componentes para hacerlos interactivos.

Digamos que queremos colapsar los datos divertidos por defecto y mostrarlos al hacer clic en el encabezado. También alternaremos un emoji para indicar cuándo se abre o se cierra un hecho en particular.

Ajuste el código en el componente de datos curiosos:

import { useState } from "react";
import styles from "./FunFact.module.css";

export default function FunFact({ children, heading, sourceUrl }) {
  const [expanded, setExpanded] = useState(false);

  let wrapperClasses = styles.wrapper;
  if (expanded) wrapperClasses += ` ${styles.wrapperExpanded}`;

  return (
    <div className={wrapperClasses}>
      <h2 className={styles.heading}>
        <button onClick={() => setExpanded(!expanded)}>
          <span>{expanded ? "🟣" : "⚪️"}</span>
          <span>{heading}</span>
        </button>
      </h2>
      <p className={styles.fact}>{children}</p>
      <p>
        <a href={sourceUrl}>Source</a>
      </p>
    </div>
  );
}

Agreguemos un poco más de estilo:

.wrapper {
  margin-bottom: 2rem;
}

.wrapperExpanded .fact {
  display: block;
}

.heading {
  margin-bottom: 0.5rem;
  font-size: 1.4rem;
}

.heading button {
  background-color: inherit;
  border: inherit;
  color: inherit;
  display: inherit;
  font-size: inherit;
  line-height: inherit;
  margin: inherit;
  padding: inherit;
  text-align: inherit;
}

.heading button:hover {
  cursor: pointer;
}

.heading button span:first-child {
  display: inline-block;
  margin-right: 0.5rem;
}

.fact {
  display: none;
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.source {
  font-size: 0.75rem;
}

Aquí está el compromiso con estos cambios.

Ahora cargue la página de inicio en el navegador. Los estilos están ahí, pero nada funciona. ¿Que demonios?

Eso es porque la interactividad de Astro es declarativa. Tienes que optar por usar una de sus directivas de cliente . Ajuste el index.astropara agregar la client:visibledirectiva al renderizar el FunFactListcomponente.

<FunFactList facts={facts} client:visible />

Vuelva a cargar la página y todo debería estar funcionando. Aquí está el compromiso .

Hay algunas directivas diferentes que se pueden usar, y se trata de tiempo. En este caso, usamos client:visible, que hará que el componente sea interactivo solo después de que ingrese a la ventana gráfica.

Ahora eche un vistazo al distdirectorio . Están sucediendo muchas más cosas, incluidos algunos archivos JavaScript.

Conclusión

Esa fue una exploración rápida de las partes de Astro que más me emocionan. Por supuesto, hay mucho más para explorar y Astro seguirá evolucionando. Pero hay un lugar para Astro en este ya abarrotado ecosistema de generadores de sitios estáticos, y estoy emocionado de ponerlo en práctica en mis proyectos.

Fuente: https://blog.logrocket.com/astro-build-faster-apps-less-javascript/

#javascript #astro

Berta Escamilla

1652722560

Cómo Se Compara Astro Con Next.js Para Aplicaciones React

En el panorama actual del desarrollo web, existen numerosos marcos con los que un desarrollador puede elegir trabajar. Específicamente para el ecosistema React, la cantidad de marcos y plataformas disponibles puede parecer abrumador, ya que cada uno tiene sus propias ventajas y desventajas. Debido a que tener una pila de tecnología de calidad es de suma importancia para su experiencia de desarrollador y el producto final, es igualmente importante hacer una investigación profunda sobre cuál de estos muchos marcos es mejor para su equipo.

En este artículo, investigaremos dos marcos populares para crear aplicaciones React: Astro y Next.js. Next.js es una parte establecida del ecosistema React y lo utiliza cualquier persona, desde compañías Fortune 500 hasta desarrolladores independientes. Por otro lado, Astro es relativamente nuevo en el panorama del desarrollo frontend.

Ambos marcos ofrecen un amplio soporte para las aplicaciones web de React y, en muchos aspectos, son bastante similares. Sin embargo, las idiosincrasias de estos dos marcos son lo que realmente los distingue entre sí y del resto del ecosistema React. Al final de este artículo, comprenderá bien las diferencias principales entre Next.js y Astro y podrá tomar una decisión informada sobre qué marco es el adecuado para usted.

Primero, repasaremos las características únicas y definitorias de estos marcos; luego, repasaremos sus aspectos comparables; finalmente, discutiremos qué marco es mejor para qué casos de uso, así como algunos pensamientos finales.

Comparando Astro y Next.js

Antes de continuar con los detalles de estos marcos, se debe hacer una distinción importante: Next.js y Astro son softwares fundamentalmente diferentes.

En sus niveles más básicos, Next.js es un marco de trabajo de pila completa creado específicamente para React, mientras que Astro es un generador de sitios estáticos que ofrece soporte para React. Además, Next.js ofrece funcionalidad tanto del lado del cliente como del servidor; Astro se enfoca únicamente en el lado del cliente.

Debido a esto, es casi imposible comparar objetivamente las características de estas dos plataformas, ya que cada una tiene diferentes funcionalidades y prioridades principales. Es crucial considerar cuáles son los más relevantes para las necesidades técnicas de su producto.

Características únicas de Astro

Lenguaje de plantillas

El principal diferenciador de Astro es su lenguaje de plantillas. El lenguaje de plantillas Astro se creó para garantizar la menor curva de aprendizaje posible de HTML o JSX. Con el lenguaje de plantillas, puede crear componentes reutilizables, diseños, etc.

Quizás se pregunte en qué se diferencia eso de un componente React. Mientras que los componentes de React se basan en JavaScript y el DOM virtual para cargar sus componentes en el navegador, los componentes de Astro no requieren tiempo de ejecución del lado del cliente. Se compilan en HTML durante la fase de creación y se cargan automáticamente en su sitio, lo que permite un rendimiento extrarrápido. Bastante ordenado, ¿verdad?

Sin embargo, la desventaja de esto es que estos son componentes completamente estáticos, lo que significa que no puede usar ninguna lógica dinámica. Aunque puede usar expresiones JSX dinámicas , estas simplemente se compilarán en valores estáticos durante la fase de compilación. Esto es diferente de una biblioteca reactiva como React, donde puede usar una lógica dinámica que cambiará los componentes en el lado del cliente.

Marco-agnóstico

Otra característica definitoria de Astro es cómo es verdaderamente independiente de la biblioteca y el marco, lo que significa que puede usar el que elija: React, Vue, Svelte, cualquiera que sea su preferencia. También puede mezclar varias bibliotecas en un proyecto, lo que permite el uso de micro-frontends.

Rendimiento del lado del cliente

El enfoque de Astro en el lado del cliente le permite priorizar la optimización y el rendimiento del lado del cliente. Esto se demuestra mejor en su característica única de hidratación parcial .

¿Qué es la hidratación parcial? Tenga en cuenta que la mayoría de las aplicaciones o sitios web no son interactivos o no requieren absolutamente JavaScript del lado del cliente para la interactividad. Astro compilará estos componentes en HTML simple que se entregará directamente al usuario.

Para las partes que requieren JavaScript del lado del cliente, estos componentes se guardan para hidratación individual una vez que el HTML sin formato ya se ha procesado. Dado que solo está cargando JavaScript para los componentes que lo requieren absolutamente, esto reduce drásticamente el tamaño del paquete de su sitio, lo que lo hace más eficaz.

Características únicas de Next.js

Next.js es solo React

A diferencia de Astro, Next.js se desarrolló específicamente con React en mente. Aunque puede usar otras bibliotecas basadas en React como Preact o crear páginas desde Markdown, Next.js se limita en última instancia a las aplicaciones React.

Si está interesado en obtener las mismas ventajas de Next.js con otras bibliotecas, considere usar Nuxt.js para Vue y SvelteKit para Svelte, entre muchas otras ofertas.

Conjunto de características ricas

Debido a que Next.js se enfoca únicamente en las aplicaciones React, proporciona un amplio conjunto de funciones integradas que pueden mejorar su aplicación.

Next.js ofrece muchos componentes React para usar con el marco. Por ejemplo, Next.js ofrece optimización de imágenes nativas con el next/imagecomponente y estrategias de carga de secuencias de comandos con el next/scriptcomponente. Además, Next.js admite la funcionalidad AMP.

También se debe tener en cuenta que, con la ayuda de un next/linkcomponente, Next.js puede precargar y precargar las próximas páginas que un usuario podría visitar. Si alguna vez visitó un sitio web en el que el navegador no parece cargarse cada vez que visita una página nueva aunque la URL cambie, esto es esencialmente lo que sucede detrás de escena. Esta característica, aunque no es exclusiva de Next.js, es una de sus ofertas más notables.

Representación del lado del servidor

Aunque Next.js no ofrece un gran rendimiento del lado del cliente ni técnicas de optimización integradas como Astro, lo compensa con su compatibilidad con la representación del lado del servidor y las rutas API.

La representación del lado del servidor permite que su aplicación React sea mucho más eficiente en el lado del cliente al descargar cualquier recuperación de datos al servidor. Por ejemplo, considere una tienda de comercio electrónico. Cuando un usuario va a la página de un producto, en lugar de hacer que el cliente obtenga los datos del producto a pedido (lo que podría hacer que su aplicación parezca lenta e ineficiente), Next.js le permite obtener los datos de este producto en el servidor y enviar una página preconstruida con todos los datos necesarios completados al cliente.

Las rutas API son una característica única que ofrece Next.js que aumentan aún más las capacidades de pila completa del marco. Como su nombre lo indica, las rutas de API permiten a los desarrolladores agregar puntos finales de API a su aplicación Next.js.

Aspectos comparables

Integraciones y extensibilidad

Tanto Astro como Next.js ofrecen integraciones y complementos para ampliar sus respectivas capacidades.

Astro ofrece una página completa dedicada únicamente a las integraciones , que consiste en cualquier cosa, desde soporte para bibliotecas como React y Vue hasta complementos de accesibilidad. Algunas de estas integraciones son del equipo oficial de Astro, mientras que otras son de la comunidad.

Next.js ofrece personalización a través del next.config.jsarchivo, a través del cual puede incluir complementos de Next.js. Aunque no hay un sitio dedicado para todos los complementos disponibles, una búsqueda rápida en Google a menudo encontrará exactamente lo que necesita.

Actualmente, Next.js supera con creces las ofertas de Astro en términos de integraciones y extensibilidad. Sin embargo, aunque Astro puede ofrecer menos en términos de integraciones preconstruidas en este momento, a medida que el marco crece en popularidad, solo se puede esperar que las integraciones disponibles también crezcan.

Proyectos iniciales

Aunque tanto Astro como Next.js ofrecen proyectos iniciales, lo hacen de maneras bastante diferentes.

Next.js ofrece muchos ejemplos que sirven para diferentes casos de uso. Astro ofrece https://astro.new , que tiene diferentes plantillas para diferentes marcos y características. Además, Astro ofrece https://astro.build/themes/ , que tiene diferentes temas, muy parecidos a los que puede haber visto en Gatsby u otros marcos Jamstack.

Mi preferencia personal aquí es Next.js. Dado que Next.js solo admite un marco, sus ejemplos tienden a ser más enfocados y concisos con tecnologías específicas para que pueda hacer crecer su sitio. Por otro lado, los proyectos iniciales de Astro tienden a estar prediseñados y, como tales, son mucho menos personalizables.

Generación de sitios estáticos

En esencia, Astro es un generador de sitios estáticos, pero Next.js también ofrece capacidades SSG . De hecho, Next.js considera que SSG es su método preferido de renderizado previo.

Tanto Astro como Next.js permiten que la obtención de datos del lado del servidor se incorpore a los componentes de React. Para Astro, primero debe buscar los datos en un componente Astro y luego pasar esos datos al componente React a través de un accesorio. Para Next.js, debe usar getStaticPropsen una página específica para obtener datos.

El método que utiliza Next.js es quizás más optimizado para las aplicaciones React que Astro, pero en última instancia, esto se reduce a preferencias personales, de las cuales no tengo ninguna para esta función.

Rendimiento y optimización

Astro y Next.js ofrecen métodos únicos de optimización y gestión del rendimiento.

Como se mencionó anteriormente, Astro ofrece hidratación parcial como su principal función de optimización y rendimiento. Debido a sus impresionantes capacidades del lado del servidor, Next.js puede admitir una amplia gama de técnicas de rendimiento y optimización. La representación del lado del servidor es una de esas técnicas, en la que parte del sitio de React se representa previamente en el servidor, lo que aumenta la velocidad de carga y la eficiencia.

Next.js también admite componentes importados dinámicamente, lo que permite a los desarrolladores retrasar la carga de componentes con muchos recursos hasta que se cargue el resto de la aplicación. Finalmente, Next.js ofrece soporte experimental para React Server Components , una función que permite que los componentes se representen completamente en el lado del servidor, lo que da como resultado cero JavaScript en el lado del cliente.

Aunque Next.js aparentemente ofrece una mayor cantidad de funciones para el rendimiento y la optimización, es difícil llegar a una opinión concluyente sobre qué marco ofrece funciones de mejor calidad. Esto se reducirá a una mirada subjetiva de las necesidades de su producto.

Pensamientos concluyentes

A lo largo de este artículo, ha surgido un tema común: Next.js prioriza un amplio conjunto de características ricas que lo hacen adecuado para prácticamente cualquier caso de uso, mientras que Astro se enfoca específicamente en crear el sitio web más rápido posible.

Si su producto no requiere las funciones que ofrece Next.js, es posible que lo encuentre demasiado inflado y sobrediseñado para experimentar algún beneficio. Por ejemplo, si su sitio no necesita capacidades del lado del servidor o la funcionalidad AMP, o si planea usar un marco que no sea React, es probable que Next.js no sea la mejor opción. En cambio, si su sitio necesita ser lo más rápido posible y puede beneficiarse de una hidratación parcial, Astro es la opción obvia.

Esperamos que este artículo le haya brindado información útil sobre las similitudes y diferencias de estos dos marcos, y ahora estará mejor equipado para elegir uno sobre el otro.

Fuente: https://blog.logrocket.com/how-astro-compares-next-js-react-apps/

#nextjs #react #astro

Arvel Miller

1599228840

Amazing science from the winners of Astro Pi Mission Space Lab 2019–20

The team at Raspberry Pi and our partner ESA Education are pleased to announce the winning and highly commended Mission Space Lab teams of the 2019–20 European Astro Pi Challenge!

Astro Pi Mission Space Lab logo

Mission Space Lab sees teams of young people across Europe design, create, and deploy experiments running on Astro Pi computers aboard the International Space Station. Their final task: analysing the experiments’ results and sending us scientific reports highlighting their methods, results, and conclusions.

One of the Astro Pi computers aboard the International Space Station

The science teams performed was truly impressive, and the reports teams sent us were of outstanding quality. A special round of applause to the teams for making the effort to coordinate writing their reports socially distant!

The Astro Pi jury has now selected the ten winning teams, as well as eight highly commended teams:

And our winners are…

Vidhya’s code from the UK aimed to answer the question of how a compass works on the ISS, using the Astro Pi computer’s magnetometer and data from the World Magnetic Model (WMM).

Unknown from Externato Cooperativo da Benedita, Portugal, aptly investigated whether influenza is transmissible on a spacecraft such as the ISS, using the Astro Pi hardware alongside a deep literature review.

Space Wombats from Institut d’Altafulla, Spain, used normalized difference vegetation index (NDVI) analysis to identify burn scars from forest fires. They even managed to get results over Chernobyl!

Liberté from Catmose College, UK, set out to prove the Coriolis Effect by using Sobel filtering methods to identify the movement and direction of clouds.

Pardubice Pi from SPŠE a VOŠ Pardubice, Czech Republic, found areas of enormous vegetation loss by performing NDVI analysis on images taken from the Astro Pi and comparing this with historic images of the location.

NDVI conversion image by Pardubice Pi team

_Reforesting Entrepreneurs _from Canterbury School of Gran Canaria, Spain, want to help solve the climate crisis by using NDVI analysis to identify locations where reforestation is possible.

_1G5-Boys _from Lycée Raynouard, France, innovatively conducted spectral analysis using Fast Fourier Transforms to study low-frequency vibrations of the ISS.

Cloud4 from Escola Secundária de Maria, Portugal, masterfully used a simplified static model and Fourier Analysis to detect atmospheric gravity waves (AGWs).

Cloud Wizzards from Primary School no. 48, Poland, scanned the sky to determine what percentage of the seas and oceans are covered by clouds.

Aguere Team 1 from IES Marina Cebrián, Spain, probed the behaviour of the magnetic field, acceleration, and temperature on the ISS by investigating disturbances, variations with latitude, and temporal changes.

Highly commended teams

Creative Coders, from the UK, decided to see how much of the Earth’s water is stored in clouds by analysing the pixels of each image of Earth their experiment collected.

Astro Jaslo from I Liceum Ogólnokształcące króla Stanisława Leszczyńskiego w Jaśle, Poland, used Reimann geometry to determine the angle between light from the sun that is perpendicular to the Astro Pi camera, and the line segment from the ISS to Earth’s centre.

Jesto from S.M.S Arduino I.C.Ivrea1, Italy, used a multitude of the Astro Pi computers’ capabilities to study NDVI, magnetic fields, and aerosol mapping.

BLOOMERS from Tudor Vianu National Highschool of Computer Science, Romania, investigated how algae blooms are affected by eutrophication in polluted areas.

AstroLorenzini from Liceo Statale C. Lorenzini, Italy used Kepler’s third law to determine the eccentricity, apogee, perigee, and mean tangential velocity of the ISS.

Photo of Italy, Calabria and Sicilia (notice volcano Etna on the top right-hand corner) captured by the AstroLorenzi team

EasyPeasyCoding Verdala FutureAstronauts from Verdala International School & EasyPeasyCoding, Malta, utilised machine learning to differentiate between cloud types.

BHTeamEL from Branksome Hall, Canada, processed images using Y of YCbCr colour mode data to investigate the relationship between cloud type and luminescence.

Space Kludgers from Technology Club of Thrace, STETH, Greece, identified how atmospheric emissions correlate to population density, as well as using NDVI, ECCAD, and SEDAC to analyse the correlation of vegetation health and abundance with anthropogenic emissions.

#astro pi #space #astro pi #mission space lab #data science