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?

Sublime Texthttps://www.sublimetext.com/

Firefox Developerhttps://www.mozilla.org/it/firefox/developer/

Terminale

NodeJShttps://nodejs.org/en/

npmhttps://www.npmjs.com/

githttps://git-scm.com/

GitHubhttps://github.com/

Firebasehttps://firebase.google.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”.

Gulphttp://gulpjs.com/

Bowerhttps://bower.io/

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