SlideShare a Scribd company logo
1 of 22
Download to read offline
MVC on the server and
     on the client
 How to integrate Spring MVC and
           Backbone.js



             Sebastiano Armeli-Battana
                    @sebarmeli

July 10 , 2012                       JAXConf, San Francisco
Model - View - Controller

Architectural Design Pattern
                                             Model


Business logic / presentation layer

                                      View           Controller
Reusability


Components isolation
Passive and Active MVC
                         View                Model

Passive Approach


                                Controller




Active Approach        Controller            View


                                              Observer
                                               pattern

                                    Model
Java and MVC

Model                       POJO


View                         JSP


Controller                  Servlet
Spring MVC
Front Controller pattern
Getting started
web.xml
  <servlet>
     <servlet-name>dispatcher</servlet-name>
     <servlet-class>
org.springframework.web.servlet.DispatcherServlet
     </servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>dispatcher</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>
Spring MVC 3 configurations
dispatcher-servlet.xml
<context:component-scan base-package=”com.example”

<mvc:annotation-driven />

<mvc:view-controller path=”/page1” view-name=”view1” />

<mvc:resources mapping=”/resources/**” location=”/resources” />


<bean
class="org.springframework.web.servlet.view.ContentNegotiatingViewResolver">
    <property name=”mediaTypes”>
         ...
    </property>
    <property name=”viewResolvers”>
         ...
    </property>
</bean>
Spring MVC in action
  C   @Controller
  O   public class ContactsController {
  N       @Autowired
  T       private ContactService service;
  R
  O       @RequestMapping(value=”/list”, method = RequestMethod.GET)
  L       public @ResponseBody List<Contact> getContacts() {
  L           return service.getContacts();
  E       }
  R   }




Service Layer (@Service)
                                                     VIEW
   DAO (@Repository)                  [{
                                           “id” : 31,
                                           “firstname” : “LeBron”,
                                           “lastname” : “James”,

      MODEL
                                           “telephone” : “111-222-3333”
                                      }]
What about the Model?
         @Entity
         @Table(name=”Contacts”)
         public class Contact {

              @Id
              @Column(name = ”ID”)
              @GeneratedValue
              private Integer id;

              @Column(name = “FIRSTNAME”)
              private String firstname;

              public String getFirstname(){
                return firstname;
              }

              public void setFirstname(){
                this.firstname = firstname;
              }

             ...
         }
MVC on the server and on the client
Why MVC in JavaScript ??

AJAX application with lots of JS code


Managing efficiently jQuery selectors and callbacks


Decoupling components


Simplify communication with RESTful WS
JavaScript and MVC

Model                    JS object


View                   HTML Template


Controller               JS object
JavaScript ‘MVC’ / ‘MV*’ Library


Dependencies:                      $(function(){
	

 - Underscore.js                  // stuff here
    - json2.js                       Backbone.history.start();
                                   });
	

 - jQuery / Zepto


Single Page Application (SPA)


Connection to API over RESTful JSON interface
Model
Represents data (JSON)       {
                                 “id” : 31,
                                 “firstname” : “LeBron”,
                                 “lastname” : “James”,
                                 “telephone” : “111-222-3333”
                             }



Key-value attributes         MyApp.Contact = Backbone.Model.extend({

                                 defaults: {
                                    firstname : “”,
                                    lastname : “”,
                                    telephone : “”
                                 },
Domain-specific methods           getFullName: function() {
                                    return this.fullname + this.lastname;
                                 },

                                 validate: function(){}

                             });
Custom events & Validation   var newContact = new MyApp.Contact();
                             newContact.set({‘firstname’ : ‘Lebron'});
Collection
Set of models              MyApp.Contacts = Backbone.Collection.extend({

                             model: MyAppp.Contact,

                             url: ‘/list’

                           });

url / url()                var collection = new MyApp.Contacts(),
                             model1 = new MyApp.Contact();

                           collection.add(model1);




create() / add() / remove()/ reset()



get() / getByCid()
Router

Routing client-side “states”
                         MyApp.AppRouter = Backbone.Router.extend({

                           routes: {
                              “” : “index”,
                              “list-contacts” : “listContacts”
“routes” map               },

                           index : function() {
                             // stuff here
                           }

                           listContacts : function() {
                             // stuff here
List of actions            }
                         });

                         var router = new MyApp.AppRouter();
View

Logical view     MyApp.ListContactsView = Backbone.View.extend({

                   className: ‘list’,

                   initialize: function(){
                      // stuff here

‘el’ attribute     },

                   events: {
                     “click a”: “goToLink”
                   }


Event handlers     goToLink : function() {}

                   render : function(){
                     this.$el.html(“<p>Something</p>”);
                   }
                 });

render()         var view = new MyApp.ListContactsView();
                 view.render();
View + HTML Template

  Pick one client-side templating engine!
  (E.g. Handlebars.js, Haml-js, ICanHaz.js)


  Isolate HTML into Template
View                                                   ICanHaz.js
MyApp.ContactsView = Backbone.View.extend({

  ...
                                               HTML template
  render : function(){
                                               <script type=”text/html”
      var obj = this.model.toJSON(),           id=”contactTemplate”>
        template = ich.contactTemplate(obj);     <p>First name : {{firstname}}</p>
                                                 <p>Last name : {{lastname}}</p>
      this.$el.html(template);                   <p>Telephone : {{telephone}}</p>
  }                                            script>
});

var view = new MyApp.ContactsView();
view.render();
Model-View binding

var view = Backbone.View.extend({

 initialize: function(){

  this.model.bind(“change”, this.render, this);

 },

 render : function(){}

});
Backbone.js and REST
Backbone.sync(): CRUD => HTTP Methods
POST
      collection.create(model) / model.save()
GET
         collection.fetch() / model.fetch()
PUT
                    model.save()
DELETE

                  model.destroy()


(jQuery/Zepto).ajax()
‘My Contacts’ Application

                      REST API

                  URI           HTTP Method

                  /list            GET
                  /list           POST
            /list/{contactId}      PUT
            /list/{contactId}    DELETE
Questions?

More Related Content

What's hot

Arq portuguesa manuelino_barroco (1)
Arq portuguesa manuelino_barroco (1)Arq portuguesa manuelino_barroco (1)
Arq portuguesa manuelino_barroco (1)Januário Esteves
 
A arte-no-renascimento
A arte-no-renascimentoA arte-no-renascimento
A arte-no-renascimentoclaveg
 
Michelangelo’S David
Michelangelo’S DavidMichelangelo’S David
Michelangelo’S DavidArthur123
 
03 arquitectura renascentista
03 arquitectura renascentista03 arquitectura renascentista
03 arquitectura renascentistaVítor Santos
 
Cultura do Mosteiro - Arte paleocristã e bizantina
Cultura do Mosteiro - Arte paleocristã e bizantinaCultura do Mosteiro - Arte paleocristã e bizantina
Cultura do Mosteiro - Arte paleocristã e bizantinaCarlos Vieira
 
Princípios de Design de Interação
Princípios de Design de InteraçãoPrincípios de Design de Interação
Princípios de Design de InteraçãoFelipe Dal Molin
 
Energy Fintech - Strathclyde University Fintech Masters
Energy Fintech - Strathclyde University Fintech MastersEnergy Fintech - Strathclyde University Fintech Masters
Energy Fintech - Strathclyde University Fintech MastersChris Cook
 
Arquitectura neoclassica em Portugal
Arquitectura neoclassica em Portugal Arquitectura neoclassica em Portugal
Arquitectura neoclassica em Portugal Carlos Vieira
 
Introduction to Cloud computing
Introduction to Cloud computingIntroduction to Cloud computing
Introduction to Cloud computingPriyodarshini Dhar
 
Semantic web
Semantic webSemantic web
Semantic webcat_us
 

What's hot (20)

Inovação Disruptiva
Inovação DisruptivaInovação Disruptiva
Inovação Disruptiva
 
High Renaissance: Michelangelo
High Renaissance:  MichelangeloHigh Renaissance:  Michelangelo
High Renaissance: Michelangelo
 
Barroco brasileiro
Barroco brasileiroBarroco brasileiro
Barroco brasileiro
 
Renascimento
RenascimentoRenascimento
Renascimento
 
Arq portuguesa manuelino_barroco (1)
Arq portuguesa manuelino_barroco (1)Arq portuguesa manuelino_barroco (1)
Arq portuguesa manuelino_barroco (1)
 
A arte-no-renascimento
A arte-no-renascimentoA arte-no-renascimento
A arte-no-renascimento
 
Mda arq cliente_serv
Mda arq cliente_servMda arq cliente_serv
Mda arq cliente_serv
 
Michelangelo’S David
Michelangelo’S DavidMichelangelo’S David
Michelangelo’S David
 
Fundamentos de arquitetura Web
Fundamentos de arquitetura WebFundamentos de arquitetura Web
Fundamentos de arquitetura Web
 
03 arquitectura renascentista
03 arquitectura renascentista03 arquitectura renascentista
03 arquitectura renascentista
 
Cultura do Mosteiro - Arte paleocristã e bizantina
Cultura do Mosteiro - Arte paleocristã e bizantinaCultura do Mosteiro - Arte paleocristã e bizantina
Cultura do Mosteiro - Arte paleocristã e bizantina
 
Princípios de Design de Interação
Princípios de Design de InteraçãoPrincípios de Design de Interação
Princípios de Design de Interação
 
O Barroco
O BarrocoO Barroco
O Barroco
 
Energy Fintech - Strathclyde University Fintech Masters
Energy Fintech - Strathclyde University Fintech MastersEnergy Fintech - Strathclyde University Fintech Masters
Energy Fintech - Strathclyde University Fintech Masters
 
A arquitectura romana
A arquitectura romanaA arquitectura romana
A arquitectura romana
 
Arquitectura neoclassica em Portugal
Arquitectura neoclassica em Portugal Arquitectura neoclassica em Portugal
Arquitectura neoclassica em Portugal
 
Arquitetura românica
Arquitetura românicaArquitetura românica
Arquitetura românica
 
Introduction to Cloud computing
Introduction to Cloud computingIntroduction to Cloud computing
Introduction to Cloud computing
 
Semantic web
Semantic webSemantic web
Semantic web
 
Web 3.0
Web 3.0Web 3.0
Web 3.0
 

Viewers also liked

Integration of Backbone.js with Spring 3.1
Integration of Backbone.js with Spring 3.1Integration of Backbone.js with Spring 3.1
Integration of Backbone.js with Spring 3.1Michał Orman
 
Integrate Spring MVC with RequireJS & Backbone.js & Spring Data JPA
Integrate Spring MVC with RequireJS & Backbone.js & Spring Data JPAIntegrate Spring MVC with RequireJS & Backbone.js & Spring Data JPA
Integrate Spring MVC with RequireJS & Backbone.js & Spring Data JPACheng Ta Yeh
 
Rest with Java EE 6 , Security , Backbone.js
Rest with Java EE 6 , Security , Backbone.jsRest with Java EE 6 , Security , Backbone.js
Rest with Java EE 6 , Security , Backbone.jsCarol McDonald
 
RTU maģistra profesionālo studiju programma "Informācijas tehnoloģija"
RTU maģistra profesionālo studiju programma "Informācijas tehnoloģija"RTU maģistra profesionālo studiju programma "Informācijas tehnoloģija"
RTU maģistra profesionālo studiju programma "Informācijas tehnoloģija"Jānis Grabis
 
JAX 2012: Moderne Architektur mit Spring und JavaScript
JAX 2012: Moderne Architektur mit Spring und JavaScriptJAX 2012: Moderne Architektur mit Spring und JavaScript
JAX 2012: Moderne Architektur mit Spring und JavaScriptmartinlippert
 
Modern Architectures with Spring and JavaScript
Modern Architectures with Spring and JavaScriptModern Architectures with Spring and JavaScript
Modern Architectures with Spring and JavaScriptmartinlippert
 
Creating MVC Application with backbone js
Creating MVC Application with backbone jsCreating MVC Application with backbone js
Creating MVC Application with backbone jsMindfire Solutions
 
Software Architecture Patterns
Software Architecture PatternsSoftware Architecture Patterns
Software Architecture PatternsAssaf Gannon
 
Vacademia 13 3 нн 2015
Vacademia 13 3 нн 2015Vacademia 13 3 нн 2015
Vacademia 13 3 нн 2015Mikhail Morozov
 
Build my dream 4 opdracht 02 deel 1/2
Build my dream 4 opdracht 02  deel 1/2Build my dream 4 opdracht 02  deel 1/2
Build my dream 4 opdracht 02 deel 1/2DienoSaurus
 
Bmd opdracht 6.1
Bmd opdracht 6.1Bmd opdracht 6.1
Bmd opdracht 6.1DienoSaurus
 
Tutorial: How to work with app “3D Molecules Edit & Test”
Tutorial: How to work with app “3D Molecules Edit & Test” Tutorial: How to work with app “3D Molecules Edit & Test”
Tutorial: How to work with app “3D Molecules Edit & Test” Mikhail Morozov
 
Climate change
Climate changeClimate change
Climate changeElaine Yu
 

Viewers also liked (20)

Integration of Backbone.js with Spring 3.1
Integration of Backbone.js with Spring 3.1Integration of Backbone.js with Spring 3.1
Integration of Backbone.js with Spring 3.1
 
Integrate Spring MVC with RequireJS & Backbone.js & Spring Data JPA
Integrate Spring MVC with RequireJS & Backbone.js & Spring Data JPAIntegrate Spring MVC with RequireJS & Backbone.js & Spring Data JPA
Integrate Spring MVC with RequireJS & Backbone.js & Spring Data JPA
 
Rest with Java EE 6 , Security , Backbone.js
Rest with Java EE 6 , Security , Backbone.jsRest with Java EE 6 , Security , Backbone.js
Rest with Java EE 6 , Security , Backbone.js
 
RTU maģistra profesionālo studiju programma "Informācijas tehnoloģija"
RTU maģistra profesionālo studiju programma "Informācijas tehnoloģija"RTU maģistra profesionālo studiju programma "Informācijas tehnoloģija"
RTU maģistra profesionālo studiju programma "Informācijas tehnoloģija"
 
JAX 2012: Moderne Architektur mit Spring und JavaScript
JAX 2012: Moderne Architektur mit Spring und JavaScriptJAX 2012: Moderne Architektur mit Spring und JavaScript
JAX 2012: Moderne Architektur mit Spring und JavaScript
 
Modern Architectures with Spring and JavaScript
Modern Architectures with Spring and JavaScriptModern Architectures with Spring and JavaScript
Modern Architectures with Spring and JavaScript
 
Creating MVC Application with backbone js
Creating MVC Application with backbone jsCreating MVC Application with backbone js
Creating MVC Application with backbone js
 
Software Architecture Patterns
Software Architecture PatternsSoftware Architecture Patterns
Software Architecture Patterns
 
Vacademia 13 3 нн 2015
Vacademia 13 3 нн 2015Vacademia 13 3 нн 2015
Vacademia 13 3 нн 2015
 
Build my dream 4 opdracht 02 deel 1/2
Build my dream 4 opdracht 02  deel 1/2Build my dream 4 opdracht 02  deel 1/2
Build my dream 4 opdracht 02 deel 1/2
 
Bmd opdracht 1
Bmd opdracht 1Bmd opdracht 1
Bmd opdracht 1
 
Thanksgiving role play-hollaus
Thanksgiving role play-hollausThanksgiving role play-hollaus
Thanksgiving role play-hollaus
 
Summit 17 04
Summit 17 04Summit 17 04
Summit 17 04
 
Bmd opdracht 6.1
Bmd opdracht 6.1Bmd opdracht 6.1
Bmd opdracht 6.1
 
Bmd 6 o1 show
Bmd 6 o1 showBmd 6 o1 show
Bmd 6 o1 show
 
Burns night
Burns nightBurns night
Burns night
 
Violència bullying
Violència    bullyingViolència    bullying
Violència bullying
 
Scotland
ScotlandScotland
Scotland
 
Tutorial: How to work with app “3D Molecules Edit & Test”
Tutorial: How to work with app “3D Molecules Edit & Test” Tutorial: How to work with app “3D Molecules Edit & Test”
Tutorial: How to work with app “3D Molecules Edit & Test”
 
Climate change
Climate changeClimate change
Climate change
 

Similar to MVC on the server and on the client

MVC on the Server and on the Client: How to Integrate Spring MVC and Backbone...
MVC on the Server and on the Client: How to Integrate Spring MVC and Backbone...MVC on the Server and on the Client: How to Integrate Spring MVC and Backbone...
MVC on the Server and on the Client: How to Integrate Spring MVC and Backbone...jaxconf
 
Writing HTML5 Web Apps using Backbone.js and GAE
Writing HTML5 Web Apps using Backbone.js and GAEWriting HTML5 Web Apps using Backbone.js and GAE
Writing HTML5 Web Apps using Backbone.js and GAERon Reiter
 
Ember.js - A JavaScript framework for creating ambitious web applications
Ember.js - A JavaScript framework for creating ambitious web applications  Ember.js - A JavaScript framework for creating ambitious web applications
Ember.js - A JavaScript framework for creating ambitious web applications Juliana Lucena
 
Emberjs as a rails_developer
Emberjs as a rails_developer Emberjs as a rails_developer
Emberjs as a rails_developer Sameera Gayan
 
L2 Web App Development Guest Lecture At University of Surrey 20/11/09
L2 Web App Development Guest Lecture At University of Surrey 20/11/09L2 Web App Development Guest Lecture At University of Surrey 20/11/09
L2 Web App Development Guest Lecture At University of Surrey 20/11/09Daniel Bryant
 
jQuery and Rails: Best Friends Forever
jQuery and Rails: Best Friends ForeverjQuery and Rails: Best Friends Forever
jQuery and Rails: Best Friends Foreverstephskardal
 
MVC pattern for widgets
MVC pattern for widgetsMVC pattern for widgets
MVC pattern for widgetsBehnam Taraghi
 
Backbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVCBackbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVCpootsbook
 
Angular.js Primer in Aalto University
Angular.js Primer in Aalto UniversityAngular.js Primer in Aalto University
Angular.js Primer in Aalto UniversitySC5.io
 
Viking academy backbone.js
Viking academy  backbone.jsViking academy  backbone.js
Viking academy backbone.jsBert Wijnants
 
Spring MVC introduction HVA
Spring MVC introduction HVASpring MVC introduction HVA
Spring MVC introduction HVAPeter Maas
 
Javascript frameworks: Backbone.js
Javascript frameworks: Backbone.jsJavascript frameworks: Backbone.js
Javascript frameworks: Backbone.jsSoós Gábor
 
ADO.NET Entity Framework by Jose A. Blakeley and Michael Pizzo
ADO.NET Entity Framework by Jose A. Blakeley and Michael PizzoADO.NET Entity Framework by Jose A. Blakeley and Michael Pizzo
ADO.NET Entity Framework by Jose A. Blakeley and Michael PizzoHasnain Iqbal
 

Similar to MVC on the server and on the client (20)

MVC on the Server and on the Client: How to Integrate Spring MVC and Backbone...
MVC on the Server and on the Client: How to Integrate Spring MVC and Backbone...MVC on the Server and on the Client: How to Integrate Spring MVC and Backbone...
MVC on the Server and on the Client: How to Integrate Spring MVC and Backbone...
 
Writing HTML5 Web Apps using Backbone.js and GAE
Writing HTML5 Web Apps using Backbone.js and GAEWriting HTML5 Web Apps using Backbone.js and GAE
Writing HTML5 Web Apps using Backbone.js and GAE
 
Ember.js - A JavaScript framework for creating ambitious web applications
Ember.js - A JavaScript framework for creating ambitious web applications  Ember.js - A JavaScript framework for creating ambitious web applications
Ember.js - A JavaScript framework for creating ambitious web applications
 
Backbone Basics with Examples
Backbone Basics with ExamplesBackbone Basics with Examples
Backbone Basics with Examples
 
Emberjs as a rails_developer
Emberjs as a rails_developer Emberjs as a rails_developer
Emberjs as a rails_developer
 
Unit 07: Design Patterns and Frameworks (3/3)
Unit 07: Design Patterns and Frameworks (3/3)Unit 07: Design Patterns and Frameworks (3/3)
Unit 07: Design Patterns and Frameworks (3/3)
 
L2 Web App Development Guest Lecture At University of Surrey 20/11/09
L2 Web App Development Guest Lecture At University of Surrey 20/11/09L2 Web App Development Guest Lecture At University of Surrey 20/11/09
L2 Web App Development Guest Lecture At University of Surrey 20/11/09
 
jQuery and Rails: Best Friends Forever
jQuery and Rails: Best Friends ForeverjQuery and Rails: Best Friends Forever
jQuery and Rails: Best Friends Forever
 
Backbone js
Backbone jsBackbone js
Backbone js
 
Spring Web MVC
Spring Web MVCSpring Web MVC
Spring Web MVC
 
MVC pattern for widgets
MVC pattern for widgetsMVC pattern for widgets
MVC pattern for widgets
 
Backbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVCBackbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVC
 
Java beans
Java beansJava beans
Java beans
 
Using the Windows 8 Runtime from C++
Using the Windows 8 Runtime from C++Using the Windows 8 Runtime from C++
Using the Windows 8 Runtime from C++
 
Angular.js Primer in Aalto University
Angular.js Primer in Aalto UniversityAngular.js Primer in Aalto University
Angular.js Primer in Aalto University
 
Viking academy backbone.js
Viking academy  backbone.jsViking academy  backbone.js
Viking academy backbone.js
 
Spring MVC introduction HVA
Spring MVC introduction HVASpring MVC introduction HVA
Spring MVC introduction HVA
 
Javascript frameworks: Backbone.js
Javascript frameworks: Backbone.jsJavascript frameworks: Backbone.js
Javascript frameworks: Backbone.js
 
ADO.NET Entity Framework by Jose A. Blakeley and Michael Pizzo
ADO.NET Entity Framework by Jose A. Blakeley and Michael PizzoADO.NET Entity Framework by Jose A. Blakeley and Michael Pizzo
ADO.NET Entity Framework by Jose A. Blakeley and Michael Pizzo
 
Data binding w Androidzie
Data binding w AndroidzieData binding w Androidzie
Data binding w Androidzie
 

More from Sebastiano Armeli

Managing a software engineering team
Managing a software engineering teamManaging a software engineering team
Managing a software engineering teamSebastiano Armeli
 
Enforcing coding standards in a JS project
Enforcing coding standards in a JS projectEnforcing coding standards in a JS project
Enforcing coding standards in a JS projectSebastiano Armeli
 
EcmaScript 6 - The future is here
EcmaScript 6 - The future is hereEcmaScript 6 - The future is here
EcmaScript 6 - The future is hereSebastiano Armeli
 
Dependency management & Package management in JavaScript
Dependency management & Package management in JavaScriptDependency management & Package management in JavaScript
Dependency management & Package management in JavaScriptSebastiano Armeli
 
Backbone.js in a real-life application
Backbone.js in a real-life applicationBackbone.js in a real-life application
Backbone.js in a real-life applicationSebastiano Armeli
 
Getting started with Selenium 2
Getting started with Selenium 2Getting started with Selenium 2
Getting started with Selenium 2Sebastiano Armeli
 

More from Sebastiano Armeli (12)

Managing a software engineering team
Managing a software engineering teamManaging a software engineering team
Managing a software engineering team
 
Enforcing coding standards in a JS project
Enforcing coding standards in a JS projectEnforcing coding standards in a JS project
Enforcing coding standards in a JS project
 
Enforcing coding standards
Enforcing coding standardsEnforcing coding standards
Enforcing coding standards
 
ES6: The future is now
ES6: The future is nowES6: The future is now
ES6: The future is now
 
EcmaScript 6 - The future is here
EcmaScript 6 - The future is hereEcmaScript 6 - The future is here
EcmaScript 6 - The future is here
 
Dependency management & Package management in JavaScript
Dependency management & Package management in JavaScriptDependency management & Package management in JavaScript
Dependency management & Package management in JavaScript
 
Karma - JS Test Runner
Karma - JS Test RunnerKarma - JS Test Runner
Karma - JS Test Runner
 
RequireJS
RequireJSRequireJS
RequireJS
 
Lazy load Everything!
Lazy load Everything!Lazy load Everything!
Lazy load Everything!
 
Backbone.js in a real-life application
Backbone.js in a real-life applicationBackbone.js in a real-life application
Backbone.js in a real-life application
 
Getting started with Selenium 2
Getting started with Selenium 2Getting started with Selenium 2
Getting started with Selenium 2
 
Web Storage
Web StorageWeb Storage
Web Storage
 

Recently uploaded

Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdfJamie (Taka) Wang
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum ComputingGDSC PJATK
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.francesco barbera
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 

Recently uploaded (20)

Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum Computing
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 

MVC on the server and on the client

  • 1. MVC on the server and on the client How to integrate Spring MVC and Backbone.js Sebastiano Armeli-Battana @sebarmeli July 10 , 2012 JAXConf, San Francisco
  • 2. Model - View - Controller Architectural Design Pattern Model Business logic / presentation layer View Controller Reusability Components isolation
  • 3. Passive and Active MVC View Model Passive Approach Controller Active Approach Controller View Observer pattern Model
  • 4. Java and MVC Model POJO View JSP Controller Servlet
  • 6. Getting started web.xml <servlet> <servlet-name>dispatcher</servlet-name> <servlet-class> org.springframework.web.servlet.DispatcherServlet </servlet-class> </servlet> <servlet-mapping> <servlet-name>dispatcher</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping>
  • 7. Spring MVC 3 configurations dispatcher-servlet.xml <context:component-scan base-package=”com.example” <mvc:annotation-driven /> <mvc:view-controller path=”/page1” view-name=”view1” /> <mvc:resources mapping=”/resources/**” location=”/resources” /> <bean class="org.springframework.web.servlet.view.ContentNegotiatingViewResolver"> <property name=”mediaTypes”> ... </property> <property name=”viewResolvers”> ... </property> </bean>
  • 8. Spring MVC in action C @Controller O public class ContactsController { N @Autowired T private ContactService service; R O @RequestMapping(value=”/list”, method = RequestMethod.GET) L public @ResponseBody List<Contact> getContacts() { L return service.getContacts(); E } R } Service Layer (@Service) VIEW DAO (@Repository) [{ “id” : 31, “firstname” : “LeBron”, “lastname” : “James”, MODEL “telephone” : “111-222-3333” }]
  • 9. What about the Model? @Entity @Table(name=”Contacts”) public class Contact { @Id @Column(name = ”ID”) @GeneratedValue private Integer id; @Column(name = “FIRSTNAME”) private String firstname; public String getFirstname(){ return firstname; } public void setFirstname(){ this.firstname = firstname; } ... }
  • 11. Why MVC in JavaScript ?? AJAX application with lots of JS code Managing efficiently jQuery selectors and callbacks Decoupling components Simplify communication with RESTful WS
  • 12. JavaScript and MVC Model JS object View HTML Template Controller JS object
  • 13. JavaScript ‘MVC’ / ‘MV*’ Library Dependencies: $(function(){ - Underscore.js // stuff here - json2.js Backbone.history.start(); }); - jQuery / Zepto Single Page Application (SPA) Connection to API over RESTful JSON interface
  • 14. Model Represents data (JSON) { “id” : 31, “firstname” : “LeBron”, “lastname” : “James”, “telephone” : “111-222-3333” } Key-value attributes MyApp.Contact = Backbone.Model.extend({ defaults: { firstname : “”, lastname : “”, telephone : “” }, Domain-specific methods getFullName: function() { return this.fullname + this.lastname; }, validate: function(){} }); Custom events & Validation var newContact = new MyApp.Contact(); newContact.set({‘firstname’ : ‘Lebron'});
  • 15. Collection Set of models MyApp.Contacts = Backbone.Collection.extend({ model: MyAppp.Contact, url: ‘/list’ }); url / url() var collection = new MyApp.Contacts(), model1 = new MyApp.Contact(); collection.add(model1); create() / add() / remove()/ reset() get() / getByCid()
  • 16. Router Routing client-side “states” MyApp.AppRouter = Backbone.Router.extend({ routes: { “” : “index”, “list-contacts” : “listContacts” “routes” map }, index : function() { // stuff here } listContacts : function() { // stuff here List of actions } }); var router = new MyApp.AppRouter();
  • 17. View Logical view MyApp.ListContactsView = Backbone.View.extend({ className: ‘list’, initialize: function(){ // stuff here ‘el’ attribute }, events: { “click a”: “goToLink” } Event handlers goToLink : function() {} render : function(){ this.$el.html(“<p>Something</p>”); } }); render() var view = new MyApp.ListContactsView(); view.render();
  • 18. View + HTML Template Pick one client-side templating engine! (E.g. Handlebars.js, Haml-js, ICanHaz.js) Isolate HTML into Template View ICanHaz.js MyApp.ContactsView = Backbone.View.extend({ ... HTML template render : function(){ <script type=”text/html” var obj = this.model.toJSON(), id=”contactTemplate”> template = ich.contactTemplate(obj); <p>First name : {{firstname}}</p> <p>Last name : {{lastname}}</p> this.$el.html(template); <p>Telephone : {{telephone}}</p> } script> }); var view = new MyApp.ContactsView(); view.render();
  • 19. Model-View binding var view = Backbone.View.extend({ initialize: function(){ this.model.bind(“change”, this.render, this); }, render : function(){} });
  • 20. Backbone.js and REST Backbone.sync(): CRUD => HTTP Methods POST collection.create(model) / model.save() GET collection.fetch() / model.fetch() PUT model.save() DELETE model.destroy() (jQuery/Zepto).ajax()
  • 21. ‘My Contacts’ Application REST API URI HTTP Method /list GET /list POST /list/{contactId} PUT /list/{contactId} DELETE

Editor's Notes

  1. \n
  2. \n\n\n\n\n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n\npring MVC delegates to a HttpMessageConverter to perform the serialization. In this case, Spring MVC invokes a MappingJacksonHttpMessageConverterbuilt on the Jackson JSON processor. This implementation is enabled automatically when you use the mvc:annotation-driven configuration element with Jackson present in your classpath.\n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n\n
  23. \n\n
  24. \n\n