SPABrown Bag Session by Arthur Fung

We work hard! We deserve it! Oh yeah!

Date: 3/31 - 4/4Place: Napa ValleyDuration: 1 week!Fee: Priceless

TACPOINTIS 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.

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

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

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@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

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

THEEND