Angular js o React? Spunti e idee per la scelta di un framework
45
Angular o React? Spunti e idee per la scelta di un framework
-
Upload
giovanni-buffa -
Category
Internet
-
view
108 -
download
3
Transcript of Angular js o React? Spunti e idee per la scelta di un framework
Angular o React?Spunti e idee per la scelta di un framework
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
Cos’è una Web Application?Il Web è una Repubblica basata sulle App.
Applicativo software, spesso mono-tasking, il quale viene distribuito da un server remoto ed eseguito via Internet su
un Browser.
1.Accesso ai miei dati ovunque. 2.Utilizzo dell’ultima versione disponibile. 3.Funziona su qualsiasi dispositivo munito di browser. 4.Maggiore sicurezza locale.
Quali strumenti utilizzeremo?
Firefox Developerhttps://www.mozilla.org/it/firefox/developer/
Terminale
NodeJShttps://nodejs.org/en/
npmhttps://www.npmjs.com/
Tutti gli esempi possono essere scaricati da:
https://github.com/gioppy/angular-react-ires-workshop-2016
Alcuni concetti comuni...
Imperativo VS
Dichiarativo
ComponentsPorzione isolata che permette di dividerne il comportamento in ruoli, in modo
analogo alle funzioni JavaScript.
Design Patterns & Pattern MVC
VIEW CONTROLLER
USER
MODEL
VEDE USA
AGGIORNA MANIPOLA
Data BindingsAggiornare la View alle modifiche del Data Model.
...e altri che non vedremo!
1.Task runner (Angular) e Module loader (React) 2.Routing (Angular/React) 3.Promises (Angular/React) 4.Redux (React) 5.Angular 2
Cosa costruiamo?
Main
Scores
ScoresPlayersScoresControls
Player
Button
Main
PlayerAdd
PlayerAddColors
PlayerAddForm
Cos’è React?A JavaScript library for building user interfaces
– 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.”.
JSXXML-like syntax extension to ECMAScript without any
defined semantics.
https://facebook.github.io/jsx/
Webpackhttps://webpack.github.io/
Babelhttps://babeljs.io/
Cos’è AngularJS?Superheroic JavaScript MV* Framework
– 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”.
ModulesCollezione di oggetti che definiscono il set di funzionalità della nostra App.
ScopesIl collante tra la logica e la UI.
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].
Dependency InjectionCome gli oggetti devono accedere alle dipendenze di cui hanno bisogno
per poter funzionare.
ControllersDefiniscono le funzionalità per un singolo aspetto della nostra App.
ServicesOggetti singleton che svolgono compiti comuni a più aree della nostra App.
E Angular 2?One framework. Mobile & desktop.
A typed superset of JavaScript that compiles to plain JavaScript.
https://www.typescriptlang.org/index.html
An API for asynchronous programming with observable streams
http://reactivex.io/
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/
Grazie a tutti!Ci sono domande?
© 2016 - Giovanni Buffa
