Introduzione
Che tu sia un principiante nella programmazione o un sviluppatore esperto, nel settore è fondamentale apprendere nuovi concetti e linguaggi/framework per restare al passo con le tendenze.
Prendiamo ad esempio React: il cui codice, rilasciato da Facebook solo quattro anni fa, è già diventato la scelta numero uno per gli sviluppatori JavaScript in tutto il mondo.
Vue e Angular hanno, ovviamente, anche loro il loro legittimo seguito. E ci sono anche Svelte e altri framework universali come Next.js o Nuxt.js. E Gatsby, Gridsome, Quasar... e molto altro.
Se desideri affermarti come sviluppatore JavaScript esperto, devi avere almeno una certa esperienza con vari 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 progetti diversi, ognuno dedicato a diversi framework e librerie JavaScript come stack tecnico che puoi creare e aggiungere al tuo portfolio. Ricorda che nulla aiuta di più che realizzare progetti pratici, quindi vai avanti, accendi la tua creatività e rendilo possibile.
L'articolo è stato tradotto con il supporto di EDISON Software, che , così come .
App per la ricerca di film con React (con hooks).
La prima cosa da fare è creare un'app 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 il nuovissimo API Hooks. Nel progetto sono utilizzati componenti React, molti hooks, un API esterna e, ovviamente, alcuni stili CSS.
Stack tecnologico e funzionalità.
- React con hooks.
- create-react-app.
- JSX.
- CSS.
Senza l'uso di alcuna classe, questi progetti ti offrono 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 di chat con Vue
Un altro grande progetto per te è creare un'app di chat utilizzando la mia libreria JavaScript preferita: VueJS. L'app avrà un aspetto simile a questo:
Cosa imparerai.
In questa guida imparerai come realizzare un'app Vue da zero: creare componenti, gestire stati, creare percorsi, connetterti a servizi di terze parti e persino gestire l'autenticazione.
Stack tecnologico 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 sviluppare nel 2020. Puoi trovare .
Una bella applicazione per visualizzare il meteo con Angular 8
Questo esempio ti aiuterà a creare una bella applicazione per visualizzare il meteo utilizzando Angular 8:
Cosa imparerai.
Questo progetto ti insegnerà abilità preziose nella creazione di applicazioni da zero, partendo dalla progettazione fino allo sviluppo, fino ad arrivare a un'applicazione pronta per il deployment.
Stack tecnologico e funzionalità.
- Angular 8
- Firebase
- Rendering lato server
- CSS con grid e Flexbox
- Mobile friendly e adattabilità
- Modalità scura
- Interfaccia elegante
Ciò che mi piace davvero di questo progetto completo è che non si apprendono le materia in isolamento. Invece, si studia l'intero processo di sviluppo, dalla progettazione al deployment finale.
Applicazione To-Do con Svelte
Svelte è come il nuovo arrivato nell'approccio dei componenti, almeno simile a React, Vue e Angular. Ed è una delle novità più calde del 2020.
Le applicazioni To-Do non sono necessariamente il tema più caldo, ma ti aiuteranno a perfezionare le tue abilità con Svelte. Questo sarà il risultato:
Cosa imparerai.
Da questo tutorial imparerai a creare un'applicazione con Svelte 3, dall'inizio alla fine. Utilizzerai componenti, stilizzazione e gestori di eventi.
Stack tecnologico e funzionalità.
- Svelte 3
- Componenti
- Stilizzazione con CSS
- Sintassi ES 6
Non ci sono molti buoni progetti iniziali per Svelte, quindi ne ho trovato uno. .
Приложение для электронной коммерции с помощью Next.js
Next.js è il framework più popolare per costruire applicazioni React che supportano il rendering 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: creare nuove pagine e componenti, estrarre dati e stilizzare e distribuire l'applicazione Next.
Stack tecnologico e funzionalità.
- Next.js
- Componenti e pagine
- Estrazione dei dati
- Stilizzazione
- Distribuzione del progetto
- SSR e SPA
È sempre bello avere un esempio reale, come un'applicazione di e-commerce, per imparare qualcosa di nuovo. Puoi .
Полноценный мультиязычный блог с Nuxt.js
Nuxt.js per Vue è come Next.js per React: un ottimo framework per combinare le capacità di rendering lato server e applicazioni a pagina singola
L'ultima applicazione che puoi creare apparirà così:
Cosa imparerai.
In questo esempio di progetto, imparerai a creare un sito web completo utilizzando Nuxt.js — dalla configurazione iniziale al deployment finale.
Vanta molte funzioni interessanti che Nuxt può offrire, come pagine e componenti, oltre alla stilizzazione tramite SCSS.
Stack tecnologico 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 ottime funzionalità di Nuxt.js. Personalmente, mi piace lavorare con Nuxt, quindi dovresti provarlo, poiché ti renderà un ottimo sviluppatore Vue.
Blog con Gatsby
Gatsby è un eccellente generatore di siti statici che utilizza React e GraphQL. Questo è il risultato del progetto:
Cosa imparerai.
In questa guida imparerai come usare Gatsby per creare un blog, che utilizzerai per scrivere i tuoi articoli, utilizzando React e GraphQL.
Stack tecnologico e funzionalità.
- Gatsby
- React
- GraphQL
- Plugin e temi
- MDX/Markdown
- Bootstrap CSS
- Modelli
Se hai mai voluto avere un blog, di come crearlo, utilizzando React e GraphQL.
Non dico che WordPress sia una cattiva scelta, ma con Gatsby puoi creare siti ad alte prestazioni usando React — il che è un'accoppiata sorprendente.
Blog con Gridsome
Gridsome per Vue... Bene, l'abbiamo già visto con Next/Nuxt.
Ma lo stesso vale per Gridsome e Gatsby. Entrambi utilizzano GraphQL come strato di dati, ma Gridsome utilizza VueJS. È anche un incredibile generatore di siti statici, ideale per creare blog fantastici.
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 tecnologico e funzionalità.
- Gridsome
- Vue
- GraphQL
- Markdown
- Netlify
Questo, ovviamente, non è il tutorial più completo, ma copre i concetti fondamentali 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'app di lettore audio, ad esempio:
Cosa imparerai.
Mentre altri progetti si concentrano principalmente 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. In caso contrario, nella guida è presente un link al sito web di Quasar, dove mostrano come impostare tutto.
Stack tecnologico e funzionalità.
- Quasar
- Vue
- Cordova
- WaveSurfer
- Componenti UI
, che dimostra le capacità di Quasar nella creazione di applicazioni mobili.
Fonte: habr.com
