Sviluppo Web con React e Delphi - Seminario Delphi Day 2016, Piacenza
0 likes517 views
Il documento confronta ReactJS ed ExtJS nel contesto dello sviluppo di applicazioni web moderne, evidenziando le sfide dei 'web server fat' e l'emergere delle Single Page Applications (SPA). Viene discusso il linguaggio JavaScript e la sua evoluzione, insieme a librerie come jQuery e componenti di ReactJS, illustrando l'importanza del virtual DOM e delle proprietà e stato dei componenti. Infine, si parla di integrazione con backend in Delphi e altre possibilità di estensione come React Native.
![Gli elementi del VDOM
● ReactNode
rappresenta un singolo “nodo” del VDOM
○ ReactElement: rappresenta un elemento HTML
○ ReactText: rappresenta una porzione di testo
● ReactFragment
○ ReactNode[ ]: è un array di nodi del Virtual DOM](https://image.slidesharecdn.com/slides-160714212556/85/Sviluppo-Web-con-React-e-Delphi-Seminario-Delphi-Day-2016-Piacenza-39-320.jpg)
![Creare elementi
I parametri della funzione createElement()
ReactElement createElement(
string/ReactClass type,
[object props],
[children ...]
)](https://image.slidesharecdn.com/slides-160714212556/85/Sviluppo-Web-con-React-e-Delphi-Seminario-Delphi-Day-2016-Piacenza-40-320.jpg)
Sviluppo Web con React e Delphi - Seminario Delphi Day 2016, Piacenza
- 1. Sviluppo web ReactJS e ExtJS a confronto speaker: marco breveglieri
- 3. AGENDA ➔ Le applicazioni Web ➔ Il linguaggio JavaScript ➔ Introduzione alle SPA ➔ La libreria ReactJS ➔ Dietro le quinte di React ➔ Backend in Delphi
- 4. le applicazioni Web Soluzioni per applicazioni Web a confronto
- 6. WEB SERVER “FAT” APP Soluzioni basate su ❖ IntraWeb ❖ ASP.NET Web Forms sono applicazioni Web (Server) “Fat” e non sono più una buona idea.
- 7. WEB SERVER “FAT” APP PREGI ● Mascherano la piattaforma (HTTP) ● Facili per sviluppatori abituati al desktop ● Favoriscono lo sviluppo rapido (RAD) ● Sono ideali per la “prototipazione”
- 8. WEB SERVER “FAT” APP DIFETTI ● Mascherano la piattaforma (HTTP) ● Stato della pagina “ingombrante” ● Consumo banda, memoria e CPU server ● Scalabilità generale ridotta ● Separazione task designer/developer improbabile ● Unit/Integration Test ardui
- 9. Applicazioni Web moderne? Si basano su standard del Web ● HTML(5) ● CSS(3) ● JavaScript
- 11. Il linguaggio JavaScript Introduzione a JavaScript e al DOM
- 13. OGGI E’....
- 14. In evoluzione Il linguaggio JavaScript vive oggi una “seconda giovinezza”. ● Supporto esteso da parte dei browser ● Nuovi standard (es. ES6) in arrivo ● Output di linguaggi più evoluti come TypeScript, CoffeeScript e tanti altri
- 15. NUOVE API html5 ● Canvas / SVG ● WebGL ● File API ● Indexed DB ● Media API ● OFFline ● Web Sockets ● Web Workers ● Web Storage ● Geo-location API ● Fullscreen support ● ...e il sempre caro DOM
- 16. Il “DOM” Il DOM (Document Object Model) ● È un modello a oggetti ● È formato da una gerarchia di nodi ● Rappresenta gli elementi della pagina Web ● Fornisce funzionalità per modificare gli elementi, modificarli, eliminarli o crearne di nuovi
- 17. demo time
- 18. JQUERY: un passo in + JQuery è una libreria che ● Semplifica l’accesso al DOM ● Riutilizza le espressioni CSS ● Fornisce “feature” aggiuntive e uniformi ● Gestisce le incompatibilità tra i browser ...tuttavia, non è ancora abbastanza.
- 19. demo time
- 20. Introduzione alle “SPA” Single Page Application
- 21. SPA SPA (Single Page Application) ● Applicazione Web in una sola pagina ● Mima le caratteristiche delle app desktop ● Esperienza utente più fluida ● Non ricarica la pagina nel browser ● L’interfaccia utente si aggiorna dinamicamente a seguito di un’azione ● Trasferimento ottimizzato di dati e risorse
- 22. Per rendere l’idea <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Single Page Application</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div id="container"> <!-- Qui viene generata l’applicazione --> </div> <script src="framework.js"></script> </body> </html>
- 24. Let’s “REACT”!
- 25. ReactJS La libreria ReactJS di Facebook™
- 26. ReactJS ➔ Libreria JavaScript per le interfacce utente ➔ Creata da Facebook (anche per Instagram) ➔ Nel modello MVC gestisce solo la “View” ➔ Celebre per le sue elevate prestazioni ➔ Basato su “componenti”, proprietà e stato ➔ Approccio dichiarativo (*) (*) usando JSX https://facebook.github.io/react/
- 28. Facebook “Case Study” 15.000+ componenti!
- 29. Componenti ➔ Incapsulati ➔ Riusabili ➔ Componibili ➔ Facili da disegnare * (*) almeno in React
- 30. ReactJS vs... JQuery ● Programmazione imperativa ● Necessità di attribuire ID agli elementi ● Tendenza “event driven” ● Rischio concreto di “zuppa-code” AngularJS (ver. 1.x) ● Oscillante curva di apprendimento (ma framework completo) ● “Separation of Responsibility” (invece di “...of Concerns”) ● Proliferazione di “scope” e direttive
- 31. Editor e tool ● Notepad++ ● Sublime Text ● Atom.IO ● Brackets ● Visual Studio Code ● JetBrains WebStorm ● Visual Studio Professional ...con vari plugin
- 32. demo time
- 33. La sintassi “JSX” ➔ Facilita la scrittura di template HTML ➔ Sostituisce chiamate a funzioni React ➔ Richiede la presenza di un “compilatore” (detto “transpiler”) ➔ Definisce gli elementi del Virtual DOM * (*) ne parleremo a breve…
- 34. Proprietà e stato Proprietà ● Definiscono valori immutabili del componente ● Utili per inizializzazione ● Si leggono da this. props Stato ● Definisce valori dello stato attuale del componente ● Si modifica per aggiornare l’interfaccia ● Si leggono i valori da this.state
- 35. demo time
- 36. Dietro le quinte Il Virtual DOM… e oltre❗
- 37. I limiti del DOM ➔ Non è possibile modificare il codice ➔ E’ una “black box” fornita dal browser ➔ Non si può ottimizzare in prestazioni ➔ Non si può specializzare in base all’uso ➔ Impone uno stile “imperativo” di codifica ➔ Produce codice meno manutenibile ➔ Rappresenta un “collo di bottiglia”
- 38. Il “Virtual DOM” ➔ Rappresentazione virtuale della struttura della pagina in memoria ➔ Riproduce il DOM reale della pagina Web ➔ Viene usato da React per applicare le modifiche agli elementi della pagina ➔ Attraverso l’analisi delle differenze con il DOM reale, aggiorna la pagina… ...nel modo più veloce possibile! ⚡⚡⚡
- 39. Gli elementi del VDOM ● ReactNode rappresenta un singolo “nodo” del VDOM ○ ReactElement: rappresenta un elemento HTML ○ ReactText: rappresenta una porzione di testo ● ReactFragment ○ ReactNode[ ]: è un array di nodi del Virtual DOM
- 40. Creare elementi I parametri della funzione createElement() ReactElement createElement( string/ReactClass type, [object props], [children ...] )
- 41. demo time
- 42. Component lifecycle Le funzioni principali del ciclo di vita di un componente: ● render() ● getInitialState() ● componentWillMount() ● componentDidMount() ● componentWillUnmount() ...e altri meno utilizzati.
- 43. demo time
- 44. Assemblare il tutto Ricetta per combinare gli elementi visti sino ad ora: ● Creare la pagina di struttura della SPA ● Importare i framework preferiti (incluso React!) ● Creare script separati per i componenti ● Richiamare la funzione ReactDOM.render() Vediamo ulteriori esempi!
- 45. demo time
- 46. Backend Comunicare con il server
- 47. E Delphi? ➔ Ottimo per la creazione di un backend ➔ Diverse librerie disponibili per creare API ◆ DataSnap / EMS ◆ DelphiMVCFramework / MARS ◆ Indy Components ➔ Versatile nel collegamento a qualsiasi DB ➔ Si può invocare dall’applicazione React * (*) con la libreria che si preferisce per il colloquio con endpoint HTTP/REST
- 48. demo time
- 49. Altro? ➔ Integrazione con altri framework ◆ Flux, Redux, ... ➔ Altre implementazioni? ◆ React Native ➔ Possibilità ed estensioni? ◆ Rendering sul server (con NodeJS) ➔ Migliorare il codice? ◆ Uso del transpiler “Babel”, pre-compiling server
- 50. Q & A Dubbi, richieste, domande?
- 51. marco breveglieri developer www.compilaquindiva.com Delphi Succinctly: e-book di 100 pagine in lingua inglese, scaricabile gratuitamente da Syncfusion Inc.
- 52. marco breveglieri developer www.compilaquindiva.com Delphi Podcast - www.delphipodcast.com Il primo podcast italiano dedicato a Delphi.
- 53. marco breveglieri developer www.compilaquindiva.com @ComponentTales - https://twitter.com/ComponentTales Scopri cosa fanno i componenti quando chiudi l’IDE.
- 54. grazie a tutti!