Anche quest’anno Intesys ha presenziato al ReactJSDay, organizzato dal Grusp e dal Fevr (Frontenders Verona) e dedicato all’ecosistema ReactJS/Redux, che sta da un paio d’anni rivoluzionando il mondo del frontend.
Sviluppato da Facebook per Facebook, ReactJS ha da sempre suscitato nel mondo frontend molto interesse, grazie ad una elevata modularità che rende possibile creare le applicazioni in blocchi totalmente testabili e riutilizzabili.
Con Redux, inoltre, si è portati ad usare un design pattern monodirezionale che, a differenza del two way data binding (di AngularJS 1.x) o del PubSub è totalmente prevedibile. Questo rende il debugging estremamente più semplice, e fornendo strumenti di sviluppo impensabili fino a prima, come Hot Reload e Time Machine Debugging.
Durante la giornata ci sono stati 9 talk, con argomenti molto eterogenei, che hanno spaziato dalla gestione degli stili nei componenti, al deploy, alla creazione di applicazioni modulari, passando per un’analisi sulla gestione degli errori.
I primi due talk hanno entrambi affrontato il delicato tema dello styling in react, con i suoi numerosi approcci, specialmente in ottica CSS in JS.
Johannes Stein – Individual paint for your React components
Tramite react-with-styles (Airbnb) si possono wrappare i componenti in HOC (high order components) e passare valori tramite context. Johannes, che non ama gli stili inlinea, raccomanda la libreria react-css-themr che usa lo stesso approccio ma combinato con CSS modules.
Kevin Mees – CSS is dead, long live CSS (but in modules, please)!
Anche Kevin ha parlato di CSS in JS, illustrando i difetti di quest’ultimo approccio: pochi tools, classi in camelCase (alla js), poco supporto alle funzioni css avanzate e carenza di riutilizzo del CSS. La soluzione può essere quella di utilizzare la libreria react-css-modules.
Emanuele Rampichini – How to push a ReactJS application in production and sleep better
Emanuele ha affrontato il tema della messa in produzione delle app, evitando un approccio PnP (Push and Pray), ma utilizzando sistemi automatizzati di monitoring.
Ha parlato di come Sentry, New Relic e TrackJS siano di vitale importanza per essere avvisati in caso di problemi e di quanto sia importante testare le applicazioni (Unit test + E2E test).
Massimiliano Mantione – Reactive Reality
Massimiliano ha parlato della sua avventura per implementare una UI in un mondo VR, sperimentando diverse librerie, di rendering, tra cui Konva e Babylon.js.
Matteo Ronchi – Frontend Ops (Unconference)
Un argomento molto importante è stato trattato da Matteo durante la Unconference in pausa pranzo: “i tool di build sono parte integrante del nostro progetto, perché non tenerli aggiornati durante tutta la durata dello stesso?”. Ha raccontato di come gestiscono questo aspetto all’interno del suo team, impiegando solamente poche ore al mese per avere un progetto sempre aggiornato e stabile.
Francesco Strazzullo – Stay (React)ive with MobX
Francesco ha parlato di MobX, una libreria che permette di manipolare lo stato dell’applicazione in modo semplice e scalabile, mediante la programmazione reattiva funzionale (FRP, http://www.reactivemanifesto.org/it ).
Gian Marco Toso – Building Modular Redux Applications
Gian Marco ha parlato di Redux, e nello specifico di come scrivere codice riutilizzabile, della separazione delle responsabilità e delle regole per strutturare delle applicazioni Redux, prendendo come riferimento due linee guida (“Ducks: Redux Reducer Bundles” e “Three Rules For Structuring (Redux) Applications”).
Erik Wendel – Frontend At Scale: Experiences Using React In A Large Organization
Erik ha parlato della sua esperienza d’uso di React in una grande azienda e di come sono passati dall’utilizzare un solo pacchetto (common-ui) a un pacchetto npm per ogni componente, in modo da poter avere uno storico delle versioni di ogni singolo componente.
Questo approccio permette anche di creare un rapporto maggiore tra designer e developers, rendendo i primi partecipi dell’evoluzione del componente.
Fatos Hoti – What the hell is graphQL and why should I care?
GraphQL fa quello che fanno le API, ma in questo caso non è il server che espone dei servizi json “statici”, ma è il client che chiede i dati in un certo modo. Per iniziare ha consigliato un client GraphQL di nome lokka.
Michele Bertoli – Proper Error Handling with React/Redux
Michele ha parlato di come gestire gli errori in Redux
I video dell’evento: https://vimeo.com/album/4199344
Alcune delle slides dei talk:
http://www.slideshare.net/emanuelerampichini/how-to-push-a-react-js-application-in-production-and-sleep-better
http://slides.com/gianmarcotoso/building-modular-redux-applications
http://frostney.github.io/talks/react-paint/
https://speakerdeck.com/tosfa/what-the-hell-is-graphql-and-why-should-i-care
https://speakerdeck.com/michelebertoli/proper-error-handling
http://slides.com/francescostrazzullo/stay-reactive-with-mobx#/
È sempre interessante partecipare a questo tipo di eventi, vedere la comunità JS molto attiva e avere l’occasione di imparare un sacco di concetti confrontandosi con colleghi di altre realtà.
Amazing
Good
Bad
Meh
Pff
