Ionic pre každého

Prednáška z konferencie CodeCon 2019 o frameworku Ionic pre začiatočníkov.

Transcript

1. pre každého Erich Stark
2. O mne • venujem sa prevažne vývoju frontendu 4 roky (HTML, JS najviac, staršie AngularJS potom novinky ako Angular, Ionic) • finishujem PhD. štúdium v oblasti zmiešanej reality a internet of things • v roku 2018 som vyvíjal mobilnú aplikáciu s Ionic frameworkom pre priemyselnú spoločnost • 2019+ freelance
3. Prečo hybrid? • napísať kód 1x, spustiť na viacero platformách • možnosť využiť ľudí, ktorí už ovládajú web • dodanie pekného rozhrania naprieč platformami • relatívna znovu použiteľnosť kódu Natívny kontainer Device API HTML, CSS, JS
4. Hybridná aplikácia • správa sa ako natívna aplikácia z app store • umožňuje využívať prístup k natívným funkciám HW • namiesto natívneho jazyka (Swift, Java) využíva webové technológie ako HTML, CSS, JS pre tvorbu rozhrania
5. Ionic pre každého - a.k.a. v4 • UI komponenty su distribuované ako Web Components s využitím Custom Elements a Shadow DOM API • vďaka WC nie je viazaný len na Angular framework ako v minulosti • optimalizované komponenty - 1,5x rýchlejší oproti Ionic 3 (angular) • zlepšené štýlovanie aplikácie pomocou CSS Custom properties • podpora pre Vue a React (beta)
6. Ionic 4 - rýchlosť Ionic 3 Conference App Ionic 3 Ionic 4 Ionic 4 Android iOS
7. Ionic Jeden zdrojový kód ( HTML, CSS, JS ) iOS Android Progressive Web App Electron (desktop)
8. UI komponenty
9. UI komponenty
10. UI komponenty
11. UI komponenty
12. UI komponent - príklad
13. Ionic app Vlastný kód Frontend framework Ionic framework Capacitor | Cordova Nástroj od Ionic, ktorý umožňuje generovať web componenty Rozhranie medzi natívnym kódom a webom
14. Stencil • nástroj pre kompiláciu kódu do Web Components štandardu • stencil komponent je možné použiť s akýmkoľvek frameworkom (minimálne React, Angular, Vue, Ember)
15. Capacitor • rozhranie medzi natívnymi funkciami zariadenia a webovými technológiami • moderná náhrada za Cordova / PhoneGap • Pridáva platformy electron, desktop, pwa
16. –Linus Torvalds “Talk is cheap. Show me the code.”
17. Vďaka za účasť @erich.stark erich@stark.codes