Creating Performant Applications for In-Vehicle Infotainment
Using HTML5 and Angular
Maxim Salnikov
ForgeRock
Why HTML5 could be the technology of choice for IVI apps ecosystem?
And why the Angular could be a reference platform there?
Maxim Salnikov
@webmaxru
-
Google Developer Expert in web tech, Angular, IoT
-
Tech speaker & trainer
-
Developer communities organizer
Web full-stack Engineer at ForgeRock
Office of the CTO
ForgeRock
@forgerock
-
Member of the Automotive Grade Linux group
-
Bring standards-based identity technologies
-
Explore HTML5 platform
Identity for Everyone & Every Thing
Challenges?
-
Richer functionality
-
Faster development
Web
Web Platform / Standards
A platform for innovation, consolidation and cost efficiencies
-
Collection of open (royalty-free) technologies which enables the Web by W3C & others
-
Many non-proprietary interdependent standards and specifications
The Big Picture
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)
Hardware accelerated
-
2D: <video>, <canvas>
-
3D: WebGL
JavaScript engine performance
-
Continuous performance improvements with the focus on ES2015
-
Real-world benchmarks
Speedometer benchmark
Chromium for Wayland
-
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
-
Extensibility
-
Largest ecosystem
-
Provides a rich application environment
HTML5 or HTML?
WHATWG
HTML5
HTML
Living Standard
.1
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
-
Gradients, shadows, glows, blurs
-
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
Most Popular Technologies
Top Tech on Stack Overflow
Language for modern apps
-
ES2015+ Features
-
Reactive Architectures
-
Rethinking the DOM
-
Supersets
TypeScript
A strict syntactical superset of JavaScript
-
Free and open source
-
Support for the latest and evolving JavaScript features
-
Optional static typing
Highly-productive development tools
-
Static checking
-
Code refactoring
-
Defining interfaces between software components
Angular
One framework. Mobile & desktop.
-
Open source
-
Performance is in the focus
-
Developer experience
-
Cross-platform
-
Full platform
Performance
-
Ahead-of-Time (AoT) Compilation
-
Change Detection
-
Lazy-Loading of Resources
-
Web Workers
-
Reactive Extensions
-
State Management
Developer experience
-
Angular CLI
-
Language Service for IDEs
-
Codelyzer
-
Augury
-
Huge community
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
-
Access to hardware capabilities
-
Apps can easily be resized to fit any screen size and orientation
-
Industry standard media playback solutions
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
By Maxim Salnikov
Creating Performant Applications for IVI Using HTML5 and Angular
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
