Mvc e di spring e angular js

1,221 views

Published on

A very introductive presentation about how Model-View-Controller pattern (MVC) and Dependence Injection (DI) are implemented in some popular frameworks, such as Spring and Angular JS.

The presentation is took from the Software Engineering course I run in the bachelor-level informatics curriculum at the University of Padova.

Published in: Software

Mvc e di spring e angular js

  1. 1. DEPENDENCY INJECTION E MVC: SPRING E ANGULARJS INGEGNERIA DEL SOFTWARE Università degli Studi di Padova Dipartimento di Matematica Corso di Laurea in Informatica, A.A. 2013 – 2014 rcardin@math.unipd.it
  2. 2. Ingegneria del software mod. B INTRODUZIONE  Un po’ di storia … 2 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)
  3. 3. Ingegneria del software mod. B 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 3 Riccardo Cardin “Spring is a lightweight inversion of control and aspect oriented container framework”
  4. 4. Ingegneria del software mod. B 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 4 Riccardo Cardin
  5. 5. Ingegneria del software mod. B 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 5 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."
  6. 6. Ingegneria del software mod. B 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 6 Riccardo Cardin
  7. 7. Ingegneria del software mod. B DEPENDENCY INJECTION  Poor initialization 7 Riccardo Cardin … migliorando un po’ …
  8. 8. Ingegneria del software mod. B DEPENDENCY INJECTION  Classic inizialization  Utilizzo del design pattern factory 8 Riccardo Cardin
  9. 9. Ingegneria del software mod. B DEPENDENCY INJECTION  Spring injection  Costruzione e risoluzione delle dipendenze 9 Riccardo Cardin ...e si vuole cambiare l’implementazione di B...
  10. 10. Ingegneria del software mod. B SPRING: ARCHITETTURA  Architettura del framework 10 Riccardo Cardin
  11. 11. Ingegneria del software mod. B 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 11 Riccardo Cardin
  12. 12. Ingegneria del software mod. B 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à, ... 12 Riccardo Cardin ApplicationContext ctx = new ClassPathXmlApplicationContext( "com/springinaction/springidol/filename.xml"); […] MyBean bean = (MyBean) ctx.getBean(“beanid”);
  13. 13. Ingegneria del software mod. B SPRING: COMPONENTI  Configurazione XML  Dependency injection attraverso proprietà  Utilizzo metodi setter e getter 13 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" > <property name="nome1" ref="B"/> <property name="nome2" value="una stringa"/> <property name="nome3" value="37"/> </bean > <bean id="B" class="nomeClasseB" /> </beans>
  14. 14. Ingegneria del software mod. B SPRING: COMPONENTI  Configurazione XML  Dependency injection attraverso costruttori  DI attraverso factory methods, init e destroy methods... 14 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>
  15. 15. Ingegneria del software mod. B 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 15 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"/> [...]
  16. 16. Ingegneria del software mod. B 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, ... 16 Riccardo Cardin @Inject private Instrument instrument; @Inject @Named("guitar") private Instrument instrument2;
  17. 17. Ingegneria del software mod. B SPRING  Esempio  Interfacce e dependency injection 17 Riccardo Cardin
  18. 18. Ingegneria del software mod. B 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 18 Riccardo Cardin
  19. 19. Ingegneria del software mod. B FRONT CONTROLLER PATTERN  Architettura 19 Riccardo Cardin
  20. 20. Ingegneria del software mod. B FRONT CONTROLLER PATTERN  Il controller è l’unico punto di accesso  Gestisce le richieste in tutti gli aspetti 20 Riccardo Cardin
  21. 21. Ingegneria del software mod. B SPRING: MVC  Architettura e componenti 21 Riccardo Cardin
  22. 22. Ingegneria del software mod. B 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 22 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.
  23. 23. Ingegneria del software mod. B SPRING: MVC  Handler mappings  Associa la servlet (gli URL) con i controller  BeanNameUrlHandlerMapping  SimpleUrlHandlerMapping 23 Riccardo Cardin <beans> <bean id="beanNameUrlMapping" class="org.springframework.web.servlet.handler.BeanNameUrlHandlerMapping" /> <bean name="/listEmployee.htm" class="controllers.ListEmployeeController"> …. </bean> <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/list Employee.htm
  24. 24. Ingegneria del software mod. B 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) 24 Riccardo Cardin <beans> <bean id="defaultHandlerMapping" class="org.springframework.web.portlet.mvc.annotation. DefaultAnnotationHandlerMapping" /> <mvc:annotation-driven/> <context:component-scanbase- package="com.habuma.spitter.mvc"/> [...] </bean>
  25. 25. Ingegneria del software mod. B SPRING: MVC  Controller e annotazioni 25 Riccardo Cardin @Controller public 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
  26. 26. Ingegneria del software mod. B 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 26 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"; }
  27. 27. Ingegneria del software mod. B 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. 27 Riccardo Cardin
  28. 28. Ingegneria del software mod. B SPRING: MVC  Componente view 28 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> <beans xmlns=“…”> <bean id="WelcomePage“ class="org.springframework.web.servlet.view.JstlView"> <property name="url" value="/WEB-INF/pages/WelcomePage.jsp" /> </bean> </beans> InternalResourceViewResolver XmlViewResolver
  29. 29. Ingegneria del software mod. B 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  ... 29 Riccardo Cardin
  30. 30. Ingegneria del software mod. B TEMPLATE METHOD  Struttura 30 Riccardo Cardin Definisce le operazione astratte primitive. Definisce lo scheletro dell’algoritmo Implementa le operazioni primitive fornendo i passi concreti all’algoritmo
  31. 31. Ingegneria del software mod. B 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 31 Riccardo Cardin public class JdbcCorporateEventDao implements CorporateEventDao { private JdbcTemplate jdbcTemplate; public void setDataSource(DataSource dataSource) { this.jdbcTemplate = new JdbcTemplate(dataSource); } }
  32. 32. Ingegneria del software mod. B SPRING: PERSISTENZA  Supporto JDBC  Accesso al JDBC layer in I/O 32 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
  33. 33. Ingegneria del software mod. B 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 33 Riccardo Cardin
  34. 34. Ingegneria del software mod. B SPRING: PERSISTENZA  Hibernate  Mappa una tabella su un oggetto 34 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; } ... H8
  35. 35. Ingegneria del software mod. B SPRING: PERSISTENZA  Hibernate  H8 Session Factory è il gestore delle connessioni fra oggetti Java e il database  Necessità di datasource … inietiamolo con Spring! 35 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>
  36. 36. Ingegneria del software mod. B 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 36 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(); } }); }
  37. 37. Ingegneria del software mod. B SPRING: PERSISTENZA  Hibernate  È possibile configurare HibernateTemplate direttamente con una session factory  Non occorre più implementare HiberateCallback 37 Riccardo Cardin <bean id="hibernateTemplate“ class="org.springframework.orm.hibernate3.HibernateTemplate"> <property name="sessionFactory"> <ref bean="sessionFactory"/> </property> </bean> public void updateStudent(Student student) { hibernateTemplate.update(student); } public List findStudentsByLastName(String lastName) { return hibernateTemplate.find("from Student student " + "where student.lastName = ?", lastName); }
  38. 38. Ingegneria del software mod. B 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!!! 38 Riccardo Cardin
  39. 39. Ingegneria del software mod. B 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 test 39 Riccardo Cardin
  40. 40. Ingegneria del software mod. B ANGULARJS  Model – View – Whatever 40 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»
  41. 41. Ingegneria del software mod. B 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 41 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
  42. 42. Ingegneria del software mod. B ANGULARJS  One-way data binding  …not the right way… 42 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
  43. 43. Ingegneria del software mod. B ANGULARJS  Two-way data binding  …the Angular way! 43 Riccardo Cardin Il template è compilato in una live view La vista è una proiezione del modello (Model-View ViewModel)
  44. 44. Ingegneria del software mod. B 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 44 Riccardo Cardin
  45. 45. Ingegneria del software mod. B ANGULARJS  Browser event loop 45 Riccardo Cardin
  46. 46. Ingegneria del software mod. B ANGULARJS  Controller  ng-controller  Inizializza e aggiunge funzioni all’oggetto $scope 46 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> view Aggiunta variabili e funzioni al view- model
  47. 47. Ingegneria del software mod. B 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 47 Riccardo Cardin
  48. 48. Ingegneria del software mod. B ANGULARJS  Servizi  Racchiudono la business logic  Richiamati dai Controller 48 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 }; }); privatepublic
  49. 49. Ingegneria del software mod. B 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), ... 49 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
  50. 50. Ingegneria del software mod. B ANGULARJS  Dependency Injection  $provide: risolve le dipendenze fra le componenti  Viene invocato direttamente da Angular al bootstrap 50 Riccardo Cardin // Provide the wiring information in a module angular.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 $injector angular.injector(['myModule', 'ng']).get('greeter'); "Ricetta" di come costruire greeter Ritorna il servizio $provide
  51. 51. Ingegneria del software mod. B ANGULARJS  Dependency Injection 51 Riccardo Cardin
  52. 52. Ingegneria del software mod. B ANGULARJS  Dependency Injection  Factory methods: costruiscono le componenti  Utilizzano recipe (ricette) 52 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) { //... }]);
  53. 53. Ingegneria del software mod. B 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 53 Riccardo Cardin

×