Using AngularJS with Embedded Devices

1. Angular
for Embedded
1
Confidential

2. Embedded Web

Billions of web servers in
–
Routers, printers, factories, robots, security cameras,
gas pumps, even periscopes, ...
2
Confidential

3. Embedded Web Interfaces

Problem with most embedded web interfaces
–
Slow -- Generate pages on a slow device
–
Static -- Don’t want to do unnecessary updates
–
Insecure -- Poor support for CSRF prevention
–
Ugly -- Good looking UIs come with a cost
–
First feature on chopping block
3
Confidential

4. Embedded Web Interfaces

General Problem ...
–
–
Not leveraging the browser
–

Doing too much server-side on a modest CPU
Missing a good client-side framework
So we went looking
–
–

For the best client-side framework ...
... Angular
Why Angular?
4
Confidential

5. Why Angular for Embedded?

Balances the client-side
–
–

UI moved to client side
Strong feature rich, framework
Scales well
–
–

Dep. injection, data binding
–
+
Unlike jQuery
Services, Directives
Great with RESTful services
–
Especially JSON payloads
5
Confidential

6. Server-Side

Embedded web server
–
Offload the entire “V” in MVC
–
Thin binding between URIs and C functions
–
Services RESTful web requests with JSON

Embedded database with schema

JSON request/response
–
–
Schema
–

Data
User feedback, errors and field validation errors
WebSockets
–
Low overhead data supply for data bound widgets
6
Confidential

7. Packaging

Angular apps can be packaged

Aggregate all scripts + HTML => single script

Combine all CSS => single CSS
–
–
Single script + CSS + assets
–

After home page load
Thereafter, JSON data exchange only
Result
–
Fast, zero delay UI transitions
–
Dynamic UI updates
–
Low overhead on server
7
Confidential

8. Kickstart for Angular
8
Confidential