Creating Performant Applications for IVI

Using HTML5 and Angular

Maxim Salnikov

ForgeRock

Maxim Salnikov

@webmaxru

  • Google Developer Expert in web tech, Angular, IoT

  • Tech speaker & trainer

  • Developer events organizer

UI Engineer at ForgeRock

Office of the CTO

ForgeRock

@forgerock

  • Member of the Automotive Grade Linux group

  • Bring standards-based identity technologies

  • HTML5 platform evangelists

Identity for Everyone & Every Thing

Why HTML5 could be the technology of choice for IVI apps ecosystem?

And why the Angular could be a reference platform there?

Web Platform / Standards

A platform for innovation, consolidation and cost efficiencies

 - W3C CEO Jeff Jaffe

  • Collection of open (royalty-free) technologies which enables the Web by W3C & others

  • Many non-proprietary interdependent standards and specifications

     

The Big Picture

W3C for Automotive

Open Web Platform is a scalable solution for apps in connected cars enabling companies to capitalize on this connectivity trend

  • Automotive and Web Platform Business Group

  • Automotive Working Group

Web Standards for Automotive

  • Vehicle Information API (2014)

  • Vehicle Data Interfaces (2014)

DEPRECATED

Vehicle Information Service Specification

Vehicle Information Service Specification

Volkswagen Infotainment Web Interface protocol (ViWi)

REST Services Interface (RSI)

  • Media

  • Location Base Services

  • Notifications

  • Privacy and Security

  • Media tuning

  • Location Based Services

  • Web Payments

Other task forces

Why web platform?

  • Most interoperable system available

  • Decentralized, neutral platform

  • Standards are designed to be royalty-free

  • Active contributions to Automotive standards

Chromium

Open-source browser project that aims to build a safer, faster, and more stable way to experience the web

  • Moving forward not just one implementation, but the open web platform as a whole

  • Best support of standards

  • Best performance

HTML5 Test

4 Core Principles

Speed

Stability

Security

Simplicity

  • Own JS engine,  V8
  • Rendering, Blink
  • User interactions
  • Sandboxing
  • Multiple levels
  • Safe by default
  • Platform in mind
  • Separate processes
  • Automated tests
  • "Content, not Chrome"
  • Information first

Rendering performance

60fps

  • Identifying visually non-overlapping element subsets to copy from cache

  • Grouping the pixels into tiles to enable smaller and faster updates to the screen

16.66ms per frame (in reality = 10ms)

JavaScript engine performance

  • Continuous performance improvements with the focus on ES2015

  • Real-world benchmarks

Speedometer benchmark

Chromium for Wayland

/usr/bin/chromium/chrome --mus --no-sandbox --test-type --kiosk
  • Aura for the user interface.

  • UI Service (MUS) for windowing.

  • Ozone as a platform abstraction layer

HTML5

Set of technologies that allows the building of more diverse and powerful Web sites and applications

  • Open formats

  • Largest ecosystem

  • Provides a rich application environment

Key elements

...and More

  • Audio/Video tags
  • Web Storage
  • Web Workers

Graphics

  • Canvas 2D
  • WebGL 3D
  • SVG

Connectivity

  • Web Sockets
  • WebRTC
  • Server-sent events

Device Access

  • Touch events
  • Geolocation
  • Camera API

CSS3

The latest evolution of the Cascading Style Sheets language

  • Media queries

  • Flexbox & Grid Layout

  • Animations, 3D Transforms, Transitions

  • Borders, corners, gradients, shadows

  • Typography

JavaScript

High-level, dynamic, weakly typed, object-based, multi-paradigm, and interpreted programming language.

  • Event-driven, functional, and imperative (including object-oriented and prototype-based) programming styles

  • Cross-platform

Language for modern apps

  • Reactive Architectures

  • ES2015+ Features

  • Supersets

  • Rethinking the DOM

Most Popular Technologies

Top Tech on Stack Overflow

Angular

One framework. Mobile & desktop.

  • Cross-platform

  • Performance is in the focus

  • Developer experience

  • Full plaftorm

  • Open source. MIT licensed

Performance

  • Ahead-of-Time (AoT) Compilation

  • Change Detection

  • Lazy-Loading of Resources

  • Web Workers

  • Reactive Extensions

  • State Management

Developer experience

  • Angular CLI

  • Language services for IDEs

  • Large community

npm install -g angular-cli
ng new my-auto-app
cd my-auto-app
ng serve
ng generate component my-auto-component
ng g component my-auto-component
ng g class my-auto-class
ng g service my-auto-service

Angular CLI 101

ng build --dev
ng build --prod

ng test
ng e2e
ng github-pages:deploy --message "Go!"

Angular CLI 101

Why HTML5 could be the technology of choice for IVI apps ecosystem?

Let's give some answers!

Open standards

  • Avoids vendor lock-in

  • No concerns about very long term support

  • Already gained wide adoption and is quickly becoming ubiquitous

 

 

 

Cost of development

  • Standards are designed to be Royalty-Free

  • A large developer community has years of experience with Web technologies.

  • Highly portable and reusable applications: functionality can be reused between models and brands

 

 

 

Speed of development

  • Faster development cycle

  • Decouples the slow automotive dev cycle from the super-fast IVI app cycle

  • Fast to re-style the visual layer of the infotainment system for another vendor

     

 

 

 

Hardware capabilities

  • Using hardware acceleration natively

  • Apps can easily be resized to fit any screen size and orientation

  • Industry standard media playback solutions

Cross-services compatibility

  • The most interoperable system available

  • Code reuse with the cloud and remote device (mobile, tablets)

  • Using web native communication protocols

 

 

 

Ecosystem Impact

  • Open doors to many third-party app developers to swiftly write and deploy applications for IVI systems

 

 

 

Demo time!

Thank you!

@webmaxru

Maxim Salnikov

Creating Performant Applications for IVI Using HTML5 and Angular - Original Version

By Maxim Salnikov

Creating Performant Applications for IVI Using HTML5 and Angular - Original Version

Making the HTML5 platform available for IVI applications inside the modern cars is a huge milestone for the whole automotive industry. First, it welcomes a huge number of web developers to create and distribute the apps for the cars app stores. Second, the web platform evolves very rapidly, providing APIs to access devices features and efficient hardware-enabled acceleration. And last but not least: there are some excellent frameworks for web/mobile industry, helping us to build great UI experience. - Foundations of Angular. It's one of the most popular frameworks, thanks to its awesome dev experience and strong focus on performance: mission critical for both mobile & automotive - Homescreen in HTML5 demo: scaffolding, communication with bindings via REST & WebSockets, best practices - Benefits and drawbacks of using HTML5 in comparison to Qt, for you to make an informed decision

  • 1,963