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