Il 2015 è stato l'anno di React , con tantissime nuove versioni e conferenze dedicate all'argomento in tutto il mondo. Per un elenco dettagliato delle date chiave dello scorso anno, consulta il React 2015 Wrap Up.

La domanda più interessante del 2016: come si programma un'applicazione e quali sono le librerie consigliate?

Come sviluppatore che lavora a lungo con React.js, ho la mia piccola idea e le mie migliori pratiche ma è possibile che tu non sia d'accordo con me quindi in questo caso non esitare a lasciare un commento per aprire il discussione.

Se non hai familiarità con React.js, dai un'occhiata a questo tutorial su React.js o alla guida di Peter Hunt su React.

Gestisci i dati

La manipolazione dei dati è sia facile che impegnativa. Questo perché ci sono molti modi per passare una proprietà a un componente React per costruire l'albero di rendering, tuttavia non è sempre ovvio come aggiornare la vista.

Il 2015 è iniziato con il rilascio di diverse librerie Flux ed è proseguito con soluzioni più funzionali e responsive.

Diamo un'occhiata a dove siamo oggi.

Flusso

Nella nostra esperienza, Flux viene spesso utilizzato in modo eccessivo (ovvero, quando non è realmente necessario).

Flux fornisce un modo pulito per archiviare e aggiornare lo stato dell'applicazione e attivare il rendering su richiesta.

È utile per gestire lo stato globale delle applicazioni, ad esempio gli utenti connessi, lo stato di un router o di un account attivo, ma può diventare rapidamente piuttosto noioso se si inizia a gestire dati temporanei o locali.

Non consigliamo di utilizzare Flux per gestire informazioni relative al routing come items/:itemId . È preferibile, invece, caricare e memorizzare queste informazioni nello stato del componente. In questo modo, verranno eliminate quando il componente viene rimosso.

Per maggiori informazioni su Flux, l'articolo "The Evolution of Flux Framework" è un'ottima risorsa.

Usa redux

Redux è un contenitore di stato prevedibile per le app JavaScript.

Se pensi di aver bisogno di Flux o di una soluzione simile, ti consiglio di dare un'occhiata a Redux e al corso di Dan Abramov : "Getting started with redux" per imparare velocemente.

Redux è costruito attorno alle idee di Flux ma evita la complessità traendo ispirazione da ELM.

Mantieni gli Stati piatti

Le API in genere restituiscono risorse annidate, che possono essere difficili da gestire in un'architettura basata su Flux o Redux. Consigliamo di semplificarle utilizzando una libreria come normalizr e di mantenere gli stati il ​​più semplici possibile.

Suggerimento per i professionisti:

const data = normalize(response, arrayOf(schema.user))
state = _.merge(state, data.entities)

(Utilizziamo isomorphic-fetch per comunicare con l'API)

Usa Stati immutabili

"gli stati mutevoli condivisi sono la fonte del male" Pete Hunt, React.js Conf 2015

Un oggetto immutabile è un oggetto il cui stato non può essere modificato dopo la sua creazione.

Gli oggetti immutabili possono risparmiarci molti grattacapi e migliorare le prestazioni di rendering grazie al controllo di uguaglianza a livello di riferimento. Come in shouldComponentUpdate :

shouldComponentUpdate(nexProps) {
   // au lieu d'une comparaison profonde
   return this.props.immutableFoo !== nexProps.immutableFoo
}

Come ottenere l'immutabilità in javascript?

Il metodo più difficile consiste nell'essere molto cauti e scrivere codice come nell'esempio seguente, che dovrebbe sempre essere testato con unit test utilizzando deep-freeze-node (blocca prima della mutazione e controlla il risultato dopo).

return {
  ...state,
  foo
}
return arr1.concat(arr2)

E credetemi, quelli erano gli esempi facili.

Il modo più semplice, ma anche il meno naturale, è utilizzare Immutable.js.

import { fromJS } from 'immutable'
const state = fromJS({ bar: 'biz' })
const newState = foo.set('bar', 'baz')

Immutable.js è veloce e l'idea è elegante. Consiglio di guardare il video di Lee Byron su Immutable Data e React, anche se non avete intenzione di utilizzarlo. Vi fornirà una comprensione approfondita del suo funzionamento.

Soluzioni osservabili e reattive

Se non ti piacciono Flux/Redux o se desideri un servizio più reattivo, non preoccuparti! Esistono altre soluzioni per la gestione dei dati. Ecco un elenco di librerie che potrebbero fare al caso tuo:

• ciclo.js ("Una libreria funzionale e un framework JavaScript reattivo per un codice più pulito")
• flusso rx ("L'architettura del flusso con RxJS")
• redux-rx ("Utility RxJS per Redux.")
• mobile ("Dati osservabili. Funzioni reattive. Codice semplice.")

efficiente

Quasi tutte le applicazioni lato client utilizzano il routing. Se utilizzi React.js in un browser, prima o poi avrai bisogno di una libreria. Abbiamo scelto react-router, un'ottima libreria della community di Rackt . Rackt produce costantemente risorse di alta qualità per gli appassionati di React.js.

Per integrare react-router , consulta la relativa documentazione, ma soprattutto, se utilizzi Flux/Redux, ti consigliamo di mantenere lo stato del tuo router sincronizzato con il tuo store di stato/stato globale.

Gli stati del router sincronizzati ti aiuteranno a controllare il comportamento del router attraverso le azioni Flux/Redux e a leggere gli stati e le impostazioni del router nei tuoi componenti.

Gli utenti di Redux possono farlo facilmente con la libreria redux-simple-router.

Divisione del codice, caricamento lento

Pochissimi utenti di webpack sanno che è possibile separare il codice della propria applicazione per suddividere l'output del bundler in diversi blocchi JavaScript:

require.ensure([], () => {
  const Profile = require('./Profile.js')
  this.setState({
    currentComponent: Profile
  })
})

Questo è molto utile nelle applicazioni di lunga durata perché il browser dell'utente non deve scaricare codice utilizzato raramente, come la pagina del profilo, dopo ogni distribuzione.

Più blocchi significano più richieste HTTP, ma questo non è un problema con HTTP/2 multiplexato.

È possibile combinare questa tecnica anche con l'hashing a blocchi per ottimizzare il rapporto di successo della cache dopo le modifiche al codice…

La prossima versione di react-router porterà molto in termini di suddivisione del codice.

Per comprendere il futuro di react-router, consulta questo post del blog di Ryan Florence : Benvenuti nel futuro della distribuzione delle applicazioni web.

Il resto dell'articolo

Articolo originale di Péter Márton di RisingStack , tradotto dal team di JS-Republic.

[tipo separatore=”” size=”” icon=”stella”] [actionbox color=”default” title=”” description=”JS-REPUBLIC è una società di servizi specializzata nello sviluppo di JavaScript. Siamo un centro di formazione riconosciuto. Trova tutta la nostra formazione tecnica sul nostro sito partner dedicato alla Formazione” btn_label=”La nostra formazione” btn_link=”http://training.ux-republic.com” btn_color=”primary” btn_size=”big” btn_icon=”star” btn_external =”1″]