Webové aplikace v JavaScriptu

Pavol Hejný
pavolhejny.com
Webové aplikace v
JavaScriptu
27.5.2016 | Praha | ITnetwork.cz

Stránka vs. Aplikace
WWW App
API
server DBDB
View
Controller
WWW
server
Model
HTML
page

Proč?
Rychlost
využití 2D / 3D grafiky
Využití web audio
Využití files API

http://birds.cz/avif/atlas_nest_map.php?rok=2016&druh=Phasianus_colchicus

http://zastavky.birdlife.cz/

<body>
<p id="itnetwork">ITnetwork</p>
</body>
<script>
var element = window.document.getElementById
("itnetwork");
element.onclick = function(){
element.style.color = '#3B94E0';
}
</script>
DOM
ITnetwork

DOM vs. jQuery
$('#itnetwork').click(function(){
$(this).css('color','#00ff00');
});
var element = window.document.getElementById
("itnetwork");
element.onclick = function(){
element.style.color = '#00ff00';
}

7
var second=11;
var element =window.document.getElementById
("counter");
var interval = setInterval(function(){
second--;
element.innerHTML = second;
}, 1000);
setTimeout(function(){
alert('Ahoj!');
clearInterval(interval);
}
, 11000);
interval, timeout
https://jsfiddle.net/phejny/xjyerkq2/

var start = null;
var element = document.getElementById("ball");
element.style.position = 'absolute';
function step(timestamp) {
if (!start) start = timestamp;
var progress = timestamp - start;
element.style.top = Math.sin(progress/1000*Math.PI)
*100+100 + "px";
element.style.left = Math.cos(progress/1000*Math.PI)
*100+100 + "px";
window.requestAnimationFrame(step);
}
window.requestAnimationFrame(step);
Animation frame
https://jsfiddle.net/phejny/8nLcpffb/1/

5€ je 135,- kč.
var request = new XMLHttpRequest();
var url = "https://api.fixer.io/latest?symbols=CZK";
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200)
{
var response = JSON.parse(request.responseText);
var rate = response.rates.CZK;
document.getElementById('CZK').innerText = Math.
round(rate*5);
}
};
request.open("GET", url, true);
request.send();
XMLHttpRequest
https://jsfiddle.net/phejny/0y6dbyug/1

XMLHttpRequest vs. jQuery
$.get(url)
.done(function(response){
$('#CZK').text(Math.round(rate*5));
});
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
var response = JSON.parse(request.responseText);
document.getElementById('CZK').innerText = Math.round
(rate*5);
}
};
request.open("GET", url, true);
request.send();
https://jsfiddle.net/phejny/0y6dbyug/3

Sync vs. Async
$.get("https://api.fixer.io/latest?symbols=CZK")
$('#CZK').text(Math.round(rate*5));
});
$.get("https://api.fixer.io/latest?symbols=USD")
var rate = response.rates.USD;
$('#USD').text(Math.round(rate*5*100)/100);
});
<?php
$json = file_get_contents("https://api.fixer.io/latest?
symbols=CZK,EUR");
//...
echo('5€ je '.$CZK.',- kč.');
$json = file_get_contents("https://api.fixer.io/latest?
symbols=USD,EUR");
//...
echo('5€ je '.$USD.'$.');
?>

Sync vs. Async
Event
Event
Výsledek
Výsledek

Angular
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5
/angular.min.js"></script>
</head>
<body>
<div>
<input type="text" ng-model="jmeno_cajovny">
<hr>
<h1>Jsme v čajovně {{jmeno_cajovny}}!</h1>
</div>
</body>
</html>

ECMAScript 5
var Position = function(x,y){
this.x= x || 0;
this.y= y || 0;
};
Position.prototype.getDistance = function(position){
return Math.sqrt(Math.pow(position.x-this.x,2)+Math.pow(position.y-
this.y,2));
};
Position.prototype.toString = function(){
return ''+this.x+','+this.y+'';
};

var multiline_string = (function () {/*
Podle
mě
ten nejhorší
způsob :(
*/}).toString().match(/[^]*/*([^]*)*/}$/)[1];
var multiline_string = `V ES6
to jde
bez problémů!`;
var multiline_string = 'Takhle
d*****e
se musí psát
string na více
řádků.';
var multiline_string = 'Nebo' +
'takhle - s tímhle zápisem alespoň umí' +
'pracovat PHPStorm';
var multiline_string =
['Nebo',
'takhle',
].join('n')
String

ECMAScript 6
var Position = class{
constructor(x=0,y=0){
this.x= x;
this.y= y;
}
getDistance(position){
return Math.sqrt(Math.pow(position.x-this.x,2)+Math.pow(position.
y-this.y,2));
}
toString(){
return ''+this.x+','+this.y+'';
}
};

CoffeeScript
transpiler
Position = (x, y) ->
@x = x or 0
@y = y or 0
return
Position::getDistance = (position) ->
Math.sqrt (position.x - (@x)) ** 2+ (position.y - (@y)) ** 2
Position::toString = ->
'' + @x + ',' + @y + ''

Proč?
Node JS
Přepínání
Rychlost
Sdílení kódu
REST API
používání WS

PHP vs. Node
● Apache
● Jednotlivé stránky
● node, pm2
● Celý server

Response
● http://www.itnetwork.
cz/software/sublime-text?
nastaveni=123#goto173043
● GET, POST, DELETE, HEAD,...
Body
● status code - 200, 404, 403,...
● mime type - text/html
● cache control
● form data, upload,... ● html, js, css, image, pdf,
video,...
Request
Header

Response Headers
alt-svc:quic=":443"; ma=2592000; v="
34,33,32,31,30,29,28,27,26,25"
alternate-protocol:443:quic
cache-control:private, max-age=0
content-encoding:gzip
content-type:text/html; charset=UTF-8
date:Fri, 27 May 2016 11:46:06 GMT
expires:-1
server:gws
status:200
x-frame-options:SAMEORIGIN
x-xss-protection:1; mode=block
Request Headers
URL:https://www.google.cz/search?
q=itnetwork+je+nej&oq=status+code&aqs=ch
rome..69i57.
395j0j7&sourceid=chrome&es_sm=93&ie=UT
F-8
Request Method:GET
Remote Address:216.58.212.67:443
RAW

Browser vs. Node
● window
● <script src="..."></script>
● HTTP klient
● JQuery, Angular
● global
● var module = require("...");
● HTTP server, klient
● Express

Express
Routing
var http = require("http");
http.createServer(function(request, response){
if(request.url=='/') {
response.writeHead(200);
response.end('GET request to the home');
}else
if(request.url=='/objects') {
response.end('GET request to the objects');
}else{
response.end('Not fount :( ');
}
}).listen(80);
var express = require('express');
var app = express();
app.get('/', function (req, res) {
res.send('GET request to the home');
});
app.get('/objects', function (req, res) {
res.send('GET request to the objects');
});

Jasmine
testování
describe('lineCollision', function() {
it('//', function () {
expect(T.Math.lineCollision(0,0,10,10,0,2,10,12)).toBe(false);
});
it('/|', function () {
});
it('X', function () {
expect(T.Math.lineCollision(0,0,10,10,0,2,2,0)).toBe(true);
});
it('L', function () {
});
it('T', function () {
expect(T.Math.lineCollision(0,0,10,0,10,10,10,-10)).toBe(true);
});
it('/', function () {
});
it('!', function () {
});
});

Middleware
načítání js souborů

HTML
browser includes
<script src="/app/js/00-other/cookie.static.js"></script>
<script src="/app/js/00-other/copy.static.js"></script>
<script src="/app/js/00-other/date.functions.js"></script>
<script src="/app/js/00-other/escape.functions.js"></script>
<script src="/app/js/00-other/generate-file.jquery.js"></script>
<script src="/app/js/00-other/interval.static.js"></script>
<script src="/app/js/00-other/is-image-ok.function.js"></script>
<script src="/app/js/00-other/is.functions.js"></script>
<script src="/app/js/00-other/log.functions.js"></script>
<script src="/app/js/00-other/outer-html.jquery.js"></script>
<script src="/app/js/00-other/select-text.function.js"></script>
<script src="/app/js/00-other/set-input-error.function.js"></script>
<script src="/app/js/00-other/string.class.js"></script>
<script src="/app/js/00-other/track-event.function.js"></script>
<script src="/app/js/00-other/uri-plugin.js"></script>
<script src="/app/js/00-other/validate.functions.js"></script>
<script src="/app/js/10-model/10-model-draw-3d.prototype.js"></script>
<script src="/app/js/10-model/10-model-draw-cache.prototype.js"></script>
<script src="/app/js/20-ui/10-browser-compatibility.static.js"></script>
<script src="/app/js/20-ui/10-messages.static.js"></script>
<script src="/app/js/20-ui/10-popup-window.static.js"></script>
<script src="/app/js/20-ui/10-status.static.js"></script>
<script src="/app/js/20-ui/10-templates.static.js"></script>
<script src="/app/js/20-uri/10-uri.static.js"></script>
<script src="/app/js/20-uri/20-uri.onload.js"></script>
<script src="/app/js/30-api/10-townsapi.class.js"></script>

GULP
build
<script src="/app-build/js/towns.min.js"></script>
//--------------------------------------------------------------------------------------------------
gulp.task('build', function () {
gulp.src(includes)
.pipe(sort())
.pipe(concat('towns-shared.js'))
.pipe(es6transpiler({
"disallowUnknownReferences": false,
"disallowDuplicated": false
}))
.pipe(gulp.dest('./build'))
.pipe(uglify())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./build'));
});

PHP
browser includes
<?php
$scripts = glob('./js/*.js');
foreach($scripts as $script){
echo('<script src="'.htmlentities($script).'"></script>'."n");
}
?>

Middleware
komunikace WWW a API serveru

http://www.itnetwork.cz/software/sublime-
text
Sublime Text 3 napsal Jon Skinner. Jde o komerční editor napsaný v C++ a jehož
licence stojí kolem 1400 Kč. Editor si ale můžete vyzkoušet a to na neomezenou
dobu. Bez licence se však čas od času při ukládání ukáže dialogové okno, kde je
doporučena koupě licence….
Honza Bittner | ITNetwork.cz

WWW App
API
server DB
WWW
server
WWW App
API
server DB
WWW
server

http://www.towns.
cz/story/572cbec9b8
3bf0b7710c6b58#23,
56
<title>Lesní mýtina | Towns</title>
<meta name="description" content="">
<link rel="icon" href="/favicon.ico">
<meta property="fb:app_id" content="408791555870621" >
<meta property="og:site_name" content="Lesní mýtina | Towns" >
<meta property="og:title" content="Lesní mýtina | Towns" >
<meta property="og:description" content="Na lesní mýtině…." >
<meta property="og:type" content="article" >
<meta property="og:url" content="http://towns.
cz/story/572cbec9b83bf0b7710c6b58" >
<meta property="og:image" content="http://cdn.towns.cz/towns-cdn/?
file=572cbec84cc89-bGVzMi5qcGc=&&width=1200" >
………………………………………………………………………………...
<main class="popup-window">
<div class="header">Lesní mýtina</div>
<article class="content">
<p><img src="http://cdn.towns.cz/towns-cdn/?file=572cbec84cc89-
bGVzMi5qcGc=&&width=800" alt="les2.jpg"></p>
</article>
</main>

Další témata
● TypeScript
● Angular
● Google Maps vs. Seznam Mapy
● WS
● REST API
● Mongo DB
● JS Files API - drag & drop
● 2D grafika - canvas / svg
● 3D grafika webgl
● Procedurální mapy
● Gulp
● Sass

Webové aplikace v JavaScriptu

More Related Content

What's hot (20)

Similar to Webové aplikace v JavaScriptu (20)

Recently uploaded (20)

Webové aplikace v JavaScriptu