Webové aplikace v JavaScriptu

Transcription

Webové aplikace v
JavaScriptu
Pavol Hejný
pavolhejny.com
27.5.2016 | Praha | ITnetwork.cz
Stránka vs. Aplikace
HTML
page
WWW App
Controller
View
Model
DB
WWW
server
API
server
DB
Frontend
v JS
Rychlost
Proč?
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/
Towns.cz
Towns.cz
develop.towns.cz
develop.towns.cz
develop.towns.cz
develop.towns.cz
develop.towns.cz
JS
a
HTML
DOM
<body>
<p id="itnetwork">ITnetwork</p>
</body>
<script>
var element = window.document.getElementById
("itnetwork");
ITnetwork
element.onclick = function(){
element.style.color = '#3B94E0;
}
</script>
DOM vs. jQuery
var element = window.document.getElementById
("itnetwork");
$('#itnetwork').click(function(){
$(this).css('color','#00ff00');
element.onclick = function(){
element.style.color = '#00ff00';
}
});
interval, timeout
var second=11;
var element =window.document.getElementById
("counter");
var interval = setInterval(function(){
second--;
element.innerHTML = second;
}, 1000);
7
setTimeout(function(){
alert('Ahoj!');
clearInterval(interval);
}
, 11000);
https://jsfiddle.net/phejny/xjyerkq2/
Animation frame
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);
https://jsfiddle.net/phejny/8nLcpffb/1/
XMLHttpRequest
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);
5€ je 135,- kč.
}
};
request.open("GET", url, true);
request.send();
https://jsfiddle.net/phejny/0y6dbyug/1
XMLHttpRequest vs. jQuery
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
$.get(url)
.done(function(response){
var response = JSON.parse(request.responseText);
$('#CZK').text(Math.round(rate*5));
document.getElementById('CZK').innerText = Math.round
(rate*5);
});
}
};
request.open("GET", url, true);
request.send();
https://jsfiddle.net/phejny/0y6dbyug/3
Sync vs. Async
<?php
$json = file_get_contents("https://api.fixer.io/latest?
symbols=CZK,EUR");
//...
echo('5€ je '.$CZK.',- kč.');
$.get("https://api.fixer.io/latest?symbols=CZK")
$('#CZK').text(Math.round(rate*5));
});
$json = file_get_contents("https://api.fixer.io/latest?
symbols=USD,EUR");
//...
echo('5€ je '.$USD.'$.');
$.get("https://api.fixer.io/latest?symbols=USD")
var rate = response.rates.USD;
$('#USD').text(Math.round(rate*5*100)/100);
?>
});
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>
var Position = function(x,y){
this.x= x || 0;
this.y= y || 0;
};
ECMAScript 5
Position.prototype.getDistance = function(position){
return Math.sqrt(Math.pow(position.x-this.x,2)+Math.pow(position.ythis.y,2));
};
Position.prototype.toString = function(){
return ''+this.x+','+this.y+'';
};
String
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')
var multiline_string = (function () {/*
Podle
mě
ten nejhorší
způsob :(
*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];
var multiline_string = `V ES6
to jde
bez problémů!`;
var Position = class{
constructor(x=0,y=0){
this.x= x;
this.y= y;
}
ECMAScript 6
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 + ''
Backend
Přepínání
Proč?
Node JS
Rychlost
Sdílení kódu
REST API
používání WS
PHP vs. Node
● Apache
● Jednotlivé stránky
● node, pm2
● Celý server
Body
Header
Request
Response
●
●
●
status code - 200, 404, 403,...
mime type - text/html
cache control
●
http://www.itnetwork.
cz/software/sublime-text?
nastaveni=123#goto173043
GET, POST, DELETE, HEAD,...
●
form data, upload,...
●
html, js, css, image, pdf,
video,...
●
RAW
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
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
Browser vs. Node
●
●
●
●
window
<script src="..."></script>
HTTP klient
JQuery, Angular
●
●
●
●
global
var module = require("...");
HTTP server, klient
Express
var http = require("http");
Express
http.createServer(function(request, response){
if(request.url=='/') {
Routing
var express = require('express');
var app = express();
app.get('/', function (req, res) {
res.send('GET request to the home');
});
response.writeHead(200);
response.end('GET request to the home');
}else
if(request.url=='/objects') {
response.end('GET request to the objects');
}else{
app.get('/objects', function (req, res) {
res.send('GET request to the objects');
});
response.end('Not fount :( ');
}
}).listen(80);
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ů
<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>
HTML
<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>
browser includes
<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>
<script src="/app-build/js/towns.min.js"></script>
//-------------------------------------------------------------------------------------------------gulp.task('build', function () {
gulp.src(includes)
.pipe(sort())
GULP
.pipe(concat('towns-shared.js'))
.pipe(es6transpiler({
"disallowUnknownReferences": false,
"disallowDuplicated": false
}))
build
.pipe(gulp.dest('./build'))
.pipe(uglify())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./build'));
});
<?php
PHP
browser includes
$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/sublimetext
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
WWW
server
API
server
WWW App
DB
WWW
server
API
server
DB
<title>Lesní mýtina | Towns</title>
<meta name="description" content="">
<link rel="icon" href="/favicon.ico">
http://www.towns.
cz/story/572cbec9b8
3bf0b7710c6b58#23,
56
<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=572cbec84cc89bGVzMi5qcGc=&&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

Transcription

Similar documents

TURCK - Smart moulds (GB)

Prozatímní inventární soupis k archivnímu fondu 2342

Streams, Pipes and Mega Pipes