HMI * nad webovými technologiemi

Rozměr: px

Začít zobrazení ze stránky:

Download "HMI * nad webovými technologiemi"

Ivana Doležalová
před 7 lety
Počet zobrazení:

1 HMI * nad webovými technologiemi Cesta vývojářů webových aplikací do nitra automobilu *) Human Machine Interface

2 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

3 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

4 Koncept

5 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

6 Koncový stav

7 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

8 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, )

9 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

10 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

11 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

12 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

13 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

14 Frontend

15 Dev stack! Chromium! jeden prohlížeč! plně pod kontrolou nastavení, experimentální flagy! AngularJS + Typescript! Less CSS! NodeJS, Gulp, automatizace

16 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í

17 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

18 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

19 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í

20 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,...

21 Závěr

22 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ě

23 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

24 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á

25 Kontakty Děkujeme za pozornost

Podobné dokumenty

Obsah. Kapitola 1. Předmluva 11 O této knize 13 Konvence...13

Obsah. Kapitola 1. Předmluva 11 O této knize 13 Konvence...13 Obsah Předmluva 11 O této knize 13 Konvence........................................................13 Inovace prostřednictvím otevřenosti 15 Ekosystém Symbianu.............................................16