Introduzione
Che tu sia nuovo alla programmazione o uno sviluppatore esperto, apprendere nuovi concetti e linguaggi/framework è un must in questo settore per stare al passo con le tendenze.
Prendi React, ad esempio, che Facebook ha reso open source solo quattro anni fa ed è già diventata la scelta numero uno per gli sviluppatori JavaScript di tutto il mondo.
Vue e Angular, ovviamente, hanno anche la loro legittima base di fan. E poi c'è Svelte e altri framework universali come Next.js o Nuxt.js. E Gatsby, Gridsome e Quasar... e molto altro ancora.
Se vuoi dimostrare di essere uno sviluppatore JavaScript esperto, dovresti avere almeno un po' di esperienza con vari framework e librerie, oltre a lavorare con il buon vecchio JS.
Per aiutarti a diventare un esperto del front-end nel 2020, ho messo insieme nove progetti diversi, ciascuno incentrato su un framework e una libreria JavaScript diversi come stack tecnologico che puoi creare e aggiungere al tuo portfolio. Ricorda che niente ti aiuta di più che creare effettivamente cose, quindi vai avanti, usa la tua mente e realizzalo
L'articolo è stato tradotto con il supporto di EDISON Software, che e .
App per la ricerca di film tramite React (con hook)
La prima cosa da cui potresti iniziare è creare un'app per la ricerca di film utilizzando React. Di seguito è riportata un'immagine di come apparirà l'applicazione finale:
Cosa imparerai?
Creando questa app, migliorerai le tue capacità di React utilizzando la relativamente nuova API Hooks. Il progetto di esempio utilizza componenti React, molti hook, un'API esterna e, naturalmente, alcuni stili CSS.
Stack tecnologico e funzionalità
- Reagire con i ganci
- creare-reagiscono-app
- JSX
- CSS
Senza utilizzare alcuna classe, questi progetti ti offrono il punto di ingresso perfetto nel funzionale React e ti aiuteranno sicuramente nel 2020. potete trovare . Segui le istruzioni o personalizzalo.
App di chat con Vue
Un altro fantastico progetto che puoi realizzare è creare un'app di chat utilizzando la mia libreria JavaScript preferita: VueJS. L'applicazione sarà simile a questa:
Cosa imparerai?
In questo tutorial imparerai come creare un'app Vue da zero: creare componenti, gestire lo stato, creare percorsi, connettersi a servizi di terze parti e persino gestire l'autenticazione.
Stack tecnologico e funzionalità
- Vue
- vuex
- Vue Router
- Vedi CLI
- Pusher
- CSS
Questo è davvero un ottimo progetto per iniziare con Vue o migliorare le tue competenze esistenti per iniziare lo sviluppo nel 2020. potete trovare .
App per il bel tempo con Angular 8
Questo esempio ti aiuterà a creare una bellissima app meteo utilizzando Angular 8:
Cosa imparerai?
Questo progetto ti insegnerà competenze preziose nella creazione di applicazioni da zero, dalla progettazione allo sviluppo, fino a un'applicazione pronta per la distribuzione.
Stack tecnologico e funzionalità
- 8 angolare
- Firebase
- Rendering lato server
- CSS con griglia e Flexbox
- Mobile friendly e adattabilità
- Modalità oscura
- Bella interfaccia
Ciò che mi piace davvero di questo progetto onnicomprensivo è che non studi le cose in modo isolato. Imparerai invece l'intero processo di sviluppo, dalla progettazione alla distribuzione finale.
Applicazione To-Do che utilizza Svelte
Svelte è come il nuovo arrivato nell'approccio basato sui componenti, almeno simile a React, Vue e Angular. E questa è una delle novità più interessanti del 2020.
Le app To-Do non sono necessariamente l'argomento più caldo, ma ti aiuteranno davvero ad affinare le tue abilità Svelte. Apparirà così:
Cosa imparerai?
Questo tutorial ti mostrerà come creare un'applicazione utilizzando Svelte 3, dall'inizio alla fine. Utilizzerai componenti, stili e gestori di eventi
Stack tecnologico e funzionalità
- Snello 3
- Componenti
- Styling con CSS
- Sintassi ES6
Non ci sono molti buoni progetti iniziali di Svelte, quindi ho scoperto .
App di e-commerce che utilizza Next.js
Next.js è il framework più popolare per la creazione di applicazioni React che supportano il rendering lato server immediatamente.
Questo progetto ti mostrerà come creare un'applicazione di e-commerce simile a questa:
Cosa imparerai?
In questo progetto imparerai come sviluppare con Next.js: creare nuove pagine e componenti, estrarre dati, definire lo stile e distribuire un'applicazione Next.
Stack tecnologico e funzionalità
- Next.js
- Componenti e pagine
- Campionamento dei dati
- stilizzazione
- Distribuzione del progetto
- SSR e SPA
È sempre bello avere un esempio del mondo reale come un'app di e-commerce per imparare qualcosa di nuovo. Puoi .
Blog multilingue completo con Nuxt.js
Nuxt.js sta per Vue, ciò che Next.js sta per React: un ottimo framework per combinare la potenza del rendering lato server e delle applicazioni a pagina singola
L'applicazione finale che puoi creare sarà simile alla seguente:
Cosa imparerai?
In questo progetto di esempio imparerai come creare un sito Web completo utilizzando Nuxt.js, dalla configurazione iniziale alla distribuzione finale.
Sfrutta molte delle interessanti funzionalità che Nuxt ha da offrire, come pagine e componenti e stili con SCSS.
Stack tecnologico e funzionalità
- Nuxt.js
- Componenti e pagine
- Modulo Storyblock
- Hagfish
- Vuex per la gestione dello Stato
- SCSS per lo styling
- Middleware di Nuxt
, che include molte fantastiche funzionalità di Nuxt.js. Personalmente adoro lavorare con Nuxt, quindi dovresti provarlo perché ti renderà anche 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 questo tutorial imparerai come utilizzare Gatsby per creare un blog che utilizzerai per scrivere i tuoi articoli utilizzando React e GraphQL.
Stack tecnologico e funzionalità
- Gatsby
- Reagire
- GraphQL
- Plugin e temi
- MDX/Ribasso
- CSS Bootstrap
- Modelli
Se hai mai desiderato aprire un blog, su come realizzarlo utilizzando React e GraphQL.
Non sto dicendo che WordPress sia una cattiva scelta, ma con Gatsby puoi creare siti Web ad alte prestazioni utilizzando React, che è una combinazione straordinaria.
Blog con Gridsome
Terrificante per Vue... Ok, l'abbiamo già avuto con Next/Nuxt.
Ma lo stesso vale per Gridsome e Gatsby. Entrambi utilizzano GraphQL come livello dati, ma Gridsome utilizza VueJS. Questo è anche un fantastico generatore di siti statici che ti aiuterà a creare fantastici blog:
Cosa imparerai?
Questo progetto ti insegnerà come creare un semplice blog per iniziare con Gridsome, GraphQL e Markdown. Copre anche come distribuire un'applicazione tramite Netlify.
Stack tecnologico e funzionalità
- Gridoso
- Vue
- GraphQL
- riduione di prezzo
- Netlify
Questo non è certamente il tutorial più completo, ma copre i concetti di base di Gridsome e .
Lettore audio simile a SoundCloud che utilizza Quasar
Quasar è un altro framework Vue che può essere utilizzato per creare applicazioni mobili. In questo progetto creerai un'applicazione di riproduzione audio, ad esempio:
Cosa imparerai?
Mentre altri progetti si concentrano principalmente sulle applicazioni web, questo ti mostrerà come creare un'applicazione mobile utilizzando Vue e il framework Quasar.
Dovresti già avere Cordova in esecuzione con Android Studio/Xcode configurato. In caso contrario, il manuale ha un collegamento al sito Web Quasar dove viene mostrato come impostare tutto.
Stack tecnologico e funzionalità
- Quasar
- Vue
- Cordova
- Wave Surfer
- Componenti dell'interfaccia utente
, dimostrando le capacità di Quasar per la creazione di applicazioni mobili.
Fonte: habr.com