HMI * nad webovými technologiemi Cesta vývojářů webových aplikací do nitra automobilu 6.11.2016 *) Human Machine Interface
Osoby a obsazení! Štěpán Mík (java, backend)! Ivan Čentéš (frontend)! Etnetera a.s.! Agenda Představení projektu Výběr technologií Architektura systému
HMI (human machine interface)! Rozhraní mezi člověkem (uživatelem) a strojem! User interface grafika, zvuk, Atypické vstupy i výstupy (z hlediska vývojáře desktopových aplikací)! Ovládání stroje Vyvíjíme prototyp! Kontinuální vývoj! Časté změny => rychlá implementace! Open Source Pro ilustraci Škoda VisionS
Koncept
Výběr technologie Zadání! Java! Linux Původně! JavaFX! TCP komunikace s okolím! Základní linuxová instalace Nakonec! Chromium! HTML, JavaScript, CSS! OSGi! Netty! JNA přístup k nativním knihovnám systému bez nutnosti kompilace! TCP! Unix socket X, DBus,! mix 32 / 64 bit! Exotické kernel moduly a služby
Koncový stav
Výběr UI platformy JavaFX nevyhovuje! Není flexibilní pokud nejde o standardní UI! Slabá podpora multimédií Chromium (obecně moderní prohlížeč)! Nejlepší multimediální platforama! DOM, CSS 3, WebGL, WebRTC
Chromium -> HTTP server! Určitě ne servety Komplikované (kontejner, websockety) Odtržené od zbytku aplikace Vlákna! Netty Příjemně low level Kompletní (S)HTTP out of the box (Používá Play framework, micoservices stacky, )
Nechceme monolit! Kontejner, který Definuje běhové prostředí pro více vláken Umožňuje oddělit moduly a řešit závislosti Podporuje různé konfigurace systému (devel, auto, jiné auto)! OSGi Výše uvedené plus dynamická rekonfigurace v závislosti na okolí Často využíváno v automotive a obecně v embedded kontrolerech
OSGi Bundle & Service Bundle! JAR - spravovaná jednotka (Manifest)! Statické závislosti Import - závislosti! Export publikovaná funkčnost! Kombinace za běhu! Řízení přístupu Samostatný classloader Service! Dynamické závislosti! 0 až n instancí v daný čas! Jako (C)DI, ale lepší! Registrace / Deregistrace! Tracking
Základní vzor - whiteboard pattern! Inversion of control ( don t call us, we call you )! Služba (komponenta) se registruje! Jiná část systému ji použije, když je potřeba Chcete mě? Service registry
Architektura Linux Java + OSGi Browser Hardware CAN Kernel Audio UART... os X Daemon DBus Libs Emulátory State Sockets Sockets JNA Adaptéry Abstrakce zařízení Zdroje Kompo - nenty HTTP / WebSocket Angular HMI Setup Komponenty Obrazovka Widgety
Komponenta Displej 2 Displej 1! Server a browser část! Server - napojení na ostatní části systému, zdroj dat a aktualizací! Browser - čistě UI (CSS, DOM, aktivity uživatele)! Autonomie! Vlastní komunikační protokol mezi částmi! Na rozdíl od REST! Asynchronní aktualizace a aktivace funkcí (WebSocket) Browser Server Komponenta Komponenta Stav Komponenta Komponenta Monitor Adaptér Emulátor
Frontend
Dev stack! Chromium! jeden prohlížeč! plně pod kontrolou nastavení, experimentální flagy! AngularJS + Typescript! Less CSS! NodeJS, Gulp, automatizace
Prohlížeč jako platforma! Podpora moderních standardů HTML5 APIs CSS (animace, transformace)! Rapidní vývoj! Touch-based rozhraní včetně emulace! Jednoduché debugování onsite i remote! Průhledné okno Integrace desktop aplikací
Prohlížeč jako platforma! Audio přehrávač! Více paralelních zdrojů přehrávání Media Phone System! Více výstupů zvuku WebRTC MediaDevices API
Typescript! Typovaná nadmnožina JS! Třídy, rozhraní, typy,! Výborná podpora v IDE (statická analýza, intelisense, refactoring, )! Odhalení chyb před spuštěním v prohlížeči (build process)! Kompilace do JS ES3 - bezpečný JS ES5, ES6
Adaptivní UI! Víc verzí rozhraní! A/B testování společná funkční implementace rozdílné UI/šablony podle verzí rozhraní! Neosvědčilo se responzivní UI prototypování rychle se měnící zadání
Komponenta Angular! Komponenty na serveru mají svůj obraz v Angular komponentě (direktiva) Typescript: třídy, dědičnost, interface! Component factory! Link fáze direktivy vytvoření instance komponenty (strom komponent) post request na server -> registrace a vytvoření komponenty na serveru! Destructor úklid v UI post request na server -> destrukce komponenty na serveru! ComponentContext: scope, element, attributes,...
Závěr
Linux! Záchrana i prokletí Leccos existuje, ale nefunguje out-of-the-box Obešli jsme se bez kompilace čehokoliv (správci balíčků - díky!) X server architektura, vncserver! Co jsme objevili JNA - oproti JNI nevyžaduje nativní kompilaci DBus (bluetooth, nfc) - Java implementace je zoufale zastaralá Audio v Javě nefunguje spolehlivě
Vliv architektury na kvalitu kódu! Rozdělení do vrstev vynucuje dobré postupy Front end vs backend! OSGi vynucuje (může vynucovat) Oddělení implementace a rozhraní Modularitu Robustnost
Asynchronní / Funkcionální / Reaktivní! Asynchronní - komunikace server klient Robustnost (odolnost proti výpadku)! Funkcionální přístup svědčí více vláknům Vlákna nechte profesionálům Futures, Netty event loop, HashWheelTimer, java.util.concurrent! Funkcionální - ADT, immutable hodnoty, Preference transformačních řetězců než beany Ála Effects v Haskellu! Systém postaven na Reakcích na změny stavu Reakcích na akcích uživatelů! Pozn.: Java 8 (lambda) nezbytná
Kontakty stepan.mik@etnetera.cz ivan.centes@etnetera.cz http://etnetera.cz Děkujeme za pozornost