icon

FRETS 0.2.7 Supports Async Rendering for Performance

I added an important new feature to my TypeScript SAM framework, FRETS - support for async render functions. Just call F.registerViewAsync() instead of F.registerView() (which is still available).

If you use Webpack you may know about the power of code splitting and lazy loading. It can be useful because you don’t have to include all of your rendering code for pieces of the app that the user will never see becaus they haven’t clicked on it. At the most basic you could simply set it so that the render function for each “screen” or page in your SPA is inside of a module that get’s lazy loaded through an async function.

1
2
3
4
if (props.currentScreen === Screens.Customize) {
  const RenderCustomizeScreen = await import("./Customize");
  return RenderCustomizeScreen(props, actions);
}

All the code inside the Customize module will be in a chunk file that hasn’t been downloaded yet. If the first time your app renders it doesn’t hit that code branch then it won’t be downloaded by webpack. Webpack will take care of loading the customize screen, it’s child includes, and any of it’s custom style classes and CSS, only when that branch of render logic gets executed. Since Typescript now supports async and await we can use this syntax now as long as we make all the functions up the call stack async also (or handle them as promises). Behind the scenes Webpack issues a fetch request to the server for it’s necessary chunk.js file… and FRETS will re-render the app once that async fetch promise resolves.

This means it might be a good idea to start splitting your atomic css into different css files that only get loaded inside certain modules. Don’t forget about the power of combining FRETS with atomic css and generated typescript classes.

This idea was inspired by this article about architecting large javascript applications - and me staring at the results of webpack-bundle-analyze wondering how to make things smaller now that everything is in javascript.

Also, since my last update I ce this sweet logo: