single page applications - ternopiljs #2

SINGLE PAGE APPLICATIONSAndriy Deren’, Dreams IT, CEOTernopil JS #2

AGENDA▪ What is SPA?

▪ SPA architecture design

▪ SPA Back-end

▪ SPA Client-side

▪ MVVM & SPA implementation

▪ SPA Advanced techniques

MODERN WEB CHALLENGES▪ More in-page interactivity

▪ Rich client graphics

▪ Data growth

▪ Page size growth

▪ New client devices

▪ Reloads vs Native feeling

CLASSIC WEB PAGES

/GET /home/index

Browser Web-server Server-sidemagic

A lot of HTML, CSS, JS on each click

Main.csssuper_script.js

CLASSIC WEB PAGES

/GET /home/index

Browser Web-server Server-sidemagic

A lot of HTML, CSS, JS on each click

Main.csssuper_script.js

Reloads & redirects

SINGLE PAGE APPLICATION

/GET /home/indexBrowserWeb-server Server-side

magic

Load tiny html template

Main.csssuper_script.js

Load required data

SINGLE PAGE APPLICATIONBrowser

Client-sidemagic

Fill template with data

Bind actions behavior

Client-side routing

All actions and redirectsare handled on client-side

With no page reload and huge HTML packages

SPA ARCHITECTURE DESIGN

Routing Action Behaviors Data Provider & Data context

State (Storage)Security

(authorization & authentication)

Data AccessBack-end

Middle-ware

Views & Templates Bindings Custom scriptsFront-end

CLIE

NT

SIDE

SPA BACK-END

State (Storage)Security

(authorization & authentication)

Data Access

▪ Data storage

▪ User-specific data

▪ Security actions

▪ Provide access to resources (via HTTP REST API)

SPA BACK-END

State (Storage)Security

(authorization & authentication)

Data Access

▪ Minimal delay

▪ Maximal efficiency

▪ High scale

▪ Versioning

▪ Conventions

GET /api/v1/product/32

Good resource route

GET /product.php?v=1&id=32&action=getProduct

Bad resource route

SPA BACK-END

State (Storage)Security

(authorization & authentication)

Data Access

SPA MIDDLE WARE

▪ Data context: Models, Data Provider & App State

▪ Routing: client-side navigation

▪ User actions reaction

Routing Action Behaviors Data Provider & Data context

SPA FRONT-END

▪ State bindings: connect app state and UI elements

▪ Load & select right views

▪ Run custom scripts (jQuery, animation, transitions, etc.)

Views & Templates Bindings Custom scripts

View

MVVM PATTERN

View View Model Model

View Behavior (UI Logic)

Notifications

Bindings

Commands

Data transfer

UI Presentation Layer Data Layer and BL

View

SPA COMPONENTS

View

Views and templates

(HTML fragments)View models

Router + routing configuration (navigation)

Custom scripts

Data providers & data transfer

SPA ShellSPA

UNDER THE HOOD

example.com/#productsexample.com/#products/details/12

Routing

Uses History API (back button works!)

<h3 class="app-title" data-bind="text:$data.title"> …

Bindings

Data bindings(by code, markup, etc.)

<a data-bind="click:$root.showDetails">… Behavior bindings(by code, markup, etc.)

IMPLEMENTATION TECHNOLOGIES

SPA ADVANCED TECHNIQUES▪ Architecture design with implementation in mind

▪ Simplify client-side code (TypeScript, Coffee)

▪ Dependencies injection & modules (RequireJS)

▪ Testing

▪ Attention to efficiency and performance

▪ Search engines optimization

THANK YOU!Any questions?