angular js o react? spunti e idee per la scelta di un framework
TRANSCRIPT
![Page 1: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/1.jpg)
Angular o React?Spunti e idee per la scelta di un framework
![Page 2: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/2.jpg)
Giovanni BuffaFront-End/Web/Drupal Developer
https://twitter.com/amp_gioppy
https://it.linkedin.com/in/gioppy
https://www.facebook.com/giova.buffa
https://github.com/gioppy
![Page 3: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/3.jpg)
Cos’è una Web Application?Il Web è una Repubblica basata sulle App.
![Page 4: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/4.jpg)
Applicativo software, spesso mono-tasking, il quale viene distribuito da un server remoto ed eseguito via Internet su
un Browser.
![Page 5: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/5.jpg)
1.Accesso ai miei dati ovunque. 2.Utilizzo dell’ultima versione disponibile. 3.Funziona su qualsiasi dispositivo munito di browser. 4.Maggiore sicurezza locale.
![Page 6: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/6.jpg)
![Page 7: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/7.jpg)
Quali strumenti utilizzeremo?
![Page 9: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/9.jpg)
Firefox Developerhttps://www.mozilla.org/it/firefox/developer/
![Page 10: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/10.jpg)
Terminale
![Page 11: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/11.jpg)
NodeJShttps://nodejs.org/en/
npmhttps://www.npmjs.com/
![Page 14: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/14.jpg)
Tutti gli esempi possono essere scaricati da:
https://github.com/gioppy/angular-react-ires-workshop-2016
![Page 15: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/15.jpg)
Alcuni concetti comuni...
![Page 16: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/16.jpg)
Imperativo VS
Dichiarativo
![Page 17: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/17.jpg)
ComponentsPorzione isolata che permette di dividerne il comportamento in ruoli, in modo
analogo alle funzioni JavaScript.
![Page 18: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/18.jpg)
Design Patterns & Pattern MVC
![Page 19: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/19.jpg)
VIEW CONTROLLER
USER
MODEL
VEDE USA
AGGIORNA MANIPOLA
![Page 20: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/20.jpg)
Data BindingsAggiornare la View alle modifiche del Data Model.
![Page 21: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/21.jpg)
...e altri che non vedremo!
![Page 22: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/22.jpg)
1.Task runner (Angular) e Module loader (React) 2.Routing (Angular/React) 3.Promises (Angular/React) 4.Redux (React) 5.Angular 2
![Page 23: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/23.jpg)
Cosa costruiamo?
![Page 24: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/24.jpg)
![Page 25: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/25.jpg)
Main
Scores
ScoresPlayersScoresControls
Player
Button
![Page 26: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/26.jpg)
Main
PlayerAdd
PlayerAddColors
PlayerAddForm
![Page 27: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/27.jpg)
Cos’è React?A JavaScript library for building user interfaces
![Page 28: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/28.jpg)
– Wikipedia
“React is an open-source JavaScript library providing a view for data rendered as HTML. React views are typically
rendered using components that contain additional components specified as custom HTML tags.”.
![Page 29: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/29.jpg)
JSXXML-like syntax extension to ECMAScript without any
defined semantics.
https://facebook.github.io/jsx/
![Page 30: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/30.jpg)
Webpackhttps://webpack.github.io/
Babelhttps://babeljs.io/
![Page 31: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/31.jpg)
Cos’è AngularJS?Superheroic JavaScript MV* Framework
![Page 32: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/32.jpg)
– Wikipedia
“AngularJS è un framework per applicazioni web open-source […] per affrontare molte delle sfide incontrate
nello sviluppo di Single Page Applications. È mirato a semplificare lo sviluppo e la sperimentazione di tali applicazioni, fornendo un framework basato sul design pattern MVC, assieme a componenti comunemente
utilizzati nelle Rich Internet Applications”.
![Page 34: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/34.jpg)
ModulesCollezione di oggetti che definiscono il set di funzionalità della nostra App.
![Page 35: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/35.jpg)
ScopesIl collante tra la logica e la UI.
![Page 36: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/36.jpg)
Esiste uno scope globale [$rootScope] al cui interno vengono creati degli scope per ogni componente [$scope].
Ogni scope può accedere sia al proprio genitore che ai propri figli.
Nel caso di un componente o una direttiva lo scope può essere isolato [isolated scope].
![Page 37: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/37.jpg)
Dependency InjectionCome gli oggetti devono accedere alle dipendenze di cui hanno bisogno
per poter funzionare.
![Page 38: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/38.jpg)
ControllersDefiniscono le funzionalità per un singolo aspetto della nostra App.
![Page 39: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/39.jpg)
ServicesOggetti singleton che svolgono compiti comuni a più aree della nostra App.
![Page 40: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/40.jpg)
E Angular 2?One framework. Mobile & desktop.
![Page 41: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/41.jpg)
A typed superset of JavaScript that compiles to plain JavaScript.
https://www.typescriptlang.org/index.html
![Page 42: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/42.jpg)
An API for asynchronous programming with observable streams
http://reactivex.io/
![Page 43: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/43.jpg)
Build desktop and native mobile apps with strategies from Ionic Framework, NativeScript, and Electron
http://ionic.io/2 http://electron.atom.io/
https://www.nativescript.org/
![Page 44: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/44.jpg)
Grazie a tutti!Ci sono domande?
![Page 45: Angular js o React? Spunti e idee per la scelta di un framework](https://reader034.vdocuments.pub/reader034/viewer/2022051318/58ed30f31a28ab0b798b4697/html5/thumbnails/45.jpg)
© 2016 - Giovanni Buffa