SlideShare uma empresa Scribd logo
1 de 12
Single Page Interface
   Domingo Suarez Torres
Agenda
Web Applications Models
MVC
Single page interface
  Challenges
JavaScript Tooling
  JQuery, etc
  MicroFrameworks
Web Applications Models
Model 1: direct translation of the original model of pages
and links, where pages are dynamically generated.
Model 2 o MVC: now links are not directly pointing to a
concrete target page, in this case a controller decide
what the next page is depending on the operations
taken place in page transition.
MVC based on components (Model 3?): is the
sophisticated version of Model 2 simulating how
desktop applications work
MVC


Architectural design pattern
UI mostly
From desktop to web....
Single Page Interface

• JavaScript, CSS, HTML tons in the client

• Wire the user interaction with JS

• Request the server for data with JSON/XML

• Send to the server user's data
Challenges

Bookmarking
Search Engine Optimization (SEO)
Services based on page visits
Occasional need of pop-pup windows
Resource caching
JavaScript Tooling

 CoffeeScript
 Google Dart
 RedHat Ceylon
 altJS
MVC client
BackBone: Models, binding
Underscore: Functional programming (map, select, etc)
HandleBars: Templating Engine
RequireJS: Module Loader
Puppet?
Jake/NodeJS
Real life use case
 Grails application
 Rewrite the front end with static HTML
 Deployed April 11th
   Decreased bounce rate
   Increased page views per visit
   Increased user’s visit time
   Increased web site speed load
Visits
Pages/visit
Bounce rate

Mais conteúdo relacionado

Mais procurados

Choosing the best JavaScript framework/library/toolkit
Choosing the best JavaScript framework/library/toolkitChoosing the best JavaScript framework/library/toolkit
Choosing the best JavaScript framework/library/toolkit
Hristo Chakarov
 
Single Page Application Development with backbone.js and Simple.Web
Single Page Application Development with backbone.js and Simple.WebSingle Page Application Development with backbone.js and Simple.Web
Single Page Application Development with backbone.js and Simple.Web
Chris Canal
 
Rise of the responsive single page application
Rise of the responsive single page applicationRise of the responsive single page application
Rise of the responsive single page application
Oren Shatken
 

Mais procurados (20)

Building Modern Web Applications with ASP.NET5
Building Modern Web Applications with ASP.NET5Building Modern Web Applications with ASP.NET5
Building Modern Web Applications with ASP.NET5
 
Jquery
JqueryJquery
Jquery
 
Codegen2021 blazor mobile
Codegen2021 blazor mobileCodegen2021 blazor mobile
Codegen2021 blazor mobile
 
Top java script frameworks ppt
Top java script frameworks pptTop java script frameworks ppt
Top java script frameworks ppt
 
Single Page Application
Single Page ApplicationSingle Page Application
Single Page Application
 
Choosing the best JavaScript framework/library/toolkit
Choosing the best JavaScript framework/library/toolkitChoosing the best JavaScript framework/library/toolkit
Choosing the best JavaScript framework/library/toolkit
 
Single Page Applications
Single Page ApplicationsSingle Page Applications
Single Page Applications
 
Single Page Application Development with backbone.js and Simple.Web
Single Page Application Development with backbone.js and Simple.WebSingle Page Application Development with backbone.js and Simple.Web
Single Page Application Development with backbone.js and Simple.Web
 
Server rendering-talk
Server rendering-talkServer rendering-talk
Server rendering-talk
 
Single Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJSSingle Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJS
 
Rise of the responsive single page application
Rise of the responsive single page applicationRise of the responsive single page application
Rise of the responsive single page application
 
Javascript & Jquery
Javascript & JqueryJavascript & Jquery
Javascript & Jquery
 
single page application
single page applicationsingle page application
single page application
 
Building great spa’s with angular js, asp.net mvc and webapi
Building great spa’s with angular js, asp.net mvc and webapiBuilding great spa’s with angular js, asp.net mvc and webapi
Building great spa’s with angular js, asp.net mvc and webapi
 
Joomla as a mobile App backend - ideas, examples and experiences
Joomla as a mobile App backend - ideas, examples and experiencesJoomla as a mobile App backend - ideas, examples and experiences
Joomla as a mobile App backend - ideas, examples and experiences
 
Web technologies practical guide
Web technologies practical guideWeb technologies practical guide
Web technologies practical guide
 
Isomorphic web application
Isomorphic web applicationIsomorphic web application
Isomorphic web application
 
Single Page Apps
Single Page AppsSingle Page Apps
Single Page Apps
 
MEAN Stack
MEAN Stack MEAN Stack
MEAN Stack
 
Modern Web App Architectures
Modern Web App ArchitecturesModern Web App Architectures
Modern Web App Architectures
 

Destaque

Destaque (6)

Machine Learning & Apache Mahout
Machine Learning & Apache MahoutMachine Learning & Apache Mahout
Machine Learning & Apache Mahout
 
Serling dev team, development process
Serling dev team, development processSerling dev team, development process
Serling dev team, development process
 
SGCE 2015 REST APIs
SGCE 2015 REST APIsSGCE 2015 REST APIs
SGCE 2015 REST APIs
 
SGNext Elasticsearch
SGNext ElasticsearchSGNext Elasticsearch
SGNext Elasticsearch
 
JVM Reactive Programming
JVM Reactive ProgrammingJVM Reactive Programming
JVM Reactive Programming
 
SGCE 2014 micro services
SGCE 2014 micro servicesSGCE 2014 micro services
SGCE 2014 micro services
 

Semelhante a SGCE 2012 Lightning Talk-Single Page Interface

Benefits of developing single page web applications using angular js
Benefits of developing single page web applications using angular jsBenefits of developing single page web applications using angular js
Benefits of developing single page web applications using angular js
Harbinger Systems - HRTech Builder of Choice
 
Lecture 05 - Creating a website with Razor Pages.pdf
Lecture 05 - Creating a website with Razor Pages.pdfLecture 05 - Creating a website with Razor Pages.pdf
Lecture 05 - Creating a website with Razor Pages.pdf
Lê Thưởng
 

Semelhante a SGCE 2012 Lightning Talk-Single Page Interface (20)

ASP.NET Lecture 1
ASP.NET Lecture 1ASP.NET Lecture 1
ASP.NET Lecture 1
 
ASP.net MVC Introduction Wikilogia (nov 2014)
ASP.net MVC Introduction Wikilogia (nov 2014)ASP.net MVC Introduction Wikilogia (nov 2014)
ASP.net MVC Introduction Wikilogia (nov 2014)
 
Comparative analysis of java script framework
Comparative analysis of java script frameworkComparative analysis of java script framework
Comparative analysis of java script framework
 
Beyond The MVC
Beyond The MVCBeyond The MVC
Beyond The MVC
 
FrontEnd.pdf
FrontEnd.pdfFrontEnd.pdf
FrontEnd.pdf
 
Single page applications
Single page applicationsSingle page applications
Single page applications
 
SPA: Key Questions
SPA: Key QuestionsSPA: Key Questions
SPA: Key Questions
 
Benefits of developing single page web applications using angular js
Benefits of developing single page web applications using angular jsBenefits of developing single page web applications using angular js
Benefits of developing single page web applications using angular js
 
AngularJS - Javascript framework for superheroes
AngularJS - Javascript framework for superheroesAngularJS - Javascript framework for superheroes
AngularJS - Javascript framework for superheroes
 
Angular JS - Javascript framework for superheroes
Angular JS - Javascript framework for superheroesAngular JS - Javascript framework for superheroes
Angular JS - Javascript framework for superheroes
 
Seven Versions of One Web Application
Seven Versions of One Web ApplicationSeven Versions of One Web Application
Seven Versions of One Web Application
 
Component based User Interface Rendering with State Caching Between Routes
Component based User Interface Rendering with State Caching Between RoutesComponent based User Interface Rendering with State Caching Between Routes
Component based User Interface Rendering with State Caching Between Routes
 
Lecture 05 - Creating a website with Razor Pages.pdf
Lecture 05 - Creating a website with Razor Pages.pdfLecture 05 - Creating a website with Razor Pages.pdf
Lecture 05 - Creating a website with Razor Pages.pdf
 
SPCA2013 - Building Windows Client Applications for SharePoint 2013
SPCA2013 - Building Windows Client Applications for SharePoint 2013SPCA2013 - Building Windows Client Applications for SharePoint 2013
SPCA2013 - Building Windows Client Applications for SharePoint 2013
 
Ajax Ppt 1
Ajax Ppt 1Ajax Ppt 1
Ajax Ppt 1
 
Understanding ASP.NET MVC
Understanding ASP.NET MVCUnderstanding ASP.NET MVC
Understanding ASP.NET MVC
 
Angularjs
AngularjsAngularjs
Angularjs
 
Advantages and disadvantages of an ajax based client application
Advantages and disadvantages of an ajax based client applicationAdvantages and disadvantages of an ajax based client application
Advantages and disadvantages of an ajax based client application
 
Client Side MVC & Angular
Client Side MVC & AngularClient Side MVC & Angular
Client Side MVC & Angular
 
Struts natraj - satya
Struts   natraj - satyaStruts   natraj - satya
Struts natraj - satya
 

Mais de Domingo Suarez Torres

Mais de Domingo Suarez Torres (20)

Cloud Native MX Meetup - Asegurando tu Cluster de Kubernetes
Cloud Native MX Meetup - Asegurando tu Cluster de KubernetesCloud Native MX Meetup - Asegurando tu Cluster de Kubernetes
Cloud Native MX Meetup - Asegurando tu Cluster de Kubernetes
 
Java Dev Day 2019 No kuberneteen por convivir
Java Dev Day 2019  No kuberneteen por convivirJava Dev Day 2019  No kuberneteen por convivir
Java Dev Day 2019 No kuberneteen por convivir
 
Contenedores 101 Digital Ocean CDMX
Contenedores 101 Digital Ocean CDMXContenedores 101 Digital Ocean CDMX
Contenedores 101 Digital Ocean CDMX
 
Retos en la arquitectura de Microservicios
Retos en la arquitectura de MicroserviciosRetos en la arquitectura de Microservicios
Retos en la arquitectura de Microservicios
 
Java Cloud Native Hack Nights GDL
Java Cloud Native Hack Nights GDLJava Cloud Native Hack Nights GDL
Java Cloud Native Hack Nights GDL
 
meetup digital ocean kubernetes
meetup digital ocean kubernetesmeetup digital ocean kubernetes
meetup digital ocean kubernetes
 
Peru JUG Micronaut & GraalVM
Peru JUG Micronaut & GraalVMPeru JUG Micronaut & GraalVM
Peru JUG Micronaut & GraalVM
 
DevFest Lima Corriendo cargas e trabajo seguras en GKE con Istio
DevFest Lima Corriendo cargas e trabajo seguras en GKE con IstioDevFest Lima Corriendo cargas e trabajo seguras en GKE con Istio
DevFest Lima Corriendo cargas e trabajo seguras en GKE con Istio
 
Cloud Native Development in the JVM
Cloud Native Development in the JVMCloud Native Development in the JVM
Cloud Native Development in the JVM
 
Cloud Native Mexico - Introducción a Kubernetes
Cloud Native Mexico - Introducción a KubernetesCloud Native Mexico - Introducción a Kubernetes
Cloud Native Mexico - Introducción a Kubernetes
 
Meetup DigitalOcean Cloud Native architecture
Meetup DigitalOcean Cloud Native architectureMeetup DigitalOcean Cloud Native architecture
Meetup DigitalOcean Cloud Native architecture
 
Cloud Native Mexico Meetup de Marzo 2018 Service Mesh con Istio y Envoy
Cloud Native Mexico Meetup de Marzo 2018 Service Mesh con Istio y EnvoyCloud Native Mexico Meetup de Marzo 2018 Service Mesh con Istio y Envoy
Cloud Native Mexico Meetup de Marzo 2018 Service Mesh con Istio y Envoy
 
Cloud Native Mexico Meetup enero 2018 Observability
Cloud Native Mexico Meetup enero 2018 ObservabilityCloud Native Mexico Meetup enero 2018 Observability
Cloud Native Mexico Meetup enero 2018 Observability
 
Cloud Native Mexico Presentacion
Cloud Native Mexico PresentacionCloud Native Mexico Presentacion
Cloud Native Mexico Presentacion
 
gRPC: Beyond REST
gRPC: Beyond RESTgRPC: Beyond REST
gRPC: Beyond REST
 
Devops Landscape
Devops LandscapeDevops Landscape
Devops Landscape
 
Orquestación de contenedores con Kubernetes SGNext
Orquestación de contenedores con Kubernetes SGNextOrquestación de contenedores con Kubernetes SGNext
Orquestación de contenedores con Kubernetes SGNext
 
Webinar Arquitectura de Microservicios
Webinar Arquitectura de MicroserviciosWebinar Arquitectura de Microservicios
Webinar Arquitectura de Microservicios
 
Elasticsearch JVM-MX Meetup April 2016
Elasticsearch JVM-MX Meetup April 2016Elasticsearch JVM-MX Meetup April 2016
Elasticsearch JVM-MX Meetup April 2016
 
Ratpack JVM_MX Meetup February 2016
Ratpack JVM_MX Meetup February 2016Ratpack JVM_MX Meetup February 2016
Ratpack JVM_MX Meetup February 2016
 

Último

CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 

Último (20)

Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 

SGCE 2012 Lightning Talk-Single Page Interface

Notas do Editor

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n