This state of affairs may be about to change in a big way.
The Era of Framework Compilers
Although there have been smaller frameworks that have made fantastic improvements in mobile performance, the big three — React, Angular and Vue — have not really been the best options in this area.
There is now work underway with both Angular and React that promises to change this up and dramatically improve important performance metrics like Time-to-Interactive (TTI).
Angular had a fairly massive size when it was first released. There have been some significant improvements since then, but things are being taken to a whole other level with Ivy, a new renderer that will become optionally available in Angular 6.
Ivy’s most crucial target is cooperation with Angular Element. By encapsulating Angular components to custom elements (web components), we can achieve standalone publication, independent importing and independent usage of Angular as widgets…
…The most important part of this strategy is code size. Even wihout (sic) common runtime library, Angular should work with minial (sic) size. Components used as Angular Elements will not depended on external packages like forms and router, hence creating great value for size reduction.. (ref)
There is a demonstration site up of Ivy’s huge potential. Although it’s the simplest possible example, the bundle size is about 3.2 KB! 😮 Considering that the bundle size for a similar Angular app without Ivy would be around 45KB, this is a stunning improvement.
The React team is also hard at work on some future performance improvements, although with a slightly different emphasis. The work centers around another project at Facebook, called Prepack, that is at the heart of a new React compiler.
The team working on Prepack have created a REPL that you can use to try it out. The default example they include results in a dramatic reduction in the size of the code, but that’s not always the case. So, it’s unclear how much of a reduction in bundle size we’ll see once this work is released. That said, bundle size isn’t the only thing that matters with regard to start up time.
You’ll notice that Preact is the fastest under JS Init Time (smallest bundle size of the three) but by First Render Time, Inferno is long gone. Inferno absolutely smokes the other two frameworks and indeed, Inferno shows up in other benchmarks as being very, very fast, even though it often doesn't have the smallest size. I‘m connecting the dots a bit here, but this could be what we see from React once the work on Prepack is ready. Perhaps it won’t have the smallest bundle size, but it may very well have an outstanding TTI, which is really what makes a difference to users.
As an aside, why the heck aren’t more people using Inferno?! It’s freaking awesome! Perhaps not coincidentally, it looks like the React team member leading up the compiler work is Dominic Gannaway, the original author of Inferno.
The Future Is Already Here
Yes, React and Angular are the two most widely used frameworks, so what happens with them is noteworthy. However, I’d be remiss if I didn’t mention that there is already a very good compiled framework available now — Svelte.
The common view is that frameworks make it easier to manage the complexity of your code: the framework abstracts away all the fussy implementation details with techniques like virtual DOM diffing. But that's not really true. At best, frameworks move the complexity around, away from code that you had to write and into code you didn't.
Instead, the reason that ideas like React are so wildly and deservedly successful is that they make it easier to manage the complexity of your concepts. Frameworks are primarily a tool for structuring your thoughts, not your code.
Svelte is a new framework that does exactly that.
A companion to Svelte is Sapper. Sapper is to Svelte, what Next.js is to React. It’s a framework with all the good stuff you’ll need to build a real app baked in — routing, data fetching, code splitting, etc. When I took it out for a test drive, the gzipped size for the app was around 11 KB! Keep in mind, this was not a stripped down, “Hello World” example. It included the works.
Even if Svelte isn’t the right framework for your next project, consider giving it a star on GitHub. It’s definitely deserving of more attention — and usage!
Until next time, happy coding…