[email protected] Single page aplikácia vs. architekt
14. september 2014
Single page aplikácia vs. architekt!
1. Na nástrojoch záleží
- Zvoľte poriadny jazyk, editor, source hosting, continuous integration system, …"
- Rovnaký jazyk klient aj server, vyhnúť sa schizophrenic programming."
• Dart — java skrížená s javascriptom, batteries included, SDK, package manager"
• Clojure + ClojureScript — LISP, úplne iná paradigma ako C style jazyky"
• JavaScript — len s nástrojmi, ktoré riešia jeho problémy: RequireJS, Google Closure Tools,
Bower, When.js, …"
2. Vyhnite sa Callback Hell
-
"
event-driven + non-blocking — zdroj callback hell"
promises/futures riešia problém len čiastočne, ale lepšie ako nič!
budúcnosť je CSP, funguje v Go, Clojure"
http://jlongster.com/Taming-the-Asynchronous-Beast-with-CSP-in-JavaScript"
http://www.infoq.com/presentations/clojure-core-async"
SELENIUM EXAMPLE JAVA!
driver.get("http://www.google.com");
driver.findElement(By.name("q")).sendKeys("webdriver");
driver.findElement(By.name("btnG")).click();
assertEquals("webdriver - Google Search", driver.getTitle());
"
SELENIUM EXAMPLE JAVASCRIPT!
driver.get("http://www.google.com", function() {
driver.findElement(By.name("q"), function(q) {
q.sendKeys("webdriver", function() {
driver.findElement(By.name("btnG"), function(btnG) {
btnG.click(function() {
driver.getTitle(function(title) {
assertEquals("webdriver - Google Search", title);
});
});
});
});
});
});
"
SELENIUM EXAMPLE JAVASCRIPT PROMISES!
driver.get("http://www.google.com")
.then(function() {return driver.findElement(By.name("q"));})
.then(function(q) {return q.sendKeys("webdriver");})
.then(function() {return driver.findElement(By.name("btnG"));})
.then(function(btnG) {return btnG.click();})
.then(function() {return driver.getTitle();})
.then(function(title) {assertEquals("webdriver - Google Search",
title);});
1
[email protected] Single page aplikácia vs. architekt
14. september 2014
3. Programujte funkcionálne
-
"
pure functions nemajú side-effects a ich výsledok závisí len na vstupe"
pure functions robia kód jednoduchším a spravovateľnejším"
navyše skvelé pre caching"
persistent/immutable structures sú dátové štruktúry určené na prácu s pure functions"
• nemeniteľné (ako String vo väčšine jazykov)"
• efektívne (pamäť aj CPU)"
JavaScript"
• http://swannodette.github.io/mori/"
• https://github.com/facebook/immutable-js"
Dart"
• https://github.com/vacuumlabs/persistent"
Clojure — súčasť core API"
Ako to funguje:"
• http://hypirion.com/musings/understanding-persistent-vector-pt-1"
• http://hypirion.com/musings/understanding-persistent-vector-pt-2"
• http://hypirion.com/musings/understanding-persistent-vector-pt-3"
ZMAŽ POSLEDNÝ PRVOK SO SIDE EFFECTS!
function(list) {
list.pop();
}
"
ZMAŽ POSLEDNÝ PRVOK AKO PURE FUNKCIA!
function(list) {
return list.slice(0, list.length - 1);
}
4. Stav aplikácie v jednej premennej
- REST + DBMS — celý stav klienta je v URL, celý stav servra je v databáze"
• super easy debugging, stačí poznať obsah chybného requestu a mať dump databázy"
• super easy reasoning"
- jeden request neovplyvňuje druhé"
- spracúva sa len krátky čas"
• super easy testing"
- Chceme DB na klientovi (AppState)"
• premenná obsahujúca immutable map"
• podpora transakcií v cene"
• dump — ľahký debugging"
• undo zadarmo"
"
PRÍKLAD ZMENY STAVU V JEDNEJ TRANSAKCII!
/* {
"john": {
"amount": 200,
},
"ann": {
"amount": 100,
}
2
[email protected] Single page aplikácia vs. architekt
14. september 2014
*/}
_ = mori;
function transferMoney(from, to, amount) {
var n = state;
n = _.update_in(n, [from, "amount"], function(x) {return x amount;});
n = _.update_in(n, [to, "amount"], function(x) {return x +
amount;});
state = n;
"
render();
}
5. Reaktívne programovanie
- Pri zmene stavu všetko prepočítajte odznova."
- Výhody"
• testovateľnosť"
• debuggovateľnosť"
• DRY — kód na vypočítanie hodnoty musí existovať vždy, takže ho stačí iba použiť"
- Ak výkon nestačí"
• caching, vďaka immutable structures takmer zadarmo"
- React — efektívny spôsob ako tento prístup aplikovať na prácu s DOM"
• rýchly"
• v spojení s immutable structures pekelne rýchly"
• server-side rendering ako bonus"
• http://facebook.github.io/react/"
• pre Dart: https://pub.dartlang.org/packages/react"
• pre Clojure: https://github.com/swannodette/om"
6. 2-way data binding je Zlo
- Príklad problému USD vs. Eur konvertor"
• Po napísaní hodnoty do ľubovoľného poľa sa prepočíta to druhé."
• Hodnota 100.00 Eur zodpovedá najlepšie 129.59 USD, ale hodnota 129.60 USD
"
3
zodpovedá tiež 100.00 Eur."
• Čo spraví 2-way data binding po vpísaní 129.60 do poľa USD? Prepočíta najskôr hodnotu
Eur, tej zmena vyvolá prepočet hodnoty USD a v poli USD sa samovoľne prepíše hodnota z
129.60 na 129.59. To sme nechceli!"
0.00 Eur
0.00 USD
0.00 Eur
129.60 USD
100.00 Eur
129.60 USD
100.00 Eur
129.59 USD
"
"
[email protected] Single page aplikácia vs. architekt
14. september 2014
- Dáta majú tiecť len v jednom smere, smerom od AppState ku DOM. Nechceme cyklické
závislosti."
- Zmena hodnoty inputu má vyvolať udalosť, ktorá bude spracovaná a nejako ovplyvní stav —
nie prepísať obsah ľubovoľnej premennej."
- http://facebook.github.io/react/docs/flux-overview.html"
7. Chcete DB s transakciami
-
Nesúvisí moc so SPA, ale je to dôležité."
DB bez transakcií je v 90% prípadov zlý nápad."
90% queries je dokáže byť OK bez transakcií, ale tým 10% sa nevyhnete."
Historické dáta v DB sú super pre debugging."
http://www.datomic.com"
8. Testovať treba
-
Nesúvisí len so SPA, ale je to dôležité."
Unit testy nestačia, treba mať aj poriadne randomizované / integračné testy."
Automatizované testy nestačia. Treba aspoň 1 testera na 4 vývojárov."
Dobrý tester sa hľadá rovnako ťažko ako dobrý programátor. Nestačí hocijaký klikač."
Dobrý programátor často nie je dobrý tester."
9. Rich Hickey
- Value of Values: http://www.infoq.com/presentations/Value-Values"
- Simplicity Matters: http://www.youtube.com/watch?v=rI8tNMsozo0"
- Hammock Driven Development: http://www.youtube.com/watch?v=f84n5oFoZBc"
"
Kontakt!
Samuel Hapák"
Twitter: @samuha"
Email: [email protected]"
Web: http://vacuumlabs.com/
4
Download

Single page aplikácia vs. architekt