Principali frame e argomenti JavaScript da imparare nel 2017

OOPS! Sembra che tu abbia vagato indietro nel tempo. Presto! Torna al 2019!

La popolarità di JavaScript ha portato a un ecosistema molto vivace di tecnologie, framework e librerie. Insieme a tutta la sorprendente diversità ed energia nell'ecosistema, arriva un alto livello di confusione per molti. Di quali tecnologie dovresti preoccuparti?

Dove dovresti investire il tuo tempo per ottenere il massimo beneficio? Per quali stack tecnologici stanno assumendo le aziende in questo momento? Quali hanno il maggior potenziale di crescita?

Quali sono le tecnologie più importanti da sapere in questo momento? Questo post è una panoramica di alto livello delle cose che devi sapere, piena di link dove puoi imparare tutto su di esso.

Ricorda mentre stai imparando a sperimentare un po 'di codice reale. Puoi giocare con il codice in modo interattivo su Codepen.io. Se stai ancora imparando ES6, puoi vedere come si traduce usando Babel REPL.

Questa sarà una lunga lista, ma non scoraggiarti. Puoi farlo! Se stai guardando questo elenco, preoccupato di come imparerai tutto ciò che devi sapere per creare app moderne, leggi "Perché sono grato per l'affaticamento di JavaScript". Quindi allacciati e mettiti al lavoro.

Una nota sull'apprendimento opzionale

Alcune di queste cose sono strettamente opzionali *, il che significa che le consiglio se sei interessato a loro o se devi conoscerle per un lavoro, ma non dovresti sentirti obbligato a impararle. Tutto ciò che è contrassegnato da un asterisco (ad es. Esempio *) è facoltativo.

Tutto ciò che non è contrassegnato da un * dovrebbe essere appreso, ma non sentirti obbligato a imparare tutto ciò che c'è da sapere su tutto. Devi essere consapevole delle cose non opzionali, ma non devi necessariamente essere un esperto in materia su assolutamente tutto.

Nozioni fondamentali su JavaScript e DOM

Prima di provare a trovare lavoro con JavaScript, dovresti avere una buona conoscenza dei fondamenti di JavaScript:

  • ES6: la versione corrente di JavaScript è ES2016 (aka ES7), ma molti sviluppatori non hanno ancora imparato correttamente ES6. È tempo di imparare almeno gli elementi essenziali: funzioni freccia, riposo / diffusione, parametri predefiniti, valori letterali concisi degli oggetti, destrutturazione, ecc ...
  • Chiusure: scopri come si comportano gli ambiti di funzione di JavaScript.
  • Funzioni e funzioni pure: probabilmente pensi di avere una grande conoscenza delle funzioni, ma JavaScript ha qualche asso nella manica e dovrai conoscere le funzioni pure per avere una padronanza della programmazione funzionale.
  • Nozioni di base sulla programmazione funzionale: la programmazione funzionale produce programmi componendo funzioni matematiche, evitando dati condivisi e mutabili. Sono passati anni da quando ho visto un'app JavaScript di produzione che non ha fatto un uso pesante della programmazione funzionale. È tempo di padroneggiare i fondamenti.
  • Applicazione parziale e curry
  • Metodi incorporati: apprendi i metodi per i tipi di dati standard (in particolare matrici, oggetti, stringhe e numeri).
  • Richiamate: una richiamata è una funzione utilizzata da un'altra funzione per segnalare quando c'è un risultato pronto. Dici "fai il tuo lavoro, chiamami quando ha finito".
  • Promesse: una promessa è un modo per gestire i valori futuri. Quando una funzione restituisce una promessa, è possibile allegare callback utilizzando il metodo .then () per eseguire dopo la risoluzione della promessa. Il valore risolto viene passato nella funzione di callback, ad esempio doSomething (). Then (value => console.log (value));
  • Chiamate API Ajax e server: le app più interessanti devono eventualmente comunicare con la rete. Dovresti sapere come comunicare con le API.
  • Classi (nota: evitare l'eredità delle classi. Vedi Come utilizzare le classi e dormire di notte.)
  • Generatori e asincroni / attendono: secondo me, il modo migliore per scrivere codice asincrono che sembra sincrono. Ha una curva di apprendimento, ma una volta che l'hai imparato, il codice sarà più facile da leggere.
  • Performance: RAIL - Inizia con "PageSpeed ​​Insights" e "WebPageTest.org"
  • Applicazioni Web progressive (PWA): vedi "Le app native sono condannate" e "Perché le app native sono davvero condannate"
  • Node & Express: Node ti consente di utilizzare JavaScript sul server, il che significa che i tuoi utenti possono archiviare i dati nel cloud e accedervi ovunque. Express è il framework più popolare per Node da una frana.
  • Lodash: una grande cintura di utilità modulare per JavaScript, ricca di funzioni funzionali di programmazione. Importa i moduli funzionali ultimi dati da lodash / fp.

Tooling

  • Chrome Dev Tools: DOM inspect e JS debugger: il miglior debugger, IMO, anche se Firefox ha alcuni strumenti davvero interessanti che potresti voler controllare.
  • npm: repository di pacchetti open source standard per il linguaggio JavaScript.
  • git & GitHub: gestore versione distribuito - tiene traccia delle modifiche del codice sorgente nel tempo.
  • Babele: utilizzato per compilare ES6 per funzionare su browser meno recenti.
  • Webpack: il bundler più popolare per JavaScript standard cerca semplici esempi di configurazione di kit starter / boilerplate per far funzionare le cose velocemente)
  • Atom, VSCode o WebStorm + vim: avrai bisogno di un editor. Atom e VSCode sono gli editor JS più popolari oggi. Webstorm è un'altra soluzione con un supporto molto robusto per strumenti di qualità. Consiglio di imparare vim, o almeno di aggiungere un segnalibro al cheat sheet perché prima o poi, dovrai modificare un file su un server, ed è il modo più semplice - vim viene installato praticamente su ogni tipo di sistema operativo compatibile Unix, e funziona benissimo con le connessioni dei terminali SSH.
  • ESLint: Cattura precoce degli errori di sintassi e problemi di stile. Dopo la revisione del codice e TDD, la terza cosa migliore che puoi fare per ridurre i bug nel tuo codice.
  • Tern.js: strumenti di inferenza del tipo per JavaScript standard e attualmente il mio strumento preferito relativo al tipo per JavaScript: non sono richiesti passaggi di compilazione o annotazioni. Ho calciato tutte le gomme e Tern.js offre la maggior parte dei vantaggi e praticamente nessuno dei costi dell'utilizzo di un sistema di tipo statico per JS.
  • Filato *: simile a npm, ma il comportamento dell'installazione è deterministico e Yarn punta ad essere più veloce di npm.
  • TypeScript *: tipi statici per JavaScript. Completamente facoltativo a meno che tu non stia imparando Angular 2+. Se non stai utilizzando Angular 2+, dovresti valutare attentamente prima di scegliere TypeScript. Mi piace molto e ammiro l'eccellente lavoro del team TypeScript, ma ci sono dei compromessi che devi conoscere. Lettura richiesta: "Il segreto scioccante sui tipi statici" e "Potrebbe non essere necessario TypeScript".
  • Flusso *: controllo statico del tipo per JavaScript. Vedere "TypeScript vs Flow" per un confronto tra i due in modo impressionante informato e oggettivo. Nota che ho avuto qualche difficoltà a far sì che Flow mi desse un buon feedback IDE, anche usando Nuclide.

Reagire

React è una libreria JavaScript per la creazione di interfacce utente, creata da Facebook. Si basa sull'idea del flusso di dati unidirezionale, il che significa che per ogni ciclo di aggiornamento:

  1. React prende input dai componenti come oggetti di scena e esegue il rendering condizionale degli aggiornamenti DOM se i dati sono cambiati per parti specifiche del DOM. Gli aggiornamenti dei dati durante questa fase non possono riattivare il rendering fino alla fase di disegno successiva.
  2. Fase di gestione degli eventi: dopo il rendering del DOM, React delega automaticamente gli eventi DOM a un singolo listener di eventi nella radice dell'albero DOM (per prestazioni migliori). È possibile ascoltare gli eventi e aggiornare i dati in risposta.
  3. Utilizzando eventuali modifiche ai dati, il processo si ripete a 1.

Ciò è in contrasto con l'associazione dati a 2 vie, in cui le modifiche al DOM possono aggiornare direttamente i dati (ad esempio, come nel caso di Angular 1 e Knockout). Con l'associazione a 2 vie, le modifiche al DOM durante il processo di rendering DOM (chiamato ciclo digest in Angular 1) possono potenzialmente riattivare la fase di disegno prima che il disegno sia terminato, causando reflow e ridisegni, rallentando le prestazioni.

React non prescrive un sistema di gestione dei dati, ma si consiglia un approccio basato sul flusso. L'approccio del flusso di dati a 1 via di React prendendo in prestito idee dalla programmazione funzionale e da strutture di dati immutabili ha trasformato il modo in cui pensiamo all'architettura del framework front-end.

Per ulteriori informazioni sull'architettura React & Flux, leggi "Il modo migliore per imparare a programmare è programmare: impara l'architettura delle app costruendo app".

  • create -eagire-app *: il modo più rapido per iniziare con React.
  • reazioni-router *: routing semplice guasto per React.
  • Next.js *: rendering e routing Universal semplici morti per Node & React.
  • velocità-reazione *: animazioni per React: consente di utilizzare il bookmarklet VMD per la progettazione di movimenti visivi interattivi sulle pagine.

Redux

Redux fornisce una gestione transazionale e deterministica dello stato per le tue app. In Redux, eseguiamo l'iterazione su un flusso di oggetti azione per ridurli allo stato corrente dell'applicazione. Per sapere perché è importante, leggi "10 Suggerimenti per una migliore architettura di Redux". Per iniziare con Redux, dai un'occhiata agli eccellenti corsi del creatore di Redux, Dan Abramov:

  • "Introduzione a Redux"
  • "Creazione di applicazioni React con Idiomatic Redux"

Redux è un apprendimento obbligatorio, anche se non si usa mai Redux per un progetto di produzione.

Perché? Perché ti darà molta pratica e ti insegnerà il valore dell'uso di funzioni pure e ti insegnerà nuovi modi di pensare ai riduttori, che sono funzioni di uso generale per scorrere le raccolte di dati ed estrarne un valore. I riduttori sono così generalmente utili che Array.prototype.reduce è stato aggiunto alla specifica JS.

I riduttori sono importanti per qualcosa di più che semplici matrici e apprendere nuovi modi di lavorare con i riduttori è prezioso da solo.

  • redux-saga *: una libreria di effetti collaterali in stile sincrono per Redux. Utilizzare questo per gestire l'I / O (come la gestione delle richieste di rete).

Angolare 2 + *

Angular 2+ è il successore del popolarissimo framework Angular di Google. A causa della sua folle popolarità, avrà un bell'aspetto sul tuo curriculum, ma ti consiglio di imparare prima React.

Ho una preferenza per React su Angular 2+ perché:

  1. È più semplice e
  2. È estremamente popolare e utilizzato in molti lavori (così come Angular 2+)

Per questo motivo, consiglio di imparare React, ma considero Angular 2+ strettamente facoltativo *. Se hai una forte preferenza per Angular 2+, sentiti libero di scambiarli. Impara prima Angular 2+ e considera React opzionale. Entrambi ti gioveranno e avranno un bell'aspetto sul tuo curriculum.

Qualunque cosa tu scelga, prova a concentrarti su di esso per almeno 6 mesi - 1 anno prima di scappare per imparare l'altro. Ci vuole tempo per affondare davvero in una grande competenza.

RxJS *

RxJS è una raccolta di utilità di programmazione reattiva per JavaScript. Pensalo come Lodash per i flussi. La programmazione reattiva è ufficialmente arrivata sulla scena JavaScript. La proposta di osservabili ECMAScript è una bozza di fase 1 e RxJS 5+ è l'implementazione canonica standard.

Per quanto adoro RxJS, se importi tutto in una volta, può davvero gonfiare le dimensioni del tuo bundle (ci sono molti operatori). Per combattere il gonfiamento del pacco, non importare il tutto. Utilizzare invece le importazioni di patch:

L'uso delle importazioni di patch può ridurre la dimensione delle dipendenze rxjs nel bundle di ~ 200k. Questo è davvero un grosso problema. Renderà la tua app molto più veloce.

EDIT: Perché non hai elencato ?

Diverse persone hanno chiesto perché non ho elencato la loro struttura preferita. Uno dei criteri importanti che ho considerato è stato "sarà utile per un vero lavoro?".

Sì, questo è un concorso di popolarità, ma le opportunità che si apriranno conoscendo un quadro sono una considerazione importante quando si decide dove concentrare il proprio investimento di apprendimento.

Per rispondere a questa domanda, ho esaminato alcuni indicatori chiave. Innanzitutto, Google Trends. Se vuoi riprodurre questo grafico di Google Trends, ricorda di selezionare per argomento, non per parola chiave, poiché molte di queste parole forniranno molti falsi positivi. In altre parole, si tratta di tendenze incentrate sull'argomento, non di ricerche di parole chiave:

Argomenti di JS su Google Trends

Ciò che ci dice è l'interesse relativo per vari progetti. Se le persone le stanno cercando, è probabile che stiano esplorando le loro opzioni o stiano cercando aiuto o documentazione. Questo è un indicatore abbastanza decente dei livelli di utilizzo relativi.

Un'altra buona fonte di dati è Indeed.com, che aggrega i dati delle offerte di lavoro provenienti da una grande varietà di fonti. La popolarità della pubblicazione di posti di lavoro è diminuita drasticamente negli ultimi anni, ma raccolgono ancora dati sufficienti per fare buoni confronti relativi che ti dicono quadri che le persone stanno effettivamente usando nei progetti di produzione, sul posto di lavoro:

Per riprodurre tali risultati, cercare javascript e lasciare vuota la posizione. Come puoi vedere chiaramente:

Dominano Angular e React: nient'altro si avvicina. (Tranne jQuery, che viene utilizzato su un'enorme percentuale di tutti i siti Web, comprese le app non incluse) perché è utilizzato da quasi tutti i sistemi legacy, compresi i sistemi CMS più diffusi come WordPress).

In questi elenchi potresti notare che Angular ha un vantaggio significativo rispetto a React. Perché consiglio di imparare prima React? Perché:

  1. Più persone sono interessate all'apprendimento di React che angolare
  2. React porta significativamente Angular nella soddisfazione dell'utente

In altre parole, React sta vincendo le battaglie mindshare e soddisfazione del cliente, e se le tendenze nell'ultimo anno e mezzo continuano a svolgersi, React ha una possibilità molto reale di non collocare Angular come il framework di front-end dominante.

Angular 2+ ha la possibilità di capovolgerlo, quindi Angular potrebbe tornare, ma finora React sta combattendo davvero bene.

Quadri da guardare

  • Vue.js * ha un sacco di stelle e download di GitHub. Se le cose continuano nel modo in cui vanno, nel 2017 andrà molto bene, ma non credo che nel prossimo anno arriverà a disgregare React o Angular (entrambi i quali stanno anche crescendo rapidamente). Impara dopo aver appreso React o Angular.
  • MobX * è un'ottima libreria per la gestione dei dati che è diventata una popolare alternativa a Redux. Inoltre sta crescendo rapidamente e mi aspetto che andrà bene anche nel 2017. Preferisco Redux per la maggior parte delle app, ma ci sono sicuramente casi in cui MobX è una scelta migliore. Ad esempio, se hai centinaia di migliaia di oggetti DOM dinamici su una pagina, probabilmente funzionerà meglio. Inoltre, se i flussi di lavoro delle tue app sono tutti semplici e non hai bisogno di uno stato transazionale e deterministico, probabilmente non hai bisogno di Redux. MobX è sicuramente una soluzione più semplice. Impara dopo aver imparato Redux.
Inizia la tua lezione gratuita su EricElliottJS.com

Eric Elliott è l'autore dei libri, "Software di composizione" e "Programmazione di applicazioni JavaScript". Come co-fondatore di EricElliottJS.com e DevAnywhere.io, insegna agli sviluppatori le abilità di sviluppo software essenziali. Crea e consiglia team di sviluppo per progetti crittografici e ha contribuito alle esperienze software per Adobe Systems, Zumba Fitness, The Wall StreetJournal, ESPN, BBC e i migliori artisti discografici tra cui Usher, Frank Ocean, Metallica e molti altri.

Gode ​​di uno stile di vita remoto con la donna più bella del mondo.