Introduzione
Indipendentemente dal fatto che tu sia un principiante nella programmazione o un sviluppatore esperto, in questo settore è fondamentale apprendere nuovi concetti e linguaggi/framework per tenere il passo con le tendenze.
Prendiamo ad esempio React, il cui codice è stato aperto da Facebook solo quattro anni fa, ed è già diventato la scelta numero uno per gli sviluppatori JavaScript in tutto il mondo.
Vue e Angular, ovviamente, hanno anch'essi la loro legittima base di fan. E ci sono anche Svelte e altri framework versatili come Next.js o Nuxt.js. E Gatsby, Gridsome, Quasar... e molto altro.
Se vuoi affermarti come sviluppatore JavaScript esperto, dovresti avere almeno un po' di esperienza con diversi framework e librerie, oltre a lavorare con il buon vecchio JS.
Per aiutarti a diventare un maestro del front-end nel 2020, ho raccolto nove diversi progetti, ognuno dedicato a diversi framework e librerie JavaScript come stack tecnico, che puoi realizzare e aggiungere al tuo portfolio. Ricorda che nulla ti aiuta di più che creare cose nella pratica, quindi vai avanti, accendi il tuo cervello e rendilo possibile.
L'articolo è stato tradotto con il supporto dell'azienda EDISON Software, che , e inoltre .
Applicazione per la ricerca di film con React (con hooks)
La prima cosa con cui potresti iniziare è creare un'applicazione per la ricerca di film utilizzando React. Di seguito è riportata un'immagine di come apparirà l'app finale:
Cosa imparerai
Creando questa applicazione, migliorerai le tue competenze in React, utilizzando un API Hooks relativamente nuova. Nel progetto esempio si utilizzano componenti React, numerosi hooks, un API esterno e, ovviamente, alcuni stili CSS.
Stack tecnico e funzionalità
- React con hooks
- create-react-app
- JSX
- CSS
Senza l'uso di classi, questi progetti ti danno un'ottima introduzione a React funzionale e sicuramente ti aiuteranno nel 2020. Puoi trovare . Segui le istruzioni o personalizza tutto secondo il tuo gusto.
Applicazione chat con Vue
Un altro ottimo progetto per te è creare un'applicazione di chat, utilizzando la mia libreria JavaScript preferita: VueJS. L'applicazione apparirà all'incirca così:
Cosa imparerai
Da questa guida imparerai come creare un'app Vue da zero: costruire componenti, gestire stati, creare rotte, connettersi a servizi esterni e persino gestire l'autenticazione.
Stack tecnico e funzionalità
- Vue
- Vuex
- Vue Router
- Vue CLI
- Pusher
- CSS
Questo è davvero un ottimo progetto per iniziare a lavorare con Vue o migliorare le tue competenze esistenti per dedicarti allo sviluppo nel 2020. Puoi trovare .
Bellissima applicazione per visualizzare il meteo con Angular 8
Questo esempio ti aiuterà a creare una bella applicazione per visualizzare il meteo usando Angular 8:
Cosa imparerai
Questo progetto ti insegnerà abilità preziose nella creazione di applicazioni da zero, dal design fino allo sviluppo, fino all'applicazione pronta per il deployment.
Stack tecnico e funzionalità
- Angular 8
- Firebase
- Rendering sul lato server
- CSS con griglia e Flexbox
- Compatibile con i dispositivi mobili e adattabile
- Modalità scura
- Interfaccia bella
Quello che mi piace davvero di questo progetto completo è che non studi le cose in isolamento. Invece, studi l'intero processo di sviluppo, dal design al deployment finale.
Applicazione To-Do con Svelte
Svelte è come un nuovo arrivato nell'approccio ai componenti, almeno paragonabile a React, Vue e Angular. È uno delle novità più calde del 2020.
Le applicazioni To-Do non sono necessariamente l'argomento più caldo, ma questo ti aiuterà a perfezionare le tue abilità in Svelte. Ecco come apparirà:
Cosa imparerai
Da questo tutorial imparerai come creare un'applicazione utilizzando Svelte 3, dall'inizio alla fine. Userai componenti, stilizzazione e gestori di eventi.
Stack tecnico e funzionalità
- Svelte 3
- Componenti
- Stilizzazione con CSS
- Sintassi ES 6
Non ci sono molti buoni progetti iniziali su Svelte, quindi ho trovato .
Приложение для электронной коммерции с помощью Next.js
Next.js è il framework più popolare per creare applicazioni React che supportano il rendering sul lato server out-of-the-box.
Questo progetto ti mostrerà come creare un'applicazione di e-commerce che appare come segue:
Cosa imparerai
In questo progetto imparerai a sviluppare con Next.js: creando nuove pagine e componenti, estraendo dati e stilizzando e deployando l'applicazione Next.
Stack tecnico e funzionalità
- Next.js
- Componenti e pagine
- Campionamento dei dati
- Stilizzazione
- Deployment del progetto
- SSR e SPA
È sempre utile avere un esempio concreto, come un'applicazione di commercio elettronico, per imparare qualcosa di nuovo. Puoi .
Полноценный мультиязычный блог с Nuxt.js
Nuxt.js per Vue, lo stesso di Next.js per React: un ottimo framework per unire le capacità di rendering lato server e applicazioni a pagina singola
L'ultima applicazione che puoi creare avrà questo aspetto:
Cosa imparerai
In questo progetto, imparerai a creare un sito web completo utilizzando Nuxt.js, dalla configurazione iniziale al deployment finale.
Sfrutta molte funzionalità interessanti che Nuxt può offrire, come pagine e componenti, oltre alla stilizzazione con SCSS.
Stack tecnico e funzionalità
- Nuxt.js
- Componenti e pagine
- Modulo Storyblock
- Mixins
- Vuex per la gestione dello stato
- SCSS per la stilizzazione
- Middleware Nuxt
, che include molte delle fantastiche funzionalità di Nuxt.js. Personalmente, mi piace lavorare con Nuxt, quindi dovresti davvero provarlo, poiché ti renderà un ottimo sviluppatore Vue.
Blog con Gatsby
Gatsby è un ottimo generatore di siti statici che utilizza React e GraphQL. Questo è il risultato del progetto:
Cosa imparerai
In questa guida, scoprirai come utilizzare Gatsby per creare un blog che utilizzerai per scrivere i tuoi articoli, usando React e GraphQL.
Stack tecnico e funzionalità
- Gatsby
- React
- GraphQL
- Plugin e temi
- MDX/Markdown
- Bootstrap CSS
- Modelli
Se hai mai desiderato aprire un blog, di come farlo usando React e GraphQL.
Non sto dicendo che WordPress sia una cattiva scelta, ma con Gatsby puoi creare siti ad alte prestazioni utilizzando React, il che è una combinazione incredibile.
Blog con Gridsome
Gridsome per Vue… Bene, lo abbiamo già visto con Next/Nuxt.
Ma lo stesso vale per Gridsome e Gatsby. Entrambi utilizzano GraphQL come strato dati, ma Gridsome utilizza VueJS. È anche un incredibile generatore di siti statici che ti aiuterà a creare ottimi blog:
Cosa imparerai
Questo progetto ti insegnerà a creare un semplice blog per iniziare a lavorare con Gridsome, GraphQL e Markdown. Spiega anche come distribuire l'applicazione tramite Netlify.
Stack tecnico e funzionalità
- Gridsome
- Vue
- GraphQL
- Markdown
- Netlify
Questo non è certamente il tutorial più completo, ma copre i concetti di base di Gridsome e .
Un lettore audio simile a SoundCloud, con Quasar
Quasar è un altro framework Vue che può essere utilizzato per creare applicazioni mobili. In questo progetto, creerai un'applicazione audio player, ad esempio:
Cosa imparerai
Mentre altri progetti sono principalmente incentrati su applicazioni web, questo ti mostrerà come creare un'app mobile utilizzando Vue e il framework Quasar.
Dovresti già avere Cordova funzionante con Android Studio/Xcode configurato. Se non è così, la guida include un link al sito web di Quasar, dove mostrano come configurare tutto.
Stack tecnico e funzionalità
- Quasar
- Vue
- Cordova
- WaveSurfer
- Componenti UI
, che dimostra le capacità di Quasar nella creazione di applicazioni mobili.
Fonte: habr.com
