Consider a build/deploy step for optimization of front-end

[robhudson]

The follow are some ideas around optimizing the front-end, all of which depend on a custom build and deploy steps.

If we had a script to build the front-end assets (HTML, JS, CSS) would enable us to:

• Use something like webpack to minify and bundle JS / CSS so reduce file size and reduce requests for gathering assets.
• HTML files could use templates (like jinja2) to share common patterns across all the pages. These can be compiled out into their full HTML form during a build step.
• Adding some linting could be added to catch simple syntax errors or conform to coding standards.

Currently I believe Github pages is our deploy script. It's not clear to me if there is a benefit to switching but it would be possibly and not difficult to use AWS to host a static site which can be scripted with awscli. This can then be wired up with TravisCI or CircleCI to build/deploy to AWS upon new commits to master. Some of the features of moving to AWS would be the site is hosted on S3, frontend by Cloudfront CDN and invalidated upon deploy, and served over https.

[chutten]

Our current deploy script is, per :whd, a cronjob on ops jenkins infra that runs something along the lines of

aws s3 sync ./ s3://telemetry-mozilla-org/ --exclude '.git*' --delete

in the context of the gh-pages branch of telemetry-dashboard.

Adding a ./pack.sh && in the front of it might be an acceptable addition. Though I don't know how many tools we'd be encouraged to install on that infra.

(And per an earlier comment in that same bug, we already have it on S3 fronted by Cloudfront)

[georgf]

It would be valuable to have deploy/packing steps easily reproducible.
I would want to just run this locally or on a test branch instead of testing results of changes on production.

[robhudson]

A few attempts were made by myself and then other higher priority work came along. I will attempt to outline what was attempted and what didn't work for future efforts.

1. The first attempt used webpack and rollup as separate attempts. The problem I ran into with these approaches is that the javascript and libraries used are older and not completely modular to support the way these libraries bundle the javascript together.

2. The 2nd attempt used a more simple concatenation of the files via grunt.js. This proved to be a success and the work is captured in the below branch. The ultimate roadblock with this effort was around how to integrate a build step to the workflow for contributors. With a build step we would no longer be able to easily host branches via github pages for testing, e.g. There is further effort to investigate and resolve this.

https://github.com/mozilla/telemetry-dashboard/compare/grunt

For now I will un-assign myself.