Category: Performance

Next Generation Virtual Scrolling

Rendering large data sets in the browser while optimizing for performance and accessibility is a complex problem. The current approach to handling long lists of data is using an infinite scroll pattern to incrementally load and render data just before the data enters the view. This approach comes with trade-offs that we will look at in detail as well as new features and standards that are coming down the pipe that will improve virtual scrolling in the future. Virtual scrolling

Read More »

Using WebAssembly with Web Workers

When building web apps, writing processing intensive code can be a challenge. One issue is getting predictable running times across browsers and JavaScript engines that optimise different code paths differently, as well as producing code that doesn’t interfere with user experience. Since 2010 we’ve had a standardised way to manage interactivity for long, non-DOM related tasks. Web Workers allow for offloading processing onto a separate thread keeping the main thread free. Recently we have seen the growth of another specification,

Read More »

Deploying a Dojo App with Docker

So you’ve built an amazing app using Dojo and now you are ready to go live. After a bit of research, you learn that traditional deployments are challenging! Luckily, the days of FTPing files are long gone, and we can rely on Docker for fast, reliable deployments. Using Docker will not only document your build process, but it will also give you a Docker image you can easily deploy to production or run locally. In this article, we’ll step you

Read More »

Getting Started with AssemblyScript

In a previous post we looked at how to compile the popular programming language Go to WebAssembly. WebAssembly is a new programming language which provides a compact binary format for the web. In this post we’ll explore another WebAssembly target language called AssemblyScript. AssemblyScript allows developers to write strictly typed TypeScript (a typed superset of JavaScript) code and compile it to WebAssembly.

Read More »
Episode 30: Idle Till Urgent

Episode 30: Idle Till Urgent

We explore First Input Delay, a new user-focused metric for the Web which refers to the amount of time before a response to the first user interaction on a Web page.

Read More »
Compiling Go to WebAssembly

Compiling Go to WebAssembly

For many years there has been the only way to write client-side logic for the web; JavaScript. WebAssembly provides another way, as a low-level language similar to assembly, with a compact binary format. Go, a popular open source programming language focused on simplicity, readability and efficiency, recently gained the ability to compile to WebAssembly. Here we explore the possibilities with writing and compiling Go to WebAssembly, from installation of Go, to the compilation to WebAssembly, to the communication between JavaScript

Read More »
TC39 Binary AST Proposal to Improve JavaScript Performance

TC39 Binary AST Proposal to Improve JavaScript Performance

WebAssembly has grown in popularity due to its ability to improve application performance and support transpilation of source code in other languages into something that may get leveraged in a web browser. Every time the JavaScript language gets challenged, the community strives to create mechanisms to improve performance bottlenecks, which we have seen over the years with efforts from Mozilla, Google, Apple, and Microsoft.

Read More »

Reflecting on ffconf 2018

Last Thursday I was lucky enough to get over to the highly regarded web development conference ffconf in Brighton. This was my first time at the event and I can say that it lived up to and even exceeded my expectations. In this post I want to share with you the key takeaways from the event as a whole, having stratified out what I saw as three common themes throughout the conference. Namely, these themes were: Empathy, New and Future

Read More »
The Return of SharedArrayBuffers and Atomics

The Return of SharedArrayBuffers and Atomics

A common complaint of modern web apps is the concept of jank; web pages being unresponsive to user input and frame rates being low. Left unmitigated, this problem leads to a poor quality experience for end users of our web applications. You might ask: is this what causes jank? One common cause apart from complex/inefficient animations are blocking operations. JavaScript is single threaded, and as such, it can only be executing one thing at a time, so if a long-running

Read More »
FullStack London 2018 – Improving User Experience With Web Workers

FullStack London 2018 – Improving User Experience With Web Workers

At this months’s FullStack London 2018, SitePen Engineer James Milner presented the talk “Improving User Experience With Web Workers”. Web browsers use single-threaded JavaScript to perform tasks; business logic, layout, reflows, and garbage collection. This means complex and heavy JavaScript functions can block the main thread from rendering. This results in low frame rates and low interactivity for things like scrolling and input, providing a poor user experience.

Read More »