General Discussion

[micmro]

@soulgalore's Initial remarks from https://github.com/sitespeedio/har/issues/1:

Been thinking a lot on what would make a good HAR viewer, here are some bullets up for discussion:

• Open Source (would be cool if it's so good that many projects use it)
• SVG (best thing I've seen is the resource waterfall if the performance bookmarklet
• Clean separation of model & view.
• Coloring: I think it would be great if all tools have the colors, so we should aim to have the same colors as WebPageTest. What's cool in WebPageTest is that you can color either by content type or have the bar split in different colors depending on timings. I personally like color by content type with the ability to switch.
• How to fit a large waterfall? One of the problems is how to show what's necessary for us to understand what asset we showing and still have some space left to show the waterfall.I'm not 100% sure there what's the best.
• In sitespeed.io we render the pages once and run them without a server, so it would be cool if we could prerender the pages that show the waterfall (meaning both functionalities to load the HAR using JS and render it in nodejs).
• The possibility to compare HAR files. WebPageTest is doing but by changing the opacity on different layers is that the way to go or are there other ways?
• One thing I like with the current modified version we use is that we have the ability to run some super simple rules on an asset, so that we can highlight if something is wrong (like missing cache headers). It looks like this:
• We should show every timing in the timings field in the HAR (also those that starts with an underscore) so we can show cool things like start render etc.

[micmro]

Hi @soulgalore & @andydavies I've setup setup a very crude browser-side-only prototype that parses HAR files and renders them via the performance-bookmarklet's waterfall (which is a bit messy right now).

I used Typescript to make transforming the deeply nested JSON data a bit easier, we can replace it with Babel or so later if anyone has some serious objections. I also have the build steps to concatenate the ES6 (Typescript) modules via a Grunt Browserify build step.

To run it locally start Typescript compiler via grunt and demo server via npm start.

[micmro]

Besides the naming PerfCascade etc could be changed as well - was the second thing I came up with - the first was HarHarHar :) - but that won't work if it's suppose to be data source agnostic

[soulgalore]

Hehe, I like HarHarHar :) I'll test it asap. How do we split the work between us so we make sure we don't do the same thing?

[micmro]

HarHarHar would be great with an old pirate as a mascot :P.

I'm not sure how much time each of you can/want to submit? I suppose we can split the work into tickets, discuss them (if necessary) and either own the dear-to-ones-heart tickets or throw them in a backlog and whoever has time can pull them.

Are both of you ok to use Typescript? I used to be more of a JS purist but changed my mind since I started working with Angular2 recently - the duck-typing is in particular useful for a more functional data-transforming work (and it brings decent typeahead to sublime).

[soulgalore]

I can surely do some stuff. Let us continue create issues for everything.

I haven't used Typescript before but lets try it out, cool to learn something new :)

[micmro]

Great. I just started using it 2 month ago as well. TS is basically standard ES6 plus optional Typing. It makes code completion, at least in Sublime via the TypeScript plugin, super precise, even for the SVG DOM API and for imported modules. Additionally it provides compiler checks :).

[soulgalore]

Wow, checked the things you've done @micmro and it looks great :) This weekend I'll put the project I've been working on up on Github and then I'll see if I can help out here.

[soulgalore]

Cool I started today to see if I could get the hang of TypeScript. To run and test locally, I shoudl only run npm run watch and my changes should be reflected automatically or should I do something more?