1. Web Apps 2015/2016

2. TOC
• 1) Principy
• 2) SPA
• 3) Malá webová aplikace
• 4) Nástroje
• 5) React-devstack

3. 3 pilíře
• Software is eating the world,
the web is eating software
& JavaScript rules the world.
”Eric Elliott”
• Refaktorovatelnost
• Stabilita
• Testovatelnost

4. Funkcionální programování
• compose(
fnA,
fnB,
fnC
)
• = refaktorovatelnost
• Pure function
• Immutable data
• Bez mutace globálního stavu
• = stabilita, testovatelnost

5. Funkcionálně reaktivní programování
• Čas + události + FP
• window.scroll
.filter(offset => offset > clientHeight)
.map(() => $(‘menu’).style(‘visibility’, ‘none‘))
• Deklarativní programování

6. Modularizace

7. Single Page App
• Stav mimo UI
• Stav na jednom místě
• Přehlednost
• Historie
• Refaktorovatelnost
• HTML do kódu
S
UI = f(S)

8. Komponentizace UI, styly, Bootstrap
• Moduly
• Uvnitř projektu
• Private moduly (JS/CSS)
HTML JSSCSS
HTML JSSCSS
GridVars Mixin

9. React.js + Redux
• Známe
• Používáme
• Už víme proč

10. jQuery?
• AJAX – stará specka Promise/A
• BOM + DOM (IE8-)
• Animace (CSS3?)
• Imperativně x deklarativně
• $(’.email-field')
.asEventStream('blur')
.map(checkIfEmpty)
.assign($(’.signup-button'), 'attr', 'disabled') ;
function checkIfEmpty(e) { return !e.target.value; }

11. Nástroje
• Eslint:
1) styl kódu
2) kontrola chyb
3) kontrola častých problémů
• Kontrola při releasu
• Preset airbnb
• SCSS-lint
• Webpack – zpracování JS (komponentizace s CSS, modularizace)
• Gulp
• Pomocník Webpacku
• Spouštění úkolů, testů
• Mochai + Chai + Sinon + js-dom
• Enzyme

12. React Devstack
Origin Upstream
Local