How new performance trends in JavaScript are driving an ever-faster web [Q&A]
'Write once, run anywhere' was the promise that Sun Microsystems made for Java in the mid '90s. But front-end development trends suggest that it's really JavaScript -- and its fast-evolving libraries and frameworks -- that are executing on that promise today.
To learn more about the JavaScript trends that are delivering an ever-faster, device and browser-agnostic web experience to users, we spoke with Guillermo Rauch, co-creator of the popular Next.js web framework.
BN: Why do you think Javascript is delivering on the write once, run anywhere promise better than Java?
GR: Java was embedded on the client-side as applets and was always fighting with the environments it was embedded in. It was very slow and lacked empathy for the target systems, networks and regions. JavaScript is making the web slim, snappy and interactive, and JavaScript sites and applications feel much more native to the end user.
BN: What are some of the most notable efforts by the Javascript community to keep making the web faster and more native-feeling?
GR: Most JS developers are familiar with AMP -- the technology that Google invented four or so years ago. Sites that have AMP implemented have a lightning icon on search results on Google, and it basically tells users that it's been pre-loaded and pre-rendered by Google. And when you use AMP as a user, the site feels instant, in a way that no normal site feels. AMP has really taken off, as developers want to do whatever they can to secure optimal placement in search results and experience on Google.
Recently there's been the rise of a concept called 'performance budgets. It's an industry wide guidance that basically addresses the problem of developers typically shipping way too much JavaScript code. There’s an open joke that too much JavaScript code is 'the new CO2 emission' and that it’s 'bad for the environment.' Specifically, too much JavaScript code shipped means faster drains on mobile battery life, slow page loads, and other specific performance pitfalls.
Related to that performance budget broader movement is Google's NeverSlow mode. It basically sets constraints on how much JavaScript can be shipped on a per- interaction basis, and as long as that mode is enabled by a dev team, that site is never slow to load. This is a big movement that addresses not just modern devices on modern networks, but slower devices across the board. Even older Android devices on 3G networks in emerging countries -- your site or application will be really fast.
It's all related to how the web stays very open, how sites and apps stay very ergonomic by requiring no downloads, but perform as well as native apps.
BN: Tell us a little bit about Next.js and why it's become the most downloaded web framework by JavaScript and React developers.
GR: The general pitch for web frameworks is that when developers are maintaining their own tooling -- configurations, build pipelines, etc -- they tend to quickly fall behind on important optimizations they can make as the web evolves.
By using web frameworks like Next.js, their applications are production ready without doing any of the work. The ecosystem of web browsers is very fragmented, and Next.js gives you the peace of mind that at build-time we handle all these performance optimization to handle varied devices and browsers. Build once, ship everywhere.
Unlike traditional Single Page Application approaches (SPAs), Next.js introduced a concept of multiple pages or entry points. It optimizes for delivering code based on where the user is entering from. It basically chunks and slices the JavaScript to give the user the fastest possible page loads, no matter what you are running. Google's contributions to Next.js allow it to get the right amount and flavor of JavaScript to each device -- so iOS and Safari will get a different bundle than a Chrome desktop, for example. All of this happens without the web developer doing anything, and we're keeping up with this constantly.
BN: Is the experience of being a front-end developer changing with all of these new frameworks?
GR: Absolutely. You were doing a lot of stuff in the past that today is handled by the framework, so you can focus more on just building your site or app.
There's a big movement away from template systems that were common in full stack development frameworks, to component systems. Whether JavaScript developers are working with React, Vue or Svelte -- they are now thinking of using component systems with style guidelines. That’s really exciting because we’re moving away from something not easily executed on the client-side, to something that’s universal and re-usable. And most exciting, as front-end developers we’re moving away from writing lots of code, to writing low-code.
Image credit: denrud/depositphotos.com