Come poter scegliere un framework da utilizzare in un progetto per una web applications? Durante questo workshop analizzeremo le parti fondamentali di AngularJs e React, in modo da capire pregi e difetti di ognungo dei due principali strumenti di sviluppo.

1. Angular o React?
Spunti e idee per la scelta di un framework

2. Giovanni Buffa
Front-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

3. Cos’è una Web Application?
Il Web è una Repubblica basata sulle App.

4. Applicativo software, spesso mono-tasking, il quale viene
distribuito da un server remoto ed eseguito via Internet su
un Browser.

5. 1. Accesso ai miei dati ovunque.
2. Utilizzo dell’ultima versione disponibile.
3. Funziona su qualsiasi dispositivo munito di browser.
4. Maggiore sicurezza locale.

7. Quali strumenti utilizzeremo?

8. Sublime Text
https://www.sublimetext.com/

9. Firefox Developer
https://www.mozilla.org/it/firefox/developer/

10. Terminale

11. NodeJS
https://nodejs.org/en/
npm
https://www.npmjs.com/

12. git
https://git-scm.com/
GitHub
https://github.com/

13. Firebase
https://firebase.google.com/

14. Tutti gli esempi possono essere scaricati da:
https://github.com/gioppy/angular-react-ires-workshop-2016

15. Alcuni concetti comuni...

16. Imperativo
VS
Dichiarativo

17. Components
Porzione isolata che permette di dividerne il comportamento in ruoli, in modo
analogo alle funzioni JavaScript.

18. Design Patterns &
Pattern MVC

19. VIEW CONTROLLER
USER
MODEL
VEDE
USA
AGGIORNA MANIPOLA

20. Data Bindings
Aggiornare la View alle modifiche del Data Model.

21. ...e altri che non vedremo!

22. 1. Task runner (Angular) e Module loader (React)
2. Routing (Angular/React)
3. Promises (Angular/React)
4. Redux (React)
5. Angular 2

23. Cosa costruiamo?

25. Main
Scores
ScoresPlayersScoresControls
Player
Button

26. Main
PlayerAdd
PlayerAddColors
PlayerAddForm

27. Cos’è React?
A JavaScript library for building user interfaces

28. – 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.”.

29. JSX
XML-like syntax extension to ECMAScript without any
defined semantics.
https://facebook.github.io/jsx/

30. Webpack
https://webpack.github.io/
Babel
https://babeljs.io/

31. Cos’è AngularJS?
Superheroic JavaScript MV* Framework

32. – 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”.

33. Gulp
http://gulpjs.com/
Bower
https://bower.io/

34. Modules
Collezione di oggetti che definiscono il set di funzionalità della nostra App.

35. Scopes
Il collante tra la logica e la UI.

36. 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].

37. Dependency Injection
Come gli oggetti devono accedere alle dipendenze di cui hanno bisogno
per poter funzionare.

38. Controllers
Definiscono le funzionalità per un singolo aspetto della nostra App.

39. Services
Oggetti singleton che svolgono compiti comuni a più aree della nostra App.

40. E Angular 2?
One framework. Mobile & desktop.

41. A typed superset of JavaScript that compiles to plain JavaScript.
https://www.typescriptlang.org/index.html

42. An API for asynchronous programming with observable streams
http://reactivex.io/

43. 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/

44. Grazie a tutti!
Ci sono domande?

45. © 2016 - Giovanni Buffa