13 Jun 2023 Web Directions Code 2023 Recap
Introduction
Keeping up with the blazingly fast-changing landscape of front-end engineering and Javascript can be challenging. From build tools to full-blown frameworks, we are spoilt for choice – and sometimes bewildered by it.
Determined to cut through the noise and be a guiding light, Web Directions Code 2023 brought together an array of experts and thought leaders from across the world together and put them in front of an audience of web developers, engineers and technical managers for a two-day conference. The goal? To share new ideas, teach from experiences and pave the way to a more cohesive future for front end technologies.
Talks were broadly spread across two tracks: the front of the front end focusing on CSS, browser APIs, and Javascript; and the back of the front end covering topics such as security, performance, and more.
In this article, I will highlight what I thought were the key sessions and takeaways from the event.
Keynote address
To kick off the conference, Kenneth Rohde Christiansen from Intel reiterated that the web continues to be a key application platform, with PC usage data revealing that users are spending the majority of their time browsing the web.
From this Kenneth concluded that improving web capabilities would mean improving the user experience of a large set of users. This is why chip makers like Intel are working with standards organisations to ensure that web apps are as usable, performant and secure as native apps.
One such project working toward reducing the gap is Project Fugu, started by Google. Fugu’s areas of focus include building diverse APIs for better access to local files, and easier copy-paste operations.
Another important area of focus in browser evolution is graphics and GPU utilisation. This includes WebGL, its successor WebGPU and the related Web NeuralNetworks. Other enablers are WebAssembly, which has made it possible to run apps like Photoshop and Visual Studio Code in the browser. Another example mentioned was how in-browser video conferencing software can provide functionality like background blurring and noise cancellation by tapping into hardware chips with native encoders and decoders.
I left the session confident that the web can continue to be a compelling meeting ground for users and technology.
Performance
In a world where “being digital” is becoming the norm for businesses, the speed with which a web application loads is seen as the equivalent of responsiveness of sales staff on the floor of a bricks-and-mortar store. However, perception plays a part in what we define as a “fast” website.
Luke Denton of Aligent recollected his experience with an ecommerce app that performed really well according to Lighthouse tests, but felt like it loaded slower than a competitor’s web app. He then went on to share perceived performance patterns that they used to portray the feeling of a fast load:
- Avoiding Cumulative Layout Shift: It’s common for different components of an app to load separately rather than all at once, causing gaps to appear and layout to jank. Strategies to avoid this include adding a skeleton loader in the content components, or even just using CSS to push a footer to the bottom of the viewport so the flicker can’t be seen by the user.
- Avoiding Loading Indicators: Using multiple loaders on the same page may make users feel like they are waiting. The advice here was to replace loaders with simple click acknowledgement indicators where possible to confirm activity and directly render UI. Alternately, only show loaders after a slight wait, so they will only be displayed to users on a slower network.
- Local Data Caching: Using the stale-while-revalidate approach, show cached information from memory and replace it with fresh data where applicable. That said, caution needs to be exercised with fast-changing data points like price and ratings.
- Prefetching: Lean on analytics to find out popular routes and then pre-fetch resources. Stick to pre-fetching data, JS, and CSS requests only though. One may use a few strategies to trigger pre-fetching during a session such as when the network is idle or based on viewport activity. Note however that the tradeoff of this strategy is that can eat up a lot of the user network bandwidth.
- Optimistically Updating UI: Assuming that everything is going to go right and updating the local state before an API call is successful. However, it’s important to deal properly with the case of an API call subsequently failing, otherwise your user might start to lose trust in your application
The mindset of managing users’ perceptions by using smarter loading strategies was reinforced by Mark Zeman of Speedcurve, who wants to rethink the practice of measuring the performance of an app with a page as the most basic unit. Deeming the page performance measurement to be too monolithic, Mark urged us to break pagea down into islands of content, as “not every pixel on a page has the same importance”.
We can then direct our focus toward rendering the most important content first, an approach supported by frameworks like Astro.js. You can even separate the static and dynamic parts of a content island to further utilise different strategies for server-side rendering. Mark also showed how to better track the performance of the highest priority content on your page using the HTML elementtiming attribute.
Having covered how to improve performance on both the client and the server, we then moved on to the place where the two meet: the network edge. Alexander Karan of ClimtateClever shared his experience with edge computing and how to practically implement it. While the talk was loosely based on a lot of what Vercel, Cloudflare, and Netlify are offering, Alexander also made the point that if edge computing is about running the code closest to the consumer, smart speakers like Alexa, Apple, and Google Home are also great examples.
Security
A conference would not be complete in 2023 if there were no talks on security. Seasoned DevOps engineer Hila Fish came all the way from Israel and took us through the right approach and mindset to take when an incident happens.
She started off with understanding the importance of the different pages in a web app, and knowing what qualifies as a security incident in the first place. Whilst everything in an app may be prone to failure, it may not require attention at the same level of priority.
Next, Hila broke the incident management process into five separate phases:
- Identify & Categorise
- Notify & escalate
- Investigate & diagnose
- Resolve and recovery
- Closure
Her talk left me enlightened and better equipped to deal with the nitty gritty’s of security incident management.
Still on the topic of security was Kaif Ahsan from Atlassian, who talked about various ways we can leave our React apps open to attacks like code injection and cross-site scripting by setting the DOM directly either via HTML or via the DOM API, rather than using the React API.
Whilst many front-end engineers may not consider security to be a big part of their day-to-day work, it is nevertheless an important responsibility for all of us. Kaif introduced the audience to the ReactVulna project as a great example of what not to do in a React app that (albeit built deliberately that way).
Hype vs Reality
Tech conferences tend to define best-practices in terms of the latest and greatest technologies. However, the bleeding-edge also has its downsides, meaning that Dave Berner’s talk about avoiding hype in the frontend world was a welcome respite.
Dave explained his position as someone who has had to make many technology choices over the years, and has seen both hits and misses. In his view, hype around a particular tech is usually not a valid argument for its usage, even if it may seem like it at the time.
The talk hit very close to home for me, and reminded me of the “Pragmatic Delivery” ethos we value here at Shine Solutions when building software. While the frontend landscape moves fast, it is important to not change for the sake of change. Focusing on the problem and working forwards to the best solution will lead to a better outcome, rather than starting with a solution (for example, the hot frontend framework of the day) and working backwards to the problem in the hope it will be a good fit.
Conclusion
The two days of Web Directions Code 2023 were packed with valuable content and knowledge, and the talks were a good representation of the current landscape of front-end engineering and software development.
It was also a great opportunity to think beyond the silo of Javascript and take a more holistic approach to building apps. In addition to technology, user experience, security, performance, platform considerations and backend infrastructure are all important constituent parts of “web development” . In other words, it was a reminder that technology is an enabler of solutions, not a solution in itself.
That’s not to say that web frameworks, libraries and platforms have no value. They were each originally created for a reason. The key part is understanding what the value of each particular technology is, understanding the needs of a business, then choosing the appropriate technologies to meet those needs. As web developers that’s our job, and conferences like Web Directions Code help us do just that.
No Comments