├── jsday-2016 ├── img │ ├── IMG_1643.JPG │ ├── IMG_1644.JPG │ ├── IMG_1645.JPG │ ├── IMG_1646.JPG │ ├── IMG_1647.JPG │ ├── IMG_1648.JPG │ ├── IMG_1649.JPG │ ├── IMG_1650.JPG │ ├── IMG_1651.JPG │ ├── IMG_1653.JPG │ ├── IMG_1654.JPG │ ├── IMG_1655.JPG │ ├── IMG_1656.JPG │ └── IMG_1657.JPG ├── workshop.md ├── data-with-d3.md ├── forgotten-funky-functions.md ├── components-in-production.md ├── building-reactive-rchitectures.md ├── out-of-the-browser.md ├── fftt-modern-build-tool.md ├── keynote-day-2.md ├── README.md ├── asynchronous-javascript.md ├── functional-reactive-programming.md ├── higher-order-components-in-react.md ├── keynote-day-1.md ├── day-1.md └── day-2.md ├── progressive-web-app ├── 5_recap.md ├── README.md ├── 3_push-notfication.md ├── 1_intro.md ├── 4_instant-loading.md └── 2_offline-service-worker.md ├── README.md ├── flow-type-slack-conversation.md └── slack-conversation.md /jsday-2016/img/IMG_1643.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dbertella/conf-sketches/HEAD/jsday-2016/img/IMG_1643.JPG -------------------------------------------------------------------------------- /jsday-2016/img/IMG_1644.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dbertella/conf-sketches/HEAD/jsday-2016/img/IMG_1644.JPG -------------------------------------------------------------------------------- /jsday-2016/img/IMG_1645.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dbertella/conf-sketches/HEAD/jsday-2016/img/IMG_1645.JPG -------------------------------------------------------------------------------- /jsday-2016/img/IMG_1646.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dbertella/conf-sketches/HEAD/jsday-2016/img/IMG_1646.JPG -------------------------------------------------------------------------------- /jsday-2016/img/IMG_1647.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dbertella/conf-sketches/HEAD/jsday-2016/img/IMG_1647.JPG -------------------------------------------------------------------------------- /jsday-2016/img/IMG_1648.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dbertella/conf-sketches/HEAD/jsday-2016/img/IMG_1648.JPG -------------------------------------------------------------------------------- /jsday-2016/img/IMG_1649.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dbertella/conf-sketches/HEAD/jsday-2016/img/IMG_1649.JPG -------------------------------------------------------------------------------- /jsday-2016/img/IMG_1650.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dbertella/conf-sketches/HEAD/jsday-2016/img/IMG_1650.JPG -------------------------------------------------------------------------------- /jsday-2016/img/IMG_1651.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dbertella/conf-sketches/HEAD/jsday-2016/img/IMG_1651.JPG -------------------------------------------------------------------------------- /jsday-2016/img/IMG_1653.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dbertella/conf-sketches/HEAD/jsday-2016/img/IMG_1653.JPG -------------------------------------------------------------------------------- /jsday-2016/img/IMG_1654.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dbertella/conf-sketches/HEAD/jsday-2016/img/IMG_1654.JPG -------------------------------------------------------------------------------- /jsday-2016/img/IMG_1655.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dbertella/conf-sketches/HEAD/jsday-2016/img/IMG_1655.JPG -------------------------------------------------------------------------------- /jsday-2016/img/IMG_1656.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dbertella/conf-sketches/HEAD/jsday-2016/img/IMG_1656.JPG -------------------------------------------------------------------------------- /jsday-2016/img/IMG_1657.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dbertella/conf-sketches/HEAD/jsday-2016/img/IMG_1657.JPG -------------------------------------------------------------------------------- /progressive-web-app/5_recap.md: -------------------------------------------------------------------------------- 1 | # Progressive Web App #PWA - recap by Francesco Bonatesta 2 | 3 | * Push, install, offline 4 | * Speed, permission, hardware 5 | * Think about the objective (re-engage users) and focus on achieving it **progressively** 6 | 7 | 8 | *Slide here* 9 | -------------------------------------------------------------------------------- /jsday-2016/workshop.md: -------------------------------------------------------------------------------- 1 | # Functional and Asynchronous JavaScript Tutorial - jsDay.it 2016 2 | https://github.com/mattpodwysocki/jsday-workshop-2016 3 | 4 | @mattpodwysocki 5 | Open sourcerer 6 | 7 | ## Functional Programming vs imperative 8 | 9 | ## Reactive programming === Collections + Time 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # conferences-sketch 2 | 3 | My personal and opinionated conf notes and sketches. 4 | 5 | ## [Progressive web apps](./progressive-web-app/) 6 | - 04/05/2016 @googleitalia Milan [ita] 7 | 8 | ## Next conferences I'll participate 9 | ### [jsday 2016](./jsday-2016) 10 | - 11, 12/05/2016 Verona [http://2016.jsday.it/](http://2016.jsday.it/) 11 | 12 | ## Contribute 13 | I'll accept pull request about conference I will attend or not if you feel like you can improve my notes feel free to let me know as well 14 | -------------------------------------------------------------------------------- /jsday-2016/data-with-d3.md: -------------------------------------------------------------------------------- 1 | # Discover the information within your data with d3.js | Daniela Mogini 2 | 3 | ## D3 4 | 5 | DOM manipulation: you can do everything you do in jQuery. 6 | - `select`, `selectAll` -> select elements from DOM 7 | - `append` 8 | 9 | Link between data and DOM elements 10 | - `data` 11 | - `enter` 12 | 13 | Array of data are handled natively 14 | 15 | ### Svg elements 16 | ### Scales 17 | Quantitative scales: `d3.scale.linear()`, 18 | ordinal scales: `d3.scale.ordinal()` 19 | Methods for building each of them 20 | 21 | ### Axis 22 | `d3.svg.axis()` 23 | They adapt to fill the data 24 | 25 | ### Colors 26 | ### Transitions 27 | -------------------------------------------------------------------------------- /jsday-2016/forgotten-funky-functions.md: -------------------------------------------------------------------------------- 1 | # Forgotten funky functions by Jakob Mattsson @jakobmattsson 2 | 3 | Javascript everything is so simple, but it has great things. 4 | 5 | ## Functional Programming 6 | function => functional 7 | (function, function) => functional 8 | 9 | Whenever you have a problem you can solve it with another function. 10 | 11 | - `apply` 12 | - `call` 13 | - `arguments` 14 | - `slice` 15 | - `bind` 16 | - ...and clojure 17 | 18 | Stateful function, a function that remember its state. 19 | 20 | ## Meta Programming 21 | - eval 22 | - Function.toString() 23 | 24 | ## There is no class 25 | - new 26 | - MyConstructor 27 | - MyConstructor.prototype 28 | - no types 29 | 30 | ### ES6 or coffeescript syntactic sugar 31 | - class 32 | - constructor 33 | - super 34 | - extends 35 | 36 | Understanding **Object.create** you might not need anymore es6 syntatic's sugar 37 | Oveloading: solve it with passing function to function. 38 | 39 | Object.create CAN be defined. (now is defined ES6?) 40 | -------------------------------------------------------------------------------- /jsday-2016/components-in-production.md: -------------------------------------------------------------------------------- 1 | # (Web?) Components in production | Olga Madejska 2 | 3 | ## Amazon web services 4 | 55 services 5 | 6 | Service teams: 7 | - small 8 | - indipendent (can choose tech stack) 9 | - strong ownership 10 | 11 | No golden hammer, you choose your process, languages, tools. 12 | 13 | ## How to handle differents teams working on the same product 14 | 15 | - Option 1: *Design guide*, implement components in every js framework 16 | - Option 2: *Css framework*, bootstrap style, hard to mantain, set the particular class to particular html 17 | - Option 3: ???, something in code that support all frameworks, browser, performance and accessibility, has tests, development strategy and contribution model 18 | 19 | ### Web Components 20 | Templates, Html import, Custom elements, Shadow DOM 21 | 22 | You can use a polyfill but you have to stick on it 23 | 24 | ## What they kept 25 | - Custom elements 26 | - Style encapsulation 27 | - Defined API 28 | 29 | ## Benefits 30 | Easy to grab for new teams, no longer reviews on the components implementation. 31 | Zero effort after a redesign and sparked community engagement. 32 | -------------------------------------------------------------------------------- /jsday-2016/building-reactive-rchitectures.md: -------------------------------------------------------------------------------- 1 | # Building Reactive Architectures | Matthew Podwysocki 2 | 3 | ## Netflix 4 | Massive query and massive linking across user and data 5 | 6 | @ReactWindows 7 | 8 | @ReactiveX 9 | 10 | Async is awful 11 | 12 | - Living in Callback Hell 13 | - Events and state are mess 14 | 15 | **Promise are only part of solution** 16 | 17 | There is no way to cancel a promise, Fetch API doesn't have an abort method. 18 | 19 | Callback hell solve in the reactive way! 20 | 21 | ## Reactive programming 22 | 23 | - React to load 24 | - React to failure 25 | - React to users 26 | 27 | What's the difference between iterable and events? There is no difference 28 | 29 | Everything is a stream. 30 | 31 | **You must flatMap it.** 32 | 33 | ### story on reactive programming 34 | - jquery: wrong 35 | - knockout or angular: 2 way data binding 36 | - angular 2: implement observables 37 | - ngrx: redux stores in observable way for angular 2 38 | - cycle: unidirectional dataflow reactive programming 39 | - react: subscribe and unsubscribe with rx extension in component mount and unmount 40 | 41 | Observable coming to ES2017?? 42 | Possible standard implementation 43 | 44 | Make reactive great again! 45 | -------------------------------------------------------------------------------- /jsday-2016/out-of-the-browser.md: -------------------------------------------------------------------------------- 1 | # Out of the browser and onto the streets by Ruth John @rumyra 2 | 3 | History of js, lots of stuff happened since 1994 and now we have can speak for days about it 4 | 5 | - Js is being using in aircraft 6 | - Fighthing ebola with offline app 7 | - synthesizer built with javascript 8 | - Move dinosaurs with Raspberry Pi and javascript 9 | 10 | ## Lots of browsers api 11 | Geolocation, Audio, Battery... 12 | 13 | **Winanp** visual engine attach when playing mp3 14 | 15 | *Could I recreate that software in the browser?* 16 | 17 | Web animation API, Html, Css, Canvas, WebGL, video element... 18 | 19 | ### Web animation API 20 | Built on top of css animation, and svg animation, but with js power (timing) 21 | 22 | ### Web audio API 23 | - Create oscillator, that create a sound. 24 | - Grab audio from html 25 | - Create a stream 26 | Then you can create a buffer 27 | 28 | You can then modify the audio 29 | 30 | ### Media stream API 31 | 32 | ### Web MIDI API 33 | Midi is actually music instrument **digital interface** 34 | 35 | Midi -> Message (bits of data) 36 | 37 | Midi instruments, midi controllers, all of them use midi protocol. 38 | 39 | Affordable hardware that you can play with 40 | 41 | Demo -> https://github.com/Rumyra 42 | -------------------------------------------------------------------------------- /progressive-web-app/README.md: -------------------------------------------------------------------------------- 1 | ## 04 aprile 2016 @googleitalia 2 | 3 | # Progressive Web App #PWA 4 | 5 | ### Agenda 6 | * Service worker and offline 7 | * Push notification 8 | * Instant loading e installazione su home screen 9 | * Recap 10 | 11 | ## TOC 12 | - [What are Progressive Web Apps, Alfredo Morresi](./1_intro.md) - [slide](https://drive.google.com/open?id=1IXLWWT9oqkmOfXFNVOI6vX6PMg-OOYnnLsAg4Jw1b7E) 13 | - [Instant and Offline apps with Service Workers - Sivlia Righini](./2_offline-service-worker.md) - [slide](https://drive.google.com/open?id=11QkKWg8843u22YkscY-u6CLGyiXhLdMWfXPJtXprtnA) 14 | - [Service Workers and the offline experience - Maurizio Mangione](./2_offline-service-worker.md) - [slide](https://drive.google.com/open?id=1Mq8FEFl1Arm_h_xtgas9Ngk4DklYVGlBMJQxeEBzLj0) 15 | - [Deeper engagement with Push Notifications - Ludovico Magnocavallo](./3_push-notfication.md) - [slide](https://drive.google.com/open?id=1o74zbm-urcAREqwpIhwArkqcm0w225uoyH7L9UW6hSY) 16 | - [Making it installable and engaging and Instant Loading, Gilberto Cocchi](./4_instant-loading.md) - [slide](https://drive.google.com/open?id=1jkpY7SxCq3XwWKoru7eq0K7zg0YST1NvckXAGbC_3NI) 17 | - [Progressive in Progressive Web Apps, Francesco Bonatesta](./5_recap.md) - [slide](https://drive.google.com/open?id=1YxYzSi75r85zgHnbk94Hd1mZQ_8Np7IND_XLzo4Txpw) 18 | 19 | 20 | ## best link of the day 21 | http://wheel-of-names.appspot.com/static/index.html 22 | -------------------------------------------------------------------------------- /progressive-web-app/3_push-notfication.md: -------------------------------------------------------------------------------- 1 | # Progressive Web App #PWA - Push notification by @ludomagno 2 | 3 | Siti affidabili, veloci e coinvolgenti, attirare l'attenzione dell'utente e migliorare l'interazione con esso. 4 | **Notification Api** 5 | 6 | ## Come strutturare le notifiche per interagire con l'utente 7 | Sette punti simili sia per app che per Web. Una push notification ruba spazio allo schermo quindi si deve utilizzare con cautela. 8 | * Personali, devono rivolgersi all'untente che la riceve, ex. nome della persona che riceve la notifica. 9 | * In tempo reale 10 | * Rilevante per l'utente 11 | * Actionable: deve generare una azione per l'utente 12 | * Concisa 13 | * Funzionare in offline 14 | * Non spammare, no ads in notifiche 15 | 16 | ## Set up 17 | Ci sono due set up diversi, in firefox si ha bisogno solo dell'endpoint, in chrome c'è del setup da fare. 18 | - Developer console, creare un nuovo progetto per avere l'id 19 | - Attivare le api tramite la console e recuperare la browser key 20 | - Nel manifest si andrà ad aggiungere la key 21 | In più serve avere abilitato il service worker. 22 | 23 | ## Processo di subscription 24 | Informare l'utente della subscription creando una storia ad hoc per lui, informarli di come le può limitare o rimuovere. Non fare la subscription alla prima visita del sito ma in un momento chiave come nell'invio di un ordine di un carrello o nel momento della prenotazione di un aereo. Deve essere un valore aggiunto e non spam. 25 | -------------------------------------------------------------------------------- /progressive-web-app/1_intro.md: -------------------------------------------------------------------------------- 1 | # Progressive Web App #PWA - Intro by @rainbowbreeze 2 | 3 | 4 | 5 | ## Storia del web. 6 | * 1991 primo web site. html + css + js 7 | * 2000 Primo step importante introduzione di Ajax. Ajax nasce per far funzionare desktop app nel browser, prima app è stata outlook. 8 | * 2007 Smartphne. Tutto il web adesso è nel palmo della nostra mano. Applicazioni web e applicazioni native 9 | 10 | ## Progressive web app 11 | Si cerca di colmare il gap tra applicazioni native e web app. 12 | Una serie di cose che si possoo implementare un pezzo per volta al fine di ottenere una migliore esperienza utente. 13 | Non tutti i browser supportano le tecnologie base delle progressive web app. Safari per il momento non le supporta per esempio. 14 | ### 3 punti in cui le web app sono peggiori delle native: 15 | * Home screen access: In una progressive web app ti viene chiesto se aggiungere l'icona nell'home screen 16 | * Push notification: Grazie ai service worker è possibile mandare push notification 17 | * Offline: Tramite un proxy che sta in ascolto delle chiamate al server si possono gestire i dati offline 18 | 19 | ## Case histories 20 | * Flip Cart: Ecommerce indiano partito con l'idea di creare una app nativa che ha riprogettato tutto il sito con in mente progressive web app e con grandi risultati. 21 | * Beyond the rack 22 | * Booking.com 23 | 24 | ## Agenda 25 | * Service worker and offline 26 | * Push notification 27 | * Instant loading e installazione su home screen 28 | * Recap 29 | -------------------------------------------------------------------------------- /jsday-2016/fftt-modern-build-tool.md: -------------------------------------------------------------------------------- 1 | # FFTT: A new concept of build tool. | Massimiliano Mantione @m_a_s_s_i 2 | 3 | ## Simple is good 4 | Everybody start with few scripts, but then the project grows 5 | Dependency tracking is what is needing. 6 | 7 | Recipe for speed: 8 | - independency (A, B, C, need A, skip B and C) 9 | - dependency (A > B > C need C skip A, B) 10 | 11 | ## State of the build 12 | - Grunt 13 | - Gulp: pipe 14 | - Broccoli: file tree instead of pipe 15 | - Other tools: 16 | - Webpack: not complete 17 | - Jake: like make 18 | - Gradle: java ecosystem 19 | - Bazel: google 20 | 21 | ## Whishlist 22 | - deterministic 23 | - reliable 24 | 25 | How do determine that a build is reliable? You can't 26 | 27 | ## Dependecy tracking 28 | - file tree (jake, blake) 29 | - internally (gulp, Webpack) 30 | 31 | ## A better way 32 | Track content, not mtime, just how git does. Bazel does it 33 | 34 | ## An even better way 35 | Store everything in a content adressable file. 36 | Use filesystem as environment to build steps. 37 | 38 | Isolate build steps in containers 39 | 40 | ## THe FFTT choice 41 | Fast, correct 42 | 43 | Build system meet functional programming, immutable data structures, memoization of functions result, each step is a pure function. 44 | You never mess with the environment, it's just data transformation other data. 45 | 46 | The build graph is declarative and functional. Each build step is imperative but inside a container, not messing up with system. 47 | Programming language independent. 48 | -------------------------------------------------------------------------------- /jsday-2016/keynote-day-2.md: -------------------------------------------------------------------------------- 1 | # Shipping one of the largest Microsoft JavaScript applications (Visual Studio Code's story) | Keynote by Alexandru Dima @alexdima123 2 | 3 | Visual studio code, made in typescript 4 | 5 | Goal: build a developer experience directly on the browser 6 | Browsers are really good at text layout 7 | 8 | ## Virtual scrolling 9 | Add and remove lines from the Dom 10 | 11 | Sometime Browser are not smart enough you have to use gpu accelerated animation 12 | 13 | ## VS code 14 | - 2014 15 | - Used node-webkit 16 | - 2 hours to put it together 17 | - 6 months to launch 18 | 19 | Started with node-webkit but then passed to `electron` by github. 20 | 21 | Even if you load the code from the same machine bundled and minified code load faster. 22 | 23 | Fast editor - build tools - debugger - git integration 24 | 25 | **April 2015 launch preview** 26 | Monthly updates, people were surprised about editor changing after their feedbacks. 27 | 28 | ### Extension isolation 29 | Controlled extensibility. 30 | 1000 + Extensions built only in javascript/typescript 31 | 32 | ## Language / Debug services 33 | Problem: ctrl + space and have autocomplete, c++ like. 34 | Trying to build the standard based on json, all the language support a single protocol. 35 | 36 | **November 2015 Beta, extensions and open sourced** 37 | Really lot of issues, and some great PRs. 38 | 39 | Try to be transparent as possible, may integration plan, and a roadmap that cover next 6 months. 40 | Questions on stack overflow 41 | Issue on github 42 | 43 | **April 2016 1.0, Localization, Accessibility** 44 | -------------------------------------------------------------------------------- /jsday-2016/README.md: -------------------------------------------------------------------------------- 1 | ## 11 may 2016 Verona 2 | 3 | # jsday 2016 4 | 5 | ### [Agenda](http://2016.jsday.it/schedule/) 6 | 7 | ### Notes 8 | **Day 1** [resume](./day-1.md) 9 | - [What we need from the Web, and what it needs from us](./keynote-day-1.md) 10 | - [Functional and Asynchronous JavaScript Workshop](./workshop.md) 11 | - [Forgotten funky functions by Jakob](./forgotten-funky-functions.md) - [slide](https://speakerdeck.com/jakobmattsson/forgotten-funky-functions-1) 12 | - [Functional Reactive programming](./functional-reactive-programming.md) - [slide](http://www.slideshare.net/flashplatform/reactive-programming-with-cyclejs) 13 | - [Out of the browser and onto the streets](./out-of-the-browser.md) - [slide](https://github.com/Rumyra/JSeverywhere) 14 | 15 | **Day 2** [resume](./day-2.md) 16 | - [Shipping one of the largest Microsoft JavaScript applications (Visual Studio Code's story)](./keynote-day-2.md) 17 | - [Building Reactive Architectures](./building-reactive-rchitectures.md) 18 | - [Discover the information within your data with d3.js](./building-reactive-rchitectures.md) 19 | - [The Evolution of Asynchronous JavaScript](./asynchronous-javascript.md) - [slide](http://www.slideshare.net/cirpo/the-evolution-of-asynchronous-javascript-61984337) 20 | - [(Web?) Components in production](./components-in-production.md) 21 | - [FFTT: A new concept of build tool](./fftt-modern-build-tool.md) 22 | - [Higher Order Components in React](./higher-order-components-in-react.md) - [slide](https://speakerdeck.com/cef62/higher-order-components-in-react-at-italian-jsday-2016) 23 | - A Class Action [slide](http://www.slideshare.net/unlucio/a-class-action) 24 | -------------------------------------------------------------------------------- /jsday-2016/asynchronous-javascript.md: -------------------------------------------------------------------------------- 1 | # The Evolution of Asynchronous JavaScript | Alessandro Cinelli @cirpo 2 | 3 | Asynchrony now and later 4 | 5 | 6 | ## Concurrency 7 | Executing small pieces of code independently one from another. 8 | 9 | JS running in a hosting environment. 10 | 11 | JS is single thread, sort of concurrency, but hosting environment can use different thread 12 | 13 | ## Asynchrony 14 | 15 | Async is great but can be hard 16 | Human being has a sequential brain, we are not multi-tasker 17 | 18 | Callbacks works well and you can solve the callback hell without being lazy. 19 | Getting a value in a synchronous way is like pull a data from somewhere 20 | 21 | Async callback is like push values 22 | 23 | Error handling, Inversion of control, How can you tell it's async? 24 | 25 | ### Promises 26 | Promise represent a proxy for a value, it associate handlers on a single value. 27 | 28 | ES2015 jobs -> free pass on the rollercoaster of event loop. 29 | Mechanism inside js engine to go async 30 | 31 | Promise are now the official way to provide async. 32 | 33 | Object with three state Pending, fulfilled, rejected 34 | - `.then()` method to be able to access to the value fulfilled 35 | - `.catch()` method to handle Error 36 | 37 | Control flow: solved 38 | Inversion of control: solved 39 | Error handling: solved 40 | Async or sync: solved 41 | 42 | But... 43 | 44 | **Promise hell** 45 | 46 | Don't use promise for controlling the flow. 47 | #### Single Value 48 | Single resolution is bad for streams, with promise you will handle a single value 49 | 50 | #### Performances 51 | Promises are slower than callback, but it's not gonna be an issue in 99,9% of the time. 52 | 53 | ### Generators 54 | New type of function that doesn't have the run-to-completion behaviour of the other function. 55 | 56 | The yeald is pausing the function! You have full controll on those functions. 57 | 58 | Iterators are just one side, the other side is observables. 59 | 60 | We can block, we can pull values, we can push values. 61 | 62 | **Generators + Promises** for the win. 63 | 64 | #### Problem, we need a library to run the generators. 65 | **ES7 ES2016 => async / await** finally something inside the language itself 66 | 67 | callbacks, then, async/await, highland (rx.js, streams) 68 | -------------------------------------------------------------------------------- /progressive-web-app/4_instant-loading.md: -------------------------------------------------------------------------------- 1 | # Progressive Web App #PWA - Making it installable and Instant loading by Gilberto Cocchi 2 | 3 | ## Installare la web app sul proprio dispositivo 4 | Il Manifest viene usato anche per definire come salvare sul proprio device android la web app. File json di configurazione. 5 | 6 | * Utente va nel sito, clicca sul menu di chrome add to home screen e scarica il Manifest 7 | * Gli viene chiesta conferma 8 | * Un icona viene installa sulla home screen 9 | 10 | La web app a questo punto si apre in full screen senza dover aprire il browser. Si può abilitare o meno la barra degli indirizzi. 11 | 12 | Si può fare l'auto prompt che permette all'utente di salvare il sito sull'home screen senza passare dalle impostazioni di chrome. Questo è abilitato di default su chrome mobile se si naviga su un sito per almeno 2 volte con una distanza di non più di 5 minuti(??). 13 | 14 | Lato sviluppo questa cosa si può controllare per renderla più user friendly. 15 | 16 | ## Instant loading 17 | Ogni step che un utente deve fare fa perdere il 20% di essi 18 | 19 | * Compression: minificazione, immagini webp(funziona solo su chrome praticamente) 20 | * Round Trips: domini esterni, link attribute rel, prefetch etc, Caricamento di javascript, attributi *defer* o *async* 21 | * Strategia di Cache: header del server last-modified, etag, if-modified-since, if-none-match, cache-control, expires 22 | Come definire **cache-control** e definire una max age? 23 | Usare un framework che pone un hash sul file di modo da settare max age su years. index.html con master-validate quindi cache breve 24 | * CDNs 25 | 26 | HTTP/2 esperimento di google engeneers 27 | In http si può fare una connessione tcp alla volta e il canale non si può utilizzare se è già presente una connessione tcp. 28 | Http/2 utilizza una sola connessione ma le richieste diventano degli stream, tante richieste di file piccoli vengono concatenati in un unica connessione. Si possono inviare dati che hanno origine diversa. 29 | Multiplexing della stessa connessione che a loro volta vengono divisi in frames con diversi headers, gli headers ripetuti fra loro vengono salvati in cache e non vengono ripetuti. 30 | Retrocompatibile con http. 31 | 32 | ## Recap 33 | ![recap](https://pbs.twimg.com/media/Chn5Ve5XEAAnMGI.jpg:large) 34 | -------------------------------------------------------------------------------- /jsday-2016/functional-reactive-programming.md: -------------------------------------------------------------------------------- 1 | # Functional Reactive programming with React.js by Luca Mezzalira 2 | 3 | - Reactive programming 4 | - Model view intent 5 | - cycle.js 6 | 7 | ## Imperative, Functional, Reactive 8 | - Imperative: Describing step by step what you want to achieve. Object has a state 9 | - Functional: Manipulate data in the argument of the function, but you can't manipulate the initial data 10 | - Reactive: Moving forward, used in backend development, in front end is quite new. 11 | 12 | ## Imperative vs Reactive 13 | Reactive, less code, more readable. 14 | 15 | - Observable pattern 16 | - Iterator pattern 17 | 18 | ### [RxJs](http://reactivex.io/) 19 | Start learning few concepts to understand reactive programming. 20 | 21 | **streams**: sequence of ongoing events, everything can be a stream. 22 | It can emit three different things value, error, or completed signal, (3 callbacks) 23 | 24 | **cold observables**: waits until an observer subscribes to it before it begins to emit items 25 | **hot observables**: emitting items as soon as it is created 26 | **operators** 27 | 28 | ## Architectures timeline 29 | - '80 MVC 30 | - '90 MVP 31 | - 2005 MVVM 32 | - 2009 DCI (data context and interaction) 33 | - 2013 FLUX 34 | - 2015 MVI (Model view intent) 35 | 36 | ### MVI 37 | You can't call a method from another module, they are separated, the only shared part of modules are observables. 38 | Better separation of concerns, dependency injection, app easier to test, all the states inside models, the view is state free. 39 | **View -> Render** 40 | View is preparing the virtual tree 41 | There is another library that will render the dom. 42 | 43 | View is receiving data from model, pass them as output to the render 44 | 45 | **Intent** 46 | Input: raw input from user 47 | Output to the model 48 | 49 | **Model** 50 | Input: data from the intent and store them 51 | 52 | ## Cycle.js 53 | Your application is a pure function, that receive an input and return an Output 54 | 55 | Core concepts: 56 | - Object 57 | - Functions 58 | - Drivers 59 | - Helpers 60 | - Components 61 | 62 | **Drivers** When you have to do something, is better to create a Driver 63 | 64 | - Drivers focus on interface for effects 65 | - It doesn't contain business logic 66 | - It receive inputs and return outputs in a predictable way. There can be read only or write only but they are edge cases 67 | 68 | Reactive programming using when you need to fetch lots of data from the back end 69 | 70 | What developers needs to know about MVI [link](http://thenewstack.io/developers-need-know-mvi-model-view-intent/) 71 | -------------------------------------------------------------------------------- /progressive-web-app/2_offline-service-worker.md: -------------------------------------------------------------------------------- 1 | # Progressive Web App #PWA - Service worker by Silvia Righini - Offline by @granze 2 | 3 | # Service worker 4 | Worker che intercetta le richieste http, funziona in un thread separato e non ha accesso al dom. 5 | Unico vincolo per utilizzare service worker, si possono registrare solo su server con https. 6 | 7 | ## Registrare un service worker 8 | ```javascript 9 | if (navigator.serviceWorker) { 10 | navigator.serviceWorker.register('/sw.js', { 11 | scope: "/" 12 | }); 13 | } 14 | ``` 15 | Possiamo rimanere in ascolto di 3 diversi eventi come per esempio *fetch*, *push* e *sync* 16 | ```javascript 17 | self.addEventListener('fetch', event => { 18 | console.log(event.request) 19 | }) 20 | ``` 21 | Il service worker verifica se una versione è differente da quella che ha salvato e nel caso modifica la pagina. 22 | 23 | # Offline 24 | SW: api di basso livello e event driven. 25 | L'evento di fetch permette di controllare le richieste che vanno alla rete. Per esempio possiamo decidere di usare una versione cachata delle risorse. 26 | 27 | 2012 Application cache, api di alto livello non permette di controllare veramente le risorse che si vogliono rendere disponibili offline. **DEPRECATA** 28 | 29 | Nuova **Cache Api** messa a disposizione dai service worker: 30 | ```javascript 31 | const urlsToCache = ['/js/main.js', '/css/main.css'] 32 | 33 | self.addEventListener('install', event => { 34 | event.waitUntil( 35 | caches.open('static-v1').then(cache => ...) 36 | ) 37 | }) 38 | ``` 39 | ## Perché "cacheare" 40 | Per rendere disponibile una app offline, ma non solo per far credere a un utente che una app sia performante anche se non per forza lo è. 41 | Page shell, scheletro dell'applicazione da mostrare all'untente prima che l'app si sia caricata. 42 | 43 | ## Strategie di cache 44 | * Cache only 45 | * Network only 46 | * Cache first, falling back to network 47 | * Network first, falling back to cache: caso d'uso se si hanno risorse da aggiornare frequentemente. Problema possibile di timeout. 48 | * Cache then network: app di twitter 49 | 50 | ## sw-precache 51 | Libreria di google per generare un sw data una lista di path di file da cacheare. Ogni risorsa aggiunta viene aggiornata una hash md5 per tenere conto della versione. 52 | 53 | ## sw-toolbox 54 | Libreria che permette di gestire al meglio la nostra strategia di cache. 55 | 56 | ```javascript 57 | importScripts() 58 | ``` 59 | ritorna un oggetto toolbox. Migliore debug, api per gestire una get con un timeout. 60 | 61 | ```javascript 62 | toolbox.options.debug = true 63 | toolbox.router.get('/api', toolbox.networkFirst) 64 | ``` 65 | 66 | Thank you @granze 67 | ![thank you @granze](https://pbs.twimg.com/media/ChnkVbdXIAE3Z5A.jpg:large) 68 | -------------------------------------------------------------------------------- /jsday-2016/higher-order-components-in-react.md: -------------------------------------------------------------------------------- 1 | # Higher Order Components in React | Matteo Ronchi 2 | 3 | First of all web was a document 4 | 5 | jquery changed the web, it become dinamyc 6 | 7 | Angularjs change the approach, directive first attemp to encapsulate a component 8 | Separation of concern in technology 9 | 10 | React, took the template and bring it inside the javascript. 11 | 12 | ## All modern frameworks are component oriented 13 | 14 | Everything can be a component, an application is a tree of components 15 | **Component**: Composable, encapsulated, reusable, easy to design 16 | 17 | ## React 18 | 2 kind of component 19 | 20 | ### Presentational component 21 | small, reusable, *pure function* => Easy to test 22 | Stateless functional components: 23 | `const Label = (props) =>

{props.children}

` 24 | 25 | ### Stateful component 26 | Components can change internal state, state is kind of immutable, we should let react mutate the state. 27 | 28 | ### Component lifecycle 29 | Method pre or after `render()` 30 | Presentational component has only render method 31 | 32 | ## Reduce code boilerplate 33 | 34 | ### React mixins 35 | Previous implementations, work on the prototype of the component, object that expose particular api, from mixin I can access at internal lifecycle of the component. Really powerful but can be scary. Lot of mixins are third party developed. It can mess with data or lifecycle of my application. You can have namespace collision. 36 | It works only with createClass method, not ES2015 classes. 37 | 38 | ### Higher Order Component 39 | High order function. Function that accept a function as an argument and return another function. 40 | 41 | HOC = High order function that return a component. 42 | 43 | ``` 44 | const Wrapped = () =>

Wrapped Comp

45 | const wrap = (Comp) => () => { 46 | return ( 47 |
48 | ) 49 | } 50 | ``` 51 | 52 | You can have a lot of presentational component, you can nest HOC, trying to not have 15 of them, but still you can do it and it's easy to implement. 53 | 54 | There is a Decorator Proposal that is not a standard at the moment, and it's a kind of annotation for js classes. 55 | Function that accept a single argument that is a component 56 | 57 | ``` 58 | @wrap 59 | class Wrap extends Component {} 60 | ``` 61 | 62 | ### HoC vs Mixins 63 | - Declarative vs Imperative 64 | - Customizable vs Favors inheritance 65 | - Easy to read vs Hard to read 66 | - Enforce encapsulation 67 | 68 | ### Best practice 69 | - Expose wrapped component 70 | - Pass props to wrapped component 71 | - Expose statics methods and props from wrapped component 72 | 73 | Sometimes you have to access the wrapped component: 74 | ``` 75 | Wrapper.wrappedComponent = Component 76 | return Wrapper 77 | ``` 78 | 79 | `hoist-non-react-statics` to copy all the statics methods and props from a wrapped component 80 | -------------------------------------------------------------------------------- /jsday-2016/keynote-day-1.md: -------------------------------------------------------------------------------- 1 | # What we need from the web and what it needs from us | Shwetank Dixit, Opera developer 2 | 3 | Where it begun: people sharing documents and links. Web was a passion project not a commercial one. 4 | 5 | The web is going mobile. 6 | 7 | - Always with you 8 | - Lot of capabilities 9 | - People are more on mobile than desktop 10 | - Is personal, you can't share a desktop 11 | 12 | HTML 5 comes with a lot of capabilities, but then mobile went native 13 | 14 | Native isn't perfect, different app store have different problems. 15 | Every platform needs a dedicated Dev team. 16 | 17 | Web solves native problems, no one owns the web, you have the control over what you want to do. 18 | 19 | Web problems are not about technology, are mostly about user experience and user engagement. 20 | 21 | ## Progressive web app, the web of the future. 22 | 23 | Basically 3 things: 24 | 25 | - Add to home screen 26 | - Work offline 27 | - The web's Power, urls, seo, accessibility 28 | 29 | **Https only!** 30 | 31 | You can get free ssl: 32 | - lesenscry.org 33 | - githubpages 34 | - ... 35 | 36 | ### Add to home screen 37 | Manifest: ``. 38 | You can add information for the splash screen, the icon, the way it'll open after the click. 39 | 40 | ### Working offline 41 | Don't focus on offline but maybe slow connections. 42 | It's very difficult to handle unpredictable state where the connection get slow. 43 | 44 | India: 2G 109 Milions, 3G 86 Milions 45 | 46 | Africa: 80% of mobile, EDGE only 47 | 48 | In the metro, or while using hotel wifi, you can have unpredictable connections. Or abroad you usually choose to be offline. 49 | 50 | In the end it's not about being online or online, the keyword is unpredictable, and apps needs to make sure they works in unpredictable state. 51 | 52 | Service worker and PWAs can solve this problems. 53 | 54 | #### Service worker 55 | - acts as a proxy 56 | - Has access to a special cache 57 | - More than offline 58 | 59 | **Things to know:** 60 | 61 | - fully async 62 | - HTTPS only 63 | - No DOM access 64 | 65 | Cache API, comes with service worker but you can use it even without it. 66 | 67 | Utility and libraries that can help with service worker 68 | - Up-Up: opera 69 | - sw-toolbox: google 70 | - sw-precache: google 71 | 72 | ## Discovery 73 | Web offer: `try before install` model vs native that force you to install and app to try it. 74 | 75 | This is the key. 76 | 77 | Pretty much same capabilities and user engagement without even the needs of installing. 78 | 79 | App install prompt, browsers ask you if you want to install a web app on your device. 80 | 81 | **HTTPS only, Service Worker + Web Manifest and regularly visited** 82 | 83 | Let the user choose. 84 | 85 | > I don't want your fucking app: [link](https://idontwantyourfuckingapp.tumblr.com/) 86 | 87 | List of quality PWA 88 | https://pwa.rocks 89 | -------------------------------------------------------------------------------- /jsday-2016/day-1.md: -------------------------------------------------------------------------------- 1 | # What I've learned at jsday 2016 in Verona 2 | 3 | I had the chance to participate to [jsday](http://2016.jsday.it/) in Verona early this year and I wanted to make a small summary to all of you that couldn't be there. I really liked [Kitze](https://medium.com/@kitze/lessons-learned-at-react-amsterdam-51f2006c4a59#.leg4e0mjn)'s' idea to write about React Amsterdam conference he attended. 4 | 5 | Unfortunately this summary can't be complete since there were 2 distinct tracks and I couldn't follow both of them at the same time but still, I hope this can be interesting for you anyway. 6 | 7 | I'll add slides and videos links as soon as they are available. 8 | 9 | ##TL;DR 10 | The big topic was *Functional reactive programming*, or RxJs if you prefer. 11 | That seems like the big thing in javascript 2016. 12 | 13 |

Recap from #jsday 2016 #functional #reactive #programming is the new black #javascript

— Daniele Bertella (@_denb) 12 maggio 2016
14 | 15 | 16 | 2 talks, a workshop and mentions in many talks, all about *Functional reactive programming*. 17 | 18 | # Day 1 19 | ## First Keynote: What we need from the Web, and what it needs from us. 20 | [@shwetank](https://twitter.com/shwetank), Opera developer, talked about *Progressive web apps*, probably the second big thing in javascript 2016. It was fun because I just attended another great conference at google Italia few days before the jsday on the exactly same topic. I was thinking *PWA* were a Google mostly-only thing but I was happy to realize other browsers thinking about it as a way to save `the web` against `mobile native` development. 21 | 22 | How *PWA* can beat native? 23 | Basically web offer: `try before install` model vs native that force you to install an app to try it. 24 | 25 | Pretty much same capabilities and user engagement without even the needs of installing. 26 | 27 | - Add to home screen 28 | - Work offline 29 | - Push notifications 30 | - Plus the web's power: different urls, SEO, accessibility... 31 | 32 | With *PWA* you let the user choose and that for @shwetank can be the key. 33 | 34 | ## Functional Programming and Async Programming Workshop 35 | The topic was tempting but then after a short and interesting introduction from [@mattpodwysocki](https://twitter.com/mattpodwysocki) people lost interest. 36 | 37 | Everybody was following the exercise from the reactivex [site](http://reactivex.io/learnrx/), that I really encourage you to do, but I'd rather have done it at home than spenging my time there during the conference. 38 | 39 | Not to criticise him or the organization but just to remind myself it may be better to focus on talks. 40 | 41 | Anyway presentation's slide can be found [here](https://github.com/mattpodwysocki/jsday-workshop-2016) along with all the other assets and I encourage you to check them out. 42 | 43 | ## Forgotten funky functions 44 | [@jakobmattsson](https://twitter.com/jakobmattsson) gave a quick talk about javascript in general and what you can easily accomplish with function that you could have even forgotten. In javascript everything seems really simple, but still you can do great things. 45 | 46 | He talked about 3 main topics: 47 | - functional programming 48 | - meta programming 49 | - there is no class 50 | 51 | > Whenever you have a problem you can solve it with another function. 52 | 53 | @jakobmattsson discuss about `apply`, `call`, `clojures`, `eval`. Topics that (almost) every js developer has doubt about. 54 | 55 | He concluded with a useful explanation on ES6 or coffeescript classes syntactic sugar that you may not need if you first fully understand **Object.create**. 56 | 57 | ## Functional Reactive programming with React.js 58 | **Spoiler alert**, [@lucamezzalira](https://twitter.com/lucamezzalira) didn't talk about react at all! At the end he talked about cycle.js but it was a good *excursus* about RxJs. 59 | 60 | You have to start learning a few concepts to understand reactive programming, like *streams*, [cold and hot observables](http://reactivex.io/documentation/observable.html) and [operators](http://reactivex.io/documentation/operators.html). 61 | 62 | If you are using a *Flux* implementation for your front end architecture or even worst MVC / MVVM / MV* pattern, you are living in the past! Say hello to **MVI** aka [Model View Intent](http://thenewstack.io/developers-need-know-mvi-model-view-intent/). 63 | 64 | I'm personally quite happy with *Redux* for now but I think you need at least to know what's going on around you. 65 | 66 | The conclusion was that *Functional Reactive programming* isn't always the best thing to do but for sure it's great when you need to fetch lots of data and react. 67 | You can find slides [here](http://www.slideshare.net/flashplatform/reactive-programming-with-cyclejs). 68 | 69 | ## Out of the browser and onto the streets 70 | [@Rumyra](https://twitter.com/Rumyra) did the most pleasant talk of the day, with music and visual, it was party time already! 71 | 72 | Apparently she's [VJing](https://github.com/Rumyra/VJing) around projecting visual animations on buildings along with music. I'd love to see her live. Unfortunately she haven't had the chance to do it during the party in Verona, but maybe next year 😀. 73 | 74 | She talked about the newest web APIs such as `animation`, `audio`, `strem` and `midi`. I encourage you to have check her [github](https://github.com/Rumyra) account. It's not that easy to find samples but you can have an idea about her projects. 75 | 76 | She showed us a demo with voice control using a microphone and then another mixing music, video and visual animation. 77 | 78 | Last she ended up showing her handmade bag with a mac and her "mini" MIDI controller inside that she's using for VJing. 79 | 80 | # Still interested in [day 2](./day-2.md)? 81 | -------------------------------------------------------------------------------- /flow-type-slack-conversation.md: -------------------------------------------------------------------------------- 1 | Curiosità: come gestite scenari in cui avete una factory che produce oggetti e volete verificare che gli oggetti siano del tipo che volete? 2 | 3 | 1. usate semplicemente un campo pesudo privato tipo `obj.isMyFuckingObj = true` 4 | 2. usate un campo pubblico con un Symbol come valore `obj.isMyFuckingObj = Symbol('myFuckingObjKey')` 5 | 3. usate una classe per sfruttare `instanceof` 6 | 4. controllate che l’oggetto abbia i metodi/fields che vi aspettate e quindi rispetti l’interfaccia pubblica che vi aspettate 7 | 8 | agos [9:29 AM] 9 | 5. uso un linguaggio con un check statico dei tipi? :stuck_out_tongue: 10 | 6. scrivo un test (edited) 11 | 12 | cef62 [9:34 AM] 13 | > scrivo un test 14 | assolutamente :wink: 15 | 16 | > 5. uso un linguaggio con un check statico dei tipi 17 | non è un opzione :wink: 18 | 19 | rickdrink [9:51 AM] 20 | gli oggetti a @cef62 li prepara Samuel L. Jackson 21 | 22 | agos [9:55 AM] 23 | non aggiungerei un campo, piuttosto testerei il comportamento dell'oggetto 24 | 25 | cef62 [9:57 AM] 26 | concordo, infatti se non ho istanze di solito tendo a controllare l’interfaccia dell'oggetto 27 | solo in dev-mode però non in produzione 28 | 29 | gcanti [10:17 AM] 30 | @cef62 userei una classe + `instanceof` (metodo nominale) oppure una libreria per il type checking (metodo strutturale) 31 | quindi 3) o 4) 32 | 33 | cef62 [10:17 AM] 34 | +:+1: la tua lib è in top alla lista per scenari complessi :slightly_smiling_face: (edited) 35 | 36 | dej611 [10:19 AM] 37 | duck typing (4) (edited) 38 | 39 | cef62 [10:19 AM] 40 | per le classi preferirei evitare di avere istanze se possibile 41 | quindi `instanceof` è molto utile ma se posso seguo alternative :wink: 42 | 43 | gcanti [10:20 AM] 44 | lo strutturale è più costoso ma lo puoi eseguire solo in dev 45 | 46 | cef62 [10:20 AM] 47 | assolutamente 48 | è un check che mi interessa solo in sviluppo 49 | in produzione lo ignoro in ogni caso 50 | 51 | gcanti [10:21 AM] 52 | se già usi babel e non vuoi lasciare "nessun segno" nella codebase puoi dare un'occhiata ai plugin di babel che fanno type checking 53 | 54 | cef62 [10:22 AM] 55 | si li conosco ma preferisco qualcosa di esplicito, semplicemente rimuovo le espressioni condizionali con NODE_ENV === ‘development' 56 | sto solo indagando le preferenze e le diverse tecniche :slightly_smiling_face: 57 | è sempre interessante vedere come altri affrontano situazioni comuni ma non per forza banali :wink: 58 | 59 | dej611 [10:27 AM] 60 | ieri hanno pubblicato un articolo su come integrare `flow` in un progetto che già utilizza babel 61 | 62 | cef62 [10:27 AM] 63 | questo dici? 64 | https://medium.com/@thejameskyle/using-flow-with-babel-c04fdca8d14d#.v2eo3chr3 65 | 66 | dej611 [10:27 AM] 67 | si 68 | 69 | cef62 [10:30 AM] 70 | si è molto interessante 71 | 72 | dej611 [10:32 AM] 73 | un qualcosa così ti risolverebbe le cose meglio del duck typing o dell’`instanceof` (che può essere facilmente ingannato) 74 | 75 | cef62 [10:33 AM] 76 | verissimo 77 | ma come team è stato deciso di non usare un type checker al momento 78 | quindi per ora è un opzione che lascio da parte 79 | 80 | pigoz [10:34 AM] 81 | al momento io sto usando tcomb, ma penso che presto farò il salto 82 | tenendo comunque tcomb con il plugin 83 | 84 | cef62 [10:34 AM] 85 | devo essere sincero che scrivere JS definendo i tipi mi lascia perplesso :confused: 86 | non per i vantaggi 87 | 88 | pigoz [10:35 AM] 89 | la cosa che non mi era piaciuta di flow al tempo, era che non c'era check a runtime 90 | 91 | cef62 [10:35 AM] 92 | ma a pelle XD 93 | 94 | dej611 [10:35 AM] 95 | ma flow funziona anche senza definizione dei tipi 96 | con le definizioni funziona meglio, ma il motore sotto, almeno prima, inferiva il tipo 97 | 98 | pigoz [10:36 AM] 99 | infatti anche a me lascia perplesso, ma infatti tcomb non è proprio un sistema di tipi, ma piu' un sistema di contratti 100 | 101 | cef62 [10:36 AM] 102 | ma con le dipendenze di 3° parti come funziona ora? 103 | 104 | pigoz [10:36 AM] 105 | e lo trovo estremamente utile 106 | 107 | cef62 [10:36 AM] 108 | devi dichiararle? o le ignora se non le mappi 109 | 110 | dej611 [10:37 AM] 111 | c’è spiegato nell’articolo 112 | 113 | cef62 [10:37 AM] 114 | :wink: non lo ho ancora letto era nei preferiti, tnx 115 | flow è parecchi mesi che non lo guardo 116 | 117 | dej611 [10:37 AM] 118 | puoi o definirle tu, o scaricarle da un repo 119 | 120 | cef62 [10:37 AM] 121 | ma se non le voglio? 122 | 123 | dej611 [10:37 AM] 124 | ma immagino che altrimenti il motore cerchi di capirlo 125 | non saprei 126 | 127 | cef62 [10:38 AM] 128 | tnx :wink: mi informerò 129 | 130 | gcanti [10:39 AM] 131 | attenzione però che per come funziona l'inferenza di flow potreste avere risultati sorprendenti a prima vista, occorre metterle le type annotation, almeno in punti strategici 132 | questo ad esempio non solleva errori `const a = [1, 2, 3]; a.push('s')` 133 | perchè flow, in assenza di annotazioni, inferisce il tipo dall'uso. Sopra `a` ha tipo `Array` 134 | 135 | cef62 [10:41 AM] 136 | interessante 137 | 138 | gcanti [10:42 AM] 139 | mentre questo non passa `const a: Array = [1, 2, 3]; a.push('s')` 140 | 141 | dej611 [10:43 AM] 142 | nel primo caso non è sbagliato 143 | è che se vuoi solo interi devi restringere il controllo giustamente 144 | 145 | gcanti [10:45 AM] 146 | per typescript è un errore il primo esempio 147 | per flow no 148 | 149 | cef62 [10:49 AM] 150 | devo davvero trovare il tempo di approfondire i 2 sistemi e le differenze 151 | grazie :wink: 152 | 153 | gcanti [10:51 AM] 154 | flow è più adatto ad essere aggiunto ad una codebase senza annotazioni, ma contemporaneamente ha un type system più esigente quando inizi a metterle 155 | 156 | gcanti [11:03 AM] 157 | semplificando le cose l'algoritmo funziona così: flow si passa tutto il codice (compreso i node_modules), e tagga ogni variabile con un tipo "aperto", ovvero continua ad aggiungere union inferendo dall'uso nel codice, se non trova inconsistenze non solleva errori 158 | quindi se lanci flow su una codebase non annotata e non solleva errori non significa che non ci sono bug ma perlomeno sei sicuro che non ci siano inconsistenze 159 | per inconsistenza intendo per esempio mappare la `a` del primo esempio con una funzione che accetta solo numeri 160 | questo solleva un errore `const a = [1, 2, 3]; a.push('s'); a.map(x => 2 * x)` 161 | 162 | gcanti [11:09 AM] 163 | quindi lanciare flow sulla tua codebase, anche se non sei disposto ad aggiungere annotazioni, può essere comunque utile 164 | le annotazioni possono essere aggiunte anche tramite commenti, il procedimento quindi può essere molto graduale e poco invasivo 165 | 166 | dej611 [11:14 AM] 167 | questo è quello che ho fatto qui dove sono. Nessun inconsistenza trovata 168 | Però il rendere tutto più restrittivo dipende molto da quel che devi produrre, a volte devi convivere anche con robe legacy che non ti permettono di chiudere i cancelli alle stringhe negli array :disappointed: 169 | 170 | sa_su_ke [11:28 AM] 171 | @cef62: Io ho sempre usato linguaggi dinamici. È una questione di abitudine. Io oramai metto i tipi ovunque non ci fai neanche caso. Arrivi a passare più tempo a combattere contro il compilatore che contro il browser :-) ti fa risparmiare molto tempo 172 | 173 | cef62 [11:35 AM] 174 | :slightly_smiling_face: ho ben presente 175 | qualcuno con cui litigare c’è sempre XD 176 | 177 | zanza00 [11:39 AM] 178 | in teoria il compilatore dovrebbe essere più furbo del browser 179 | 180 | sa_su_ke [11:42 AM] 181 | Si nel senso che molti errori che prima te li segnalava il browser te li triggera' il compilatore. Passi più tempo nel compilatore che nel browser 182 | -------------------------------------------------------------------------------- /jsday-2016/day-2.md: -------------------------------------------------------------------------------- 1 | # Day 2 (follow up from [day 1](./day-1.md)) 2 | 3 | ## Keynote: Shipping one of the largest Microsoft JavaScript applications (Visual Studio Code's story) 4 | Alexandru Dima is a Microsoft developer in the VS Code team and he did a very great talk about the story of their product. 5 | 6 | It was really helpful to understand at least why Microsoft didn't just fork (and contribute on) *Atom editor* but they choose to create another editor with same technology. 7 | 8 | Basically they started to work on it in 2014 using `node-webkit` as a platform switching to `electron` later on. 9 | He talked about the roadmap they had, early preview in April, beta in November 2015 and 1.0 in April 2016. 10 | Nice insights on the product, sure something to play with when you get bored of *Atom*. 11 | 12 | ## Building Reactive Architectures 13 | The talk by [@mattpodwysocki](https://twitter.com/mattpodwysocki) was great, I was skeptical at first, again *Functional reactive programming*, but in the end was a really nice and talk, with all you need to know about RxJs inside. 14 | 15 | For @mattpodwysocki async is awful, we are living in a `Callback Hell` era and `Events and state are mess`. 16 | **Promise are only part of solution**. 17 | 18 | You can solve the Callback hell in the reactive way! 19 | 20 | Keys: 21 | - React to load 22 | - React to failure 23 | - React to users 24 | 25 | This man is great on stage with his sorcerer hat on his head. 26 | 27 | > You must flatMap it 28 | 29 | Nice talk to follow in my opinion. 30 | 31 | Conclusion: Make Reactive Great Again! Along with a new hat. 32 | 33 | 34 | 35 | ## Discover the information within your data with d3.js 36 | Not much to say about it, it was a really entry level talk by Daniela Mogini. 37 | 38 | Some insights on how to manipulate DOM, handling Array of data natively in D3js. 39 | 40 | The entry slogan was good: `this has nothing to do with jQuery` but it seems a lot like it to me in general. 41 | Don't get me wrong, I know that D3.js it's really powerful but at the end of this talk I haven't feel much of its awesomeness. 42 | 43 | ## The Evolution of Asynchronous JavaScript 44 | [@cirpo](https://twitter.com/cirpo) gave us another really good talk about async in javascript. 45 | 46 | He started with history, how cool callbacks can be and how, if you aren't a lazy developer, you can avoid the feared callback hell. 47 | 48 | He Talked about *Promises*, of course, and how they become the official way to provide async in js today. 49 | But *Promises* aren't always the best choice, you don't use them in flow control. You can end up easily with a **Promise Hell** if you don't pay attention. 50 | 51 | > **Generators + Promises** for the win. 52 | 53 | *Generators*, a new type of function that doesn't have the *run-to-completion* behaviour of the other functions. 54 | They have a *yield* keyword that can pause/restart the flow and you have full control on it. 55 | 56 | Unfortunately you have to import libraries to use them but seems like the next javascript, ES7 (ehm ES2016), will ship async / await natively. 57 | You can start playing with it using babel (or typescript). 58 | ``` 59 | npm install -g babel-cli 60 | npm install babel-plugin-transform-async-to-generator 61 | 62 | //add it either to .babelrc or package.json 63 | { 64 | "plugins": ["transform-async-to-generator"] 65 | } 66 | 67 | babel a.es6 -o a.js 68 | node a.js 69 | ``` 70 | 71 | > CHOOSE YOUR CONCURRENCY MODEL 72 | - callbacks 73 | - promises 74 | - async/await 75 | - highland (RxJs, streams) 76 | 77 | ## (Web?) Components in production 78 | [@olamad313](https://twitter.com/olamad313) is a UX Designer at Amazon Web Services and gave us a great view about how they handle components in their teams across the world. She didn't speak about libraries or polyfill (*Polimer* for example), they don't actually use one apparently because they didn't want to depend on it. 79 | 80 | They build their components using plain javascript embracing web components philosophy and then they also build the bridge to connect them with frameworks or libraries their teams choose to use (GWT, Angular, and React). 81 | 82 | They keep principles like custom elements and style encapsulation from web components and they reached few benefits: 83 | - Components are easy to grab for new teams. 84 | - No longer need to review the components final implementation in production. 85 | - Little effort after a component redesign 86 | - A sparked community engagement. 87 | 88 | ## FFTT: A new concept of build tool 89 | [@m_a_s_s_i](https://twitter.com/m_a_s_s_i) talked about his side project, and invite every one (who can understand what is it about) to contribute on it. Basically he's building his own build tool to replace `grunt`, `gulp` or `webpack` (I'm writing only the most famous). 90 | Unsatisfied with the job those tools are doing @m_a_s_s_i writes his own to accomplish what he really needs: a fast, deterministic, reliable and language agnostic build tool. 91 | 92 | The build system meet functional programming, immutable data structures, memoization of functions result, each step is a pure function. 93 | You never mess with the environment, it's just data transformation. 94 | The build graph is declarative and functional. Each build step is imperative but inside a *container*, so you don't mess up with system. 95 | 96 | It's built with not many lines of javascript but it's totally programming language independent. 97 | 98 | It's not ready for production yet but feel free to contribute if you are interested in it! 99 | 100 | Here the github [link](https://github.com/massimiliano-mantione/fftt) 101 | 102 | ## Higher Order Components in React 103 | Finally React :-D. Thanks to [@cef62](https://twitter.com/cef62). 104 | 105 | After an excursus on React in general, and the component concept in particular we learn how to extend a component using an high order one. 106 | 107 | He spoke about mixins (deprecated with ES6 syntax) as well and he gave us a good `HoC vs Mixins` preview: 108 | - Declarative vs Imperative 109 | - Customizable vs Favors inheritance 110 | - Easy to read vs Hard to read 111 | - Enforce encapsulation 112 | 113 | He explains *high order function* as functions that accept a function as an argument and return another function. 114 | 115 | So HOC are high order functions that, instead, return a component. 116 | 117 | ## A Modern debugging experience using DevTools by [@umaar](https://twitter.com/umaar), modern techniques for debugging JavaScript code. 118 | 119 | Umar covered different ways to debug our code using the Chrome DevTools. 120 | For example he explained how to: 121 | - Use Quick Source Pane for faster CSS editing 122 | - Trigger pseudo classes in DevTools 123 | - Use the animation inspector to change and modify running animations 124 | - Try out the official DevTools dark theme 125 | - Copy the response of a network resource to your clipboard 126 | and much more! 127 | 128 | You can find all this techniques explained in his [slides](https://umaar.github.io/devtools-animated-2016) 129 | 130 | ## A Class Action 131 | Last talk of the conference by [@unlucio](https://twitter.com/unlucio), a dispute on probably the most controversial feature in ES2016: the `class` keyword. 132 | 133 | He called few witnesses for the *dispute*: 134 | - `miss function`: do we really need a shorthand for manually defining a constructor Function? 135 | 136 | - `the prototype`: If you want to write once and use your code in multiple situation, prototypal inheritance makes this easy. 137 | - `class`: does it really add something new to the language and will she simplify everybody's life? 138 | 139 | *OOP is good for you... at least that what they say* 140 | 141 | ![OOP is good for you... at least that what they say](http://thinknsmile.com/wp-content/uploads/2014/05/butter_is_good_for_you.jpg) 142 | 143 | For code segregation choose `modules` over `classes` 144 | 145 | I liked the reference to the coffee and sugar: 146 | 147 | > When coffee is good you don't need sugar, and `class` seems more like aspartame than sugar. 148 | > The difference is that aspartame can kill you! 149 | 150 | To sum up, it was a really nice conclusion of these wonderful two days conference in Verona. 151 | I encourage you to have a look at [slides](http://www.slideshare.net/unlucio/a-class-action) that are self explanatory. 152 | -------------------------------------------------------------------------------- /slack-conversation.md: -------------------------------------------------------------------------------- 1 | # React channel 2 | 3 | ## Idee su come gestire l'ereditarietà del `context`, con la possibilità di fare modifiche da un certo punto della app in poi 4 | 5 | Matteo Ronchi [10:16 AM] 6 | @gianmarcotoso @michele @lucacolonnellocrweb e chiunque altro abbia input utili, ho una domanda per voi: 7 | Supponete di avere un manager/oggetto che ha dei valori che sono esposti via `context` ai children. Ma vorreste che alcuni rami usassero delle diverse configurazioni di valori. Ovviamente se ogni componente che usa questi valori ha nozione della chiave che deve chiedere all’oggetto nel context funziona tutto ma supponiamo che io volessi definire solo nel nodo ​*X*​ un nuovo set di valori e imporre a tutti i children/descendant questo set di valori ma senza passare una chiave esplicita ad ogni componente descendant… 8 | L’uso del `context` è opzionale se ci sono altri approcci che funzionano 9 | 10 | **TL,DR;** per riassumere la radice ha 4 figli e 3 ricevono il colore rosso, ma uno e tutti is uoi children voglio ricevano blue definendolo solo in quel nodo padre di quel ramo 11 | 12 | Michele Bertoli [10:20 AM] 13 | bhe' il context funziona gia' cosi' nel senso di sovrascrivere i valori per i figli 14 | 15 | Matteo Ronchi [10:21 AM] 16 | si ma è globale no? 17 | cioè se sovrascrivo anche gli altri rami ricevono la modifica 18 | o clona ad ogni step (ammetto che non ho verificato) 19 | ma mi sembra molto costoso in termini di risorse clonare il context... 20 | anche lo facesse solo `shallow` 21 | 22 | Luca Colonnello [10:23 AM] 23 | ho capito 24 | al di là del modo, il context ha un problema a riguardo 25 | il figlio deve definire cosa vuole che i suoi figli vedano 26 | quindi fondamentalmente per come funziona ora con l’attuale context di react penso ci sia troppo effort da distribuire 27 | se invece creassi un container? 28 | 29 | Matteo Ronchi [10:24 AM] 30 | aspe 31 | il context fa quello che mi serve 32 | 33 | Luca Colonnello [10:24 AM] 34 | certo 35 | 36 | Matteo Ronchi [10:24 AM] 37 | la radice definisce nel context `color` 38 | e tutta l’app li riceve 39 | 40 | Luca Colonnello [10:24 AM] 41 | si 42 | 43 | Matteo Ronchi [10:24 AM] 44 | se poi un nodo aggiunge altri valori solo i suoi figli li vedranno (edited) 45 | 46 | Luca Colonnello [10:24 AM] 47 | certo 48 | 49 | Michele Bertoli [10:24 AM] 50 | http://www.react.run/rJ4F2T-t/2 (edited) 51 | 52 | Matteo Ronchi [10:25 AM] 53 | ma `color` lo vedranno sempre 54 | 55 | Luca Colonnello [10:26 AM] 56 | ma tu vuoi che color sia diverso solo da un certo nodo in poi e non vuoi specificarlo in quel nodo ma nel padre di tutti giusto? 57 | 58 | Michele Bertoli [10:26 AM] 59 | > e non vuoi specificarlo in quel nodo ma nel padre di tutti 60 | ah ok non avevo capito 61 | 62 | Matteo Ronchi [10:26 AM] 63 | @michele si l’idea è quella 64 | immaginatevi lo scenario 65 | parliamo di un theme-manager per esempio 66 | anche se si può applicare a tanti casi (edited) 67 | l’app usa il tema `white` 68 | ma voglio che una modale e tutto il suo contenuto usi il tema `red` 69 | però non tutti i nodi della modale sono consapevoli del `theme-manager` 70 | quindi non posso semplicemente passare dalla modale ai figli che il tema è `red` e cmq passare la prop esplicitamente non mi piace (edited) 71 | l’esempio di Michele è nella direzione che desidero 72 | ora devo vedere se funziona anche con oggetti e non solo plain props 73 | però questo espone il fatto che il context viene ricalcolato potenzialmente ad ogni render 74 | e non mi piace molto 75 | @michele: fighissimo react.run :slightly_smiling_face: 76 | 77 | Michele Bertoli [10:29 AM] 78 | http://www.react.run/rJ4F2T-t/3 (edited) 79 | funziona anche con oggetti 80 | 81 | Matteo Ronchi [10:30 AM] 82 | @michele quindi ogni ramo può sovrascrivere valori senza impatatre gli altri rami (edited) 83 | questo non lo sapevo 84 | 85 | Michele Bertoli [10:30 AM] 86 | @cef62: yep 87 | l'ho scoperto qui: https://twitter.com/ryanflorence/status/717597674040467456 88 | Ryan Florence @ryanflorence 89 | @MicheleBertoli cool, but I think you are now limited to a single Provider in the app, no? The second you provide twice it shadows __data. 90 | TwitterApril 6th at 8:19 AM 91 | 92 | Matteo Ronchi [10:33 AM] 93 | figo @michele! 94 | 95 | Luca Colonnello [10:30 AM] 96 | ok allora io ti prppongo questo: 97 | crei un themeManager locale 98 | o meglio un themeManager globale che in pattern factory possa essere ricreato a partire dall’oggetto base con config differenti 99 | 100 | Matteo Ronchi [10:31 AM] 101 | @lucacolonnellocrweb: una cosa, io non posso sapere sempre che c’è un override eslicito 102 | mi spiego 103 | la dialog che usa `red` contiene altri container e alcuni dei loro children accedono al theme mangare, per fare override dovrebbero essere consapevoli del cambio di tema 104 | quindi deov cmq usare il context 105 | 106 | Luca Colonnello [10:32 AM] 107 | no beh certo 108 | ma se il themeManager è un istanza inserita nel context 109 | che tutti usano e da cui recuperano variabili tipo il color 110 | basta solo reistanziare il theme manager con config differenti nel nodo dal quale vuoi si applichi il tema red 111 | e tutti i figli lo useranno indipendentemente da quello che il padre ha impostato 112 | sbaglio? 113 | 114 | Matteo Ronchi [10:33 AM] 115 | mmmm io mi immagino (visto che michele ha sdoganato l’override x nodi) 116 | che la radice inietta un unico them manager nell'app 117 | e ha un default theme 118 | 119 | Luca Colonnello [10:33 AM] 120 | si 121 | esatto 122 | 123 | Matteo Ronchi [10:34 AM] 124 | poi il nodo dialog modifica il valore del theme da `white` a `red` 125 | 126 | Luca Colonnello [10:34 AM] 127 | esatto 128 | quello intendevo 129 | 130 | Matteo Ronchi [10:34 AM] 131 | e tutti i suoi figli, che accedono all’unico theme manager 132 | 133 | Luca Colonnello [10:34 AM] 134 | forse mi sono spiegato male 135 | 136 | Matteo Ronchi [10:34 AM] 137 | useranno red 138 | 139 | Luca Colonnello [10:34 AM] 140 | il problema è che devi creare un nuovo theme manager 141 | perchè se no le modifiche hanno effetti anche sui padri 142 | quindi il figlio dovrebbe fare tipo 143 | 144 | Matteo Ronchi [10:34 AM] 145 | no non è vero, basta che il them manager supporti + temi 146 | e tu gli chiedi il tema tramite la chiave 147 | 148 | roberto diana [10:35 AM] 149 | ... of topic ... ma il context non verrà abbandonato in futuro ? .. 150 | 151 | Matteo Ronchi [10:35 AM] 152 | abbandonato difficilmente 153 | potrebbero cambiare le API 154 | se tolgono la DI in react perdono accesso a tutte le cose fighe che si stanno producendo 155 | 156 | Luca Colonnello [10:35 AM] 157 | 158 | ``` 159 | class First extends React.Component { 160 | getChildContext() { 161 | return { themeManager: this.context.themeManager.clone({ 162 | // settings 163 | theme: 'red', 164 | }) } 165 | } 166 | render() { 167 | return 168 | } 169 | } 170 | ``` 171 | 172 | Matteo Ronchi [10:35 AM] 173 | ah ok luca 174 | in realtà preferisco una singola istanza che tiene una mappa di temi 175 | e cambiare solo la chiave attiva del tema 176 | però il risultato è simile 177 | Figata cmq grazie a entrambi! 178 | 179 | Luca Colonnello [10:36 AM] 180 | però così facendo vuol dire che i figli devono sapere che tema richiedere al themeManager 181 | 182 | Matteo Ronchi [10:36 AM] 183 | questo mi apre delle possibilità molto fighe sul progetto che sto sviluppando (edited) 184 | 185 | Luca Colonnello [10:36 AM] 186 | come dicevo io è implicito per i figli (edited) 187 | 188 | Matteo Ronchi [10:37 AM] 189 | vero luca 190 | ma se i figli devono solo fare: 191 | `const themmanager = this.context.thememanager(this.context.theme)` 192 | è un male minore 193 | però si la tua soluzione risulta più pulita 194 | in realtà mi preoccupa poco la differenza perchè sarà tutto astratto in un HoC 195 | quello che vorrei evitare è di avere più di un istanza del theme manager 196 | ci lavoro su cmq 197 | poi vi faccio sapere! 198 | 199 | Luca Colonnello [10:39 AM] 200 | un altra soluzione potrebbe essere utilizzare una prop 201 | 202 | Matteo Ronchi [10:40 AM] 203 | no non è sostenibile 204 | non tutti i componenti sono a conoscenza del theme-manager 205 | 206 | Luca Colonnello [10:40 AM] 207 | ma la prop serve solo a definire quale tema vuoi da li in poi, però per propagare la cosa ai figli deve essere implicita secondo me... 208 | 209 | Matteo Ronchi [10:40 AM] 210 | intendo che se la dialog riceve come prop il tema `red` 211 | 212 | Luca Colonnello [10:40 AM] 213 | si usando il context potrebbe andare 214 | ma ovviamente hai il problema al contrario 215 | la variabile theme nel context diventa una dipendenza esplicita 216 | può fungere lo stesso però 217 | 218 | Matteo Ronchi [10:41 AM] 219 | lo dovrebbe passare esplicitamente a tutti i children, ma cosa succede se un children non sa cosa farsene della prop `them` e non la passa au suo descendant? (edited) 220 | beh si un tradeof c’è sempre 221 | 222 | Luca Colonnello [10:41 AM] 223 | no infatti intendevo di passarlo solo al primo padre che deve sovrascrivere 224 | però facendo così stai generando un istanza del theme manager ad ogni componente 225 | che lo usa 226 | 227 | Matteo Ronchi [10:42 AM] 228 | esatto 229 | vorrei evitarlo 230 | 231 | Luca Colonnello [10:42 AM] 232 | invece mettendolo nel context solo chi lo cambia lo sostituisce 233 | però una soluzione potrebbe essere non reinstanziare ma cambiare a runtime il tema dal padre al figlio 234 | senza riprodurre oggetti 235 | un po come immutable (edited) 236 | immagina che il themeManager non è un instanza pura 237 | ma una rappresentazione dei metodi pubblici 238 | quindi un oggetto plain 239 | 240 | Matteo Ronchi [10:44 AM] 241 | yep 242 | 243 | Luca Colonnello [10:44 AM] 244 | che all’interno si riferisce alla vera istanza di themeManager 245 | ma usa le config dell’oggetto per lavorare 246 | tipo 247 | red:mainColor 248 | è il modo in cui recuperi il colore 249 | ma red non lo usano i componenti (edited) 250 | usano solo mainColor 251 | chiamando funzioni di un oggetto plain 252 | che conosce sia red che il themeManager 253 | e in reflection chiama 254 | themeManager.get(`${this.theme}:${propName}`) 255 | quindi themeManager pubblico è una factory di oggetti di questo tipo 256 | e così il padre può semplicemente fare come ti dicevo 257 | ma non ricrea tutto 258 | ma solo il POJO pubblico 259 | che ha 3 cose 260 | o forse bastano 2 261 | il get e il tema attuale 262 | 263 | Matteo Ronchi [10:46 AM] 264 | si può funzionare, molto dipende da come sarà internamente il themmanager (edited) 265 | ma l’idea è questa 266 | la API sono 3 imho: get, set, theme 267 | in realtà 4 268 | ci vuole anche register 269 | per aggiungere nuovi temi 270 | 271 | Luca Colonnello [10:48 AM] 272 | esatto 273 | così da quello ne crei altri nei figli che vogliono sovrascrivere 274 | 275 | Matteo Ronchi [10:48 AM] 276 | sarebbe figo farlo senza neanche il context 277 | 278 | Luca Colonnello [10:49 AM] 279 | e questo potrebbe non essere un themeManager ma un wrapper per la DI con il context 280 | 281 | Matteo Ronchi [10:49 AM] 282 | ma vorrebbe dire creare un meccanismo di DI ad-hoc 283 | 284 | Luca Colonnello [10:49 AM] 285 | una roba tipo Pimple in PHP ma per React 286 | no no sempre con il context 287 | serve solo a definire questo meccanismo dinamico ma pulito 288 | 289 | Matteo Ronchi [10:49 AM] 290 | > e questo potrebbe non essere un themeManager ma un wrapper per la DI con il context 291 | spiega melgio (edited) 292 | 293 | Luca Colonnello [10:50 AM] 294 | se io genero un wrapper che ingloba un oggetto, e gli passo una factory con impostazioni (utile all’inizio e a fare anche il register) 295 | può wrappare qualsiasi oggetto 296 | le api le definisco io 297 | lui definisce il meccanismo 298 | se io creo get e gli faccio fare quello che dicevamo 299 | è tutto flessibile e generico 300 | e va bene per qualunque cosa 301 | lui definisce solo l’interfaccia pubblica 302 | che però è risultato di una factory che crei tu 303 | quindi può fare qualunque cose secondo questo meccanismo 304 | anche un sistema di settaggi differente da un tema 305 | o di oggetti 306 | veri e propri derivati da classi 307 | 308 | Matteo Ronchi [10:52 AM] 309 | gotcha, si infatti il theme manager era solol’esempio più facile su cui discutere (edited) 310 | 311 | Luca Colonnello [10:53 AM] 312 | :slightly_smiling_face: 313 | 314 | Matteo Ronchi [10:54 AM] 315 | poi non so quanto abbia senso fare un sistema generico (nel mio caso attuale) ma vedremo… sett prox ci lavoro attivamente :slightly_smiling_face: 316 | grazie a entrambi ragazzi! 317 | 318 | Luca Colonnello [10:57 AM] 319 | :slightly_smiling_face: 320 | 321 | roberto diana [10:57 AM] 322 | raga ma che ce relazione fra context e DI ? o forse no c'è relazione ... ? (edited) 323 | 324 | Matteo Ronchi [10:58 AM] 325 | il `context` è l’unico meccanismo nativo che React offre per avere qualcosa di simile alla DI 326 | concettualmente parlando non è la stessa cosa ma offre la possibilità di accedere a dati non forniti direttamente dal parent container 327 | 328 | roberto diana [10:59 AM] 329 | ah! ok 330 | non riuscivo a collegare con la DI (edited) 331 | 332 | Matteo Ronchi [10:59 AM] 333 | in `angular` tu inietti un servizio 334 | 335 | roberto diana [10:59 AM] 336 | in angular è chiarissimo in react meno 337 | (per me ... obv) 338 | 339 | Matteo Ronchi [11:00 AM] 340 | in `react` passi props, ma se devi passare un servzio ail pronipote dovresti passare il servizio anche al figlio e al nipote 341 | il context ti permette di passare al pronipote senza passare esplicitmaente tra i nodi intermedi 342 | 343 | roberto diana [11:01 AM] 344 | che comunque non è proprio DI ma ho capito meglio adesso :smile: 345 | 346 | Matteo Ronchi [11:01 AM] 347 | esatto :wink: 348 | React, a quanto mi risulta, non usa Reflection o altre tecniche per iniettare il context, semplicemente lo gestisce per te lungo l’albero di componenti 349 | 350 | roberto diana [11:02 AM] 351 | lo clona ? o usa reference o qualche meccanismo simile ? 352 | 353 | Matteo Ronchi [11:04 AM] 354 | se leggi il thread sopra ci sono gli esempi di michele che mostrano che ogni volta che un nodo definisce qualcosa nel context viene prodotto un nuovo context che mantiene relazione con ciò che è definito dai livelli superiori ma che permette un `safe` override da quel punto in poi per un dato ramo 355 | questo http://www.react.run/rJ4F2T-t/3 356 | 357 | roberto diana [11:05 AM] 358 | missato ora leggo grazie 359 | 360 | Matteo Ronchi [11:05 AM] 361 | :wink: 362 | 363 | ----------- 364 | ## Idea sperimentale 365 | 366 | Luca Colonnello [4:33 PM] 367 | Ragazzi volevo porvi una soluzione che ho trovato ad un problema 368 | voglio creare container redux che permettano di sovrascrivere il dumb che usano (non usando props dall'esterno) 369 | con un default dumb nel caso in cui non si voglia sovrascrivere 370 | ho pensato a questo 371 | 372 | Luca Colonnello [4:34 PM] 373 | ``` 374 | import React, { Component } from 'react'; 375 | import { compose } from 'redux'; 376 | import { connect } from 'react-redux'; 377 | ​ 378 | // supposed to receive a class and return a new function (curryed) that 379 | // if called add a render function to the received class, 380 | // rendering the received component passing down all the props 381 | import { withRender } from './utils'; 382 | ​ 383 | // container class with event handler and action creator dispatch 384 | class AContainer extends Component { 385 | onBtnClick() {} 386 | componentDidMount(){} 387 | } 388 | ​ 389 | // factory of AContainer, composed by redux connect and withRender 390 | export const AContainerWithRender = compose( 391 | connect(() => {}, {}), 392 | withRender(AContainer) 393 | ) 394 | ​ 395 | // default version using A as dumb component 396 | export default AContainerWithRender(A); 397 | ​ 398 | ​ 399 | ​ 400 | // usage in another file with default render 401 | import React from 'react'; 402 | import AContainer from './AContainer'; 403 | ​ 404 | React.render(, ...); 405 | ​ 406 | ​ 407 | ​ 408 | // usage in another file with custom render 409 | import React from 'react'; 410 | import { AContainerWithRender } from './AContainer'; 411 | ​ 412 | const AContainer = AContainerWithRender((props) => ( 413 |
My custom renderer
414 | )); 415 | ​ 416 | React.render(, ...); 417 | ​ 418 | ``` 419 | 420 | Luca Colonnello [4:35 PM] 421 | una utility withRender, curryed, che ricevuta una classe, la estende aggiungendo il render 422 | ditemi che ne pensate e se è chiaro 423 | 424 | Matteo Ronchi [4:39 PM] 425 | ma quale sarebbe il caso d’uso? 426 | cioè è chiaro che ti permette di definire un wrapper redux e di riutilizzarlo più volte 427 | ma in che scenario lo vedi utile/necessario? 428 | 429 | Luca Colonnello [4:49 PM] 430 | creo un toolkit di componenti che usano redux per separare logica delle interazioni rispetto a grafica 431 | voglio permettere all’esterno a chi lo usa di ridefinire solo la view 432 | quindi il container non voglio debba essere ricreato ogni volta 433 | ma creo il mio componente tab 434 | e chi lo usa usa la grafica che offro o se la riscrive 435 | pensi possa essere una cazzata? 436 | chiedo eh… condivido per quello :slightly_smiling_face: 437 | 438 | Matteo Ronchi [4:53 PM] 439 | non basta creare una factory che riceve il componente e lo restituisce wrappato dal container? Cioè stilisticamente è figo ma non vedo perchè dovrei usare `withRender` quando posso semplicemente esportare dei moduli che fanno la stessa cosa.. l’unico vantaggio è il default, ma perchè dovrei usare un default? 440 | non so se mi sono spiegato 441 | non critico l’approccio semplicemente cerco di capire che reale vantaggio potrei avere rispetto a creare moduli `es` che esportano una funzione che accetta un componente e lo wrappa con connect 442 | con il tuo componente devo introdurre una dipendenza esterna che mi risparmia poche righe 443 | 444 | Luca Colonnello [5:00 PM] 445 | si ma manca il default 446 | questo serve a standardizzare l’approccio in FP 447 | 448 | Matteo Ronchi [5:01 PM] 449 | si ma no vedo un caso reale in cui il default possa servire 450 | 451 | Luca Colonnello [5:01 PM] 452 | se tu fai un toolkit 453 | o cmq componenti riutilizzabili 454 | il container ha già la grafica 455 | 456 | Matteo Ronchi [5:01 PM] 457 | si ma chi mai userebbe il default? 458 | 459 | Luca Colonnello [5:01 PM] 460 | ??? 461 | se prendo il tab di material ui è fatto così 462 | 463 | Matteo Ronchi [5:01 PM] 464 | cioè se lo uso vuol dire che il default è il mio componente reale 465 | si ma loro ti danno un component con UI e il default tab serve 466 | 467 | Luca Colonnello [5:02 PM] 468 | esatto 469 | 470 | Matteo Ronchi [5:02 PM] 471 | il default con un connect non serve 472 | perchè non lo useresti mai 473 | 474 | Luca Colonnello [5:02 PM] 475 | se tu esporti un componente che ha una parte redux e una parte react 476 | la parte redux è connect + reducer + actions + selectors (edited) 477 | la parte react è il dumb + il container del connect (edited) 478 | 479 | Matteo Ronchi [5:02 PM] 480 | vero ma continuo a non aver bisogno del default 481 | crei una factory che accetta il componente e lo wrappa con tutta la parte redux 482 | hai anche test + facili 483 | 484 | Luca Colonnello [5:03 PM] 485 | si ma il tuo toolkit non offre quindi un default render?? 486 | me lo devo fare ogni volta a mano (edited) 487 | chiaramente è un caso specifico 488 | 489 | Matteo Ronchi [5:04 PM] 490 | facciamo un caso reale 491 | 492 | Luca Colonnello [5:04 PM] 493 | ok 494 | 495 | Matteo Ronchi [5:04 PM] 496 | io prendo il tuo toolkit e lo uso nella mia app 497 | 498 | Luca Colonnello [5:04 PM] 499 | si 500 | 501 | Matteo Ronchi [5:04 PM] 502 | per quale motivo dovrei usare il tuo default renderer? 503 | tu non hai la mia UI, non sai cosa ci metto dentro e non usi di sicuro le mie CSS 504 | quindi prendo la tua utility e gli passo un mio componente 505 | al che mi chiedo 506 | perchè uso questa lib, se gli devo fornire tutti i building blocks? 507 | non posso farmi io un modulo che accetta il componente e che internamente ha i building block che comunque mi devo scrivere (actions, connector, etc..) (edited) 508 | 509 | Luca Colonnello [5:06 PM] 510 | l’obiettivo del toolkit dovrebbe essere offrire già tutti i copmonenti funzionanti, personalizzabili nello stile 511 | 512 | Matteo Ronchi [5:06 PM] 513 | aspetta 514 | 515 | Luca Colonnello [5:06 PM] 516 | ok 517 | 518 | Matteo Ronchi [5:06 PM] 519 | ma parliamo di uno UI toolkit? (edited) 520 | 521 | Luca Colonnello [5:06 PM] 522 | beh si 523 | 524 | Matteo Ronchi [5:06 PM] 525 | e perchè mai uno dovrebbe usare uno UI toolkit vincolato a redux? 526 | 527 | Luca Colonnello [5:06 PM] 528 | è una scelta implementativa 529 | 530 | Matteo Ronchi [5:07 PM] 531 | le mie critiche erano legate al fatto che pensavo che tu fornissi solo le utilities :wink: 532 | 533 | Luca Colonnello [5:07 PM] 534 | ah no no 535 | questa è un esigenza specifica 536 | cmq non è solo redux il punto 537 | quello era per dimostrare che con la composition si può fare anche con il connect 538 | ma se io voglio creare come con recompose 539 | dei comp stateless ma che hanno con degli HoC dei comportamenti legati al componente stesso 540 | gestione dello stato magari 541 | 542 | Matteo Ronchi [5:08 PM] 543 | se mi dici che tu offri una lib, la cui logica è redux-based e che vuoi permettere ai tuoi user di cambiare la dumb part del componente, mantenendo ovviamente le props che tu gli passi, allora lo snippet ha senso 544 | 545 | Luca Colonnello [5:08 PM] 546 | così posso sovrascrivere il render ma avere stato e altri HoC 547 | si si esatto 548 | 549 | Matteo Ronchi [5:09 PM] 550 | anche se non so se userei una lib che mi impone i suoi reducer per funzionare, anche se ha un suo perchè) 551 | però ci dovrei riflettere, a pelle non me gusta 552 | gli UI comp dovrebbero essere completamente isolati 553 | 554 | Luca Colonnello [5:09 PM] 555 | si ma come ti scrivevo 556 | 557 | Matteo Ronchi [5:09 PM] 558 | personalmente non vedo male lo stato di un componente react se è specifico ad azioni locali 559 | 560 | Luca Colonnello [5:09 PM] 561 | possono anche non essere vincolati a redux 562 | si si 563 | ma lo fai uguale 564 | immagina recompose 565 | ho il dumb e con gli HoC creo lo stato e i reducer dello stato 566 | 567 | Matteo Ronchi [5:10 PM] 568 | però aspetta se togli il layer redux e lasci cambiare il componente praticamente chiede all’utente di rifare ilt uo lavoro 569 | solo x componenti davvero banali funzionerebbe la sostituzione così com'è 570 | 571 | Luca Colonnello [5:10 PM] 572 | se il componente è stateful no 573 | 574 | Matteo Ronchi [5:10 PM] 575 | si ma a quel punto devi incastrarti con lemeccaniche di aggiornamento dello stato 576 | è figo ma complesso 577 | 578 | Luca Colonnello [5:11 PM] 579 | se vai in composition è esattamente come il concetto di dumb e container 580 | come funge anche recompose 581 | 582 | Matteo Ronchi [5:12 PM] 583 | si ma non vedo come per esempio puoi gestire il custom rendere di una select, sarebbe mooolto complicato 584 | 585 | Luca Colonnello [5:12 PM] 586 | scusa non ho capito 587 | 588 | Matteo Ronchi [5:13 PM] 589 | supponi che uno dei tuoi componenti è una `select` (edited) 590 | 591 | Luca Colonnello [5:13 PM] 592 | si 593 | una select è stateless 594 | non ha bisogno di tale logica 595 | 596 | Matteo Ronchi [5:13 PM] 597 | se io voglio cambiare la UI devo scrivere uno sproposito di codice 598 | mmm statelss +o- 599 | se ha multiselezione, elementi interattivi etc... 600 | 601 | Luca Colonnello [5:14 PM] 602 | nel caso di un ui toolkit dovrebbe essere stateless 603 | 604 | Matteo Ronchi [5:14 PM] 605 | guarda react-select 606 | 607 | Luca Colonnello [5:14 PM] 608 | certo in quel caso funzionerebbe 609 | devi scrivere molto codice 610 | 611 | Matteo Ronchi [5:14 PM] 612 | si ma per fare un renderer ci impiego una vita 613 | 614 | Luca Colonnello [5:14 PM] 615 | ma la tua esigenza è proprio quella di rifarlo da 0 se vuoi cambiare il render 616 | sarebbe peggio rifare tutto da 0, grafica + logica!! 617 | 618 | Matteo Ronchi [5:15 PM] 619 | si ma vuol dire che la tua logica deve andarmi perfettamente bene 620 | 621 | Luca Colonnello [5:15 PM] 622 | se così non fosse non usi quel componente 623 | ma se fai un tab ma il render deve essere modificato 624 | così lo puoi fare 625 | 626 | Matteo Ronchi [5:16 PM] 627 | sisi è chiaro il vantaggio 628 | semplicemente, ma è molto personale come punto di vista, se uso la tua lib e la personalizza in maniera forte molto probabilmente la riscrivo come serve a me 629 | l’effort è maggiore ma non dipendo dalle tue scelte di design (del codice) e di utilizzo 630 | 631 | Luca Colonnello [5:17 PM] 632 | si ma se non ti capita questo caso, non usi la lib 633 | o meglio 634 | se l’implementazione è molto differente nella logica e nel render certamente non ha senso 635 | è un caso limite magari, ma facendolo in FP è compatibile con molte altre cose 636 | come appunto recompose o aprhodite 637 | 638 | Matteo Ronchi [5:18 PM] 639 | quello assolutamente 640 | tra l’altro tu susi aphrodite? 641 | 642 | Luca Colonnello [5:19 PM] 643 | si cmq è un utility che fornisce un approccio per risolvere questo problema che si ha spesso se sviluppi ui toolkit in react 644 | 645 | Matteo Ronchi [5:19 PM] 646 | l’approccio è interessante ma non mi piace molto la sintassi da usare e neanche il fatto che vada a intercettare tutte le mie render function 647 | 648 | Luca Colonnello [5:19 PM] 649 | spesso non hanno logica complessa ma il fatto di non poter toccare la grafica è brutto 650 | 651 | Matteo Ronchi [5:19 PM] 652 | concordo 653 | 654 | Luca Colonnello [5:19 PM] 655 | > il fatto che vada a intercettare tutte le mie render function 656 | 657 | cosa intendi? 658 | volevo usare aphrodite per la stessa ragione, fare qualcosa del genere con withStyle tipo 659 | 660 | Matteo Ronchi [5:22 PM] 661 | no spe forse mi confondo 662 | ne sto guardando troppe assieme 663 | 664 | Luca Colonnello [5:22 PM] 665 | ahahahah 666 | è quella di Khan Dods (edited) 667 | 668 | Matteo Ronchi [5:22 PM] 669 | è radium che wrappa la rende function 670 | sorry 671 | 672 | Luca Colonnello [5:22 PM] 673 | si si 674 | esatto 675 | infatti non me gusta molto 676 | 677 | Matteo Ronchi [5:23 PM] 678 | non so tra iniettare css e usare stili inline quale mi piace di più :stuck_out_tongue: 679 | 680 | Luca Colonnello [5:23 PM] 681 | preferisco iniettare css onestamente 682 | lo stile inline ha troppe limitazioni 683 | 684 | Matteo Ronchi [5:24 PM] 685 | beh in realtà sono tutte aggirabili (vedi radium) 686 | 687 | Luca Colonnello [5:24 PM] 688 | eh ma un hover fatto in css non è un hover fatto in js 689 | perdi after e before e animation 690 | hai solo transition 691 | se non mi sbaglio eh 692 | 693 | Matteo Ronchi [5:26 PM] 694 | beh si molto dipende da cosa devi fare 695 | personalmente non sono molto preoccupato lato animation e simili 696 | 697 | Luca Colonnello [5:26 PM] 698 | beh si certo dipende 699 | 700 | Matteo Ronchi [5:26 PM] 701 | anche le mediaquery le gestiamo cmq via JS perchè carico proprio layout applicativi diversi 702 | 703 | Luca Colonnello [5:26 PM] 704 | beh si 705 | 706 | Luca Colonnello [5:46 PM] 707 | piccola osservazione: se usi recompose questo withRender non serve, in quanto basta comporre tutto con recompose e passare tutto a connect 708 | recompose offre l’enhancer che fa una roba simile 709 | connect sarebbe una funzione composta come le altre 710 | e il default component sarebbe un componente che è già stato decorato con l'enhancer 711 | e non crei lib ulteriori e rimani standard 712 | se hai classe invece ti serve una roba come questa (edited) 713 | scelte implementativa 714 | 715 | ---------- 716 | 717 | fabiobiondi [5:27 PM] 718 | ma voi non lavorate mai? :smile: 719 | 720 | Matteo Ronchi [5:27 PM] 721 | certo è quello che facciamo reglarmente 722 | 723 | fabiobiondi [5:27 PM] 724 | potreste fare delle chat audio su sta roba.. sarebbero interessantissime (edited) 725 | 726 | Michele Bertoli [5:28 PM] 727 | no ma infatti ragazzi questa roba va salvata 728 | 729 | Michele Bertoli [5:29 PM] 730 | grazie a questa community faccio meglio il mio lavoro 731 | 732 | fabiobiondi [5:30 PM] 733 | sono d’accordo 100%.. ma volevo rompere le scatole a Luca e Mat : P 734 | 735 | Michele Bertoli [5:30 PM] 736 | anzi nelle mie prossime presentazioni 737 | posso mettere 738 | member of FEVR, vero? 739 | 740 | fabiobiondi [5:30 PM] 741 | in realtà dovresti citare angularjs developers italiani e react italia…. 742 | 743 | Michele Bertoli [5:30 PM] 744 | (anche se non sono mai venuto ad un evento live :( - a parte le conf) 745 | 746 | fabiobiondi [5:30 PM] 747 | sono le nostre : P 748 | sono i canali in cui promuoviamo slack (edited) 749 | il FEVR ci ospita 750 | 751 | Michele Bertoli [5:34 PM] 752 | okappa 753 | 754 | [5:34] 755 | pero' non diro' mai angular in una mio talk ok? 756 | 757 | [5:34] 758 | :D 759 | 760 | fabiobiondi [5:34 PM] 761 | però penso che non possano esser contenti se citi il FEVR 762 | 763 | [5:34] 764 | aahahhahahahah 765 | 766 | [5:34] 767 | ahahhaha 768 | 769 | [5:34] 770 | (non sei così aperto come pensavo allora : P ) 771 | 772 | Michele Bertoli [5:34 PM] 773 | ahahahahahahahahahahah 774 | 775 | fabiobiondi [5:35 PM] 776 | :angular: 777 | 778 | Michele Bertoli [5:35 PM] 779 | :wat: 780 | 781 | fabiobiondi [5:36 PM] 782 | ahahah 783 | 784 | Luca Colonnello [5:37 PM] 785 | ahahaha Fabio io oggi sono di formazione 786 | 787 | [5:37] 788 | abbiamo fatto questo :slightly_smiling_face: 789 | 790 | [5:38] 791 | @michele quando racconti taggami che non voglio perdermelo 792 | 793 | [5:38] 794 | :slightly_smiling_face: 795 | 796 | Michele Bertoli [5:38 PM] 797 | ;) 798 | 799 | ---------------- 800 | ## Aphrodite, esempi css in js 801 | 802 | Matteo Ronchi [9:10 AM] 803 | domandona del lunedì mattina: cosa ne pensate di `aphrodite` (no pun) @michele @lucacolonnellocrweb @danieleb @gianmarcotoso 804 | 805 | Luca Colonnello [9:11 AM] 806 | Per me è favoloso, ma non l'ho ancora provato.. l'idea di poter creare pacchetti altamente modificabili da css è stupenda.. bisogna vedere un po' per il debug che magari può diventare morboso, ma alla fine non è proprio un compilato quindi quello che vedi in console può bastare 807 | 808 | Michele Bertoli [9:12 AM] 809 | Aphrodite è una delle soluzioni più sensate 810 | Anche perchè è arrivata quando l'universo dei css in js era stato già esplorato 811 | E altri progetti erano falliti 812 | 813 | Matteo Ronchi [9:13 AM] 814 | si infatti il concetto mi piace molto, unica cosa che non mi esalta è che ogni volta che cambi una prop css crei una classe nuova 815 | 816 | Michele Bertoli [9:13 AM] 817 | Mette insieme la comodità degli oggetti js per gli stili, con l'output di vero css 818 | 819 | Matteo Ronchi [9:13 AM] 820 | mi piace molto di più degli inline styles puri 821 | 822 | Michele Bertoli [9:14 AM] 823 | Yes 824 | Una feature molto interessante 825 | 826 | Matteo Ronchi [9:14 AM] 827 | vedevo che loro consigliano di usare `react-look` come alternativa che ora è deprecated in favore di `react-fela` 828 | 829 | Michele Bertoli [9:14 AM] 830 | È che inietta solo gli stili attualmente in uso 831 | L'autore di fela 832 | È co-maintainer del mio repo 833 | 834 | Matteo Ronchi [9:15 AM] 835 | :open_mouth: 836 | e cosa cambia / ne pensi tra fela e aphrodite? 837 | 838 | Michele Bertoli [9:15 AM] 839 | È un tipo molto smart 840 | 841 | Matteo Ronchi [9:16 AM] 842 | una cosa che ha peso per aphrodite è anche che è sviluppata appositamente per paypal quindi dovrebbe avere una longevità/continuità più stabile (edited) 843 | anche se non so su quali app la usano 844 | ah no vedo che lo usano in produzione 845 | 846 | Michele Bertoli [9:19 AM] 847 | Sisi la usano in prod in paypal 848 | Infatti 849 | Secondo me fela ha delle feature anche più interessanti 850 | Es. Plugins 851 | Ma non diventerà mai così popolare 852 | Una soluzione da tenere d'occhio 853 | È https://github.com/geelen/css-components-demo 854 | Sta nascendo in sti giorni ma ha un grande potenziale 855 | 856 | Matteo Ronchi [9:22 AM] 857 | interessante! 858 | però come x radium non mi esalta il fatto che decori/modifichi il comportamento/output di react 859 | 860 | Michele Bertoli [9:24 AM] 861 | Giusto 862 | 863 | Matteo Ronchi [9:30 AM] 864 | quindi per fare tirare le somme: 865 | * `aphrodite` è usata da progetti grandi, non pare avere particolari drawback se non in scenari dove generi davvero tanti nuovi stili in continuazione. Non è legata solo a React 866 | * `radium` anch’essa usata da grandi progetti ha + limiti verso media queries e altri aspetti css ma non ha altri grandi limiti. E’ legata a react e wrappa il `render` method 867 | * `react-fela` è un pò un aphrodite on steroids ma non ha usi reali in grandi progetti ed è mantenuta da un singolo dev. Come radium si interpone/modifica i comportamenti di React per funzionare 868 | 869 | Luca Colonnello [9:56 AM] 870 | a me onestamente non preoccupa molto il casso della generazione live dello style 871 | penso che faccia memoizzazione 872 | 873 | Matteo Ronchi [9:57 AM] 874 | si fa memoization 875 | però la chiave è la serializzazione in JSON dell’intero oggetto passato alla lib 876 | quindi imho va gestito con attenzione quando generi/rigeneri gli stili usando `css()` (edited) 877 | se no è vero che non genera nuove classi css ma fai cmq serializzare uno sproposito di oggetti ad ogni render 878 | 879 | Michele Bertoli [10:00 AM] 880 | eccomi in ufficio 881 | 882 | Matteo Ronchi [10:00 AM] 883 | :slightly_smiling_face: 884 | 885 | Michele Bertoli [10:00 AM] 886 | ottime conclusioni @cef62 887 | radium tra l'altro non sono sicuro sia utilizzato davvero in progetti grossi 888 | (a parte le cose che fa formidable labs) 889 | 890 | Matteo Ronchi [10:00 AM] 891 | loro sul sito dicono che è usato da FB stessa :stuck_out_tongue: 892 | 893 | Michele Bertoli [10:00 AM] 894 | un'altra alternativa 895 | e' https://github.com/cssinjs/jss 896 | 897 | Matteo Ronchi [10:01 AM] 898 | si l’ho vista non mi ha convinto però 899 | mi isembra che non sia usata in progetti reali importanti o sbalgio? 900 | 901 | Michele Bertoli [10:05 AM] 902 | quello non lo so (percio' penso di no) 903 | pero' e' la piu' matura (edited) 904 | es. quando ho iniziato con il mio repo c'era gia' 905 | c'e' questa che funziona in modo super strano 906 | https://github.com/threepointone/glamor 907 | e siccome l'ha twittata mj sta ricevendo un sacco di attenzione 908 | ma se vuoi andare sul sicuro aphrodite e' quello che fa per te 909 | 910 | Matteo Ronchi [10:07 AM] 911 | si ho visto quella di threepointone 912 | fa cose molto cool 913 | però è troppo nuova 914 | si infatti aphrodite mi sembra il miglior compromesso 915 | anche se un sistema di plugins sarebbe figo 916 | 917 | Michele Bertoli [10:08 AM] 918 | confermo 919 | 920 | Matteo Ronchi [10:43 AM] 921 | ragazzi idee su come supportareflexbox per ie11 con aphrodite? 922 | 923 | Michele Bertoli [10:49 AM] 924 | https://github.com/rofrischmann/inline-style-prefixer 925 | sembra che aphrodite usi questa 926 | dovresti essere a posto 927 | 928 | Matteo Ronchi [10:59 AM] 929 | si infatti stavo guardando proprio ora! 930 | grazie mille! sei il mio salvavita 931 | 932 | https://github.com/Khan/aphrodite/issues/100 933 | questo è inerente, se ti può interessare 934 | 935 | Luca Colonnello [11:36 AM] 936 | l’ho vista anche io glamor 937 | seguiamo la stessa gente!!! 938 | 939 | Michele Bertoli [11:43 AM] 940 | io seguo tutti quelli che mettono le parole css e js nello stesso tweet : ) 941 | 942 | Luca Colonnello [11:43 AM] 943 | si io anche react redux e graphql 944 | ce ne sono un botto 945 | cmq 946 | se vi può essere utile un mio collega ha trovato questo 947 | https://medium.com/@oleg008/aphrodite-vs-jss-a15761b91ee3#.gyovlnjce 948 | però sul fatto che il render così è async ha ragione 949 | aphrodite ha questo unico difetto che il css purtroppo viene inserito nel dom in modo async 950 | quindi vedi il componente laggare prima di essere completamente renderizzato 951 | mi piacerebbe risolvere il problema con aphrodite però vero 952 | non riesco invece a capire se glamor genera css inline o tag style 953 | 954 | > We introduce an api to annotate arbitrary dom nodes with style definitions ("rules") for, um, the greater good. 955 | 956 | però non capisco dove lo fa perchè non c’è nessun setup richiesto a inizio app se non per server side rendering 957 | 958 | Michele Bertoli [12:00 PM] 959 | la versione che ho provato io 960 | generava css 961 | e non usava classi ma attributi 962 | 963 | Luca Colonnello [12:01 PM] 964 | ho letto 965 | data-* 966 | ma sono più lenti nella selezione css 967 | non mi piacciono molto 968 | 969 | 970 | ____________ 971 | 972 | Matteo Ronchi [2:31 PM] 973 | ... 974 | in ogni caso sto iniziando uno uikit abbastanza impegnativo con aphrodite, nelle prox week ti potrò dire di più :slightly_smiling_face: 975 | 976 | Luca Colonnello [2:35 PM] 977 | grande mi interessa proprio questo 978 | purtroppo è una delle attività che faranno qui quando me ne sarò andato 979 | 980 | Matteo Ronchi [2:35 PM] 981 | XD 982 | 983 | Luca Colonnello [2:35 PM] 984 | quindi mi interesserebbe dargli dei feedback prima che comincino 985 | ma non ne ho il tempo ora di provarlo 986 | 987 | Matteo Ronchi [2:35 PM] 988 | sto disegnando ora il layer di astrazione (theme-manager, HoCs, etc…) (edited) 989 | 990 | Luca Colonnello [2:35 PM] 991 | buonooo 992 | alla fine fai come dicevamo più o meno l’altra volta? 993 | 994 | Matteo Ronchi [2:36 PM] 995 | l’idea è che i componenti siano completamente slegati dal layer them/css/styles 996 | ci sarà un HoC che riceve le props, il context (come dicevamo) etc… e produce delle classi css per il comp figlio 997 | un pò come redux ma per gli stili 998 | 999 | Luca Colonnello [2:37 PM] 1000 | ah ok 1001 | bene 1002 | 1003 | Matteo Ronchi [2:37 PM] 1004 | quindi il comp riceve un oggetto con le chiavi tipo `{ background, header, body }` 1005 | che sono le classi prodotte da aphrodite nell'HoC 1006 | l’idea è che se mi slego da aphrodite non devo modificare i componenti ma solo l'HoC 1007 | ovvio se passo a stili inline devo modificare il comp 1008 | ma finché uso classi css tutto va via liscio 1009 | 1010 | Luca Colonnello [2:38 PM] 1011 | a beh si 1012 | ma in teoria aphrodite di per se slega già molto perchè tu usi un css prodotto come fosse css modules 1013 | con oggetto styles per dire 1014 | quindi sei abbastanza slegato 1015 | 1016 | Matteo Ronchi [2:39 PM] 1017 | si 1018 | 1019 | Luca Colonnello [2:39 PM] 1020 | al massimo all’HoC gli fai generare tutto 1021 | 1022 | Matteo Ronchi [2:39 PM] 1023 | ma io non voglio 2 cose: 1024 | 1025 | Luca Colonnello [2:39 PM] 1026 | e ricevi solo oggetto css o styles nel comp 1027 | 1028 | Matteo Ronchi [2:39 PM] 1029 | - 1. invocare `css()` nella render function 1030 | - 2. invocare `css()` ad ogni render 1031 | 1032 | Luca Colonnello [2:39 PM] 1033 | come dicevamo si 1034 | si e l’HoC potrebbe memoizzare e modificare quello che cambia e rigenerare css solo se cambia qualcosa 1035 | 1036 | Matteo Ronchi [2:40 PM] 1037 | è vero che se la classe è già iniettata è leggero ma fa cmq un `filter` + `join` + un paio di `if` 1038 | 1039 | Luca Colonnello [2:40 PM] 1040 | anche se lo fa già lui ma ad alto livello non lo reinvochi 1041 | si si 1042 | 1043 | Matteo Ronchi [2:40 PM] 1044 | l’invocazione di `css()` se la fai su centinaia di componenti è cmq inutile e consuma risorse 1045 | è come il `bind` nella render fn 1046 | non impatta realmente la tua app ma è uno spreco inutile 1047 | 1048 | Luca Colonnello [2:41 PM] 1049 | si si sono d'accordo 1050 | lo farei uguale probabilmente io 1051 | 1052 | Matteo Ronchi [2:42 PM] 1053 | inoltre, spezzare `css()` dentro l’HoC mi da un altro vantaggio 1054 | posso scegliere se aggregare i vari stili in 1 o N classi css 1055 | tanto al comp figlio passo una stringa 1056 | lui non guarda se è composta da 1 o N nomi di classi 1057 | 1058 | Luca Colonnello [2:42 PM] 1059 | si infatti 1060 | e puoi gestire concatenazioni o merge vari con config passate dall’esterno al componente o dal provider del tema 1061 | si si 1062 | ottimo 1063 | giusto così 1064 | vai chef!! 1065 | --------------------------------------------------------------------------------