�ݺ�ߣ

Sviluppo web
ReactJS e ExtJS a confronto
speaker: marco breveglieri

marco
breveglieri
developer
www.compilaquindiva.com

AGENDA
➔ Le applicazioni Web
➔ Il linguaggio JavaScript
➔ Introduzione alle SPA
➔ La libreria ReactJS
➔ Dietro le quinte di React
➔ Backend in Delphi

le applicazioni
Web
Soluzioni per applicazioni Web a
confronto

WEB SERVER “FAT” APP
Soluzioni basate su
❖ IntraWeb
❖ ASP.NET Web Forms
sono applicazioni Web (Server) “Fat”
e non sono più una buona idea.

PREGI
● Mascherano la piattaforma (HTTP)
● Facili per sviluppatori abituati al desktop
● Favoriscono lo sviluppo rapido (RAD)
● Sono ideali per la “prototipazione”

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

Applicazioni Web
moderne?
Si basano su standard del Web
● HTML(5)
● CSS(3)
● JavaScript

Linguaggi standard:
sono difficili?

Il linguaggio
JavaScript
Introduzione a JavaScript e al DOM

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

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

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

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.

Introduzione
alle “SPA”
Single Page Application

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

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">

</div>
<script src=/marcobreveglieri/sviluppo-web-con-react-e-delphi-seminario-delphi-day-2016-piacenza/"framework.js"></script>
</body>
</html>

ReactJS
La libreria ReactJS di Facebook™

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/

Facebook “Case Study”
15.000+ componenti!

Componenti
➔ Incapsulati
➔ Riusabili
➔ Componibili
➔ Facili da disegnare *
(*) almeno in React

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

Editor e tool
● Notepad++
● Sublime Text
● Atom.IO
● Brackets
● Visual Studio Code
● JetBrains
WebStorm
● Visual Studio
Professional
...con vari plugin

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…

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

Dietro le
quinte
Il Virtual DOM… e oltre❗

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”

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! ⚡⚡⚡

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

Creare elementi
I parametri della funzione createElement()
ReactElement createElement(
string/ReactClass type,
[object props],
[children ...]
)

Component lifecycle
Le funzioni principali del ciclo di vita di un componente:
● render()
● getInitialState()
● componentWillMount()
● componentDidMount()
● componentWillUnmount()
...e altri meno utilizzati.

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!

Backend
Comunicare con il server

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

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

Q & A
Dubbi, richieste, domande?

marco
breveglieri
developer
Delphi Succinctly: e-book di 100 pagine in lingua
inglese, scaricabile gratuitamente da Syncfusion Inc.

marco
breveglieri
developer
Delphi Podcast - www.delphipodcast.com
Il primo podcast italiano dedicato a Delphi.

marco
breveglieri
developer
@ComponentTales - https://twitter.com/ComponentTales
Scopri cosa fanno i componenti quando chiudi l’IDE.

�ݺ�ߣ

Sviluppo Web con React e Delphi - Seminario Delphi Day 2016, Piacenza

Recommended

More Related Content

What's hot (20)

Similar to Sviluppo Web con React e Delphi - Seminario Delphi Day 2016, Piacenza (20)

More from Marco Breveglieri (7)

Sviluppo Web con React e Delphi - Seminario Delphi Day 2016, Piacenza