SlideShare ist ein Scribd-Unternehmen logo
1 von 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

Weitere ähnliche Inhalte

Was ist angesagt?

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
 

Was ist angesagt? (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
 

Andere mochten auch

Andere mochten auch (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
 

Ähnlich wie 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
 

Ähnlich wie 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
 

Mehr von Domingo Suarez Torres

Mehr von 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
 

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

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
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
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
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
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
 
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
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
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...
 
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
 
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
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
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
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 

SGCE 2012 Lightning Talk-Single Page Interface

Hinweis der Redaktion

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