Téma: Angular a NativeScript: Pro enterprise level web, desktop a nativní mobilní aplikace, více info na: http://ctvrtkon.cz/pozvanka-na-ctvrtkon-71-30-srpna-2018/

2. Kdo jsem?
• SW architekt
• .NET vývojář (desktop, web,…)
• frontend vývojář
• security analyst
• …a navždy hater všeho možného…
• https://www.linkedin.com/in/marian-benčat-a832b794

3. Přednáška nebude
• Výuka Angularu
• https://angular.io/tutorial
• Tisíce videí a psaných tutoriálů na googlu
• Nabídka 3-denního placeného kurzu od základů až po enterprise…
• Výukou NativeScriptu
• https://www.nativescript.org/get-the-nativescript-book
• Politicky korektní, jako vždy 

4. Motivace
• Přesvědčit více kvalitních vývojářů o tom, že webový vývoj je úplně
někde jinde, než byl…
• že i ten největší hater se z webového vývoje hodně naučil…

5. O čem tedy bude?
• Stručná historie frontendového vývoje a jeho nešvary
• Proč by měl dát každý webovému vývoji šanci
• Angular, React a jejich vývoj
• Základní pointa komponenty
• Proč už není webový vývoj takový PAIN
• Proč je Angular PLATFORMA a co to přináší
• Využití angularu pro webový, desktopový a nativní mobilní vývoj

6. Moje cesta k frontendu
• Kdysi dávno desktop vývojář –WPF a WinForms (C#), Swing
(java)…
• Funkční
• Jednoduché a zároveň s pocitem správně odvedené práce
• Komfortní pro vývoj
• V ROZUMNÉM JAZYCE*
*uWPF aWinForms

7. Moje cesta k frontendu
• Vztah k webovému vývoji nebyl vždy tak docela úplně kladný
*doba JQuery, před rozšířením prvního AngularJS (jinak taky „Angular 1“)

8. Moje cesta k frontendu
• Neustálá potřeba se vyhnout JS
• Bridge .NET
• Fable
• WebSharper

9. Rozdíly ve vývoji desktop vs. web
• Především v nějakém komfortu vývoje
• Don‘t repeat yourself
• Keep it simple, stupid
• SILNÝ REUSE KÓDU
• KÓD OBSAHUJÍCÍ NĚJAKOU ARCHITEKTURU (ROZDĚLENÍVRSTEV ATD.)

13. AngularJS
• Ve své době velký BOOM
• Velká obliba u vývojářů z .NET/Java a celkověOOP světa
• Částečné odstínění od Javascriptu a přímé manipulace s DOMem
• Nástin již nějaké architektury – postupů, SOC
• „komponenty“
• servisy
• … state?
• Stále velmi blízko Javascriptu a nepříjemností s ním spojených
• Přerod z „wow, to funguje ani nevím jak “ na „to vůbec nefunguje, ani
netuším proč“
• Spousty věcí, které běžný webový vývojář nepotřeboval - IOC? Jako proč?

14. Inversion of control (StackOverflow)
„Inversion of Control, (or IoC), is about getting freedom (You get
married with a woman, you lost freedom and you are being
controlled.“

16. React.js
• UI knihovna pro web od Facebooku
• Raketový nástup obliby
• Striktní zaměření na komponenty
• Rozpoutal JS fatique
• https://medium.com/@ericclemmons/javascript-fatigue-
48d4011b6fc4
• JSX

17. Angular 2
• S původním Angularem společná některá syntaxe
• Typescript first citizen – odstínění od většiny Javascriptu
• https://www.typescriptlang.org/
• Microsoft
• Nejpodobnější C# / Javě / Kotlinu (ten se opičí  )
• Nadstavba JS
• Nyní možná i nejpoužívanější jazyk pro React
• Platforma (o tom později)
• Velmi striktní zaměření na oddělení vrstev u komponent
• View (HTML, XML,…)
• Logika komponenty (Typescript, Javascript, DART)
• Styly (CSS, SCSS,…)

18. Angular a jeho oblíbenost
• Google používá už na několik stovek svých aplikací – včetně
AdSense, AdWords, GMAIL (nějaká část),…
• Velká obliba a rozšíření – mezi top 3 frameworky na trhu (React,
Vue.js, Angular)

19. Angular a jeho oblíbenost

23. Angular 2 - 6

24. Node.js / npm / node_modules

26. A / R komponenta – co je stejné
• Vstupy
• Výstupy
• Logika komponenty (otevře se dropdown, když se klikne na šipku)
• View
• Ve webovém prostředí HTML
• Binding (jako veWPF), avšak snažíme se nepoužívat přímý double-way binding
• „Code-behind“
• Logika komponenty
• Případný nějaký vnitřní stav komponenty a eventy

27. A / R komponenta – rozdíly
• Angular
• Velmi striktně rozdělenéView (HTML), Logika (TS) a Styly (CSS)
• Přístup téměř identický jako je v případě desktopových frameworků
• Automatický change detection – na první pohled „MAGIE“
• React
• JSX /TSX
• Syntactic sugar pro míchání html, javascriptu a nově i stylů (nahrazeny javascriptem)

29. <?php
$k =1;
for($v = 0; $v < $nt; $v++) {
$bgClass= 'blueBg';
if($k > 1 && $k%2 == 0){
$bgClass= 'whiteBg';
}
?>
<tr class="row_tr <?php echo $bgClass;?>">
<td class="row_td td_column_0">&nbsp;</td>
<td class="row_td column_1"><?php echo $rows[$v]['nothing'];?></td>
...
<td class="row_td td_column_0">&nbsp;</td>
</tr>
<?php
$k++;
}
?>

30. A že nelžu…
https://github.com/mui-org/material-ui/blob/master/packages/material-
ui/src/Button/Button.js

31. Angular – složení
• UI
• Komponenty
• Direktivy
• Pajpy
• …
• Servisy
• Moduly
• Stav
• V komponentách 
• Observable servisy – něco jako Model v MVVM
• Stavový kontejner
• Flux, Redux, NGRX

32. Angular – hlavní pointa
• Automatický change detection
• Reaktivní programování – MVVM (i bez double way bindingu)
• Maximální odstínění od javascriptu
• Nenutí ani k OOP, ani funkcionálnímu přístupu
• Jednodušší a lepší WPF pro weby

33. Angular jako platforma
• Velký framework, avšak téměř VŠE je vyměnitelné
• V základu tedy plní stejnou funkci jako React
• Rozděleno do modulů
• Maximální využití dependency injection a IOC kontejneru
• Možnost cokoliv jednoduše vyměnit a bude to PLATNÉ pro všechny
konzumenty
• Síla „platformy“ – chci vyměnit všem komunikaci po síti?
• Hierarchický dependency injection…
• Jeden příklad za všechny – lokalizace, konfigurace…

36. CSS - BEM, SMACS, OOCSS, SUIT?

37. Marian a HTML/CSS

38. Marian a HTML/CSS

39. Vývoj nad Angularem
• Grafický návrh a logické celky
• Tlačítka
• Panýlky
• Prvky
• … i dokonce vyloženě UI prvky – Header, Page, GRID…
1) Grafik zpracuje
2) Web designer udělá markup + stylování
3) Frontendista udělá logiku komponenty
4) Pak už se to využívá a skládá
Zkuste dát web designerovi JSX…

41. Stav aplikace

42. Redux / Flux / NGRX
• Největší rozšíření mých obzorů
• Stav aplikace je uložený v globálním storu
• Pokud je potřeba sdílet
• Pokud je potřeba ho ovlivňovat z více míst
• Přináší i side-effect výhody
• Time travelling
• Extrémní performance boost z využití immutable struktur
• „Neexistuje proto, aby bylo jednoduché udělat základní věci,
ale aby bylo možné věci těžké, udělat jednoduše.“

43. Redux / Flux / NGRX

53. Redux / Flux / NGRX

56. NativeScript
• Nativní mobilní aplikace ve webových technologiích
• UI je plně nativní, logika běží v JSVM + nativní moduly
• Javascript + XML / Angular /Vue.js
• S webovým / desktopovým projektem možné sdílet obrovské
množství kódu – defakto vše, kromě vizuální části komponent
(HTML)
• Komponenty
• Servisy
• Logika a řízení programu
• Dokonce i komunikace se serverem – máme DI a IOC!

57. NativeScript
• Stylování pomocí CSS/SCSS
• Věšina css attributů platí
• Sdílení kódu a případné rozdělení pomocí jednoduché naming
konvence – *.tns.*, *.tns.ios.css,…
• Code marschalling

58. NativeScript – Marschalling
OBJ-C
NSMutableArray *array = [[NSMutableArray alloc] init];
Class buttonClass = [UIButton class];
UIButton *button = [[buttonClass alloc] init];
[array setObject:buttonClass atIndex:0];
[array setObject:button atIndex:1];
Javascript
var array = new NSMutableArray();
var buttonClass = UIButton;
var button = new buttonClass();
array.setObjectAtIndex(buttonClass, 0);
array.setObjectAdIndex(button, 1);

59. NativeScript – Marschalling
//TestClass.java
public classTestClass {
public long getLongNumber54Bits(){
return 1 << 54;
}
public long getLongNumber53Bits(){
return 1 << 53;
}
}
// js /TS code
var testClass = newTestClass();
var jsNumber = testClass.getLongNumber53Bits();
var specialObject = testClass.getLongNumber54Bits();

62. http://irisclasson.com/2013/01/14/geolocation-windows-store-
apps-jshtml-and-cxaml-side-by-side/