e-suap - client technologies- english version
DESCRIPTION
e-suap - client technologies- english versionTRANSCRIPT
![Page 1: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/1.jpg)
livinglabs.regione.puglia.it
e-SUAP
Integrated platform for SUAP electronic management
![Page 2: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/2.jpg)
The project
Citizens
Companies
Professionals
SUAP Office
PA Institution (ASL, VVF, etc..)
Cloud
![Page 3: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/3.jpg)
e-SUAP
Client Technologies
![Page 4: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/4.jpg)
Overview
• Single Page Application
• HTML5 + CSS3
• Durandal
• KnockoutJS
• Typescript
• Utils
• Bootstrap + Less
• QUnit
![Page 5: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/5.jpg)
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.
![Page 6: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/6.jpg)
SPA - Features
• Chunking
• Controllers
• Templating
• Routing
• Real-time communication
• Local storage
• Testing
![Page 7: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/7.jpg)
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
![Page 8: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/8.jpg)
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
![Page 9: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/9.jpg)
SPA - Templating
UI and DOM manipulation by
using Javascript scripts.There is declarative binding
of data to HTML templates
NoSPA SPA
![Page 10: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/10.jpg)
SPA - Routing
Pages are reloaded at each
request.Selection of views and
navigation (without page
reloads).
This preserves:
• Page state
• elements
• data
NoSPA SPA
![Page 11: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/11.jpg)
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
![Page 12: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/12.jpg)
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
![Page 13: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/13.jpg)
SPA - Testing
“Trial and Error” testing
technique is used.TDD and BDD approach are
adopted by using specific
testing frameworks.
NoSPA SPA
![Page 14: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/14.jpg)
SPA - Pros & Cons
• User Experience
• Server-load reduction
• JavaScript
• Client-load increasing
• SEO
• JavaScript
![Page 15: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/15.jpg)
![Page 16: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/16.jpg)
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.
![Page 17: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/17.jpg)
HTML5 - What is new?
• New elements
• New attributes
• CSS3 support
• Video and Audio
• 2D/3D graphic support
• Local Storage
• Local SQL Database
• Web Applications
![Page 18: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/18.jpg)
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
![Page 19: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/19.jpg)
HTML5 - What is new?
Applications:
• Local data storage
• Local file access
• Local SQL database
• Application cache
• Javascript workers
• XHTMLHttpRequest 2
• Geolocalization
![Page 20: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/20.jpg)
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.
![Page 21: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/21.jpg)
![Page 22: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/22.jpg)
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.
![Page 23: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/23.jpg)
CSS3 - What is new?
• New selectors
• New properties
• Animations
• 2D/3D transformations
• Rounded corners
• Shading
• Downloadable fonts
![Page 24: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/24.jpg)
![Page 25: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/25.jpg)
Durandal
Durandal is a lightweight JavaScript framework
designed to make building Single Page
Applications (SPAs) simple and elegant.
![Page 26: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/26.jpg)
Durandal - Features
• MV* Architecture support
• JavaScript and HTML modularity
• Application Lifecycle
• Navigation
• asynchronous programming by using Promises
• Optimization
• Based on jQuery, Knockout and RequireJS
![Page 27: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/27.jpg)
![Page 28: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/28.jpg)
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.
![Page 29: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/29.jpg)
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
![Page 30: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/30.jpg)
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
![Page 31: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/31.jpg)
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
![Page 32: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/32.jpg)
![Page 33: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/33.jpg)
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.
![Page 34: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/34.jpg)
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
![Page 35: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/35.jpg)
![Page 36: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/36.jpg)
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.
![Page 37: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/37.jpg)
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]
…
![Page 38: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/38.jpg)
JS Utils - Async
Async is a utility module which provides
straight-forward, powerful functions for
working with asynchronous JavaScript.
![Page 39: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/39.jpg)
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.
});
![Page 40: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/40.jpg)
![Page 41: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/41.jpg)
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.
![Page 42: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/42.jpg)
Bootstrap - Components
![Page 43: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/43.jpg)
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.
![Page 44: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/44.jpg)
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
![Page 45: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/45.jpg)
![Page 46: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/46.jpg)
QUnit
QUnit is a JavaScript unit-testing framework.
![Page 47: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/47.jpg)
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');
});
![Page 48: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/48.jpg)
Alternative
![Page 49: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/49.jpg)
Conclusions
Developing SPAs is more complex than
creating a classic web application.
![Page 50: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/50.jpg)
Conclusions
A SPA moves logic from the server to the
client.
![Page 51: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/51.jpg)
Conclusions
The technologies are refining themselves
![Page 52: e-suap - client technologies- english version](https://reader034.vdocuments.us/reader034/viewer/2022042614/559b397d1a28abfc3e8b473b/html5/thumbnails/52.jpg)
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