e-suap - client technologies- english version
DESCRIPTION
e-suap - client technologies- english versionTRANSCRIPT
livinglabs.regione.puglia.it
e-SUAP
Integrated platform for SUAP electronic management
The project
Citizens
Companies
Professionals
SUAP Office
PA Institution (ASL, VVF, etc..)
Cloud
e-SUAP
Client Technologies
Overview
• Single Page Application
• HTML5 + CSS3
• Durandal
• KnockoutJS
• Typescript
• Utils
• Bootstrap + Less
• QUnit
Single page application
SPA is a web application fitting on a single
web page with the goal of providing a more
fluid user experience akin to a desktop
application.
SPA - Features
• Chunking
• Controllers
• Templating
• Routing
• Real-time communication
• Local storage
• Testing
SPA - Chunking
The web server combines
HTML and data and sends
them to the client every time
it receives a request.
The web page is constructed
by loading chunks of HTML
fragments and data.
NoSPA SPA
SPA - Controllers
Scripting JavaScript:
• DOM management
• Data manipulation
• Application logic
• AJAX calls
Views and Models
separation thanks to MVC o
MVVM patterns:
• model → domain logic
• view → presentation logic
• controller → control logic
NoSPA SPA
SPA - Templating
UI and DOM manipulation by
using Javascript scripts.There is declarative binding
of data to HTML templates
NoSPA SPA
SPA - Routing
Pages are reloaded at each
request.Selection of views and
navigation (without page
reloads).
This preserves:
• Page state
• elements
• data
NoSPA SPA
SPA - Real-time communication
One-way request
communication between
browser and server.
Two-way communication of
a client application and web
server replaces one-way
requests from a browser.
NoSPA SPA
SPA - Local storage
• Intensive data loads only
on web server.
• Cookies use.
Capabilities of storing data
on a browser for
performance and offline
access replace cookies and
intensive data loads from
web server.
NoSPA SPA
SPA - Testing
“Trial and Error” testing
technique is used.TDD and BDD approach are
adopted by using specific
testing frameworks.
NoSPA SPA
SPA - Pros & Cons
• User Experience
• Server-load reduction
• JavaScript
• Client-load increasing
• SEO
• JavaScript
HTML5
HTML or HyperText Markup Language is the
standard markup language used to create web
pages.
HTML5 introduces new elements and attributes
for complex web applications.
HTML5 - What is new?
• New elements
• New attributes
• CSS3 support
• Video and Audio
• 2D/3D graphic support
• Local Storage
• Local SQL Database
• Web Applications
HTML5 - What is new?
Multimedia:
• Generic<object> tag is replaced by <video> and <audio> specific tags.
Graphic:
•<canvas> tag is introduced
•Ability to use inline SVG•CSS3 2D/3D support
HTML5 - What is new?
Applications:
• Local data storage
• Local file access
• Local SQL database
• Application cache
• Javascript workers
• XHTMLHttpRequest 2
• Geolocalization
HTML5 - What is new?
Semantic elements:
New elements are introduced: <header>, <footer>,
<menu>, <section> e <article>
Forms:
New elements, new attributes, new input type and
automatic validation.
CSS3
Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a
document written in a markup language.
CSS3 is divided into several separate documents called "modules". Each module adds new capabilities or
extends features defined in CSS 2, preserving backward compatibility.
CSS3 - What is new?
• New selectors
• New properties
• Animations
• 2D/3D transformations
• Rounded corners
• Shading
• Downloadable fonts
Durandal
Durandal is a lightweight JavaScript framework
designed to make building Single Page
Applications (SPAs) simple and elegant.
Durandal - Features
• MV* Architecture support
• JavaScript and HTML modularity
• Application Lifecycle
• Navigation
• asynchronous programming by using Promises
• Optimization
• Based on jQuery, Knockout and RequireJS
KnockoutJS
Knockout is a JavaScript library that helps you to create rich, responsive display and
editor user interfaces with a clean underlying data model.
It implements MVVM patterns and allows templates using.
KnockoutJS - Example
function ViewModel() {
this.firstName = ko.observable();
}
ko.applyBindings(new ViewModel());
<html>
<head>
<script type=”text/javascript”
src=”knockout-3.1.0.js”></script>
<script type=”text/javascript”
src=”myscript.js”></script>
</head>
<body>
<input data-bind=“value: firstName”>
My name is
<span data-bind=“text: firstName”></span>
</body>
</html>
myscript.js mypage.html
KnockoutJS - Example
function ViewModel() {
this.firstName = ko.observable();
this.lastName = ko.observable();
this.fullName=ko.computed(function() {
return this.firstName()+’ ‘+this.lastName();
});
}
ko.applyBindings(new ViewModel());
<html>
<head>
<script type=”text/javascript”src=”knockout-3.1.0.js”></script>
<script type=”text/javascript”src=”myscript.js”></script>
</head>
<body>
<input data-bind=“value: firstName”>
<input data-bind=“value: lastName”>
My name is
<span data-bind=“text: fullName”></span>
</body>
</html>
myscript.js mypage.html
KnockoutJS - Example
function ViewModel() {
this.list = ko.observableArray([
{item: ’item1’},
{item: ’item2’},
{item: ’item3’},
]);
}
ko.applyBindings(new ViewModel());
<html>
<head>
<script type=”text/javascript”src=“knockout-3.1.0.js”></script>
<script type=”text/javascript”src=”myscript.js”></script>
</head>
<body>
Todo list:
<ul>
<!-- ko: foreach list -->
<li data-bind=“text: item”></li>
<!-- /ko -->
</ul>
</body>
</html>
myscript.js mypage.html
TypeScript
TypeScript is a free and open source programming language developed by Microsoft.
It is a strict superset of JavaScript, and adds optional static typing and class-based object-
oriented programming to the language.
TypeScript - Example
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return ‘Hello, ‘ + this.greeting;
}
}
var greeter = new Greeter(‘world’);
var button = document.createElement(‘button’);
button.onclick = function() {
alert(greeter.greet());
}
document.body.appendChild(button);
var Greeter = (function () {
function Greeter(message) {
this.greeting = message;
}
Greeter.prototype.greet = function () {
return ‘Hello, ‘ + this.greeting;
};
return Greeter;
})();
var greeter = new Greeter(‘world’);
var button = document.createElement(‘button’);
button.onclick = function () {
alert(greeter.greet());
};
document.body.appendChild(button);
myscript.ts myscript.js
JS Utils - Underscore
Underscore is a JavaScript library that provides a whole mess of useful functional programming helpers without
extending any built-in objects.
Thanks to it modern browsers can use the native implementations of forEach, map, reduce, filter, every,
some and indexOf.
JS Utils - Underscore - Example
_.map([1, 2, 3], function(num){
return num * 3;
});
=> [3, 6, 9]
_.reduce([1, 2, 3], function(memo, num){
return memo + num;
}, 0);
=> 6
_.filter([1, 2, 3, 4, 5, 6], function(num){
return num % 2 == 0;
});
=> [2, 4, 6]
…
JS Utils - Async
Async is a utility module which provides
straight-forward, powerful functions for
working with asynchronous JavaScript.
JS Utils - Async - Example
async.series([
function(callback){
// do some stuff ...
callback(null, ’one’);
},
function(callback){
// do some more stuff …
callback(null, ’two’);
}
],
// optional callback
function(err, results){
// results is now equal to ['one', 'two']
});
async.parallel([
function(callback){
setTimeout(function(){
callback(null, ’one’);
}, 200);
},
function(callback){
setTimeout(function(){
callback(null, ’two’);
}, 100);
}
],
// optional callback
function(err, results){
// the results array will equal ['one','two’] even
// though second function had a shorter timeout.
});
Bootstrap
Bootstrap is a free collection of tools for creating websites and web applications.
It contains HTML and CSS-based design templates for typography, forms, buttons,
navigation and other interface components, as well as optional JavaScript extensions.
Bootstrap - Components
Less
Less (Leaner CSS) is a dynamic stylesheet language that provides the following mechanisms for CSS: variables, nesting, mixins, operators and
functions;
The indented syntax of LESS is a nested metalanguage, as valid CSS is valid LESS code
with the same semantics.
Less
@base: #f938ab;
.box-shadow(@style, @c)
when (iscolor(@c)) {
-webkit-box-shadow: @style @c;
box-shadow: @style @c;
}
.box-shadow(@style, @alpha: 50%)
when (isnumber(@alpha)) {
.box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
color: saturate(@base, 5%);
border-color: lighten(@base, 30%);
div { .box-shadow(0 0 5px, 30%) }
}
.box {
color: #fe33ac;
border-color: #fdcdea;
}
.box div {
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
mystyle.less mystyle.css
QUnit
QUnit is a JavaScript unit-testing framework.
QUnit
QUnit.test('a basic test example', function (assert) {
var obj = {};
assert.ok(true, 'Boolean true'); // passes
assert.ok(1, 'Number one'); // passes
assert.ok(false, 'Boolean false'); // fails
obj.start = 'Hello';
obj.end = 'Ciao';
// passes
assert.equal(obj.start, 'Hello', 'Opening greet');
// fails
assert.equal(obj.end, 'Goodbye', 'Closing greet');
});
Alternative
Conclusions
Developing SPAs is more complex than
creating a classic web application.
Conclusions
A SPA moves logic from the server to the
client.
Conclusions
The technologies are refining themselves
References
• w3.org/TR/html5
• w3.org/TR/css3-*
• durandaljs.com
• knockoutjs.com
• typescriptlang.org
• underscorejs.org
• github.com/caolan/async
• getbootstrap.com
• lesscss.org
• qunitjs.com
