SlideShare a Scribd company logo
SPA
Brown Bag Session by Arthur Fung
We work hard! We deserve it! Oh yeah!
Date: 3/31 - 4/4
Place: Napa Valley
Duration: 1 week!
Fee: Priceless
TACPOINT
IS
AWESOME
WHAT IS SPA??
NICE TRY PEOPLE!
Single Page Application
A single-page application (SPA), also
known as single-page interface (SPI), is
a web application or web site that fits on
a single web page with the goal of
providing a more fluid user experience
akin to a desktop application.

Recommended for you

Introduction of Progressive Web App
Introduction of Progressive Web AppIntroduction of Progressive Web App
Introduction of Progressive Web App

Progressive web apps (PWAs) are a new type of application that combines the best of the web and the best of native apps. PWAs use newer web platform features and service workers to deliver app-style experiences to users. Some key benefits of PWAs include providing responsive and reliable experiences that load instantly and feel like regular apps to users, while also being able to reach users on any device via a web URL rather than an app store. PWAs aim to reduce the barriers between the web and native apps.

appsmobile application developmentagile
Introduction to back-end
Introduction to back-endIntroduction to back-end
Introduction to back-end

The document provides an introduction to back-end development, including definitions of the internet, World Wide Web, and request-response cycle. It explains the differences between front-end and back-end development and lists common front-end and back-end programming languages. Main protocols like IP, TCP, UDP, and HTTP are described. Additional back-end concepts covered include CRUD functionality, securing passwords, HTTPS, and APIs. Resources for further learning back-end development with languages like Python, Node.js, and PHP are also provided.

Workshop 4: NodeJS. Express Framework & MongoDB.
Workshop 4: NodeJS. Express Framework & MongoDB.Workshop 4: NodeJS. Express Framework & MongoDB.
Workshop 4: NodeJS. Express Framework & MongoDB.

This document provides an introduction to Node.js, Express, and MongoDB. Node.js is a JavaScript runtime built on Chrome's V8 engine that allows JavaScript to be run on the server-side. Express is a web application framework for Node.js that provides routing capabilities and middleware support. MongoDB is a non-relational database that stores data in flexible, JSON-like documents, rather than using rigid tables. The document discusses the pros and cons of each technology and provides examples of basic usage and configuration.

express frameworkmongodbframework
Desktop
● Fast Response
● Capable of rendering
portion of the UI
● More interactive with the
user
● Cross Platform
● Universally accessible
● Instantly updated and
distributed
Traditional
Website
● Platform Specific.
● Only accessible on
installed machine
● Needs users to manually
update the application
● Slow. Page Flash.
● Universally accessible
● Instantly updated and
distributed
In fact, SPA can
provide the best of
BOTH worlds.
Example: Gmail
Example: Merchant Locator

Recommended for you

Introduction to React Native Workshop
Introduction to React Native WorkshopIntroduction to React Native Workshop
Introduction to React Native Workshop

This document provides an introduction to React Native. It begins with an overview of what React Native is and how it allows React code to render natively on iOS and Android using a JavaScript bridge. It then discusses starting a new project using create-react-native-app or react-native init. The rest of the document outlines the roadmap, covering working with styles, layouts, lists, navigation, networking and touching the native side.

reactreactjsreact-native
NEXT.JS
NEXT.JSNEXT.JS
NEXT.JS

Next.js is a flexible React framework that gives you building blocks to create fast web applications.

next.jsnextreact
jQuery Ajax
jQuery AjaxjQuery Ajax
jQuery Ajax

Ajax allows web pages to asynchronously update parts of a page by exchanging data with a web server behind the scenes without reloading the entire page. It uses a combination of technologies like HTML/XHTML, CSS, DOM, XML, JavaScript, and the XMLHttpRequest object. This allows faster and more interactive web applications by reducing the amount of data sent and received.

What is a Single Page Application?
● Fluid transitions between page, richer
interaction between UI componenets. No
page refresh
● Application logic in the client
● Fetch Data on demand
● Dynamic Data Loading, usually with Rest API
● Back/Forward Button works as expected
● Support bookmark
● Ability to go offline
Advantages of SPA
● Responsive, Native Appplication Feel. No page blink.
● Faster UI, More Interactive
● More work on client side, offloading the server
responsibility
● REST endpoints are more general purpose
● Perfect for supporting multiple platofmrs, since UI is just
another client
● Share benefits from both desktop and web app
Traditional vs SPA
Traditional vs SPA

Recommended for you

React native
React nativeReact native
React native

React Native allows developers to build mobile apps using React with native platform capabilities. It uses native components instead of web views, making apps feel and perform like native ones. The document discusses what React Native is, how to set up a development environment, build a basic app, add libraries, handle common errors, and React Native fundamentals like components, styles, layout, events, and touch handling.

react nativemobile development
React Js Simplified
React Js SimplifiedReact Js Simplified
React Js Simplified

React Js Basic Details and Descriptions Frontend Javascript Library, to make decent SPA The fastest way to build a segregated component based front end for software development.

javascriptreactjsnodejs
.NET Core, ASP.NET Core Course, Session 6
.NET Core, ASP.NET Core Course, Session 6.NET Core, ASP.NET Core Course, Session 6
.NET Core, ASP.NET Core Course, Session 6

This document provides an overview and agenda for Session 6 of a .NET Core and ASP.NET Core training course. It introduces ASP.NET Core 1.0, how to start ASP.NET core applications using the Startup class, and middleware in ASP.NET core. Key topics covered include what ASP.NET Core is, the ASP.NET Core application anatomy, methods of the WebHostBuilder class, anatomy of the Startup class, developing and using middleware, and built-in middleware. Examples of middleware configuration are also demonstrated.

.net coreasp.net coreasp.net
Model View Controller
● The Model, which provides the data and business rules
of the application.
● The View, which provides the sensory (usually visual,
but also often audio) representation of the Model’s data.
● The Controller, which converts requests from the user
into commands that
● update the Model and/or View of an application.
● Our SPA moves as much of the application to the
browser as possible.
● The whole MVC moves to the client
Q&A
What is the goal?
● Provide a radically faster and widely accessible getting started
experience
● Be opinionated out of the box, but get out of the way quickly as
requirements sstart to diverge from the defailts
● Provide a range of non-functional features that are common to large
classes of projects
○ Embedded Servers
○ Security
○ Metrics
○ Externalized Configuration
● Absolutely no code generation and no requirement for XML
● Convension over configuration
Introducing Spring Boot
Sample Code
@Controller
class Controller
{
@RequestMapping("/")
@ResponseBody
String getHome(){ return "Hello
World"; }
}

Recommended for you

Node.js Express Framework
Node.js Express FrameworkNode.js Express Framework
Node.js Express Framework

Learn Node.js framework in simple and easy steps starting from basic to advanced concepts with examples including Introduction

nodejsexpressjsjavascript
Expressjs
ExpressjsExpressjs
Expressjs

Express.js is a web application framework for Node.js that provides a flexible set of features for building web and mobile apps. Express apps use middleware functions that have access to the request and response objects and allow for intermediate processing in the request-response cycle. Middleware functions can execute code, modify requests/responses, and call the next middleware function. Express supports application-level middleware, router-level middleware, error handling middleware, built-in middleware like static file serving, and third-party middleware.

expressjsexpressnodejs
Mobile App Development
Mobile App DevelopmentMobile App Development
Mobile App Development

The document discusses mobile app development from a web developer's perspective. It covers topics such as web apps vs native apps, technologies for mobile development like HTML5 and frameworks, and specific techniques for mobile like viewport scaling, geolocation APIs, and offline storage. The document provides examples of code for implementing these mobile techniques.

windows mobileobjective-cblackberry
Instructions
1. Clone the project from
Git Hub
2. Open Eclipse and Import
the project
3. Run
https://github.com/spring-projects/spring-boot
Why MVC Framework on the Front-End?
● Avoid Re-inventing the wheel
● We ALL suck at Javascript
● Follow best practice. Avoid Spaghetti Code
● Modular Code and Scalibility
● DOM Manipulation + Templating + Routing
Examples: Backbone.js, Ember.js, AngularJS,
Spine, CanJS, React.js
Stop relying on JQuery my friend!
What is AngularJS?
● Client Side Browser App Framework
● Open Source
● MVC Framework on the browser
git clone https://github.com/spring-
guides/gs-consuming-rest-angularjs.git

Recommended for you

Ajax
AjaxAjax
Ajax

AJAX is a new approach to web application development that uses asynchronous JavaScript and XML to transmit small amounts of data in the background without interfering with the display and behavior of the existing page. Some key aspects of AJAX include asynchronous data retrieval using XMLHttpRequest, data interchange formats like XML/JSON, dynamic display using the DOM, and JavaScript binding it all together for a more responsive user experience compared to traditional full page loads. Common AJAX design patterns address issues like predictive fetching of likely next data, throttling frequent submissions, periodic refreshing of data, and multi-stage downloading of pages and components.

Nuxt.JS Introdruction
Nuxt.JS IntrodructionNuxt.JS Introdruction
Nuxt.JS Introdruction

This document provides an overview of a minimalist framework called Nuxt.js for creating universal server-side rendered (SSR) applications using Vue.js. Some key points covered include: - Nuxt.js allows developers to write Vue components and pages while abstracting away concerns of client-server code splitting and routing. - Features include automatic code splitting, SSR, routing, static file serving, bundling/minifying, and error handling. - The framework uses a pages/ directory to define routes and components and includes Vuex and Vue-Router functionality out of the box. - Async data loading, custom layouts, global meta tags, and asset handling are also

vuejsjavascriptvue.js
Introdução ao React
Introdução ao ReactIntrodução ao React
Introdução ao React

Luiz Paulo tem 20 anos de experiência em desenvolvimento web. Ele é desenvolvedor e líder de equipe na Contabilone Tecnologia, com graduação em TI e pós-graduação em engenharia de software. O documento discute o que é React, por que foi desenvolvido e conceitos-chave como arquitetura, Virtual DOM, componentização e controle de estado.

reacttecnologyfront-end
THE
END

More Related Content

What's hot

Intro to Node.js (v1)
Intro to Node.js (v1)Intro to Node.js (v1)
Intro to Node.js (v1)
Chris Cowan
 
Use Node.js to create a REST API
Use Node.js to create a REST APIUse Node.js to create a REST API
Use Node.js to create a REST API
Fabien Vauchelles
 
Blazor
BlazorBlazor
Introduction of Progressive Web App
Introduction of Progressive Web AppIntroduction of Progressive Web App
Introduction of Progressive Web App
Sankalp Khandelwal
 
Introduction to back-end
Introduction to back-endIntroduction to back-end
Introduction to back-end
Mosaab Ehab
 
Workshop 4: NodeJS. Express Framework & MongoDB.
Workshop 4: NodeJS. Express Framework & MongoDB.Workshop 4: NodeJS. Express Framework & MongoDB.
Workshop 4: NodeJS. Express Framework & MongoDB.
Visual Engineering
 
Introduction to React Native Workshop
Introduction to React Native WorkshopIntroduction to React Native Workshop
Introduction to React Native Workshop
Ignacio Martín
 
NEXT.JS
NEXT.JSNEXT.JS
jQuery Ajax
jQuery AjaxjQuery Ajax
jQuery Ajax
Anand Kumar Rajana
 
React native
React nativeReact native
React Js Simplified
React Js SimplifiedReact Js Simplified
React Js Simplified
Sunil Yadav
 
.NET Core, ASP.NET Core Course, Session 6
.NET Core, ASP.NET Core Course, Session 6.NET Core, ASP.NET Core Course, Session 6
.NET Core, ASP.NET Core Course, Session 6
aminmesbahi
 
Node.js Express Framework
Node.js Express FrameworkNode.js Express Framework
Node.js Express Framework
TheCreativedev Blog
 
Expressjs
ExpressjsExpressjs
Mobile App Development
Mobile App DevelopmentMobile App Development
Mobile App Development
Chris Morrell
 
Ajax
AjaxAjax
Nuxt.JS Introdruction
Nuxt.JS IntrodructionNuxt.JS Introdruction
Nuxt.JS Introdruction
David Ličen
 
Introdução ao React
Introdução ao ReactIntrodução ao React
Introdução ao React
Luiz Paulo dos Prazeres Júnior
 
NextJS, A JavaScript Framework for building next generation SPA
NextJS, A JavaScript Framework for building next generation SPA  NextJS, A JavaScript Framework for building next generation SPA
NextJS, A JavaScript Framework for building next generation SPA
Pramendra Gupta
 
React Native Workshop
React Native WorkshopReact Native Workshop
React Native Workshop
Amazon Web Services
 

What's hot (20)

Intro to Node.js (v1)
Intro to Node.js (v1)Intro to Node.js (v1)
Intro to Node.js (v1)
 
Use Node.js to create a REST API
Use Node.js to create a REST APIUse Node.js to create a REST API
Use Node.js to create a REST API
 
Blazor
BlazorBlazor
Blazor
 
Introduction of Progressive Web App
Introduction of Progressive Web AppIntroduction of Progressive Web App
Introduction of Progressive Web App
 
Introduction to back-end
Introduction to back-endIntroduction to back-end
Introduction to back-end
 
Workshop 4: NodeJS. Express Framework & MongoDB.
Workshop 4: NodeJS. Express Framework & MongoDB.Workshop 4: NodeJS. Express Framework & MongoDB.
Workshop 4: NodeJS. Express Framework & MongoDB.
 
Introduction to React Native Workshop
Introduction to React Native WorkshopIntroduction to React Native Workshop
Introduction to React Native Workshop
 
NEXT.JS
NEXT.JSNEXT.JS
NEXT.JS
 
jQuery Ajax
jQuery AjaxjQuery Ajax
jQuery Ajax
 
React native
React nativeReact native
React native
 
React Js Simplified
React Js SimplifiedReact Js Simplified
React Js Simplified
 
.NET Core, ASP.NET Core Course, Session 6
.NET Core, ASP.NET Core Course, Session 6.NET Core, ASP.NET Core Course, Session 6
.NET Core, ASP.NET Core Course, Session 6
 
Node.js Express Framework
Node.js Express FrameworkNode.js Express Framework
Node.js Express Framework
 
Expressjs
ExpressjsExpressjs
Expressjs
 
Mobile App Development
Mobile App DevelopmentMobile App Development
Mobile App Development
 
Ajax
AjaxAjax
Ajax
 
Nuxt.JS Introdruction
Nuxt.JS IntrodructionNuxt.JS Introdruction
Nuxt.JS Introdruction
 
Introdução ao React
Introdução ao ReactIntrodução ao React
Introdução ao React
 
NextJS, A JavaScript Framework for building next generation SPA
NextJS, A JavaScript Framework for building next generation SPA  NextJS, A JavaScript Framework for building next generation SPA
NextJS, A JavaScript Framework for building next generation SPA
 
React Native Workshop
React Native WorkshopReact Native Workshop
React Native Workshop
 

Viewers also liked

Single Page Web
Single Page WebSingle Page Web
Single Page Web
종복 박
 
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
 
JS Single-Page Web App Essentials
JS Single-Page Web App EssentialsJS Single-Page Web App Essentials
JS Single-Page Web App Essentials
Sergey Bolshchikov
 
ES2015 Quiz
ES2015 QuizES2015 Quiz
ES2015 Quiz
Sergey Bolshchikov
 
AngularJS - The Next Big Thing?
AngularJS - The Next Big Thing?AngularJS - The Next Big Thing?
AngularJS - The Next Big Thing?
Tom Hombergs
 
Getting Single Page Application Security Right
Getting Single Page Application Security RightGetting Single Page Application Security Right
Getting Single Page Application Security Right
Philippe De Ryck
 
A different thought AngularJS
A different thought AngularJSA different thought AngularJS
A different thought AngularJS
Amit Thakkar
 
Requirements Bazaar powered by AngularJS and Polymer - Talk at Google Develop...
Requirements Bazaar powered by AngularJS and Polymer - Talk at Google Develop...Requirements Bazaar powered by AngularJS and Polymer - Talk at Google Develop...
Requirements Bazaar powered by AngularJS and Polymer - Talk at Google Develop...
IstvanKoren
 
AngularJS
AngularJSAngularJS
SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph
SharePoint Saturday Paris 2016 - AngularJS with the Microsoft GraphSharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph
SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph
Sébastien Levert
 
Let your website a ride of AngularJS
Let your website a ride of AngularJSLet your website a ride of AngularJS
Let your website a ride of AngularJS
Mike Taylor
 
The AngularJS way
The AngularJS wayThe AngularJS way
The AngularJS way
Boyan Mihaylov
 
AngularJS
AngularJSAngularJS
AngularJS
Yogesh L
 
Single-Page Application Design Principles 101
Single-Page Application Design Principles 101Single-Page Application Design Principles 101
Single-Page Application Design Principles 101
Jollen Chen
 
Angular js
Angular jsAngular js
Angular js
Knoldus Inc.
 
Gettings started with the superheroic JavaScript library AngularJS
Gettings started with the superheroic JavaScript library AngularJSGettings started with the superheroic JavaScript library AngularJS
Gettings started with the superheroic JavaScript library AngularJS
Armin Vieweg
 
AngularJS - What is it & Why is it awesome ? (with demos)
AngularJS - What is it & Why is it awesome ? (with demos)AngularJS - What is it & Why is it awesome ? (with demos)
AngularJS - What is it & Why is it awesome ? (with demos)
Gary Arora
 
reveal.js 3.0.0
reveal.js 3.0.0reveal.js 3.0.0
reveal.js 3.0.0
Hakim El Hattab
 
Benefits of developing a Single Page Web Applications using AngularJS
Benefits of developing a Single Page Web Applications using AngularJSBenefits of developing a Single Page Web Applications using AngularJS
Benefits of developing a Single Page Web Applications using AngularJS
KNOWARTH - Software Development Company
 

Viewers also liked (19)

Single Page Web
Single Page WebSingle Page Web
Single Page Web
 
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
 
JS Single-Page Web App Essentials
JS Single-Page Web App EssentialsJS Single-Page Web App Essentials
JS Single-Page Web App Essentials
 
ES2015 Quiz
ES2015 QuizES2015 Quiz
ES2015 Quiz
 
AngularJS - The Next Big Thing?
AngularJS - The Next Big Thing?AngularJS - The Next Big Thing?
AngularJS - The Next Big Thing?
 
Getting Single Page Application Security Right
Getting Single Page Application Security RightGetting Single Page Application Security Right
Getting Single Page Application Security Right
 
A different thought AngularJS
A different thought AngularJSA different thought AngularJS
A different thought AngularJS
 
Requirements Bazaar powered by AngularJS and Polymer - Talk at Google Develop...
Requirements Bazaar powered by AngularJS and Polymer - Talk at Google Develop...Requirements Bazaar powered by AngularJS and Polymer - Talk at Google Develop...
Requirements Bazaar powered by AngularJS and Polymer - Talk at Google Develop...
 
AngularJS
AngularJSAngularJS
AngularJS
 
SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph
SharePoint Saturday Paris 2016 - AngularJS with the Microsoft GraphSharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph
SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph
 
Let your website a ride of AngularJS
Let your website a ride of AngularJSLet your website a ride of AngularJS
Let your website a ride of AngularJS
 
The AngularJS way
The AngularJS wayThe AngularJS way
The AngularJS way
 
AngularJS
AngularJSAngularJS
AngularJS
 
Single-Page Application Design Principles 101
Single-Page Application Design Principles 101Single-Page Application Design Principles 101
Single-Page Application Design Principles 101
 
Angular js
Angular jsAngular js
Angular js
 
Gettings started with the superheroic JavaScript library AngularJS
Gettings started with the superheroic JavaScript library AngularJSGettings started with the superheroic JavaScript library AngularJS
Gettings started with the superheroic JavaScript library AngularJS
 
AngularJS - What is it & Why is it awesome ? (with demos)
AngularJS - What is it & Why is it awesome ? (with demos)AngularJS - What is it & Why is it awesome ? (with demos)
AngularJS - What is it & Why is it awesome ? (with demos)
 
reveal.js 3.0.0
reveal.js 3.0.0reveal.js 3.0.0
reveal.js 3.0.0
 
Benefits of developing a Single Page Web Applications using AngularJS
Benefits of developing a Single Page Web Applications using AngularJSBenefits of developing a Single Page Web Applications using AngularJS
Benefits of developing a Single Page Web Applications using AngularJS
 

Similar to Single page application

Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
Saikiran Sheshagiri
 
[Webinar] Expanding future mobile commerce with Magento PWA Studio
[Webinar] Expanding future mobile commerce with Magento PWA Studio[Webinar] Expanding future mobile commerce with Magento PWA Studio
[Webinar] Expanding future mobile commerce with Magento PWA Studio
CedCommerce
 
Basic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web AppsBasic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web Apps
AnjaliTanpure1
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
Akshay Sharma
 
Optimus XPages: An Explosion of Techniques and Best Practices
Optimus XPages: An Explosion of Techniques and Best PracticesOptimus XPages: An Explosion of Techniques and Best Practices
Optimus XPages: An Explosion of Techniques and Best Practices
Teamstudio
 
web, spa vs traditional - 2016
web, spa vs traditional - 2016web, spa vs traditional - 2016
web, spa vs traditional - 2016
Yauheni Nikanovich
 
Service worker API
Service worker APIService worker API
Service worker API
Giorgio Natili
 
Google App Engine Overview and Update
Google App Engine Overview and UpdateGoogle App Engine Overview and Update
Google App Engine Overview and Update
Chris Schalk
 
Rapid app building with loopback framework
Rapid app building with loopback frameworkRapid app building with loopback framework
Rapid app building with loopback framework
Thomas Papaspiros
 
Simple Web Services with PHP
Simple Web Services with PHPSimple Web Services with PHP
Simple Web Services with PHP
John Paul Ada
 
E-commerce Berlin Expo 2017 - AMP and Progressive Web Apps – Start Fast, Stay...
E-commerce Berlin Expo 2017 - AMP and Progressive Web Apps – Start Fast, Stay...E-commerce Berlin Expo 2017 - AMP and Progressive Web Apps – Start Fast, Stay...
E-commerce Berlin Expo 2017 - AMP and Progressive Web Apps – Start Fast, Stay...
E-Commerce Berlin EXPO
 
PWA - Progressive Web App
PWA - Progressive Web AppPWA - Progressive Web App
PWA - Progressive Web App
Robert Robinson
 
Progressive Web Apps For Startups
Progressive Web Apps For StartupsProgressive Web Apps For Startups
Progressive Web Apps For Startups
Ido Green
 
A CQRS Journey
A CQRS JourneyA CQRS Journey
Home management WebApp presentation
Home management WebApp presentationHome management WebApp presentation
Home management WebApp presentation
bhavesh singh
 
The PRPL Pattern
The PRPL PatternThe PRPL Pattern
The PRPL Pattern
Red Pill Now
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
Yatendrasinh Joddha
 
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptxLATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
chitrachauhan21
 
Progressive web application considerations before implementing magento pwa ...
Progressive web application   considerations before implementing magento pwa ...Progressive web application   considerations before implementing magento pwa ...
Progressive web application considerations before implementing magento pwa ...
CedCommerce
 
OSDC 2018 | From Monolith to Microservices by Paul Puschmann_
OSDC 2018 | From Monolith to Microservices by Paul Puschmann_OSDC 2018 | From Monolith to Microservices by Paul Puschmann_
OSDC 2018 | From Monolith to Microservices by Paul Puschmann_
NETWAYS
 

Similar to Single page application (20)

Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
[Webinar] Expanding future mobile commerce with Magento PWA Studio
[Webinar] Expanding future mobile commerce with Magento PWA Studio[Webinar] Expanding future mobile commerce with Magento PWA Studio
[Webinar] Expanding future mobile commerce with Magento PWA Studio
 
Basic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web AppsBasic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web Apps
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
 
Optimus XPages: An Explosion of Techniques and Best Practices
Optimus XPages: An Explosion of Techniques and Best PracticesOptimus XPages: An Explosion of Techniques and Best Practices
Optimus XPages: An Explosion of Techniques and Best Practices
 
web, spa vs traditional - 2016
web, spa vs traditional - 2016web, spa vs traditional - 2016
web, spa vs traditional - 2016
 
Service worker API
Service worker APIService worker API
Service worker API
 
Google App Engine Overview and Update
Google App Engine Overview and UpdateGoogle App Engine Overview and Update
Google App Engine Overview and Update
 
Rapid app building with loopback framework
Rapid app building with loopback frameworkRapid app building with loopback framework
Rapid app building with loopback framework
 
Simple Web Services with PHP
Simple Web Services with PHPSimple Web Services with PHP
Simple Web Services with PHP
 
E-commerce Berlin Expo 2017 - AMP and Progressive Web Apps – Start Fast, Stay...
E-commerce Berlin Expo 2017 - AMP and Progressive Web Apps – Start Fast, Stay...E-commerce Berlin Expo 2017 - AMP and Progressive Web Apps – Start Fast, Stay...
E-commerce Berlin Expo 2017 - AMP and Progressive Web Apps – Start Fast, Stay...
 
PWA - Progressive Web App
PWA - Progressive Web AppPWA - Progressive Web App
PWA - Progressive Web App
 
Progressive Web Apps For Startups
Progressive Web Apps For StartupsProgressive Web Apps For Startups
Progressive Web Apps For Startups
 
A CQRS Journey
A CQRS JourneyA CQRS Journey
A CQRS Journey
 
Home management WebApp presentation
Home management WebApp presentationHome management WebApp presentation
Home management WebApp presentation
 
The PRPL Pattern
The PRPL PatternThe PRPL Pattern
The PRPL Pattern
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptxLATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
 
Progressive web application considerations before implementing magento pwa ...
Progressive web application   considerations before implementing magento pwa ...Progressive web application   considerations before implementing magento pwa ...
Progressive web application considerations before implementing magento pwa ...
 
OSDC 2018 | From Monolith to Microservices by Paul Puschmann_
OSDC 2018 | From Monolith to Microservices by Paul Puschmann_OSDC 2018 | From Monolith to Microservices by Paul Puschmann_
OSDC 2018 | From Monolith to Microservices by Paul Puschmann_
 

Recently uploaded

Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers
Awais Yaseen
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
Enterprise Wired
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
Mark Billinghurst
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
Safe Software
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Erasmo Purificato
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
jackson110191
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
KAMAL CHOUDHARY
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
ArgaBisma
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
Larry Smarr
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Chris Swan
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
Vijayananda Mohire
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
Kief Morris
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
BookNet Canada
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
Bert Blevins
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
RaminGhanbari2
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Bert Blevins
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
ScyllaDB
 

Recently uploaded (20)

Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
 

Single page application

  • 1. SPA Brown Bag Session by Arthur Fung
  • 2. We work hard! We deserve it! Oh yeah! Date: 3/31 - 4/4 Place: Napa Valley Duration: 1 week! Fee: Priceless TACPOINT IS AWESOME
  • 3. WHAT IS SPA?? NICE TRY PEOPLE!
  • 4. Single Page Application A single-page application (SPA), also known as single-page interface (SPI), is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application.
  • 5. Desktop ● Fast Response ● Capable of rendering portion of the UI ● More interactive with the user ● Cross Platform ● Universally accessible ● Instantly updated and distributed Traditional Website ● Platform Specific. ● Only accessible on installed machine ● Needs users to manually update the application ● Slow. Page Flash. ● Universally accessible ● Instantly updated and distributed
  • 6. In fact, SPA can provide the best of BOTH worlds.
  • 9. What is a Single Page Application? ● Fluid transitions between page, richer interaction between UI componenets. No page refresh ● Application logic in the client ● Fetch Data on demand ● Dynamic Data Loading, usually with Rest API ● Back/Forward Button works as expected ● Support bookmark ● Ability to go offline
  • 10. Advantages of SPA ● Responsive, Native Appplication Feel. No page blink. ● Faster UI, More Interactive ● More work on client side, offloading the server responsibility ● REST endpoints are more general purpose ● Perfect for supporting multiple platofmrs, since UI is just another client ● Share benefits from both desktop and web app
  • 13. Model View Controller ● The Model, which provides the data and business rules of the application. ● The View, which provides the sensory (usually visual, but also often audio) representation of the Model’s data. ● The Controller, which converts requests from the user into commands that ● update the Model and/or View of an application. ● Our SPA moves as much of the application to the browser as possible. ● The whole MVC moves to the client
  • 14. Q&A
  • 15. What is the goal? ● Provide a radically faster and widely accessible getting started experience ● Be opinionated out of the box, but get out of the way quickly as requirements sstart to diverge from the defailts ● Provide a range of non-functional features that are common to large classes of projects ○ Embedded Servers ○ Security ○ Metrics ○ Externalized Configuration ● Absolutely no code generation and no requirement for XML ● Convension over configuration Introducing Spring Boot
  • 17. Instructions 1. Clone the project from Git Hub 2. Open Eclipse and Import the project 3. Run https://github.com/spring-projects/spring-boot
  • 18. Why MVC Framework on the Front-End? ● Avoid Re-inventing the wheel ● We ALL suck at Javascript ● Follow best practice. Avoid Spaghetti Code ● Modular Code and Scalibility ● DOM Manipulation + Templating + Routing Examples: Backbone.js, Ember.js, AngularJS, Spine, CanJS, React.js
  • 19. Stop relying on JQuery my friend!
  • 20. What is AngularJS? ● Client Side Browser App Framework ● Open Source ● MVC Framework on the browser git clone https://github.com/spring- guides/gs-consuming-rest-angularjs.git

Editor's Notes

  1. my definition: A single page application is a web app in which the majority of interactions are handled on the client without the need to reach a server, with a goal of providing a more fluid user experience
  2. An SPA can render like a desktop application—The SPA redraws the parts of the interface that need to change only as needed. A traditional website, in compari- son, redraws the entire page on many user actions, resulting in a pause and a “flash” while the browser retrieves from the server and then redraws everything on the page. If the page is large, the server is busy, or the internet connection is slow, this flash can take several seconds or more, and the user has to guess when the page is ready to use again. This is a horrible experience when compared to the rapid rendering and immediate feedback of an SPA. ■ An SPA can respond like a desktop application—The SPA minimizes response time by moving working (transient) data and processing from the server to the browser as much as possible. The SPA has the data and business logic needed to make most decisions locally and therefore quickly. Only data validation, authen- tication, and permanent storage must remain on the server, for reasons we dis- cuss in chapters 6-8. A traditional website has most of the application logic on the server and the user must wait for a request/response/redraw cycle in response to much of their input. This can take several seconds, compared to the near immediate response of the SPA. ■ An SPA can notify users of its state like a desktop application—When an SPA does have to wait on a server, it can dynamically render a progress bar or busy indicator so the user isn’t befuddled by a delay. Compare this to a traditional website, where the user actually has to guess when the page is loaded and usable. ■ An SPA is nearly universally accessible like a website—Unlike most desktop applica- tions, users can access an SPA from any web connection and a decent browser. Today, the list includes smart phones, tablets, televisions, laptops, and desktop computers. ■ An SPA can be instantly updated and distributed like a website—The user doesn’t have to do anything to realize the benefits—when they reload the browser it works. The hassle of maintaining multiple concurrent versions of software is largely eliminated.7 The authors have worked on SPAs that have been built and 7 But not completely: what happens if the server-client data exchange format changes, yet many users have the prior version of software loaded in their browser? This can be accommodated with some forethought. Summary 21 updated multiple times in a single day. Desktop applications often require a download and administrative access to install a new version, and the interval between versions can be many months or years. ■ An SPA is cross-platform like a website—Unlike most desktop applications, a well- written SPA can work on any operating system that provides a modern HTML5 browser. Though usually this is considered a developer benefit, it’s extremely useful for many users who have a combination of devices—say Windows at work, a Mac at home, a Linux server, an Android phone, and an Amazon tablet.
  3. the immediacy of a desktop application and the portability and accessibility of a website. The JavaScript SPA is available on over a billion devices that support a modern web browser and that don’t require any propri- etary plugins. With a little effort, it can support desktops, tablets, and smart phones run- ning many different operating systems. SPAs are easily updated and distributed, usually without requiring any action from the user. All of these benefits explain why you may want to make your next application an SPA.
  4. Single Page Application is a web app in which the majority of interactions are handled on the client without the need to reach a server, with a goal of providing a more fluid user experience
  5. Do you need to share a project with a designer, and have the flexibility for design work and development work to happen near-simultaneously? Do you require thorough unit testing for your solutions? Is it important for you to have reusable components, both within and across projects in your organization? Would you like more flexibility to change your user interface without having to refactor other logic in the code base?