marco ilardi imprenditore ritratto
Marco Ilardi CEO di Micropedia

Sono un imprenditore e sviluppo software applicazioni su misura e mobile app development, mi occupo su Forbes di Web 3 e parlo di food tech, faccio consulenza sulla intelligenza artificiale e faccio consulenza SEO per migliorare il posizionamento del tuo sito internet sui motori di ricerca.  

Come scrivere una applicazione con Qwik

qwik miglior framework javascript per la seo
Sommario
Picture of Marco Ilardi
Marco Ilardi
Marco Ilardi, nato a Napoli il 12/5/1970, è un imprenditore digitale CEO di Micropedia, sviluppatore di app mobile, scrittore, blogger ed un seo specialist esperto di knowledge panel di Google.
Qwik è uno dei framework più interessanti degli ultimi tempi per sviluppare applicazioni web che siano ottimizzate per la SEO. Vediamo come funziona con qualche esempio pratico.

Che cos’è il framework Qwik e perché è interessante

Qwik è un framework javascript di sviluppo web creato da Miško Hevery il creatore di Angular e presentato in beta l’anno scorso al We are developer di Berlino che è stato rilasciato in versione 1.0 il 2 maggio 2024 ed è progettato per migliorare le prestazioni delle applicazioni web, concentrandosi sulla riduzione dei tempi di caricamento e dell’interazione utente, grazie alla sua capacità di eseguire il rendering del contenuto in modo altamente ottimizzato.

È stato sviluppato con un approccio radicalmente diverso rispetto ai tradizionali framework JavaScript, come React o Angular, per affrontare le sfide legate alla scalabilità e all’efficienza delle applicazioni moderne e funziona tantissimo lato seo migliorando la velocità e offrendo prestazioni da paura con i core web vitals.

Che cos’è un framework frontend

Un framework frontend è un insieme di strumenti e librerie predefinite utilizzate per costruire l’interfaccia utente (UI) di applicazioni web. Questi framework facilitano lo sviluppo di applicazioni offrendo strutture e componenti standardizzati, consentendo agli sviluppatori di creare interfacce utente complesse in modo più efficiente e coerente. I framework frontend spesso includono funzionalità per la gestione del DOM, l’interazione con API, la gestione dello stato dell’applicazione e la creazione di componenti riutilizzabili. Alcuni esempi noti di framework frontend includono React, Angular e Vue.js.

Caratteristiche Principali di Qwik

Rendering Istantaneo

Qwik è progettato per eseguire il rendering del contenuto lato server in modo altamente efficiente, riducendo al minimo il tempo necessario per visualizzare la prima pagina. Questo approccio è spesso chiamato “rendering istantaneo”

Lazy Loading Estremo

Una delle innovazioni chiave di Qwik è il concetto di “Lazy Loading Estremo”, dove il framework carica solo il codice strettamente necessario per l’interazione dell’utente corrente, differendo il resto fino a quando non è assolutamente necessario.

Fine-Grained Reactive System

Qwik utilizza un sistema reattivo molto fine-grained che permette di aggiornare solo le parti della UI che necessitano di modifiche, migliorando significativamente le prestazioni rispetto ai tradizionali approcci a stato globale o diffing del Virtual DOM.

Optimized Hydration

A differenza di altri framework che eseguono una completa idratazione del contenuto lato client, Qwik implementa una idratazione ottimizzata che evita di dover eseguire JavaScript non necessario, riducendo così il tempo di esecuzione e il carico sulla CPU del dispositivo client.

Componenti Isomorfi

I componenti in Qwik sono progettati per funzionare in modo trasparente sia lato server che lato client, facilitando lo sviluppo di applicazioni isomorfe che possono trarre vantaggio dal rendering lato server senza sacrificare l’interattività.

Performance e SEO

Grazie al rendering istantaneo e all’ottimizzazione del caricamento del codice, Qwik migliora significativamente le performance delle applicazioni web, risultando in tempi di caricamento più rapidi e un miglior posizionamento SEO, dato che le pagine sono completamente renderizzate e indicizzabili dai motori di ricerca.

 

Benefici per gli Sviluppatori e per gli Utenti

Esperienza Utente Migliorata

Tempi di caricamento ridotti e interazioni più fluide grazie alla gestione ottimizzata del JavaScript.

SEO Potenziato

Rendering lato server efficace che migliora la visibilità sui motori di ricerca.

Efficienza di Sviluppo

Strumenti e API che semplificano lo sviluppo di applicazioni web complesse e performanti.

Come installare ed usare Qwik

Qwik è adatto per applicazioni web che necessitano di alte performance, come ad esempio e-commerce, applicazioni single-page (SPA) con molte interazioni utente, e siti che puntano fortemente alla SEO.

La sua architettura innovativa consente di sviluppare applicazioni scalabili e reattive, mantenendo un’esperienza utente di alta qualità.

Per utilizzare Qwik in locale occorre una versione di Node.js installata dalla versione 18.17 in poi ed un editor visuale gratuito come Visual studio code.

Per fare le prove sul sito ufficiale è disponibile anche una area sandbox e un area con una serie di tutorial

In conclusione, Qwik rappresenta un passo avanti significativo nel campo dei framework web, fornendo soluzioni alle sfide di performance e scalabilità che molti sviluppatori affrontano oggi, con un’attenzione particolare alla rapidità di caricamento e alla riduzione del carico di lavoro sul client.

Creare un'applicazione tipo blocco note con Qwik

A questo punto ti guiderò nella creazione di un'applicazione di "Note Taking" utilizzando Qwik.

Questa applicazione ti permetterà di annotare, visualizzare ed eliminare note. Seguendo i passaggi, imparerai come configurare l'ambiente di sviluppo, creare componenti e gestire lo stato e il routing dell'applicazione.

Prima di iniziare, assicurati di avere installato Node.js (versione 16 o superiore) e un editor di codice come Visual Studio Code.

Avvia il progetto con il comando:

npm create qwik@latest

Segui le istruzioni per configurare il progetto. La struttura del progetto include diverse cartelle, tra cui src per i file sorgente e public per risorse statiche come immagini e file CSS. Iniziamo con il creare un componente per visualizzare le note.

Crea una cartella components all'interno di src e un file NoteList.tsx:

<import { component$ } from '@builder.io/qwik';>

<export default component$(() => {>
  <return (>
    <div>
      <h1>Le mie Note</h1>
      <ul>
        <li>Nota 1</li>
        <li>Nota 2</li>
      </ul>
    </div>
  <);>
<});>

Ora creiamo un componente per aggiungere nuove note. Crea un file AddNote.tsx:

<import { component$, useStore } from '@builder.io/qwik';>

<export default component$(() => {>
  <const state = useStore({ note: '' });>

  <const addNote = () => {>
    <console.log('Nota aggiunta:', state.note);>
    <state.note = '';>
  <};>

  <return (>
    <div>
      <input
        type="text"
        value={state.note}
        onInput$={(e) => (state.note = e.target.value)}
        placeholder="Scrivi una nota"
      />
      <button onClick$={addNote}>Aggiungi Nota</button>
    </div>
  <);>
<});>

Successivamente, aggiungi il routing per gestire le diverse visualizzazioni. Crea un file routes.tsx all'interno della cartella src:

<import { component$ } from '@builder.io/qwik';>
<import { Route, RouterOutlet } from '@builder.io/qwik-city';>

<export default component$(() => {>
  <return (>
    <RouterOutlet>
      <Route path="/" component$={() => import('./components/NoteList')} />
      <Route path="/add" component$={() => import('./components/AddNote')} />
    </RouterOutlet>
  <);>
<});>

Infine, configura il file main.tsx per inizializzare l'applicazione:

<import { render } from '@builder.io/qwik';>
<import App from './routes';>

<render(document.getElementById('root'), <App />);>

Ora, avvia il server di sviluppo per vedere la tua applicazione in azione con:

npm start

Con questi passaggi, hai creato una semplice applicazione di "Note Taking" con Qwik. Puoi aggiungere funzionalità aggiuntive come l'archiviazione delle note e la sincronizzazione con un backend per espandere ulteriormente l'applicazione.

Creare un facsimile di Uppbeat con Qwik

In questo articolo, ti guiderò nella creazione di un'applicazione clone di Uppbeat utilizzando Qwik. Questa applicazione per chi non la conoscesse consente di sfogliare e riprodurre brani musicali. Seguendo i passaggi, imparerai a configurare l'ambiente di sviluppo, creare componenti e gestire lo stato e il routing dell'applicazione. Prima di iniziare, assicurati di avere installato Node.js (versione 16 o superiore) e un editor di codice come Visual Studio Code.

Avvia il progetto con il comando:

npm create qwik@latest

Segui le istruzioni per configurare il progetto. La struttura del progetto include diverse cartelle, tra cui src per i file sorgente e public per risorse statiche come immagini e file CSS. Iniziamo con la creazione di un componente per visualizzare la lista dei brani. Crea una cartella components all'interno di src e un file TrackList.tsx:

<import { component$ } from '@builder.io/qwik';>

<export default component$(() => {>
  <return (>
    <div>
      <h1>Lista dei Brani</h1>
      <ul>
        <li>Brano 1</li>
        <li>Brano 2</li>
      </ul>
    </div>
  <);>
<});>

Ora creiamo un componente per aggiungere nuovi brani. Crea un file AddTrack.tsx:

<import { component$, useStore } from '@builder.io/qwik';>

<export default component$(() => {>
  <const state = useStore({ track: '' });>

  <const addTrack = () => {>
    <console.log('Brano aggiunto:', state.track);>
    <state.track = '';>
  <};>

  <return (>
    <div>
      <input
        type="text"
        value={state.track}
        onInput$={(e) => (state.track = e.target.value)}
        placeholder="Scrivi un brano"
      />
      <button onClick$={addTrack}>Aggiungi Brano</button>
    </div>
  <);>
<});>

Successivamente, aggiungi il routing per gestire le diverse visualizzazioni. Crea un file routes.tsx all'interno della cartella src:

<import { component$ } from '@builder.io/qwik';>
<import { Route, RouterOutlet } from '@builder.io/qwik-city';>

<export default component$(() => {>
  <return (>
    <RouterOutlet>
      <Route path="/" component$={() => import('./components/TrackList')} />
      <Route path="/add" component$={() => import('./components/AddTrack')} />
    </RouterOutlet>
  <);>
<});>

Infine, configura il file main.tsx per inizializzare l'applicazione:

<import { render } from '@builder.io/qwik';>
<import App from './routes';>

<render(document.getElementById('root'), <App />);>

Ora, avvia il server di sviluppo per vedere la tua applicazione in azione con:

npm start

Con questi passaggi, hai creato una semplice applicazione clone di Uppbeat con Qwik. Puoi aggiungere funzionalità aggiuntive come l'archiviazione dei brani e la sincronizzazione con un backend per espandere ulteriormente l'applicazione.

Se volete c'è un progetto completo di esempio con Qwik che potete scaricare su GIT

Documentazione su Qwik

Per cominciare ad utilizzare Qwik vi consiglio di iscrivervi alla comunità su Discord oppure seguire la pagina ufficiale su Twitter.

Leggi questo articolo invece per capire come fare un deploy qwik

Se invece volete seguire un corso di javascript per la SEO completo vi consiglio questo bellissimo video di Giorgio Taverniti ed Alessio Pomaro in cui si parla anche di Qwik:

Un altro bel video che vi consiglio di guardare è questo con Giorgio Boa.

Infine vi consiglio di guardare seppur in inglese questo workshop fatto dallo stesso creatore di Qwik Miško Hevery

Condividi l'articolo
Forse ti potrebbe interessare