Web Directions Code '23

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

In distributed architecture each service have their own context and boundaries defined by the team owning the service. Maintaining these specification and aligning them is a nightmare on long run. AsyncApi solve the problem by providing a specification to your asynchronous applications in a machine-readable format and tooling

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.

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, in order 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.

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.

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, 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.

Often when building websites, our units of measure are “pages”. It’s time to get more granular! Not every pixel on a page has the same importance. Content elements need deliberate prioritisation rather than trying to make the whole page fast. Let’s pull the idea of a “page” apart and explore a design and development pipeline that focuses on islands of content. How do we design, build and monitor the performance of our content islands?

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 it 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.

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 the the push-based systems and how to approach that using modern front-end frameworks and libraries

WebAssembly is building in hype and capability, but only a select few web apps are actually using it. For some kinds of apps, WebAssembly has a huge impact on performance, but for the rest of us it can end up being added complexity. However, there's one unexpected place that WebAssembly is making its mark: Development tools.

Even for projects with no need for WebAssembly, it's worth learning about it, how it works, and how it can supercharge local development and collaboration.

Since its announcement in 2015 and the MVP release in 2017, WebAssembly as a framework has come a long way. Originally conceptualised to solve the plethora of problems associated with bringing more languages to the frontend, the WebAssembly movement has gained momentum and how! With applications that go beyond the browser, the Component Model is the direction that the Wasm ecosystem is moving in. What does this mean for us mortals? A more declarative approach while building software, better reusability & portability of the software thus developed, and of course, the ability to bring more languages to the web.

In this talk, the speaker will delve into the WebAssembly framework & the component model proposal for by discussing the motivations for their existence. With the help of analogies, the speaker will guide the audience through the various nuts and bolts of the proposal in detail. At the end of the session, the speaker aims to arm the audience with a working knowledge of the component model and resources to pursue further research and get involved in the Wasm community, should they wish to.

Wouldn’t you love to automatically zap code bugs before releasing 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 to educate developers on general and team-specific best practices. This talk will have you detecting bugs, bad practices, and code smells at lightning speed! ⚡️