How to use AngularDart for embedded system Web UI

[Matt Schuckmann]

I'm starting a project where I need to implement a WebUI for an embedded device. The device will be running Linux and has a fair amount of resources, 300mHz ARM processor, 256MB of RAM, 128MB of NAND flash.

My intention is to run a full featured web server like Lighttpd, implement a simple RESTful api to get and set the various parameters of the system and then implement an SPA based on that api for the web UI. 

I've done a basic JavaScript/HTML web UI before I didn't enjoy it and never really thought that it was maintainable (it's probably because I'm a generally C++ programmer and JavaScript just plain rubs me the wrong way). For this project I'm hoping to use some sort of framework to make life easier and I'd like to use AngularDart if it makes sense.  

I've spent a fair amount of time over the last couple of days researching and playing with AngularDart and even mocked up a small part of the UI and so far I like it. But a few questions have come up: 

1. Is AngularDart a good fit for this project at this time or is it still to early to use in production device like this? It is expected that this board and it's code will live on for many years to come in many of our future products. 

2. If it is a good fit how do I present this to my co-workers that this is a good idea? Initially I will be the only one working on this project but eventually someone else is going to be brought into help me or have to maintain it.

3. While I'm really not to resource constrained I'd still like to make sure that my deployed code is as small as possible to reduce firmware image sizes and leave plenty of room for growth. So I've been doing some investigating and I was surprised how large my mock application is as a whole, around 4.6MB which seems big to me. Here is a du of the build directory:

$ du -h web
12K web/packages/Pemba/component
16K web/packages/Pemba
8.0K web/packages/angular/css
12K web/packages/angular
324K web/packages/intl/src/data/dates/patterns
324K web/packages/intl/src/data/dates/symbols
656K web/packages/intl/src/data/dates
660K web/packages/intl/src/data
664K web/packages/intl/src
668K web/packages/intl
2.0M web/packages/web_components
16K web/packages/unittest
12K web/packages/browser
2.7M web/packages
12K web/view
4.6M web

A couple of things that I've noticed here:

* There is a file web/main.dart.precompiled.js that is 1.1M, while web/main.dart.js is about 751K. I don't think I need the precompiled.js file for production, correct? (I'm even a little puzzled as to why it is there as I've seen posts that recent builds of dart2js stopped generating it)

* The web/packages/intl directory appears to contain "a lot" of date/time string internationalization json files, could these be excluded, or compressed somehow? I'm not even sure why it is included as I didn't specify it in my pubspec.yaml file. Internationalization is really not a priority for this project.

* I assume that for production the web/unittest package could be removed. I would have thought that it would be excluded for a "pub build --mode=release" build as the unittest package is marked as a dev dependency in my pubspec.yaml. 

* My mock is not actually using any Polymer components right now but the web_components package (that's Polymer right?) is included in my build output, and it's quite large. Looking a bit deeper I see that web_components contains:

 $ ll
total 2.0M
drwxrwxr-x 2 dev dev 4.0K Aug 21 13:18 ./
drwxrwxr-x 8 dev dev 4.0K Aug 21 13:18 ../
-rw-rw-r-- 1 dev dev 1.3K Aug 21 13:18 build.log
-rw-rw-r-- 1 dev dev 2.8K Aug 21 13:18 dart_support.js
-rw-rw-r-- 1 dev dev 502K Aug 21 13:18 platform.concat.js
-rw-rw-r-- 1 dev dev 611K Aug 21 13:18 platform.concat.js.map
-rw-rw-r-- 1 dev dev 191K Aug 21 13:18 platform.js
-rw-rw-r-- 1 dev dev 688K Aug 21 13:18 platform.js.map

I'm guessing that the js.map files are not required for production, correct?

What about the platform.concat.js file, is it needed? 

Also it looks like platform.js and platform.concat.js are not minified, why is that? could they be minified? 

Is there anything else in the generated build that can be removed or minified to bring the overall application package size down? 

Are the any settings or tools that I've missed for removing the unnecessary cruft from the generated js? 

Could the html and js files be pre-compressed to further reduce the size of the code stored on the device? 

Thanks for reading, I really appreciate any useful comments or help anyone can provide. 

Matt S. 

[John Messerly]

I can answer some of these :)

On Thu, Aug 21, 2014 at 2:02 PM, Matt Schuckmann <matt.sc...@gmail.com> wrote:

<snip>

A couple of things that I've noticed here:

* There is a file web/main.dart.precompiled.js that is 1.1M, while web/main.dart.js is about 751K. I don't think I need the precompiled.js file for production, correct? (I'm even a little puzzled as to why it is there as I've seen posts that recent builds of dart2js stopped generating it)

you only need one of them. "precompiled" is for CSP environments, where "eval" is disabled:

https://developer.mozilla.org/en-US/docs/Web/Security/CSP/Introducing_Content_Security_Policy 

 

* My mock is not actually using any Polymer components right now but the web_components package (that's Polymer right?)

It is not really Polymer, no. Web Components is a family of web specifications: http://www.w3.org/TR/components-intro/

Polymer is stuff built on top of Web Components.

 

is included in my build output, and it's quite large. Looking a bit deeper I see that web_components contains:

 $ ll
total 2.0M
drwxrwxr-x 2 dev dev 4.0K Aug 21 13:18 ./
drwxrwxr-x 8 dev dev 4.0K Aug 21 13:18 ../
-rw-rw-r-- 1 dev dev 1.3K Aug 21 13:18 build.log
-rw-rw-r-- 1 dev dev 2.8K Aug 21 13:18 dart_support.js
-rw-rw-r-- 1 dev dev 502K Aug 21 13:18 platform.concat.js
-rw-rw-r-- 1 dev dev 611K Aug 21 13:18 platform.concat.js.map
-rw-rw-r-- 1 dev dev 191K Aug 21 13:18 platform.js
-rw-rw-r-- 1 dev dev 688K Aug 21 13:18 platform.js.map

I'm guessing that the js.map files are not required for production, correct?

correct

 

What about the platform.concat.js file, is it needed? 

no

 

Also it looks like platform.js and platform.concat.js are not minified, why is that? could they be minified? 

platform.js is minified, platform.concat.js is the same file not minified. use for debugging.

 

<snip>

Could the html and js files be pre-compressed to further reduce the size of the code stored on the device? 

probably. Nowadays files are often delivered with http://en.wikipedia.org/wiki/HTTP_compression. So you could store them that way if you want, and serve the gzip'd content directly.

[Justin Fagnani]

On Thu, Aug 21, 2014 at 2:02 PM, Matt Schuckmann <matt.sc...@gmail.com> wrote:

I'm starting a project where I need to implement a WebUI for an embedded device. The device will be running Linux and has a fair amount of resources, 300mHz ARM processor, 256MB of RAM, 128MB of NAND flash.

My intention is to run a full featured web server like Lighttpd, implement a simple RESTful api to get and set the various parameters of the system and then implement an SPA based on that api for the web UI. 

I've done a basic JavaScript/HTML web UI before I didn't enjoy it and never really thought that it was maintainable (it's probably because I'm a generally C++ programmer and JavaScript just plain rubs me the wrong way). For this project I'm hoping to use some sort of framework to make life easier and I'd like to use AngularDart if it makes sense.  

I've spent a fair amount of time over the last couple of days researching and playing with AngularDart and even mocked up a small part of the UI and so far I like it. But a few questions have come up: 

1. Is AngularDart a good fit for this project at this time or is it still to early to use in production device like this? It is expected that this board and it's code will live on for many years to come in many of our future products. 

Being on the Chrome team, I tend to recommend Web Components (usually via Polymer) to people starting new projects right now, mostly because by using platform APIs like HTML imports, custom elements, shadow DOM, mutation observers, etc., you'll get better performance and tools support over time. I expect Chrome Dev Tools to get more features related to custom elements eventually. That said, Angular has more high-level features baked in, like DI and routing, but we're starting to see more community effort in that direction for Polymer lately.

 

2. If it is a good fit how do I present this to my co-workers that this is a good idea? Initially I will be the only one working on this project but eventually someone else is going to be brought into help me or have to maintain it.

I think one of the most compelling things is the available UI elements that you can use just by adding a HTML import and using the tag. If the Material Design esthetic is suitable, you can building something fairly quickly.

 

3. While I'm really not to resource constrained I'd still like to make sure that my deployed code is as small as possible to reduce firmware image sizes and leave plenty of room for growth. So I've been doing some investigating and I was surprised how large my mock application is as a whole, around 4.6MB which seems big to me. Here is a du of the build directory:

$ du -h web
12K web/packages/Pemba/component
16K web/packages/Pemba
8.0K web/packages/angular/css
12K web/packages/angular
324K web/packages/intl/src/data/dates/patterns
324K web/packages/intl/src/data/dates/symbols
656K web/packages/intl/src/data/dates
660K web/packages/intl/src/data
664K web/packages/intl/src
668K web/packages/intl
2.0M web/packages/web_components
16K web/packages/unittest
12K web/packages/browser
2.7M web/packages
12K web/view
4.6M web

Angular apps can be quite large if you don't use the pub transformers to remove mirrors usage. Make sure that's set up. Polymer also have transformers that do a good job of compacting the app for deployment.

 

A couple of things that I've noticed here:

* There is a file web/main.dart.precompiled.js that is 1.1M, while web/main.dart.js is about 751K. I don't think I need the precompiled.js file for production, correct? (I'm even a little puzzled as to why it is there as I've seen posts that recent builds of dart2js stopped generating it)

I think that had to do with CSP, so I'm pretty sure you don't need it.

 

* The web/packages/intl directory appears to contain "a lot" of date/time string internationalization json files, could these be excluded, or compressed somehow? I'm not even sure why it is included as I didn't specify it in my pubspec.yaml file. Internationalization is really not a priority for this project.

That's included via Angular.

 

* I assume that for production the web/unittest package could be removed. I would have thought that it would be excluded for a "pub build --mode=release" build as the unittest package is marked as a dev dependency in my pubspec.yaml. 

It could also be that another package depends on it in dependencies, not dev_dependencies. You should be able to leave it out, in fact I hope the directory is empty after building for deployment.

 

* My mock is not actually using any Polymer components right now but the web_components package (that's Polymer right?)

web_components is a package that implements some of the web standards used by Polymer. Remember that Polymer is only a library that helps you build web components, web components themselves can be built without Polymer and include new APIs added to the browser. I believe that Angular uses the web_components package for shadow DOM.

 

is included in my build output, and it's quite large. Looking a bit deeper I see that web_components contains:

 $ ll
total 2.0M
drwxrwxr-x 2 dev dev 4.0K Aug 21 13:18 ./
drwxrwxr-x 8 dev dev 4.0K Aug 21 13:18 ../
-rw-rw-r-- 1 dev dev 1.3K Aug 21 13:18 build.log
-rw-rw-r-- 1 dev dev 2.8K Aug 21 13:18 dart_support.js
-rw-rw-r-- 1 dev dev 502K Aug 21 13:18 platform.concat.js
-rw-rw-r-- 1 dev dev 611K Aug 21 13:18 platform.concat.js.map
-rw-rw-r-- 1 dev dev 191K Aug 21 13:18 platform.js
-rw-rw-r-- 1 dev dev 688K Aug 21 13:18 platform.js.map

I'm guessing that the js.map files are not required for production, correct?

What about the platform.concat.js file, is it needed? 

Also it looks like platform.js and platform.concat.js are not minified, why is that? could they be minified? 

platform.js should be relatively minified, or compacted at least. That's what I see in my apps.

Is there anything else in the generated build that can be removed or minified to bring the overall application package size down? 

Are the any settings or tools that I've missed for removing the unnecessary cruft from the generated js? 

Could the html and js files be pre-compressed to further reduce the size of the code stored on the device? 

Thanks for reading, I really appreciate any useful comments or help anyone can provide. 

Matt S. 

--
You received this message because you are subscribed to the Google Groups "Dart Web Development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to web+uns...@dartlang.org.
Visit this group at http://groups.google.com/a/dartlang.org/group/web/.
To view this discussion on the web visit https://groups.google.com/a/dartlang.org/d/msgid/web/1adcf76d-d5e7-4ac6-bef9-38c36911c668%40dartlang.org.

[Matt Schuckmann]

Thanks Justin and John, good responses to my questions.

I did want to get some clarification on Justin's comment about using transformers.
Could you be a bit more specific on how to set them up and use them to remove mirrors usage. I've read some of the posts on line about this but things appear to be moving so fast much of what is published is out of date. I tried adding
@MirrorsUsed(override: '*')
import 'dart:mirrors';

To the top of my main.dart file but I don't see any change in the generated js file.

Thanks,
Matt S.

To view this discussion on the web visit https://groups.google.com/a/dartlang.org/d/msgid/web/CAEKsHmDCsVShxwgANL%2BWjHbjnx84U_vMs%3D6b6pM7qAp%2BT1SZdQ%40mail.gmail.com.

[Günter Zöchbauer]

Polymer and Angular have a transformer each that does all code generation to replace their own usage of reflection/mirrors.

If you use mirrors directly in your code, a transformer doesn't help. You may consider using the 'smoke' library.

In polymer you have this transformer configuration

transformers:
- polymer:
    entry_points:
    - web/index.html

in angular like this

- angular:
    html_files:
      - web/views/searchpage.html
      - web/views/settings.html
      - web/views/signout.html