single page application
TRANSCRIPT
We work hard! We deserve it! Oh yeah!
Date: 3/31 - 4/4Place: Napa ValleyDuration: 1 week!Fee: Priceless
TACPOINTIS AWESOME
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.
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
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
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
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@Controllerclass Controller{
@RequestMapping("/")@ResponseBodyString getHome(){ return "Hello
World"; }}
Instructions1. Clone the project from
Git Hub2. Open Eclipse and Import
the project3. 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
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