1. Martin Kruliš 23. 5. 2016 by Martin Kruliš (v1.0)1

2.  Single Page Applications ◦ The application logic runs in the browser  Provides more desktop-like user experience  HTTP requests are handled asynchronously (and covertly) ◦ Traditional browsing is typically discouraged  Handled internally by re-rendering the page ◦ Thin server architecture  Data storage, security verifications, … ◦ Disadvantages  Application boot - loading and initialization time  Less stable execution environment (many browser types) 23. 5. 2016 by Martin Kruliš (v1.0)2

3.  SPA vs. Desktop Applications ◦ Similar UI concepts  Event driven programming ◦ Environment and security  It is much simpler to hack code of a web application than regular (compiled) desktop application ◦ Server communication  A defining attribute of web applications  Another source of runtime errors  Asynchronous request may interfere with UI events 23. 5. 2016 by Martin Kruliš (v1.0)3

4.  Events and User Actions ◦ Events are entangled with DOM structure ◦ User actions are abstract (not tied to DOM)  Event may trigger an action which is not DOM-related ◦ Mechanism for global action processing  Components ◦ A smart way how to divide code ◦ Components need to communicate/cooperate ◦ Components may compete for resources  Local storage, workers, … 23. 5. 2016 by Martin Kruliš (v1.0)4

5.  Model-View-Controller at Client Side 23. 5. 2016 by Martin Kruliš (v1.0)5 View Controller Model Process user actions and handles business logic Process user actions and handles business logic Keeps client-side data and manages their sync. with server side (if necessary) Renders data (Javascript structures, JSON, XML, …) into HTML fragments

6.  Model-View-Viewmodel ◦ Simplifies data presentation especially in SPA 23. 5. 2016 by Martin Kruliš (v1.0)6 View Model View Model ViewModel Data for business logic Data for presentation Presentation logic Data bindings

7.  AngularJS Library ◦ Open source SPA framework, propelled by Google ◦ Adopts MVC and MVVM patterns  Logic in controllers is coded imperatively  Data bindings are declarative (embedded in HTML) ◦ $scope object – a context for most operations  Variables from scope can be bound to page fragments  Two-way data binding  Updates are performed iteratively (digest cycle) ◦ Angular 2 recently released  Complete rewrite, many changes  Microsoft TypeScript – typed version of Javascript 23. 5. 2016 by Martin Kruliš (v1.0)7

8.  MVVM and Data Binding ◦ Declarative, embedded in HTML  Typically as new attributes and CSS classes  Using a special syntax directly in text content User Name: {{ fistName }} {{ lastName }} ◦ The Viewmodel is the $scope context  The bindings are bidirectional  Automatically propagated in both ways  $scope.caption input.value (from above)  $scope.firstName -> rendered to the text placeholder  The controller works only with the $scope object 23. 5. 2016 by Martin Kruliš (v1.0)8

9.  Directives ◦ Many embedded directives for the visual control  ng-bind, ng-model  ng-if, ng-switch, ng-repeat, ng-show, ng-hide ◦ Defining custom directives  Controllers ◦ Perform $scope initialization ◦ Declare functions (actions), which can be triggered by event-handlers (e.g., ng-click ) 23. 5. 2016 by Martin Kruliš (v1.0)9 Example 1

10.  MVC and Feature Scalability ◦ The model-view bindings may become troublesome in complex scenarios 23. 5. 2016 by Martin Kruliš (v1.0)10 View Model Action Controller Model View

11.  Flux Framework ◦ Dispatcher process one action at a time ◦ Action is propagated to all stores before the views are changed (prevents cycling) ◦ If a view needs to update something, it generates new action 23. 5. 2016 by Martin Kruliš (v1.0)11 Action Dispatcher Store View Action

12.  ReactJS Library ◦ Another open source library which uses Flux ◦ Open source, propelled by Facebook and Instagram ◦ Key features  Separation of concepts (individual UI components)  One-way data flow  Child component cannot modify its parent  Actions are propagated up through callback  Virtual DOM  Aggregate changes, so fewer modifications to real DOM are required when a component re-renders itself  JSX – Javascript language extension 23. 5. 2016 by Martin Kruliš (v1.0)12

13.  Thick Client and Thin Server ◦ HTTP is no longer used (only) in traditional sense ◦ RPC-like concept is used over HTTP or WebSockets ◦ Server performs only those operations that cannot or should not be transferred to client  Data management (retrieval, modifications, …)  Data are transferred in JSON or in native format (images)  Authentication and authorization  Trusted computing base cannot be extended to the client  Supportive tasks  Providing modules, styles, …  Rendering fragments of HTML (performance optimization) 23. 5. 2016 by Martin Kruliš (v1.0)13

14.  Representational State Transfer (REST) ◦ Server API which offers retrieval and manipulation with application resources in a HTTP-compliant way  Resources are identified by URIs  Operations are performed by HTTP requests ◦ REST formal constraints are  Client-server model  Stateless interface (no client context is cached at server)  Cacheable (response defines whether it can be cached)  Uniform interface  Layered system (proxies, servers may be replicated) 23. 5. 2016 by Martin Kruliš (v1.0)14

15.  Representational State Transfer (REST) ◦ HTTP request methods reflect desired operations  GET – retrieve the resource (nullipotent)  POST – append new sub-entity in the resource  PUT – insert/replace the resource (idempotent)  DELETE – remove the resource (idempotent) ◦ Example  API for photo gallery  /gallery – collection of all galleries  /gallery/kittens - photos in gallery with ID=kittens  /gallery/kittens/kitten01 – photo kitten01 23. 5. 2016 by Martin Kruliš (v1.0)15

16.  REST Example 23. 5. 2016 by Martin Kruliš (v1.0)16 /gallery (collection of galleries) /gallery/kittens (photos in gallery) …/kitten01 (single photo) GET Get the list of all galleries (JSON) Get the list of photos in the gallery (JSON) Get the image (jpeg) POST Create a new gallery Create a new photo in a gallery Not generally used. Perhaps for adding image metadata… PUT Replace list of galleries (atypical) Replace entire list of photos in gallery Replace/insert an image (of given ID) DELETE Empty the whole application Remove all photos of a gallery Remove the given image

17.  PHP Slim Framework Example $app = new \Slim\App; $app->get('/hello/{name}', function (Request $request, Response $response) { $name = $request->getAttribute('name'); $response->getBody()->write("Hello, $name"); return $response; }); $app->run(); 23. 5. 2016 by Martin Kruliš (v1.0)17

18.  Deployment ◦ New versions are not loaded immediately ◦ Backward compatibility, versions in file names, …  Error Handling ◦ Careful error/exception handling ◦ Explicit transfers to server (which may also fail) ◦ Client-side error cache  Dependencies in development ◦ Typical SPA uses many libraries ◦ Library management systems exist  Composer, npm, Bower, … 23. 5. 2016 by Martin Kruliš (v1.0)18

19. 23. 5. 2016 by Martin Kruliš (v1.0)19