SlideShare a Scribd company logo
1 of 11
Download to read offline
WebOrders
An Architectural Overview
Contenuti
● Obiettivi
● Overview
● Tecnologie usate
● Architettura
○ MVP pattern
○ EventBus
○ DataManager
○ Services and Facade pattern
● Analisi di usabilità
Obiettivi
Vincoli architetturali e funzionali guidano le
scelte tecnologiche.
Vogliamo:
● Multiplatform system
● Simplicity
● Effectiveness
● Extensibility
● Manteinability
● Testability
Tecnologie usate
● Google Web Toolkit come tecnologia lato
client
○ Puro Java compilato ed ottimizzato in JS
○ Asynchronous RPC
● Pattern MVP
○ Model-View-Presenter per disaccoppiare logica di
presentazione e view passiva
● EventBus
○ Molti componenti (presenter-view). EventBus per
comunicazione evitanto accoppiamento
Architettura
Presenter Presenter PresenterPresenter
View View View View
EventBus
DataManager Cache
Facade
Service A Service AService A
Client
Server
MVP Pattern
● Componenti come coppie
di View-Presenter
● View passiva, notifica solo
eventi al Presenter
● Disaccoppiamento
attraverso Dependency
Injection
● Creazione di
compartimenti modulari
assegnabili a team diversi
EventBus
● Publish/Subscribe pattern
● Meccanismo per
○ Passare di eventi
○ Registrarsi e ricevere eventi di interesse
● Basato su HandlerManager
● Diminuisce accoppiamento
● Facilita i test
DataManager
In moduli diversi racchiude le logiche di
● Calcolo funzionale centralizzato
● Caching
● Bootstrap dell'app
● Comunicazione con il server
Service and Facade pattern
● Molti servizi RPC asincroni a disposizione
della webapp attraverso DataManager
● Si utilizza GWT-RPC
● AsyncCallback creata e gestita dai presenter
● Tutti i service comunicano con il backend
attraverso unica Facade
Analisi di usabilità
● Molto tempo speso per accurata analisi di
usabilità
○ Che dispositivi usare? Tablet
○ Che direzione di schermo? ....
● Raccolta ordini simile alla raccolta cartacea
● Forte sfruttamento del pollice durante la
navigazione
○ Menu circolari
○ Smooth scrolling
○ Coerenza degli eventi touch con movimenti naturali
delle dita
Fine / Q&A

More Related Content

Similar to SFA: Web orders architectural overview

Cert03 70-486 developing asp.net mvc 4 web applications
Cert03   70-486 developing asp.net mvc 4 web applicationsCert03   70-486 developing asp.net mvc 4 web applications
Cert03 70-486 developing asp.net mvc 4 web applicationsDotNetCampus
 
Un backend per tutte le stagioni con Spring
Un backend per tutte le stagioni con SpringUn backend per tutte le stagioni con Spring
Un backend per tutte le stagioni con SpringMarcello Teodori
 
Designing with microservices - Daniele Mondello
Designing with microservices - Daniele MondelloDesigning with microservices - Daniele Mondello
Designing with microservices - Daniele MondelloDaniele Mondello
 
e-SUAP - General software architecture (Italiano)
e-SUAP - General software architecture (Italiano)e-SUAP - General software architecture (Italiano)
e-SUAP - General software architecture (Italiano)Sabino Labarile
 
Application insights - Meet{cast} - Meetup #AperiTech dotNET{podcast} - Marzo...
Application insights - Meet{cast} - Meetup #AperiTech dotNET{podcast} - Marzo...Application insights - Meet{cast} - Meetup #AperiTech dotNET{podcast} - Marzo...
Application insights - Meet{cast} - Meetup #AperiTech dotNET{podcast} - Marzo...Roberto Albano
 
Open Day June 17th Creare componenti AngularJS riutilizzabili tra applicazioni
Open Day June 17th Creare componenti AngularJS riutilizzabili tra applicazioniOpen Day June 17th Creare componenti AngularJS riutilizzabili tra applicazioni
Open Day June 17th Creare componenti AngularJS riutilizzabili tra applicazioniVendini-Italy
 
TYPESCRIPT, ANGULAR E BOOTSTRAP ASSIEME PER APPLICAZIONI REAL WORLD
TYPESCRIPT, ANGULAR E BOOTSTRAP ASSIEME PER APPLICAZIONI REAL WORLDTYPESCRIPT, ANGULAR E BOOTSTRAP ASSIEME PER APPLICAZIONI REAL WORLD
TYPESCRIPT, ANGULAR E BOOTSTRAP ASSIEME PER APPLICAZIONI REAL WORLDDotNetCampus
 
Slide typescript - net campus
Slide typescript - net campusSlide typescript - net campus
Slide typescript - net campusDotNetCampus
 
Digital 1nn0vation saturday pn 2019 - Azure Machine Learning Service
Digital 1nn0vation saturday pn 2019 - Azure Machine Learning ServiceDigital 1nn0vation saturday pn 2019 - Azure Machine Learning Service
Digital 1nn0vation saturday pn 2019 - Azure Machine Learning ServiceMarco Zamana
 
Gae piattaforma su cloud
Gae piattaforma su cloudGae piattaforma su cloud
Gae piattaforma su cloudmasci
 
Cloud Journey e IT Modernization: Da app monolitica a microservizi. vFunction...
Cloud Journey e IT Modernization: Da app monolitica a microservizi. vFunction...Cloud Journey e IT Modernization: Da app monolitica a microservizi. vFunction...
Cloud Journey e IT Modernization: Da app monolitica a microservizi. vFunction...Emerasoft, solutions to collaborate
 
Cloud Journey e IT Modernization: Da app monolitica a microservizi. vFunction...
Cloud Journey e IT Modernization: Da app monolitica a microservizi. vFunction...Cloud Journey e IT Modernization: Da app monolitica a microservizi. vFunction...
Cloud Journey e IT Modernization: Da app monolitica a microservizi. vFunction...Profesia Srl, Lynx Group
 
Tesi Discussione
Tesi DiscussioneTesi Discussione
Tesi DiscussioneYeser Rema
 
Slide typescript - xe dotnet - Codemotion Rome 2015
Slide typescript - xe dotnet - Codemotion Rome 2015Slide typescript - xe dotnet - Codemotion Rome 2015
Slide typescript - xe dotnet - Codemotion Rome 2015Codemotion
 
WSO2 ITALIA SMART TALK #5 - APIFICATION: OPPORTUNITÀ DELLE ORGANIZZAZIONI MOD...
WSO2 ITALIA SMART TALK #5 - APIFICATION: OPPORTUNITÀ DELLE ORGANIZZAZIONI MOD...WSO2 ITALIA SMART TALK #5 - APIFICATION: OPPORTUNITÀ DELLE ORGANIZZAZIONI MOD...
WSO2 ITALIA SMART TALK #5 - APIFICATION: OPPORTUNITÀ DELLE ORGANIZZAZIONI MOD...Profesia Srl, Lynx Group
 

Similar to SFA: Web orders architectural overview (20)

Corso 3 giorni Angular 2+
Corso 3 giorni Angular 2+Corso 3 giorni Angular 2+
Corso 3 giorni Angular 2+
 
Cert03 70-486 developing asp.net mvc 4 web applications
Cert03   70-486 developing asp.net mvc 4 web applicationsCert03   70-486 developing asp.net mvc 4 web applications
Cert03 70-486 developing asp.net mvc 4 web applications
 
Un backend per tutte le stagioni con Spring
Un backend per tutte le stagioni con SpringUn backend per tutte le stagioni con Spring
Un backend per tutte le stagioni con Spring
 
Designing with microservices - Daniele Mondello
Designing with microservices - Daniele MondelloDesigning with microservices - Daniele Mondello
Designing with microservices - Daniele Mondello
 
e-SUAP - General software architecture (Italiano)
e-SUAP - General software architecture (Italiano)e-SUAP - General software architecture (Italiano)
e-SUAP - General software architecture (Italiano)
 
Presentazione tirocinio
Presentazione tirocinio Presentazione tirocinio
Presentazione tirocinio
 
Application insights - Meet{cast} - Meetup #AperiTech dotNET{podcast} - Marzo...
Application insights - Meet{cast} - Meetup #AperiTech dotNET{podcast} - Marzo...Application insights - Meet{cast} - Meetup #AperiTech dotNET{podcast} - Marzo...
Application insights - Meet{cast} - Meetup #AperiTech dotNET{podcast} - Marzo...
 
Open Day June 17th Creare componenti AngularJS riutilizzabili tra applicazioni
Open Day June 17th Creare componenti AngularJS riutilizzabili tra applicazioniOpen Day June 17th Creare componenti AngularJS riutilizzabili tra applicazioni
Open Day June 17th Creare componenti AngularJS riutilizzabili tra applicazioni
 
Tesi8
Tesi8Tesi8
Tesi8
 
Alfresco su misura
Alfresco su misuraAlfresco su misura
Alfresco su misura
 
TYPESCRIPT, ANGULAR E BOOTSTRAP ASSIEME PER APPLICAZIONI REAL WORLD
TYPESCRIPT, ANGULAR E BOOTSTRAP ASSIEME PER APPLICAZIONI REAL WORLDTYPESCRIPT, ANGULAR E BOOTSTRAP ASSIEME PER APPLICAZIONI REAL WORLD
TYPESCRIPT, ANGULAR E BOOTSTRAP ASSIEME PER APPLICAZIONI REAL WORLD
 
Slide typescript - net campus
Slide typescript - net campusSlide typescript - net campus
Slide typescript - net campus
 
Digital 1nn0vation saturday pn 2019 - Azure Machine Learning Service
Digital 1nn0vation saturday pn 2019 - Azure Machine Learning ServiceDigital 1nn0vation saturday pn 2019 - Azure Machine Learning Service
Digital 1nn0vation saturday pn 2019 - Azure Machine Learning Service
 
Gae piattaforma su cloud
Gae piattaforma su cloudGae piattaforma su cloud
Gae piattaforma su cloud
 
Cloud Journey e IT Modernization: Da app monolitica a microservizi. vFunction...
Cloud Journey e IT Modernization: Da app monolitica a microservizi. vFunction...Cloud Journey e IT Modernization: Da app monolitica a microservizi. vFunction...
Cloud Journey e IT Modernization: Da app monolitica a microservizi. vFunction...
 
Cloud Journey e IT Modernization: Da app monolitica a microservizi. vFunction...
Cloud Journey e IT Modernization: Da app monolitica a microservizi. vFunction...Cloud Journey e IT Modernization: Da app monolitica a microservizi. vFunction...
Cloud Journey e IT Modernization: Da app monolitica a microservizi. vFunction...
 
Tesi Discussione
Tesi DiscussioneTesi Discussione
Tesi Discussione
 
Slide typescript - xe dotnet - Codemotion Rome 2015
Slide typescript - xe dotnet - Codemotion Rome 2015Slide typescript - xe dotnet - Codemotion Rome 2015
Slide typescript - xe dotnet - Codemotion Rome 2015
 
WSO2 Workshop: Customer case Aci Global
WSO2 Workshop: Customer case Aci GlobalWSO2 Workshop: Customer case Aci Global
WSO2 Workshop: Customer case Aci Global
 
WSO2 ITALIA SMART TALK #5 - APIFICATION: OPPORTUNITÀ DELLE ORGANIZZAZIONI MOD...
WSO2 ITALIA SMART TALK #5 - APIFICATION: OPPORTUNITÀ DELLE ORGANIZZAZIONI MOD...WSO2 ITALIA SMART TALK #5 - APIFICATION: OPPORTUNITÀ DELLE ORGANIZZAZIONI MOD...
WSO2 ITALIA SMART TALK #5 - APIFICATION: OPPORTUNITÀ DELLE ORGANIZZAZIONI MOD...
 

SFA: Web orders architectural overview

  • 2. Contenuti ● Obiettivi ● Overview ● Tecnologie usate ● Architettura ○ MVP pattern ○ EventBus ○ DataManager ○ Services and Facade pattern ● Analisi di usabilità
  • 3. Obiettivi Vincoli architetturali e funzionali guidano le scelte tecnologiche. Vogliamo: ● Multiplatform system ● Simplicity ● Effectiveness ● Extensibility ● Manteinability ● Testability
  • 4. Tecnologie usate ● Google Web Toolkit come tecnologia lato client ○ Puro Java compilato ed ottimizzato in JS ○ Asynchronous RPC ● Pattern MVP ○ Model-View-Presenter per disaccoppiare logica di presentazione e view passiva ● EventBus ○ Molti componenti (presenter-view). EventBus per comunicazione evitanto accoppiamento
  • 5. Architettura Presenter Presenter PresenterPresenter View View View View EventBus DataManager Cache Facade Service A Service AService A Client Server
  • 6. MVP Pattern ● Componenti come coppie di View-Presenter ● View passiva, notifica solo eventi al Presenter ● Disaccoppiamento attraverso Dependency Injection ● Creazione di compartimenti modulari assegnabili a team diversi
  • 7. EventBus ● Publish/Subscribe pattern ● Meccanismo per ○ Passare di eventi ○ Registrarsi e ricevere eventi di interesse ● Basato su HandlerManager ● Diminuisce accoppiamento ● Facilita i test
  • 8. DataManager In moduli diversi racchiude le logiche di ● Calcolo funzionale centralizzato ● Caching ● Bootstrap dell'app ● Comunicazione con il server
  • 9. Service and Facade pattern ● Molti servizi RPC asincroni a disposizione della webapp attraverso DataManager ● Si utilizza GWT-RPC ● AsyncCallback creata e gestita dai presenter ● Tutti i service comunicano con il backend attraverso unica Facade
  • 10. Analisi di usabilità ● Molto tempo speso per accurata analisi di usabilità ○ Che dispositivi usare? Tablet ○ Che direzione di schermo? .... ● Raccolta ordini simile alla raccolta cartacea ● Forte sfruttamento del pollice durante la navigazione ○ Menu circolari ○ Smooth scrolling ○ Coerenza degli eventi touch con movimenti naturali delle dita