Martin Kruliš
by Martin Kruliš (v1.1)
24. 5. 2017
1

Three-tire Applications
HTTP/WebSocket
Client
HTML
Web Server
Business Logic
by Martin Kruliš (v1.1)
Database
24. 5. 2017
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 changing DOM dynamically
◦ Thin server architecture
 Data storage, security verifications, …
◦ Disadvantages
 Application boot - loading and initialization time
 Less stable execution environment (many browser types)
by Martin Kruliš (v1.1)
24. 5. 2017
3

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, …
 Pre-rendering fragments of HTML (performance opt.)
by Martin Kruliš (v1.1)
24. 5. 2017
4

Representational State Transfer (REST)
◦ Resources are identified by URIs
 /gallery – all galleries
 /gallery/2017 – one gallery
 /gallery/2017/kitten1 – one photograph
◦ Operations are performed by HTTP requests
 Request method determines the operation
◦ CRUD Concept
 Create, Read, Update, Delete
 Correspond to POST, GET, PUT, DELETE HTTP methods
 Most basic data storage operations
by Martin Kruliš (v1.1)
24. 5. 2017
5

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(s) of runtime errors
 Server side errors, communication errors, timeouts, …
 Asynchronous request may interfere with UI events
by Martin Kruliš (v1.1)
24. 5. 2017
6

HTML Inadequacy
◦ HTML was not meant to be used in dynamic pages
 HTML is sent by server and also modified via DOM
 Difficult to track state of the UI
◦ DOM typically cannot hold the entire state of the
application (e.g., pending AJAX transfers)
◦ The root problem of SPA applications

Mixing Mutation and Asynchronicity
◦ State (and UI) needs to change
◦ Change is initiated by asynchronous actions
 User events, network events, timers, …
by Martin Kruliš (v1.1)
24. 5. 2017
7

Events and User Actions
◦ User 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, …
by Martin Kruliš (v1.1)
24. 5. 2017
8

Browser Compatibility
◦ Many browser vendors and versions
◦ Javascript (Ecmascript) evolves rapidly
◦ Script extensions/modifications exists
 TypeScript, JSX, …
◦ Polyfill
 Fills in new features (new objects, functions, APIs, …)
into older version of ES
◦ Transpillers
 Compilers from newer ES or other language into ES5
 Can be executed dynamically, or the project has to be
compiled before deployment
by Martin Kruliš (v1.1)
24. 5. 2017
9

Separate State and Presentation
◦ State is stored in a separate object (structure)
◦ DOM is updated when state is changed
 Data bindings (DOM – state)
 (partial) DOM re-rendering
◦ DOM events may trigger state changes
 Bidirectional data binding
 Events emit actions
◦ State mutability issue
 Mutable state monitored by observers
 Immutable state (new state must be constructed)
by Martin Kruliš (v1.1)
24. 5. 2017
10

Model-View-Controller at Client Side
Process user actions and
handles business logic
Controller
Keeps client-side data and
manages their sync. with
server side (if necessary)
View
Model
Renders data (Javascript structures,
JSON, XML, …) into HTML fragments
by Martin Kruliš (v1.1)
24. 5. 2017
11

Model-View-Viewmodel
◦ Simplifies data presentation especially in SPA
View
Model
Data bindings
View
Presentation logic
ViewModel
Model
Data for presentation
Data for business logic
by Martin Kruliš (v1.1)
24. 5. 2017
12

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
by Martin Kruliš (v1.1)
24. 5. 2017
13

MVVM and Data Binding
◦ Declarative, embedded in HTML
 Typically as new attributes and CSS classes
<input type="text" ng-model="caption">
 Using a special syntax directly in text content
<p>User Name: {{ fistName }} {{ lastName }}</p>
◦ 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
by Martin Kruliš (v1.1)
24. 5. 2017
14

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)
Example 1
by Martin Kruliš (v1.1)
24. 5. 2017
15

Angular 2
◦ Same idea (MVVC and data bindings)
◦ Rewritten in TypeScript
 ES6 + Types + Annotations
◦ Does not use one scope
 Decomposition in components instead of using
templates and controllers
◦ Dependency injection

Angular 4 (version 3 skipped)
◦ Improvement of Anular 2
by Martin Kruliš (v1.1)
24. 5. 2017
16

MVC and Feature Scalability
◦ The model-view bindings may become troublesome
in complex scenarios
Action
Controller
Model
View
Model
View
Model
View
Model
View
Model
View
by Martin Kruliš (v1.1)
24. 5. 2017
17

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
Action
Dispatcher
Store
View
Action
by Martin Kruliš (v1.1)
24. 5. 2017
18

Redux Framework
◦ Informal successor of Flux
◦ All data are in one store (one object)
◦ No dispatcher, actions are process by reductor(s)
 Reductor is a pure function (state, action) => state
◦ State should be never modified
Action
Reductor(s)
Store
View
Action
Example 2
by Martin Kruliš (v1.1)
24. 5. 2017
19

React.js UI Library
◦ Open source, propelled by Facebook and Instagram
◦ Often used with Redux
◦ 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
by Martin Kruliš (v1.1)
Example 3
24. 5. 2017
20

Mobile Applications with Web Technologies
◦ Javascript and React applied for mobile apps
◦ Great code reusability
◦ Compiled to be a native mobile app
 Using special markup instead of HTML
 Can be combined with platform-specific code
render() { return (
<ScrollView>
<Image source={{uri:'http://...'}} />
<Text>Some text</Text>
</ScrollView>
); }
by Martin Kruliš (v1.1)
24. 5. 2017
21

Tutorials
◦ Check out Angular, React, Redux tutorials
◦ Check out Laravel or Symfony framework

Lectures at MFF
◦ NSWI168 Practical seminar of modern web and
mobile applications
◦ NSWI145 – Web services
◦ NDBI038 - Searching the web
◦ NDBI034 - Multimedia retrieval
◦ NPGR012 - Interactive 3D web graphics
by Martin Kruliš (v1.1)
24. 5. 2017
22
by Martin Kruliš (v1.1)
24. 5. 2017
23