{"id":3085,"date":"2017-01-05T08:45:33","date_gmt":"2017-01-05T07:45:33","guid":{"rendered":"https:\/\/www.intesys.it\/journal\/?p=3085"},"modified":"2022-03-03T09:41:58","modified_gmt":"2022-03-03T08:41:58","slug":"reactjs-day-2016","status":"publish","type":"post","link":"https:\/\/www.intesys.it\/journal\/information-technology\/reactjs-day-2016\/","title":{"rendered":"ReactJS Day 2016: quali novit\u00e0 per i frontender?"},"content":{"rendered":"<p><\/p><p>Anche quest\u2019anno Intesys ha presenziato al <b>ReactJSDay<\/b>, organizzato dal <b>Grusp <\/b>e dal <b>Fevr (Frontenders Verona) <\/b>e dedicato all\u2019ecosistema <b>ReactJS\/Redux<\/b>, che sta da un paio d\u2019anni rivoluzionando il mondo del frontend.<\/p>\n<p>Sviluppato da <b>Facebook<\/b> per Facebook, ReactJS ha da sempre suscitato nel mondo frontend molto interesse, grazie ad una elevata modularit\u00e0 che rende possibile creare le applicazioni in blocchi totalmente testabili e riutilizzabili.<\/p>\n<p>Con <b>Redux<\/b>, inoltre, si \u00e8 portati ad usare un design pattern monodirezionale che, a differenza del two way data binding (di <b>AngularJS<\/b> 1.x) o del PubSub \u00e8 totalmente prevedibile. Questo rende il debugging estremamente pi\u00f9 semplice, e fornendo strumenti di sviluppo impensabili fino a prima, come Hot Reload e Time Machine Debugging.<\/p>\n<p>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\u2019analisi sulla gestione degli errori.<\/p>\n<p>I primi due talk hanno entrambi affrontato <strong>il delicato tema dello styling in react<\/strong>, con i suoi numerosi approcci, specialmente in ottica CSS in JS.<\/p>\n<p><b>Johannes Stein &#8211; Individual paint for your React components<\/b><\/p>\n<p>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 <strong>react-css-themr<\/strong> che usa lo stesso approccio ma combinato con <b>CSS modules<\/b>.<\/p>\n<p><b>Kevin Mees &#8211; CSS is dead, long live CSS (but in modules, please)!<\/b><\/p>\n<p>Anche Kevin ha parlato di CSS in JS, illustrando i difetti di quest\u2019ultimo approccio: pochi tools, classi in camelCase (alla js), poco supporto alle funzioni css avanzate e carenza di riutilizzo del CSS. La soluzione pu\u00f2 essere quella di utilizzare la libreria <b>react-css-modules<\/b>.<\/p>\n<p><b>Emanuele Rampichini &#8211; How to push a ReactJS application in production and sleep better<\/b><\/p>\n<p>Emanuele ha affrontato il tema della messa in produzione delle app, evitando un approccio PnP (Push and Pray), ma utilizzando sistemi automatizzati di monitoring.<\/p>\n<p>Ha parlato di come <b>Sentry<\/b>, <b>New Relic<\/b> e <b>TrackJS <\/b>siano di vitale importanza per essere avvisati in caso di problemi e di quanto sia importante testare le applicazioni (Unit test + E2E test).<\/p>\n<p><b>Massimiliano Mantione &#8211; Reactive Reality<\/b><\/p>\n<p>Massimiliano ha parlato della sua avventura per implementare <strong>una UI in un mondo VR<\/strong>, sperimentando diverse librerie, di rendering, tra cui Konva e <b>Babylon.js<\/b>.<\/p>\n<p><b>Matteo Ronchi &#8211; Frontend Ops (Unconference)<\/b><\/p>\n<p>Un argomento molto importante \u00e8 stato trattato da Matteo durante la Unconference in pausa pranzo: \u201ci tool di build sono parte integrante del nostro progetto, perch\u00e9 non tenerli aggiornati durante tutta la durata dello stesso?\u201d. Ha raccontato di come gestiscono questo aspetto all\u2019interno del suo team, impiegando solamente poche ore al mese per avere un progetto sempre aggiornato e stabile.<\/p>\n<p><b>Francesco Strazzullo &#8211; Stay (React)ive with MobX<\/b><\/p>\n<p>Francesco ha parlato di MobX, una libreria che permette di manipolare lo stato dell\u2019applicazione in modo semplice e scalabile, mediante la <b>programmazione reattiva funzionale<\/b> (FRP, <a href=\"http:\/\/www.reactivemanifesto.org\/it\" target=\"_blank\" rel=\"noopener\">http:\/\/www.reactivemanifesto.org\/it<\/a> ).<\/p>\n<p><b>Gian Marco Toso &#8211; Building Modular Redux Applications<\/b><\/p>\n<p>Gian Marco ha parlato di Redux, e nello specifico di come scrivere codice riutilizzabile, della separazione delle responsabilit\u00e0 e delle regole per strutturare delle applicazioni Redux, prendendo come riferimento due linee guida (\u201cDucks: Redux Reducer Bundles\u201d e \u201cThree Rules For Structuring (Redux) Applications\u201d).<\/p>\n<p><b>Erik Wendel &#8211; Frontend At Scale: Experiences Using React In A Large Organization<\/b><\/p>\n<p>Erik ha parlato della sua esperienza d\u2019uso di React in una grande azienda e di come sono passati dall\u2019utilizzare 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.<\/p>\n<p>Questo approccio permette anche di creare un rapporto maggiore tra designer e developers, rendendo i primi partecipi dell\u2019evoluzione del componente.<\/p>\n<p><b>Fatos Hoti &#8211; What the hell is graphQL and why should I care?<\/b><\/p>\n<p>GraphQL fa quello che fanno le API, ma in questo caso non \u00e8 il server che espone dei servizi json \u201cstatici\u201d, ma \u00e8 il client che chiede i dati in un certo modo. Per iniziare ha consigliato un client GraphQL di nome lokka.<\/p>\n<p><b>Michele Bertoli &#8211; Proper Error Handling with React\/Redux<\/b><\/p>\n<p>Michele ha parlato di come gestire gli errori in Redux<\/p>\n<p>I video dell\u2019evento: <a href=\"https:\/\/vimeo.com\/album\/4199344\" target=\"_blank\" rel=\"noopener\">https:\/\/vimeo.com\/album\/4199344<\/a><\/p>\n<p>Alcune delle slides dei talk:<br \/>\n<a href=\"http:\/\/www.slideshare.net\/emanuelerampichini\/how-to-push-a-react-js-application-in-production-and-sleep-better\" target=\"_blank\" rel=\"noopener\">http:\/\/www.slideshare.net\/emanuelerampichini\/how-to-push-a-react-js-application-in-production-and-sleep-better<br \/>\n<\/a><a href=\"http:\/\/slides.com\/gianmarcotoso\/building-modular-redux-applications\" target=\"_blank\" rel=\"noopener\">http:\/\/slides.com\/gianmarcotoso\/building-modular-redux-applications<br \/>\n<\/a><a href=\"http:\/\/frostney.github.io\/talks\/react-paint\/\" target=\"_blank\" rel=\"noopener\">http:\/\/frostney.github.io\/talks\/react-paint\/<br \/>\n<\/a><a href=\"https:\/\/speakerdeck.com\/tosfa\/what-the-hell-is-graphql-and-why-should-i-care\" target=\"_blank\" rel=\"noopener\">https:\/\/speakerdeck.com\/tosfa\/what-the-hell-is-graphql-and-why-should-i-care<br \/>\n<\/a><a href=\"https:\/\/speakerdeck.com\/michelebertoli\/proper-error-handling\" target=\"_blank\" rel=\"noopener\">https:\/\/speakerdeck.com\/michelebertoli\/proper-error-handling<br \/>\n<\/a><a href=\"http:\/\/slides.com\/francescostrazzullo\/stay-reactive-with-mobx#\/\" target=\"_blank\" rel=\"noopener\">http:\/\/slides.com\/francescostrazzullo\/stay-reactive-with-mobx#\/<\/a><\/p>\n<p>\u00c8 sempre interessante partecipare a questo tipo di eventi, vedere la comunit\u00e0 JS molto attiva e avere l\u2019occasione di imparare un sacco di concetti confrontandosi con colleghi di altre realt\u00e0.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Anche quest\u2019anno Intesys ha presenziato al ReactJSDay , organizzato dal Grusp e dal Fevr (Frontenders Verona) e dedicato all\u2019ecosistema ReactJS\/Redux<\/p>\n","protected":false},"author":35,"featured_media":3102,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[27],"tags":[],"class_list":{"0":"post-3085","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-information-technology"},"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>ReactJS Day 2016: quali novit\u00e0 per i frontender?<\/title>\n<meta name=\"description\" content=\"Anche quest\u2019anno Intesys ha presenziato al ReactJSDay, organizzato dal Grusp e dal Fevr (Frontenders Verona) e dedicato all\u2019ecosistema ReactJS\/Redux\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.intesys.it\/journal\/information-technology\/reactjs-day-2016\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ReactJS Day 2016: quali novit\u00e0 per i frontender?\" \/>\n<meta property=\"og:description\" content=\"Anche quest\u2019anno Intesys ha presenziato al ReactJSDay, organizzato dal Grusp e dal Fevr (Frontenders Verona) e dedicato all\u2019ecosistema ReactJS\/Redux\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.intesys.it\/journal\/information-technology\/reactjs-day-2016\/\" \/>\n<meta property=\"og:site_name\" content=\"Intesys Journal\" \/>\n<meta property=\"article:published_time\" content=\"2017-01-05T07:45:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-03-03T08:41:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.intesys.it\/journal\/wp-content\/uploads\/sites\/13\/2016\/12\/React-JS.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Luca Maroni\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Luca Maroni\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.intesys.it\/journal\/information-technology\/reactjs-day-2016\/\",\"url\":\"https:\/\/www.intesys.it\/journal\/information-technology\/reactjs-day-2016\/\",\"name\":\"ReactJS Day 2016: quali novit\u00e0 per i frontender?\",\"isPartOf\":{\"@id\":\"https:\/\/www.intesys.it\/journal\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.intesys.it\/journal\/information-technology\/reactjs-day-2016\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.intesys.it\/journal\/information-technology\/reactjs-day-2016\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.intesys.it\/journal\/wp-content\/uploads\/sites\/13\/2016\/12\/React-JS.jpg\",\"datePublished\":\"2017-01-05T07:45:33+00:00\",\"dateModified\":\"2022-03-03T08:41:58+00:00\",\"author\":{\"@id\":\"https:\/\/www.intesys.it\/journal\/#\/schema\/person\/0fa0f0617c33881f0c26d1235966fe22\"},\"description\":\"Anche quest\u2019anno Intesys ha presenziato al ReactJSDay, organizzato dal Grusp e dal Fevr (Frontenders Verona) e dedicato all\u2019ecosistema ReactJS\/Redux\",\"breadcrumb\":{\"@id\":\"https:\/\/www.intesys.it\/journal\/information-technology\/reactjs-day-2016\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.intesys.it\/journal\/information-technology\/reactjs-day-2016\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/www.intesys.it\/journal\/information-technology\/reactjs-day-2016\/#primaryimage\",\"url\":\"https:\/\/www.intesys.it\/journal\/wp-content\/uploads\/sites\/13\/2016\/12\/React-JS.jpg\",\"contentUrl\":\"https:\/\/www.intesys.it\/journal\/wp-content\/uploads\/sites\/13\/2016\/12\/React-JS.jpg\",\"width\":1280,\"height\":960,\"caption\":\"React-JS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.intesys.it\/journal\/information-technology\/reactjs-day-2016\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.intesys.it\/journal\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"ReactJS Day 2016: quali novit\u00e0 per i frontender?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.intesys.it\/journal\/#website\",\"url\":\"https:\/\/www.intesys.it\/journal\/\",\"name\":\"Intesys\",\"description\":\"Ogni settimana nuovi articoli dedicati al mondo della trasformazione digitale!\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.intesys.it\/journal\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.intesys.it\/journal\/#\/schema\/person\/0fa0f0617c33881f0c26d1235966fe22\",\"name\":\"Luca Maroni\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/www.intesys.it\/journal\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/46c36bec8670b0df88bb8a71d67cadd00a6d878098b23d07cb8291b2c4ff6ed7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/46c36bec8670b0df88bb8a71d67cadd00a6d878098b23d07cb8291b2c4ff6ed7?s=96&d=mm&r=g\",\"caption\":\"Luca Maroni\"},\"url\":\"https:\/\/www.intesys.it\/journal\/autore\/luca-maroni\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"ReactJS Day 2016: quali novit\u00e0 per i frontender?","description":"Anche quest\u2019anno Intesys ha presenziato al ReactJSDay, organizzato dal Grusp e dal Fevr (Frontenders Verona) e dedicato all\u2019ecosistema ReactJS\/Redux","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.intesys.it\/journal\/information-technology\/reactjs-day-2016\/","og_locale":"it_IT","og_type":"article","og_title":"ReactJS Day 2016: quali novit\u00e0 per i frontender?","og_description":"Anche quest\u2019anno Intesys ha presenziato al ReactJSDay, organizzato dal Grusp e dal Fevr (Frontenders Verona) e dedicato all\u2019ecosistema ReactJS\/Redux","og_url":"https:\/\/www.intesys.it\/journal\/information-technology\/reactjs-day-2016\/","og_site_name":"Intesys Journal","article_published_time":"2017-01-05T07:45:33+00:00","article_modified_time":"2022-03-03T08:41:58+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/www.intesys.it\/journal\/wp-content\/uploads\/sites\/13\/2016\/12\/React-JS.jpg","type":"image\/jpeg"}],"author":"Luca Maroni","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"Luca Maroni","Tempo di lettura stimato":"4 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.intesys.it\/journal\/information-technology\/reactjs-day-2016\/","url":"https:\/\/www.intesys.it\/journal\/information-technology\/reactjs-day-2016\/","name":"ReactJS Day 2016: quali novit\u00e0 per i frontender?","isPartOf":{"@id":"https:\/\/www.intesys.it\/journal\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.intesys.it\/journal\/information-technology\/reactjs-day-2016\/#primaryimage"},"image":{"@id":"https:\/\/www.intesys.it\/journal\/information-technology\/reactjs-day-2016\/#primaryimage"},"thumbnailUrl":"https:\/\/www.intesys.it\/journal\/wp-content\/uploads\/sites\/13\/2016\/12\/React-JS.jpg","datePublished":"2017-01-05T07:45:33+00:00","dateModified":"2022-03-03T08:41:58+00:00","author":{"@id":"https:\/\/www.intesys.it\/journal\/#\/schema\/person\/0fa0f0617c33881f0c26d1235966fe22"},"description":"Anche quest\u2019anno Intesys ha presenziato al ReactJSDay, organizzato dal Grusp e dal Fevr (Frontenders Verona) e dedicato all\u2019ecosistema ReactJS\/Redux","breadcrumb":{"@id":"https:\/\/www.intesys.it\/journal\/information-technology\/reactjs-day-2016\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.intesys.it\/journal\/information-technology\/reactjs-day-2016\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.intesys.it\/journal\/information-technology\/reactjs-day-2016\/#primaryimage","url":"https:\/\/www.intesys.it\/journal\/wp-content\/uploads\/sites\/13\/2016\/12\/React-JS.jpg","contentUrl":"https:\/\/www.intesys.it\/journal\/wp-content\/uploads\/sites\/13\/2016\/12\/React-JS.jpg","width":1280,"height":960,"caption":"React-JS"},{"@type":"BreadcrumbList","@id":"https:\/\/www.intesys.it\/journal\/information-technology\/reactjs-day-2016\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.intesys.it\/journal\/"},{"@type":"ListItem","position":2,"name":"ReactJS Day 2016: quali novit\u00e0 per i frontender?"}]},{"@type":"WebSite","@id":"https:\/\/www.intesys.it\/journal\/#website","url":"https:\/\/www.intesys.it\/journal\/","name":"Intesys","description":"Ogni settimana nuovi articoli dedicati al mondo della trasformazione digitale!","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.intesys.it\/journal\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Person","@id":"https:\/\/www.intesys.it\/journal\/#\/schema\/person\/0fa0f0617c33881f0c26d1235966fe22","name":"Luca Maroni","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.intesys.it\/journal\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/46c36bec8670b0df88bb8a71d67cadd00a6d878098b23d07cb8291b2c4ff6ed7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/46c36bec8670b0df88bb8a71d67cadd00a6d878098b23d07cb8291b2c4ff6ed7?s=96&d=mm&r=g","caption":"Luca Maroni"},"url":"https:\/\/www.intesys.it\/journal\/autore\/luca-maroni\/"}]}},"_links":{"self":[{"href":"https:\/\/www.intesys.it\/journal\/wp-json\/wp\/v2\/posts\/3085","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.intesys.it\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.intesys.it\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.intesys.it\/journal\/wp-json\/wp\/v2\/users\/35"}],"replies":[{"embeddable":true,"href":"https:\/\/www.intesys.it\/journal\/wp-json\/wp\/v2\/comments?post=3085"}],"version-history":[{"count":1,"href":"https:\/\/www.intesys.it\/journal\/wp-json\/wp\/v2\/posts\/3085\/revisions"}],"predecessor-version":[{"id":9983,"href":"https:\/\/www.intesys.it\/journal\/wp-json\/wp\/v2\/posts\/3085\/revisions\/9983"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.intesys.it\/journal\/wp-json\/wp\/v2\/media\/3102"}],"wp:attachment":[{"href":"https:\/\/www.intesys.it\/journal\/wp-json\/wp\/v2\/media?parent=3085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.intesys.it\/journal\/wp-json\/wp\/v2\/categories?post=3085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.intesys.it\/journal\/wp-json\/wp\/v2\/tags?post=3085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}