Last week, I attended the Web Directions Code conference. It's a two days conference that covers various topics around web development. The theme for this year's conference was (as I quote from their website) "front of the front end" and the "back of the front end" –the technologies (JavaScript, the React ecosystem, CSS, browser APIs), and practices (privacy, security, performance, platform engineering and operations, and more) that underpin today's web sites and app. In this post, I'd like to share some notes from the talks that I attended and the learning I have from them.

Day 1

Keynote - Beyond the Web of today

Speaker: Kenneth Rohde Christiansen - Intel Corporation - Principal Engineer and Web Platform Architect

Summary

At Intel, we work at the forefront of innovation as our hardware roadmaps are defined years ahead of release. This means that we need to make sure that the web platform takes advantage of new hardware capabilities as they are released or shortly after. This ranges from enabling new form factors to taking advantage of hardware accelerators.

In this talk we will discuss some of the innovations that Intel is bringing to the web, such as WebNN, which enables access to fast neural network and machine learning capabilities; Web GPU and Compute Pressure, a new API enabling better user experience and bringing adaptive compute capabilities to the client, just like adaptive streaming has improved streaming use-cases by adapting to live network conditions.

1. Micro Frontend Architecture at Scale at Mecca

Speakers: Shabnam Mohammadian & Ehsan Gazar - Technical Leads - Mecca

Summary

Mecca's Engineering will be presenting its approach to solving the scalability and performance of frontend apps for over 30 frontend engineers by using a strategy called Micro FrontEnd

2. Perceived Performance

Speaker: Luke Denton - Principal Frontend Software Engineer - Aligent

Summary

What is perceived performance? It can’t be measured, it’s a perception, it’s a feeling of performance. In the context of a website, perception is reality.

If a website feels fast to a user, then it is fast. In this talk, we’re going to explore some patterns and techniques that we use in our day-to-day, working on large-scale e-commerce websites, ensuring our client’s customers have the best experience possible, which leads to happier customers and higher conversions.

3. Code Evolution at Scale

Speaker: Jake Lane - Senior Software Engineer - Atlassian

Summary

When you first start building a web application, it's easy to write code and pull in the dependencies you need. What happens in 5 years (or 5 weeks) when the industry has decided what once was a super useful library is causing enterprise computers to become fire hazards?

In this talk, we'll cover how we can modernise our code to the new dependencies we want, build tools and processes to migrate to new code, and avoid breaking things without moving too slowly.

4. Incident Management - Talk the Talk, Walk the Walk

Speaker: Hila Fish - Senior DevOps Engineer - Wix

Summary

Incident management can be challenging and throw you curveballs with unexpected issues, resulting in data loss, downtimes, and overall money & hours of sleep going to waste, BUT! There are practical things you could do to make it a smoother process and handle it better.

Remember when we were at school, and people said - "Actively listening in class guarantees 50% prep for the upcoming test"? The same goes for being proactive at work in ways that will instantly prepare you to manage incidents better (at night or in general).

In this talk, I'll cover the proactive ways you could take and incorporate into your day-to-day routine, to prepare you for a smoother and more efficient incident management process.

I will also show the best practices I've finalized over the years that helped me get a clear vision of how to manage production incidents in the quickest & efficient way possible. Embracing the tips I'll give you will guarantee you'll not only talk the talk but also walk the walk when it comes to incident management.

5. Hacked

Speakers: James Cave & Chris Lienert - Principal Consultants - Cognizant Servian

Summary

If you go by media releases, security breaches don't happen that often. In practice, there are many incidents that no one ever hears about and sooner or later it's going to happen to you.

What happens when you get hacked? We'll go through different scenarios and discuss what you can do about it.

6. Attacking the front-end: Modern-day client-side security

Speaker: Kaif Hasan - Product Security Engineer - Atlassian

Summary

We’ve come a long way since the early days of client-side security when injection attacks like XSS and SQLi were rampant. Modern frameworks come with a lot of out-of-the-box protections. But with the frameworks, the attackers have also evolved. In this talk, Kaif Ahsan, a Product Security Engineer at Atlassian, will share the most common ways modern web applications are hacked. Many of which he regularly comes across at work.

We will various techniques and examples of exploiting modern web applications like React, and Angular. Through practical examples, code samples and much the developers will understand how the attacks happen and their impact. Furthermore, we will be exploring various best practices to tackle these vulnerabilities and build secure web apps.

Closing keynote - Don't believe the hype!

Speaker: Dave Berner - Kinde

Summary

We’ve all been guilty of it, a new technology comes along and you’re desperate to try it out. Before you know it, you’ve installed a bunch of dependencies, completed a brilliant “refactor” and shipped to prod. What you didn’t realise through all the high-fives and back-slapping with your team, is you’ve inadvertently shipped an extra 10mb of JS to the end user!

It’s not a new term but Hype Driven Development is more prevalent in the JavaScript ecosystem than ever. By the end of this talk you’ll see we may not need JavaScript for all the things and sometimes boring can be better…

Notes

The closing keynote for the first-day conference more into stories of the journey the speaker has gone through from multiple iterations in Web development techniques and how he emphasises the importance of sticking to the fundamentals instead of following the hype.

Day 2

Keynote - Frontend Platform Engineering

Speaker: Serg Hospodarets - Executive VP Global Engineering - Finalsite

Summary

We are switching from the era of Front-End DevOps to Platform Engineering- to create a company-specific platform to develop and deliver their products.

It goes through the stages of a Design System creation, integrated with a UI Framework (React, Vue, Angular…), and building an abstraction level on top of Cloud providers (AWS, Azure etc.) and tooling (K8S, Terraform..), and CI/CD pipelines (GitLab, Github) + observability and security enablement, to move the cognitive load from the product delivery teams.

Picking the right tooling, and fostering the culture, solution and approaches is complex, but there is a common set of patterns and tools, so this talk is to describe both the reasons why Platform Engineering is a must and to demo which tools and approaches will help you in this journey.

1. Taking advantage of AI to help you write code

Speaker: Lachlan Hunt - Senior Developer - Atlassian

Summary

In this session, we'll explore how AI tools can help developers write better code. We'll cover various ways in which these tools can be used to generate code, improve skills, and debug errors. We'll also discuss their benefits, including time-saving and overall improvement of coding abilities. Moreover, we'll examine their limitations and provide tips on using them effectively. Whether you're a seasoned developer or just starting, this session will offer valuable insights into how AI can assist you in writing better code and honing your coding skills.

Notes

In this talk, the speaker mostly talked about his experience using generative AI tools and AI coding assistants as a part of the development workflow. He showcases an example of using AI tools to build a calculator application. In his demo, he wasn't just showing how he use AI tools to help build out the pieces for the Calculator, but also understanding the concept around the algorithm that's in the app itself.

Overall, there's nothing new in this talk for me, but it is always good to see how other people utilise this AI tools in their development workflow.

2. Falling off the Edge: Practical Uses for Edge Computing

Speaker: Alexander Karan - CTO - ClimateClever

Summary

Unlock the full potential of edge computing with this session. We'll dive deep into what edge computing is, how it works, and how it can enhance the software you build.

Learn about new runtimes and frameworks like Deno and Fresh that can take advantage of edge computing. See how easy it is to deploy to the edge and understand what it means to deploy your code as close as possible to your users and the benefits it brings.

The session will give you real-world examples and uses cases of edge computing so you can apply them to your work. We'll also cover the limitations of the edge and when it may not be the best fit for your project.

You will walk away from this session with the knowledge and skills to get the most out of edge computing.

3. Deep Dive into Push-based Front-end Architectures

Speaker: Aliaksei Kuncevic - Director and Google Developer Expert - Angular Consulting

Summary

Push-based front-end is a modern approach to web development that is gaining traction in the industry. Unlike traditional front-end development where the browser makes requests to the server for data, push-based front-end enables the server to proactively push data to the browser as it becomes available.

This approach provides several benefits including faster data delivery, reduced network traffic, and improved user experience.

In this talk, Aliaksei will walk you through push-based systems and how to approach that using modern front-end frameworks and libraries.

Notes

I have a high expectation for this talk to learn something about this architecture, but it turns out the whole material is a bit dry and when it gets into the topic that is interesting enough, the speaker didn't deep dive into the topic. So, unfortunately, I didn't learn much from this talk.

4. CSS Container Queries: Reshaping the Way We Approach Responsive Web Design

Speaker: Trung Vo - Staff Software Engineer - Ascenda

Summary

The rise of component-based architecture has brought new challenges to web developers, including the need for more granular control over layouts within individual components. While media queries have been a cornerstone of responsive web design for over a decade, they fall short when it comes to solving layout issues at the component level. Enter CSS container queries, a new tool that allows developers to style components based on their available space within a containing element. With container queries, we can use the same component everywhere, but it's restyling itself to fit best within the UI where it lives.

In this talk, we will explore the capabilities of container queries and how they can be used to achieve complex layouts without the need for heavy scripting or ResizeObserver hacks. We will cover the different container types, including inline size and size, and showcase real-world examples of container queries in action with Flexbox and grid.

5. But what about normal flow?

Speaker: Erin Zimmer - Software Engineer - Cash App

Summary

When people talk about CSS layouts these days, it’s all about flex and grid. And, don’t get me wrong, flex and grid are pretty cool. But normal flow is still the default layout on the web, so that's what most of your app is probably using.

And given that normal flow is so fundamental, it's important to have a good understanding of how it works. But how it works can be a little counterintuitive. Why, for instance, can we easily centre a thing horizontally, but not vertically?

Let's have a look at the mental model behind normal flow, what kind of things it's good for, and when some of the newer, shinier features might be a better choice.

6. Static Analysis: Shockingly Useful! ⚡️

Speaker: Josh Goldberg - Open Source Developer

Summary

Wouldn’t you love to automatically zap code bugs before releasing them to production? How about before your code even gets run? Static analysis tools scrutinize your code as you write it - giving you blazing-fast feedback at development time. We’re going to go into how that works, why it’s useful, and -best of all how to enable the best configurations for ESLint, TypeScript, and their associated tooling in your app.

We'll cover the tooling differences between formatters, linters, and type checkers, along with how to appropriately set up each of those tools for local development and CI/builds. We'll briefly skirt around the deep configuration rabbit holes one can joyously fall into when setting up ESLint plugins, then find ourselves using ESLint and TypeScript as documentation sources and educating developers on general and team-specific best practices. This talk will have you detecting bugs, bad practices, and code smells at lightning speed! ⚡️