mvc e di spring e angular js

DEPENDENCY INJECTION E MVC: SPRING E ANGULARJSINGEGNERIA DEL SOFTWAREUniversità degli Studi di Padova

Dipartimento di Matematica

Corso di Laurea in Informatica, A.A. 2013 – 2014

rcardin@math.unipd.it

Ingegneria del software mod. B

INTRODUZIONE

Un po’ di storia …

Riccardo Cardin

1996 1998 2006

Java beans• Riusabilità e composizionalità• Troppo semplici Transazionalità? Sicurezza?

EJB 1.0• Aggiunge ai beans componenti server-side• Servizi accedibili da remoto• Tecnologia molto complessa

EJB 3.0• Implementazione semplificata• Deployment semplificato (annotazioni)

INTRODUZIONE

Spring

Framework opensource creato per ridurre la complessità dello sviluppo di applicazioni enterprise

Non è limitato alla componente server

Utilizza componenti semplici (bean)

Permette di ridurre l’accoppiamento

Riccardo Cardin

“Spring is a lightweight inversion of control and aspect oriented container framework”

INTRODUZIONE

Spring

Lightweight Non è intrusivo, gli oggetti sviluppati non dipendono da

classi del framework

Framework/Container Gestisce il ciclo di vita e la configurazione degli oggetti

dell’applicazione. La configurazione utilizza XML o annotazioni. Lo sviluppatore può concentrarsi sulla logica di business

IoC e DI Il container si fa carico di “iniettare” le dipendenze degli

oggetti a runtime

Riccardo Cardin

SPRING: CONCETTI

Plan Old Java Object (POJO)

Inversion of Control (principio di Hollywood) Il ciclo di vita degli oggetti è gestito da una

entità esterna (container)

Dependency Injection Le dipendenze di un oggetto vengono “iniettate”

nell’istanza automaticamente e a runtime Utilizzo costruttori e metodi setter

Riccardo Cardin

"We wondered why people were so against using regular objects in their systems and concluded that it was because simple objects lacked a fancy name. So we gave them one, and it's caught on very nicely."

SPRING: CONCETTI

Dependency Injection pattern

Separa il comportamento di una componente dalla risoluzione delle sue dipendenze

Minimizza il livello di accoppiamento

La componente dichiara unicamente le sue dipendenze

Un framework DI risolve a runtime le dipendenze dichiarate Utilizzo costruttori e metodi setter dei POJO Perdita dell’incapsulamento

Riccardo Cardin

DEPENDENCY INJECTION

Poor initialization

Riccardo Cardin

… migliorando un po’ …

Classic inizialization Utilizzo del design pattern factory

Riccardo Cardin

Spring injection Costruzione e risoluzione delle dipendenze

Riccardo Cardin

...e si vuole cambiare l’implementazione di

SPRING: ARCHITETTURA

Architettura del framework

Riccardo Cardin

SPRING: ARCHITETTURA

Core container Implementa l’IoC attraverso la BeanFactory

Wiring bean

Application context Fornisce servizi come i18n, JNDI, EJB integration

Modulo JDBC e DAO Gestione degli accessi al datasource Evita la gestione delle connessioni

Modulo MVC Separa la logica di controllo da quella di business

Riccardo Cardin

SPRING: COMPONENTI

Configurazione XML org.springframework.beans.factory.BeanFactory

Implementazione del pattern factory, costruisce e risolve le dipendenze

org.springframework.context.ApplicationContext Costruita sulla bean factory, fornisce ulteriori

funzionalità AOP, transazionalità, ...

Riccardo Cardin

ApplicationContext ctx = new ClassPathXmlApplicationContext( "com/springinaction/springidol/filename.xml");

MyBean bean = (MyBean) ctx.getBean(“beanid”);

SPRING: COMPONENTI

Configurazione XML Dependency injection attraverso proprietà

Utilizzo metodi setter e getter

Riccardo Cardin

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE beans PUBLIC "-//SPRING//DTD BEAN 2.0//EN""http://www.springframework.org/dtd/spring-beans-2.0.dtd"></beans> <bean id="A" class="nomeClasseA" >

SPRING: COMPONENTI

Configurazione XML Dependency injection attraverso costruttori

DI attraverso factory methods, init e destroy methods...

Riccardo Cardin

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE beans PUBLIC "-//SPRING//DTD BEAN 2.0//EN""http://www.springframework.org/dtd/spring-beans-2.0.dtd"></beans> <bean id="A" class="nomeClasseA" >

<constructor-arg value="15"/> <constructor-arg ref="B"/> </bean > <bean id="B" class="nomeClasseB" /></beans>

SPRING: COMPONENTI

Wiring utilizzando annotazioni Permette una gestione migliore della

configurazione in progetti grandi Introduce una dipendenza da framework esterni

@Autowired @Inject, annotazione JSR-330 @Resource, annotazione JSR-250

Riccardo Cardin

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE beans PUBLIC "-//SPRING//DTD BEAN 2.0//EN""http://www.springframework.org/dtd/spring-beans-2.0.dtd">

</beans> <context:annotation-config/> <context:component-scan base-package="org.example"/> [...]

SPRING: COMPONENTI

Wiring utilizzando annotazioni @Inject/@Autowired

Ricerca per tipo il bean della proprietà Si utilizza su costruttori, proprietà, ... Il bean non deve essere ambiguo

Disambiguazione tramite @Named per l’ID

Autodiscovery @Component, @Controller, @Service, ...

Riccardo Cardin

@Injectprivate Instrument instrument;

@Inject@Named("guitar")private Instrument instrument2;

SPRING

Esempio Interfacce e dependency injection

Riccardo Cardin

SPRING: MVC

Componente per lo sviluppo di applicazione web

Model Layer della logica di business del sistema

View Layer di visualizzazione/presentazione dati

Utilizza la tecnologia JSP e Tag library Control

Layer che gestisce/controlla flussi e comunicazioni Dispatcher delle richieste (Front controller) Controller che implementano la logica applicativa

Integrazione con Spring IoC container Utilizzo del DI pattern

Riccardo Cardin

FRONT CONTROLLER PATTERN

Architettura

Riccardo Cardin

FRONT CONTROLLER PATTERN

Il controller è l’unico punto di accesso Gestisce le richieste in tutti gli aspetti

Riccardo Cardin

SPRING: MVC

Architettura e componenti

Riccardo Cardin

SPRING: MVC org.springframework.web.servlet.DispatcherServlet

Front controller del framework Spring Da configurare nel file web.xml

Configurata via XML (Web Application Context) <servlet-name>-servlet.xml

Riccardo Cardin

<servlet> <servlet-name>disp</servlet-name> <servlet-class> org.springframework.web.servlet.DispatcherServlet </servlet-class> <load-on-startup>1</load-on-startup></servlet><servlet-mapping> <servlet-name>disp</servlet-name> <url-pattern>/</url-pattern></servlet-mapping>

Default servlet, non preclude alcun formato

nella risposta, ma gestisce anche i contenuti statici.

SPRING: MVC Handler mappings

Associa la servlet (gli URL) con i controller BeanNameUrlHandlerMapping

SimpleUrlHandlerMapping

Riccardo Cardin

<bean id ="handlerMapping" class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping"> <property name="mappings"> <value> /ex/view*.htm=helpController /**/help.htm=helpController </value> </property></bean>

http://localhost:8080/ExampleSpring/listEmployee.htm

SPRING: MVC

Controller e annotazioni Racchiudono la logica dell’applicazione web DefaultAnnotationHandlerMapping

Mapping delle richieste utilizzando @RequestMapping Sfrutta l’autowiring e l’autodiscovering dei bean POJO, più semplice da verificare (i.e. Mockito)

Riccardo Cardin

<mvc:annotation-driven/> <context:component-scanbase- package="com.habuma.spitter.mvc"/> [...]</bean>

SPRING: MVC

Controller e annotazioni

Riccardo Cardin

@Controllerpublic ClassHomeController { private SpitterService spitterService;

@Inject public HomeController(SpitterServicespitterService) { this.spitterService = spitterService; }

@RequestMapping({"/","/home"}) public String showHomePage(Map<String,Object> model) { model.put("spittles",spitterService.getRecentSpittles( DEFAULT_SPITTLES_PER_PAGE)); return "home"; }}

Dichiarazione del Controller

Injection dell’applicazion logic

Dichiarazione URL gestiti

Modello ritornato alla view

Scelta della prossima view

SPRING: MVC

@RequestParam Permette il recupero dei parametri da una richiesta

org.springframework.ui.Model Mappa di stringhe – oggetti Convention over configuration (CoC) Da utilizzare con Controller annotati

Riccardo Cardin

@RequestMapping(value="/spittles",method=GET)public String listSpittlesForSpitter( @RequestParam("spitter") String username, Model model) { Spitterspitter=spitterService.getSpitter(username); model.addAttribute(spitter); model.addAttribute( spitterService.getSpittlesForSpitter(username)); return"spittles/list";}

SPRING: MVC

Componente view Scelte da un risolutore (resolver) secondo il

ModelAndView

XmlViewResolver Usa un file di configurazione xml per la risoluzione delle view

ResourceBundleViewResolver Usa un resource bundle (una serie di file con estensione .properties) per risolvere le view

UrlBasedViewResolver Esegue una risoluzione diretta del nome simbolico della view in una URL

InternalResourceViewResolver Il nome logico viene utilizzato direttamente come nome della view.

Riccardo Cardin

SPRING: MVC

Componente view

Riccardo Cardin

[...]<bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="prefix" value="/WEB-INF/jsp/" /> <property name="suffix" value=".jsp" /></bean>[...]

<bean class="org.springframework.web.servlet.view.XmlViewResolver"> <property name="location"> <value>/WEB-INF/spring-views.xml</value> </property> </bean>

InternalResourceViewResolver

XmlViewResolver

SPRING: PERSISTENZA

Fornisce supporto uniforme verso lo strato di persistenza

JDBC, ORM, … Versione particolare del template method pattern

Nessun metodo astratto Le firme dei metodi hanno come parametri interfacce

che vengono risolte a runtime

PreparedStatementCreator CallableStatementCreator RowCallbackHandler RowMapper ...

Riccardo Cardin

TEMPLATE METHOD

Struttura

Riccardo Cardin

Definisce le operazione astratte primitive. Definisce lo scheletro

dell’algoritmo

Implementa le operazioni primitive fornendo i passi

concreti all’algoritmo

SPRING: PERSISTENZA

Supporto JDBC org.springframework.jdbc.core.JdbcTemplate

Gestione trasparente delle connessioni Incapsulamento API JDBC (query, ResultSet, … ) Cattura le eccezioni JDBC e le trasforma in eccezioni

più comunicative

Permette di costruire DAO utilizzando IoC

Riccardo Cardin

public class JdbcCorporateEventDao implements CorporateEventDao {

private JdbcTemplate jdbcTemplate; public void setDataSource(DataSource dataSource) { this.jdbcTemplate = new JdbcTemplate(dataSource); }}

SPRING: PERSISTENZA

Supporto JDBC Accesso al JDBC layer in I/O

Riccardo Cardin

int countOfActorsNamedJoe = this.jdbcTemplate.queryForInt("select count(0) from t_actors where first_name = ?", new Object[]{"Joe"});

public class ActorRowMapper implements RowMapper { public Object mapRow(ResultSet rs, int rowNum) throws SQLException { Actor actor = new Actor(); actor.setFirstName(rs.getString("first_name")); actor.setSurname(rs.getString("surname")); return actor; }...Actor actor = (Actor) this.jdbcTemplate.queryForObject( "select first_name, surname from t_actor where id = ?", new Object[]{new Long(1212)}, new ActorRowMapper() );

Recupero primitivo

Recupero oggetti

STRUMENTI ORM

Definizione

Framework in grado di mappare proprietà di un oggetto con colonne di un DB Persistenza garantita attraverso gli oggetti

Offrono specifici linguaggi di interrogazione Garantiscono sofisticate funzionalità

Lazy loading Eager fetching Caching Cascading …

JPA, Java Persistence API

Riccardo Cardin

SPRING: PERSISTENZA

Hibernate Mappa una tabella su un oggetto

Riccardo Cardin

Studenti

ID: NUMBER

FIRST_NAME: VARCHAR

LAST_NAME: VARCHAR…

public class Studente { private Integer id; private String firstName; private String lastName; private Set courses; ... public String getFirstName() { return firstName; } public void setFirstName(String firstName) { this.firstName = firstName; } ...

SPRING: PERSISTENZA

Hibernate H8 Session Factory è il gestore delle connessioni

fra oggetti Java e il database Necessità di datasource … inietiamolo con Spring!

Riccardo Cardin

<beans> <bean id="myDataSource" class="org.apache.commons.dbcp.BasicDataSource" > <property name="driverClassName" value="org.gjt.mm.mysql.Driver"/> </bean> <bean id="mySessionFactory" class="org.springframework.orm.hibernate3.LocalSessionFactoryBean"> <property name="dataSource" ref="myDataSource"/> <property name="mappingResources"> <list> <value>hibernate.hbm.xml</value> </list> </property> ...</beans>

SPRING: PERSISTENZA

Hibernate org.springframework.orm.hibernate3.HibernateTemplate Fornisce l'accesso alla sessione di H8 Assicura che la session stessa sia appropriatamente aperta

e chiusa Fornisce le funzionalità standard di accesso ai dati

L’implementazione dell’interfaccia HibernateCallback permette l’interfacciamento Spring – H8

Riccardo Cardin

public Collection loadAziende(final String category) throws DataAccessException { HibernateTemplate ht = new HibernateTemplate(this.sessionFactory); return (Collection) ht.execute(new HibernateCallback() { public Object doInHibernate(Session session) throws HibernateException { Query query = session.createQuery("from spring-samples.Aziende aziende"); return query.list(); } });}

SPRING: PERSISTENZA

Hibernate È possibile configurare HibernateTemplate

direttamente con una session factory Non occorre più implementare HiberateCallback

Riccardo Cardin

public void updateStudent(Student student) { hibernateTemplate.update(student);}

public List findStudentsByLastName(String lastName) { return hibernateTemplate.find("from Student student " + "where student.lastName = ?", lastName);}

SPRING

Ci sarebbero ancora molti aspetti da trattare …

Gestione delle transazioni Aspect Oriented Programming (AOP) Remoting Spring Roo Spring Social Spring Web Service Spring.io ...

… ma non c’è più tempo!!!Riccardo Cardin

ANGULARJS

Javascript framework Client-side

Model-View-Whatever MVC per alcuni aspetti (controller)… …MVVM per altri (two-way data binding)

Utilizza HTML come linguaggio di templating Non richiede operazioni di DOM refresh

Controlla attivamente le azioni utente, eventi del browser

Dependence injection

Fornisce ottimi strumenti di testRiccardo Cardin

ANGULARJS

Model – View – Whatever

Riccardo Cardin

Views Model

Controllers

$scope

(ModelView)

ServicesTemplates

view controller - modelview model

Espone i metodi dell’application logic e realizza il two-way data binding

Realizza le viste utilizzando le proiezioni del modello

Modello dati e servizi di business logic

«whatever works for you»

ANGULARJS

Viste e templating Approccio dichiarativo: HTML Direttive

Widget, aumentano le caratteristiche del DOM Markup {{ }}

Effettua il binding agli elementi del view-model Solitamente contenuta in una sola pagina

Riduce il dialogo con il server e non richiede refresh

Riccardo Cardin

<html ng-app> <body ng-controller="MyController"> <input ng-model="foo" value="bar"> <button ng-click="changeFoo()">{{buttonText}}</button> <script src="angular.js"> </body></html>

Le direttive vengono

compilate

index.html

ANGULARJS

One-way data binding …not the right way…

Riccardo Cardin

Il merge tra modello e template avviene all’atto di creazione della vista

Modifiche al modello richiedono un aggiornamento esplicito e custom della vista

ANGULARJS

Two-way data binding …the Angular way!

Riccardo Cardin

Il template è compilato in una live view

La vista è una proiezione del modello (Model-View ViewModel)

ANGULARJS

Oggetto $scope Collante tra controller e le viste

Contesto di esecuzione per espressioni Alcune direttive creano uno scope $rootScope

Gerarchia simile a quella definita dal DOM

Browser event loop $watch: permette alle direttive di comprendere quando

il view-model cambia $apply: permette alle direttive di modificare il view-

model eseguendo funzioni

Riccardo Cardin

ANGULARJS

Browser event loop

Riccardo Cardin

ANGULARJS

Controller ng-controller Inizializza e aggiunge funzioni all’oggetto $scope

Riccardo Cardin

var myApp = angular.module('spicyApp2', []); myApp.controller('SpicyCtrl', ['$scope', function($scope){ $scope.customSpice = "wasabi"; $scope.spice = 'very'; // Functions $scope.spicy = function(spice){ $scope.spice = spice; };}]);

<div ng-app="spicyApp2" ng-controller="SpicyCtrl"> <input ng-model="customSpice"> <button ng-click="spicy('chili')">Chili</button> <button ng-click="spicy(customSpice)">Custom spice</button> <p>The food is {{spice}} spicy!</p></div>

Aggiunta variabili e funzioni al view-

ANGULARJS

Controller Contiene l’application logic di una singola vista

Non ha riferimenti diretti alla vista Facilita la fasee di testing

Non contiene business logic Per questo si usano i servizi: $http, $resource, ...

Dependence injection Non deve effettuare manipolizazione del DOM

Non è un presenter! Non deve occuparsi dell’input formatting

Usare i form controls Non deve occuparsi dell’output filtering

Usare i filters

Riccardo Cardin

ANGULARJS

Servizi Racchiudono la business logic

Richiamati dai Controller

Riccardo Cardin

angular.module('finance2', []) .factory('currencyConverter', function() { var currencies = ['USD', 'EUR', 'CNY'], usdToForeignRates = { USD: 1, EUR: 0.74, CNY: 6.09 }; function convert(amount, inCurr, outCurr) { return amount * usdToForeignRates[outCurr] * 1 / usdToForeignRates[inCurr]; }

return { currencies: currencies, convert: convert }; });

private

public

ANGULARJS

Angular services Forniscono utilità comuni alle applicazioni $http

Permette di comunicare con servizi HTTP XMLHttpRequest o JSONP

Utilizza Promises ($q) reactive programming

Gestione history ($location), logging ($log), ...

Riccardo Cardin

$http({method: 'GET', url: '/someUrl'}). success(function(data, status, headers, config) { // this callback will be called asynchronously // when the response is available }). error(function(data, status, headers, config) { // called asynchronously if an error occurs // or server returns response with an error status. });

promise

ANGULARJS

Dependency Injection $provide: risolve le dipendenze fra le

componenti Viene invocato direttamente da Angular al bootstrap

Riccardo Cardin

// Provide the wiring information in a moduleangular.module('myModule', []). // Teach the injector how to build a 'greeter' // Notice that greeter itself is dependent on '$window' factory('greeter', function($window) { // This is a factory function, and is responsible for // creating the 'greet' service. return { greet: function(text) { $window.alert(text); } }; });// Request any dependency from the $injectorangular.injector(['myModule', 'ng']).get('greeter');

"Ricetta" di come costruire greeter

Ritorna il servizio $provide

ANGULARJS

Dependency Injection

Riccardo Cardin

ANGULARJS

Dependency Injection Factory methods: costruiscono le componenti

Utilizzano recipe (ricette)

Riccardo Cardin

angular.module('myModule', []). config(['depProvider', function(depProvider){ //... }]). factory('serviceId', ['depService', function(depService) { //... }]). directive('directiveName', ['depService', function(depService) { //... }]). filter('filterName', ['depService', function(depService) { //... }]). run(['depService', function(depService) { //... }]);

RIFERIMENTI Spring Source, pagina ufficiale del progetto

http://www.springsource.org/ Spring in Action (3° edition), Manning Publications Spring tutorial

http://www.roseindia.net/spring/index.shtml Mastering Web Application Development with

AngularJS, Packt Publishing AngularJS databing http://

docs.angularjs.org/guide/databinding AngularJS controller http://

docs.angularjs.org/guide/controller Inversion of Control Containers and the

Dependency Injection pattern http://martinfowler.com/articles/injection.html

Riccardo Cardin

mvc e di spring e angular js

Software

understanding angular js

angular js - introduction

angular js tutorial - edutubebd.com · include angularjs...

angular js, super-heroic javascript mvw … js with mvc...

angular js workshop

angular js quickstart

angular js introduction

angular js 2

angular js routing

angular js. contents about angular js hassle free angular js...

angular js learning

angular js meetup

· laravel, mysql, redis, angular js, node js, amazon web...

angular js course content - amazon s3 - s3-ap · angular js...

#speakgeek - angular js

knockout js with mvc

hipster js: angular & firebase (tri-js meetup)

angular js in60minutesish_danwahlin_may2013

angular js security

angular seminar-js