Progressive Ember - Showdown

A walk through the real effort to transition an enterprise level Ember application to a progressive web application.

Part three: Remove Showdown

Resetting the baseline

Since the last post, my application had some features released and some refactoring that had an impact on our build size.

Here’s the updated build:

Pre-Showdown - Build

Our application moved in to a yarn workspace as part of a mono-repo and some other legacy code was removed. Interestingly, some dependency sizes went down after consolidation. Showdown is one of them. At our initial baseline, Showdown weighed in at 20 kB, but now is around 10 kB.

Replacing showdown

My application doesn’t do a tremendous amount of HTML to markdown rendering. In fact it’s only in one specific instance and even then, the HTML is very paired down. It’s safe to say that Showdown is still overkill for my use case.

After some research, I landed on snarkdown. It has just enough features for my use case and is very tiny. This is a straight forward import in to Ember:

// ember-cli-build.js
app.import('node_modules/snarkdown/dist/snarkdown.umd.js', {
    using: [
        { transformation: 'amd', as: 'snarkdown' }
    ]
});

// some-component.js
import snarkdown from 'snarkdown';

To make things simpler on my team, I created a helper to have a similar API to the Showdown helper that we’ll be losing:

import { helper } from '@ember/component/helper';
import snarkdown from 'snarkdown';
import { htmlSafe } from '@ember/string';
import { isEmpty } from '@ember/utils';
 
export function markdownToHtml(params/*, hash*/) {
    if (isEmpty(params[0])) {
        return '';
    }
   
    return htmlSafe(snarkdown(params[0]));
}
 
export default helper(markdownToHtml);

Then to use:

{{! previously it was: }}
{{markdown-to-html markdown=content}}

{{! now is: }}
{{markdown-to-html content}}

Result

Post-Showdown - Build

Not only did we lose 10 kB here, but some dependency consolidation and dead code removal had a tremendous impact on our Lighthouse score.

Post-Showdown - Lighthouse

note: ignore the SEO drop, this was a bug from the mono-repo change not serving robots.txt correctly

Our performance score has almost doubled and our first meaningful paint is finally under 5 seconds!

Up next, lazy load locales to drop another 45 kB.

Keep reading