Client side
presentation
PA 165, Lecture 12
Martin Kuba
2
Outline
● JavaScript basics
● TypeScript
● JSON, REST API
● jQuery
● AngularJS
● browser APIs
SaaS architecture
● Software-as-a-Service can divide presentation layer to two
locations – server and client
● traditional approach
– thin HTML client, HTML generated on server
– use SpringMVC and JSPs
● recent approach
– server provides REST API
– fat client in HTML5+JavaScript or native app
– use SpringMVC for REST API
– use some JavaScript framework for browser
JavaScript
5
JavaScript for Java programmers
● syntax of both is based on C
6
Java / JavaScript differences
● types
– Java is strongly statically typed
– JavaScript is weakly dynamically typed
7
Java / JavaScript differences
● types in JS: Boolean, Number, String, Object, Null
● literals
8
Java / JavaScript differences
● Object orientation
– Java is based on classes
– JavaScript has no classes, only instances
– JavaScript is prototype-based language
– in JavaScript functions are first-class objects and can be
passed as arguments
9
Class-based vs Prototype-based
10
Console in Chrome (F12)
11
TypeScript
● http://www.typescriptlang.org/
● strict superset of JavaScript which adds optional
static typing and class-based object-oriented
programming
● existing JavaScript programs are also valid
TypeScript programs
● transcompiled to JavaScript source during
development
● definition files for existing JavaScript libraries
12
TypeScript example
13
Variable scopes in JavaScript
● JS does not have block-level scope ! Only
– global scope
● outside of function (with or without var)
● inside of function without var
– function-level scope
● inside of function with var
● function parameters
14
Closure in JavaScript
● a closure is a function having access to the
parent scope, even after the parent function
has closed
● in other words, the function defined in the
closure remembers the environment in which it
was created
15
Exceptions in JavaScript
16
Threads in JavaScript
● a single execution thread
● no multi-threading
● can use setTimeout(func,timeout) for
scheduling in the single thread
● can use WebWorkers API for executing a
separate JS file in a separate thread (requires
MSIE 10+, Android browser 4.4+, Chrome 4+,
Firefox 3.5+) - still a W3C Draft as of 2015-11
17
Google Web Toolkit (GWT)
● allows writing JavaScript applications in Java
● provides
– cross-compiler from Java to JavaScript
– JavaScript implementation of classes in the
java.lang and java.util packages
– Web UI class library for creating widgets
– development mode browser plugin
18
JSON
● JavaScript Object Notation http://json.org/
● in essence JavaScript literals without functions
● combination of objects, arrays and primitive values
(string, boolean, number, null)
● lightweight data-interchange format
● easy to parse in any programming language
● in Java, use the Jackson JSON processor
● in JS, use JSON.parse() and JSON.stringify()
19
20
REST and AJAX
● REST – Representational State Transfer
– architectural style for highly scalable APIs
– today uses JSON messages carried by HTTP to
resources identified by URLs
● AJAX – Asynchronous Javascript And XML
– catchy name, but in fact uses JSON instead of XML
– Ajax is a Greek mythology hero from Trojan war
– XMLHttpRequest asynchronously communicates with
a REST API
21
Hypertext Application Language
● format for JSON messages in REST APIs
● HATEOAS (Hypertext As The Engine Of
Application State)
● Richardson maturity model Level 3
– Level 3 introduces discoverability, providing a way of
making a protocol more self-documenting
● every object has _links property
● collections are wrapped in _embedded
22
HAL example
23
Cross-Origin Resource Sharing
(CORS)
● the same-origin security policy in browsers disallows scripts to
access data from URLs with different protocol, host or TCP
port
● thus AJAX requests to other sites are disallowed
● CORS (http://www.w3.org/TR/cors/) allows cross-origin
requests
● based on special HTTP headers
● browser asks server using Origin: HTTP header
● server may allow with Access­Control­Allow­Origin:
response HTTP header
24
JavaScript
Frameworks
25
jQuery
● cross-platform JavaScript library designed to simplify the
client-side scripting of HTML
● the most popular JavaScript library in use today
● DOM element selections, traversal and manipulation
● DOM (Document Object Model) is a tree-structure
representation of all the elements of a web-page
● jQuery invented “selector engine” which led to the
standardization of “Selectors API” by W3C
● can be hosted locally or used from a CDN (Content Delivery
Network)
26
jQuery AJAX
27
Node.js
● open-source, cross-platform runtime environment for
developing server-side web applications in JavaScript
● uses Google V8 JavaScript engine
● operates on a single thread, using non-blocking I/O calls
● has a package manager npm for publishing and sharing
Node.js libraries
● apps can be written in JavaScript, TypeScript,
CoffeeScript, Dart or any other language transcompiled
to JavaScript
28
Bower
● package management system for client-side
programming on the World Wide Web
● depends on Node.js and npm
29
AngularJS
● open-source web application framework for
single-page applications
30
AngularJS terminology
● a template is HTML with Angular-specific elements and
attributes
● a template is processed by the compiler and rendered into a
view that a user sees
● a directive is a marker on a DOM element (attribute, element,
comment or CSS class) that attaches a specified behavior
– e.g. the attribute ng­repeat repeats the HTML element
● markup in {{expression|filter}} is replaced by its evaluated
value
● model are values in variables used in expressions
● a filter formats the value of an expression for display to the
user
31
Two-Way Data Binding
● automatic synchronization of data between the
model and view components
32
Two-way binding in AngularJS
33
Dependency injection in AngularJS
● controller functions get parameters injected by
their names
34
URL routing in AngularJS
● AngularJS is intended for single-page apps
● links are not to complete URLs, but to URL fragments, e.g.
#/product/1
● main HTML page has just an empty <div> with ng-view
attribute
● each view has
– identifying URL fragment
– a JavaScript controller
– an HTML template in a separate file
● module ngRoute provides the routing
35
AngularJS routing example
36
ng-repeat directive
● repeats the enclosing HTML element
37
ng-click directive
● evaluates an expression when clicked
● expressions are evaluated in current scope
38
Forms in AngularJS
39
AJAX in AngularJS
40
Own directives
41
Summary of AngularJS
● AngularJS has
– ability to extend HTML with custom directives used as
elements, attributes, comments, CSS classes
– two-way data binding between model and view
– dependency injection
– URL routing
– AJAX service
– directives (ng-app, ng-repeat, ng-show, …)
– much more ...
42
Browser APIs
43
HTML parsing
● document begins with version declaration
(<! DOCTYPE html>)
● browsers mostly ignore it and treat HTML as
tag soup, but affects box model
44
CSS selectors
● used in CSS rules, in jQuery, in standardised Selectors API
● #x selects the element with id=”x”
● .x selects all elements with class=”x”
● anchor <a> can have a:link, a:hover, a:active, 
a:visited
● multiple selectors in a rule separated by
– space → descendants
– , → multiple rules
– > → direct child
– + → siblings
45
JavaScript API in browser
● Document Object Model
● events (onload, onclick, onmousedown, onmouseover,
onkeypress, onsubmit, …)
● many APIs described collectively as WebIDL (Interface
Definition Language)
– see http://www.w3.org/wiki/Web_IDL
– XMLHttpRequest API, HTML5 Canvas, , Web storage API, File
API, Indexed Database API, Progress Events API, Selectors
API, Screen Orientation API, Device Orientation Event, Web
workers API, Web Sockets API, Geolocation API, HTML Media
Capture API, Vibration API, Battery Status API, WebRTC API, ...
– always check usability on caniuse.com
46
e.g. Vibration API
(W3C Recommendation)
47
Browser update policies
● Chrome updates automatically every 6 weeks
● Firefox updates automatically every 6 weeks
● Opera updates automatically every 6 weeks
● MSIE new version released together with a new
Windows version
● Safari new version released with a new OS X
48
Web Storage API
49
Web Storage API Example
50
Geolocation API
51
GeoLocation API Example
52
Summary of browser APIs
● W3C releases some recommendations
● browser developers implement what they deem
useful
● Chrome and Firefox are the most advanced
● MSIE is the most backward
● use what works for your users
53
Thank you for your attention