JS Nation

JSNation 2022

Today's Talk discusses the future of performance tooling, focusing on user-centric, actionable, and contextual approaches. The introduction highlights Adi Osmani's expertise in performance tools and his passion for DevTools features. The Talk explores the integration of user flows into DevTools and Lighthouse, enabling performance measurement and optimization. It also showcases the import/export feature for user flows and the collaboration potential with Lighthouse. The Talk further delves into the use of flows with other tools like web page test and Cypress, offering cross-browser testing capabilities. The actionable aspect emphasizes the importance of metrics like Interaction to Next Paint and Total Blocking Time, as well as the improvements in Lighthouse and performance debugging tools. Lastly, the Talk emphasizes the iterative nature of performance improvement and the user-centric, actionable, and contextual future of performance tooling.

Our understanding of performance &amp; user-experience has heavily evolved over the years. Web Developer Tooling needs to similarly evolve to make sure it is user-centric, actionable and contextual where modern experiences are concerned. In this talk, Addy will walk you through Chrome and others have been thinking about this problem and what updates they've been making to performance tools to lower the friction for building great experiences on the web.

The Future of Performance Tooling

Addy Osmani

React Advanced

React Advanced 2025

Choosing the right tools and frameworks is crucial for React projects. VEET enhances developer experience and project adaptability. Optimizing tool stacks with Rolldown can improve production builds. Understanding build steps and code optimization is essential for efficient development. Bundlers play a key role in code optimization and Rolldown offers a unique approach. Rolldown accelerates React development by boosting build speed and optimizing bundle sizes. Xcalibur and Outline show significant improvements in build times. Developing bundler components with OXC and exploring its capabilities. Enhancing Oxlint and Oxformat functionality for improved toolchain. Rolldown's evolution and future plans for Vite integration.

Getting to a production-ready React application is about more than just choosing a framework. To ship features efficiently, developers need a reliable pipeline that can handle everything, from linting to bundling, as quickly and accurately as possible. In this talk, we will explore how modern tools like Rolldown and Oxc can speed up your development workflow, how they can help in your project today and what is planned for the future.

Rust Meets React: Diving Into the Next Generation Build Pipeline for React Apps

Alexander Lichter

React Summit US

React Summit US 2025

Front-end developers benefit from cloud services like AWS S3 and Lambda. AWS offers services like Cognito for identity management and Bedrock AI models. AWS Amplify provides Hosting and Cloud Development Kit for efficient development. The Cloud Development Kit is recommended for TypeScript deployment. AWS Amplify connects front-end to AWS services and SDK for back-end. QR code feedback is available for the talk.

Cloud providers like AWS offers a lot of services. Cognito, S3, Hosting, Bedrock, and Lambda functions to name a few. As a front end developer what services should you learn? Do you need to learn devops, and security rules? What about AI like large language models (LLM)? How do you integrate LLMs into your front end workflow from a cloud provider?In this talk I'll discuss some core services and tooling, like Kiro, Amazon Bedrock and Lambda and best practices and approaches to using them as a front end developer.

How To Get The Most Out Of the Cloud As A Front-End Developer

Erik Hanchett

JSNation US

JSNation US 2025

As TypeScript and JavaScript enthusiasts, the Talk introduces Kubernetes, Pepper, and admission control with humor and passion. Topics cover Kubernetes security, network policies, automation with Pepper, developer productivity enhancement, troubleshooting TypeScript informer, Go implementations, and comparing efficiency with DRPC streaming. The discussion extends to Kubernetes management features, community engagement, beginners' guidance, small application development goals, and auto-scaling strategies for Kubernetes clusters.

Kubernetes doesn’t have to be hard. In this talk, we’ll explore kubernetes-fluent-client, a TypeScript-based meta framework that makes working with the Kubernetes API intuitive even if you’ve never touched client-go. From building controllers to managing subresources like logs, scale, and proxy, this talk dives into how the fluent client simplifies cluster interaction through a clear, expressive API, server-side apply, and custom informers. Whether you’re writing automation or full-blown operators, you’ll walk away ready to build Kubernetes-native applications faster and with less boilerplate. KFC is the Kubernetes Client that serves as the engine for <a href="https://github.com/defenseunicorns/pepr" target="_blank">Pepr</a> (An Admission Controller and Operator Framework built in TypeScript) and is an npm package.

Meta Framework for Kubernetes: TypeScript Meets Cluster Control

Casey Wylie

Introduction to a JavaScript tooling workshop based on personal experiences and the motivation behind creating custom tools for enhanced productivity. Speaker shares insights into managing ADHD symptoms with tools. Exploration of building tools like browser extensions and ASTs for different languages and stacks. Understanding ASTs, nodes, and types, emphasizing their significance in tools like ESLint. Creation of ESLint rules for import specifiers and identifiers differentiation. Troubleshooting ESLint rules creation process and comparing rule approaches. Leveraging AI for code automation and creating ergonomic utilities. Maximizing CodeMod efficiency and streamlining library upgrades. Implementing code refactoring with JS CodeShift and resolving AST manipulation challenges. Exploring AI tools for workflow efficiency and custom tools for codebase documentation. Evolving web development tools for accessibility and AI integration. Workshop conclusion on continuous learning, engagement, and collaboration.

Let’s demystify the secrets of modern JavaScript tooling. In this workshop, you will learn how linters, compilers, and code transforms work. You will take your first steps building your own developer tools, writing an ESLint rule, a compiler plugin, and a code transformation. Learn these skills to help your team and deepen your understanding of computer languages.Workshop Plan:<ol><li>A preview of how ASTs can be used</li><li>A brief walkthrough of how compilers work</li><li>An intro to working with an AST</li><li>The secret to making thousands of changes in seconds</li><li>How to apply this skill</li></ol>

Pragmatic 101 on Custom JS Tooling for Your Project

Will Klein

AI Coding Summit

Wesley discusses the potential benefits of integrating AI tools in software development, demonstrating a 45% productivity improvement with AI usage. The importance of engineers providing clear direction for AI tasks and overseeing AI-generated code is highlighted. Engineers are reminded that AI is a complement, not a replacement, for human expertise, and that effective AI usage involves clear communication and human oversight. Contextual guidance and effective task management strategies for AI interaction are emphasized.

What if you let AI code alongside your devs—would it speed things up or slow them down? At Modus Create, we ran a 3-month internal experiment to find out. Two squads were tasked with building the same app: one squad had full access to AI coding agents like GitHub Copilot and Cursor, while the other worked with zero AI assistance. The results? Surprising, nuanced, and extremely relevant for any enterprise thinking about bringing AI tools into their software delivery process. In this session, we'll share productivity metrics, insights on code quality, cultural impact, and what we learned about pairing developers with AI. You'll walk away with a real-world perspective and a practical guide on how to scale AI-powered development across your engineering org—without the hype.

Vibe Coding at Enterprise Scale: What Happens When AI Joins Your Dev Team

Wesley Fuchter

Node Congress

Node Congress 2025

Thanks for a great talk. I'm Phil Hawksworth, head of developer relations at Deno. I'll be available for Q&A later. Connect with me on social media at philhawksworth. So he took Node and he split it, and he sorted it, and joined it, and Deno was born. But naming things is hard. I've been building for the web for 25 years. Across different places, I've observed that web developers tend to follow trends over the years. JavaScript has become ubiquitous, powering the web from the front end to the server and beyond. Node.js has played a significant role in bringing JavaScript into the mainstream, increasing its resilience. The natural evolution of JavaScript is exciting, with new tools emerging. Personally, I'm cautious about adopting new tools, but I stumbled upon Deno while building edge functions on Netlify. It is powered by Deno under the hood and resembles JavaScript. I was writing functions in JavaScript and TypeScript without realizing that Deno was powering them under the hood. I got excited about using a site generator called Loom, which led me to discover Deno. Installing Deno and running its commands got me started. Deno is an open source JavaScript, TypeScript, and WebAssembly runtime with secure defaults. It's built on V8, Rust, and Tokyo and offers a JavaScript runtime, TypeScript toolchain, package manager, and task runner. Deno is a tool that encompasses various functionalities, including testing, linting, formatting, benchmarking, and compiling. Its API is based on web standards, making it familiar to web developers. Enabling Deno in your IDE provides insights into your code and hinting across the Deno ecosystem. Deno package management allows you to import packages from the NPM or the node ecosystem to ease the transition. Managing dependencies and updating packages is simplified with Deno. Deno clean purges the cache, allowing gradual repopulation. Tasks in Deno are managed in Deno.json and can be run using the commands run or task. Deno's built-in test framework allows for running tests using the command denotest. Deno includes a built-in TypeScript and JavaScript toolchain, eliminating the need for additional configuration. Deno allows running TypeScript files without the need for compilation. It offers tools for type checking, generating type definitions, formatting code, and linting. Deno simplifies and unifies various tools, making it easier for teams to adopt a consistent toolset. Deno's security model and performance are robust. Explore examples, tutorials, the Deno Discord, Blue Sky updates, and a deep dive video to learn more about Deno. Thank you for your time!

After many years and many projects using web technologies, Phil is becoming increasingly excited about changing up some of the tools that are his usual security blanket. After repeatedly campaigning for large clients to embrace tools from the NodeJS ecosystem while it was maturing, why would he consider disrupting that?In this talk, Phil will speedrun features and utilities of Deno that have him excited, and share information about plans to help the JavaScript and TypeScript ecosystems continue to thrive. We'll look at things like package management and publishing, testing and tooling, writing and hosting serverless functions, and more. All while exposing how and why Phil was once daunted by embracing TypeScript, but is now finding new comfort in the emerging tools on offer.

Dabbling With Deno — Tales From a Web Developer Playing With a New Toy

Phil Hawksworth

Productivity Conf for Devs and Tech Leaders

I'll walk through some of the ways I set up Cursor to help speed up my full stack workflow. The main thing to check is indexing the code base. Cursor also looks at the get graph file relationships. Another important setting is large context, which allows absorbing larger files and multiple files of context in the prompt window. Iterating on lints helps find and fix errors faster. Web search tools and uploading your own docs are also available to enhance the prompt window. These are all preferences, including auto select, YOLO mode, and models. Rules are also crucial as they guide the model to understand your workflow. Implement best practice error handling and adjust rules as the models and system prompts change. MCPs like sequential thinking, Postgres SQL, and Puppeteer help refine thoughts and automate workflows. Creating a product requirements document in a .md file allows AI to ground itself in project information. The game was successfully implemented and all items were checked off. Debugging strategies involve adding debug logs to help identify issues. Use commit messages to provide clear documentation for changes. Demonstrating the use of AI in debugging by setting up and utilizing debug logs. Showcasing the benefits of providing debug information to resolve issues. Overview of various topics including indexing rules, linting, MCPs, PRDs, tech stacks, and checklists.

Cursor is a breakthrough AI integrated development environment that enables rapid prototyping via its composer agentic mode.  In this talk I'll cover how to maximize productivity with Cursor from tips and tricks to complete nearly hands off workflows. By the end of this talk you’ll understand techniques such as using modular checklists to build tests, using and indexing docs, cursor rules, when to commit, roll back strategies to reduce hallucinations and Devops scripts the active cursor LLM can write and use to keep the code honest.

How to Master Cursor for Rapid Development

Mike Mikula

Hello, Productivity Conference. We are Winsurf, a brand new AI-native code editor. Today, I'm going to show you how the product works, the guiding principles behind its development, and some tips and tricks on using AI in development workflows. Our agent is a powerful tool that abstracts away grunt work, making developers focus on building and shipping great products. It performs background research, predicts next steps, and automates decision-making. Windsurf integrates deeply into the application, understanding what you're doing and providing tools to achieve your goals. The agent can remember instructions and behave like an extension of yourself. Building for the future of intelligence, Windsurf aims to improve productivity and revolutionize coding with AI agents.

How Windsurf Breaks Through the Celling for Retrieval

Kevin Hou

Welcome to my talk on AI powered development. We'll explore the implications of AI tools and where the value lies in software development. We're transitioning to a new age where AI plays a significant role in coding. The new workflow involves asking AI for code, verifying it, and continuing to build. AI tools are available in the market, offering different options for developers. It's important to choose the right approach that aligns with your goals. Keeping IDE and AI separate allows for better control. The value of AI-powered development lies in architecture, scalability, and creativity. We're in the early stages of AI-powered development, presenting a significant advantage for those entering the field now.

We’ll explore how AI has reshaped the learning curve, expedited development, and emphasized creativity in problem-solving. You’ll leave with actionable insights on building scalable architecture, mastering the art of prompting, and having fun creating innovative, AI-enhanced solutions. Additionally, we will examine modern AI tools such as Windsurf, Cursor, Bolt, Replit, and v0, highlighting which of these I have found to be the most productive in practical use.

AI-Powered Development: From Curiosity to Creativity

corbin

Hello, everyone. My name is Krzysztof, and I will be talking today about developer tools, AI, and how we use both of those to create the next generation of developer tools. GitHub Copilot, released in 2021, revolutionized developer tools by automating boring parts of coding and keeping developers in a state of flow. Suggestions are shown directly in the editor and clearly separated from the real code. Chat interfaces, like Chat GPT, solve quality of response issues and are useful when flow doesn't exist. The next generation of tools focuses on structured exchange, user control, and iteration. GitHub Spark allows users to create small applications without focusing on code. Designing applications with the user in mind and handling ambiguity is important. Real-world software tasks require human guidance, and exploring new ideas beyond chat-based AI is necessary. Always consider the human aspect and ethical considerations when using AI-powered features.

AI has already changed software development. Tools like GitHub Copilot have become ubiquitous parts of the workflow of millions of developers. Like other well-known editor features (like autocomplete or tooltips), AI-in-editor increases productivity, reduces required context switching, and lets developers stay in the flow while focusing on important parts of their job. However, this was just a first step—with the rapid developments of large language models (LLMs), which have become more powerful and knowledgeable with every release and have excellent reasoning capabilities, we can do more. Nowadays, we see AI tools able to solve complex, repository-wide tasks or even generate whole applications. In the talk, I will demo some new AI tools coming from GitHub Next, such as Copilot Workspace or GitHub Spark. We will discuss emerging UX patterns, give advice on how to build your own AI tool and peek into the future of developer tools. All that while trying to answer the most important question—how to design applications using AI with humans in mind.

Building the Next Generation of AI Developer Tools

Krzysztof Cieślak

React Summit US 2024

I'm presenting on simplifying analytics in React apps. We want to build embedded analytics for developers using common languages like JavaScript and TypeScript. By reducing backend complexity, developers can prioritize building dynamic data-rich UIs. BI platforms didn't deliver the customization required, so we aim to use React to create a powerful SDK. The SDK involves constructing a semantic layer, building reusable components in React, and doing cool things with it. We simplify the data model and generate a TypeScript representation. Sisense provides APIs for authentication, row-level security, and customization. We can now build React components directly off the generated model. The data model called datasource enables simple UI and eliminates the need for front-end engineers to write SQL API calls. We built a near-production-ready application using a React template and Sisense as the backend. With the simplified system and a semantic layer, we can now use large language models for chatbot-driven visualizations and dashboard layouts. This framework enables faster development and alternative methods for generating interactive React objects.

Love React? In this talk, we’ll explore modern SDKs that let developers focus on the front-end experience by taking care of back-end data orchestration and data modeling. Using familiar languages like JavaScript or TypeScript, these tools enable quick integration of customizable, powerful analytics into React apps. By reducing backend complexity, developers can prioritize building dynamic, data-rich UIs without the hassle of managing infrastructure.

Simplifying Analytics in React Apps

Stephen Robb

JSNation US 2024

Today's Talk is about porting to Rust, specifically the experience of porting Turbo Repo, a build system for JavaScript, from Go to Rust. The speaker discusses the challenges faced during the porting process, such as file permission code discrepancies and issues with Alpine Linux. They explain the approach taken, including using a Rust shim and porting individual Go dependencies to Rust. The Talk also covers the limitations and challenges encountered during the porting process, as well as the benefits of leveraging the Rust ecosystem. The speaker discusses the considerations of rewriting versus porting and the importance of institutional knowledge. They also touch on the performance impact of the porting process and the improvements achieved by moving to a fully Rust implementation.

Everybody loves talking about Rewriting in Rust, but rewrites are hard. It’s far too easy to fall into second system effect, shipping delays, and end up losing all your users. How can you move to Rust while still shipping features and keeping your users happy? Easy, instead of rewriting, port! In this talk, we’ll go over how we ported Turborepo from Go to Rust using three different strategies: a Rust shim that wrapped the existing Go code; a Rust-Go-Rust sandwich to incrementally port dependencies; and finally a completely parallel Rust implementation. We’ll talk about why we chose these strategies, how we went about implementing them, and how we shipped them to users.

Porting Turborepo to Rust

Nicholas Yang

JSNation 2024

Algorithmic art is a unique form of artistic expression where programming plays a fundamental role in creating unpredictable and complex works. P5.js is a JavaScript library that enables artists, designers, educators, and beginners to create graphic and interactive web experiences. P5.js offers various features and possibilities, such as fractals, iterate systems, and creating art with randomness. It also allows for user interactivity and provides a resource called Open Processing for inspiration and examples. The library offers a wide range of examples for exploration and learning, providing endless possibilities for creating complex and unique pieces of art.

This talk highlights the transformative role of JavaScript in creating dynamic, self-generated artworks. Delve into how libraries like p5.js, Three.js, and Paper.js are empowering artists and programmers to push the boundaries of digital creativity. We'll journey through the evolution of algorithmic art, showcasing how JavaScript enables the creation of intricate patterns and complex visual compositions. The presentation will feature engaging examples and demonstrations, illuminating the power of JavaScript in crafting interactive, ever-evolving art pieces. Concluding with practical insights and resources, this talk is a gateway for anyone eager to explore the fusion of art and code in the digital age.

Infinite Patterns in the Digital Canvas: Unleashing Creativity With JavaScript in Algorithmic Art

Francisca Beatriz Medina Concha

Swift responsiveness is essential, and LLRT is a new JavaScript runtime optimized for serverless environments that offers improved performance and cost savings compared to other runtimes. LLRT achieves fast performance by removing complexities, leveraging Rust, and optimizing the AWS SDK for Lambda. It starts almost six times faster than Node.js and provides a cost saving of 2.9 times and a time saving of 3.7 times compared to Node.js.

Discover AWS's experimental JavaScript runtime, LLRT (Low Latency Runtime), designed specifically to address the growing demand for fast and efficient Serverless applications.

LLRT JavaScript Runtime: Redefining Serverless Latency

Richard Davison

Drizzle is a TypeScript ORM that leverages SQL knowledge, is fast and has its own ecosystem. It manages database schema and supports prepared statements for peak performance. Drizzle provides a complete set of tools, including Drizzle Studio and query runners. The ecosystem includes GraphQL integration and community-built tools.

There's already plenty of ORMs in the JS world, so why build another one? In this talk we'll figure out why Drizzle is different from other solutions in the market, why do we consider it a "day 1000 ORM" and how does it feel to be a headless ORM with a head. We'll also delve into the Drizzle ecosystem and look at solutions that will greatly enhance your drizzling™ experience.

What’s the Deal With Drizzle ORM?

Dan Kochetov

Today, we're going to talk about the Biome Analyzer, which is not just a linter or a CLI tool. It takes advantage of multi-threading, channels for communication, and caching to achieve high performance. The analyzer complements the parser and provides features like import sorting and emitting new diagnostics. It is LSP ready, can automatically sort JSON keys, and can be used as a CLI tool for enforcing refactors. The Biome Analyzer showcases its impressive performance in handling large codebases in a video demonstration.

With Emanuele, lead maintainer of Biome, we will explore the internals of Biome's analyzer, which fuels its linter. You'll learn how lint rules are made, what tools the analyzer can give and how to use them.

What's Inside Biome's Linter?

Emanuele Stoppa

Today's Talk explores the complexity in code and its impact. It discusses different methods of measuring complexity, such as cyclomatic complexity and cognitive complexity. The importance of understanding and conquering complexity is emphasized, with a demo showcasing complexity in a codebase. The Talk also delves into the need for change and the role of refactoring in dealing with complexity. Tips and techniques for refactoring are shared, including the use of language features and tools to simplify code. Overall, the Talk provides insights into managing and reducing complexity in software development.

One of the most common issues in JavaScript code bases is that our code is too complex. As projects and their requirements evolve, complexity creeps in. Excess complexity slows progress, frustrating us as we try to keep large chunks of a program in our heads just to understand what is happening. To conquer complexity, we must refactor! In this talk, we'll investigate how to identify unnecessary complexity in our code base using cognitive complexity as a measure, how to approach refactoring complex code, and what tools are available to help us refactor. We'll put it all into practice through a live example. By the end of the talk, you'll be excited to tackle that 1000-line monstrosity of a function in your own code base (you know the one).

Conquering Complexity: Refactoring JavaScript Projects

Phil Nash

JavaScript's power and versatility make it the programming language of choice for consumer applications worldwide. A JavaScript engineer should understand how things work, even if they don't know everything. The Talk discusses modifying websites, uncovering game rigging through developer tools, analyzing fetch requests and overrides, refactoring and state management, and website modification. The speaker shares personal experiences and highlights the importance of understanding and being able to modify code in real-time.

Like it or not, those days lots of things around us run on JavaScript. Web, mobile and desktop apps, TVs, fridges and space rockets - you name it! I will talk about how to put this to good use by utilizing the forbidden craft of "disassembling". We'll also talk about not knowing things, trusting facts and becoming a better engineer.

Reverse-Engineering Everything to Get Rid of Trust Issues

Mikhail Korolev

The Talk discusses browser automation using the Worker's Browser Rendering API, which allows tasks like navigating websites, taking screenshots, and creating PDFs. Cloudflare integrated Puppeteer with their workers to automate browser tasks, and their browser rendering API combines remote browser isolation with Puppeteer. Use cases for the API include taking screenshots, generating PDFs, automating web applications, and gathering performance metrics. The Talk also covers extending sessions and performance metrics using Durable Objects. Thank you for attending!

In this talk, we will explore how the Browser Rendering API can automate browser tasks, freeing developers from repetitive manual work. We will begin with an overview of Cloudflare Workers and how they enable running JavaScript at the edge. Then, we will discuss browser automation in detail, covering how to interact with the DOM, fill out forms, and scrape data from web pages. We will showcase real-world examples of how browser automation with Cloudflare Workers can improve the user experience of web applications, increase productivity, and automate tasks, such as generating screenshots and PDFs of web pages, testing web applications, and running performance audits. At the end of this talk, attendees will gain a better understanding of how to use the Browser Rendering API to automate browser tasks and take their web development skills to the next level.

Automate the Browser With Workers Browser Rendering API

Gift Egwuenu

JSR is a new JavaScript registry that supports TypeScript and offers additional features like GitHub Action integration, provenance attestations, and documentation generation. It provides a simple website with package search, documentation, and a gamified score. The process of publishing a new package in JSR involves creating a JSR.json file with package details and exports, using MPX JSR publish to publish the package, and approving authorization in the browser. However, documentation for the package is not automatically generated and needs to be manually added.

JSR, a modern package registry for JavaScript and TypeScript, is designed to be fast, simple, reliable, and work across many JavaScript runtimes. Come learn how using JSR can simplify your developer experience.

JSR – Next Generation JavaScript Registry

Leo Kettmeir

JS Nation explores the power of the web, including virtual and augmented reality experiences. WebXR and A-Frame enable creating native-like experiences using web technologies. Tooling and resources are available to develop and experiment with WebXR. The possibilities for web development and creative projects are endless. Improving AR devices, enhancing PDF viewers, and utilizing AI assistants are areas of interest. JavaScript abstraction and positive audience feedback were highlighted.

Dive into the exciting world of WebXR in my talk about bringing Virtual Reality (VR) and Augmented Reality (AR) directly to web browsers. As a developer, I've seen how technology can spark creativity.  In this session, I'll introduce the A-Frame framework, showing how easy it is to create amazing and interactive experiences on the web.  This isn't just a tutorial; it's an invitation for you to break away from the ordinary and explore the endless possibilities of making engaging web applications.

WebXR? Virtual Reality and Augmented Reality Natively on Browsers

Erick Wendel

This Talk discusses the importance of performance work and how to drive performance governance. It emphasizes the need to frame data, set meaningful budgets, and understand both engineering and product perspectives. The Talk also highlights the significance of delivering value, establishing solid performance governance, and gaining buy-in from management. Additionally, it emphasizes the importance of measuring performance, optimizing through data, and collecting performance data using tools like Speedcurve and Bugbear Sentry. The speaker also mentions their training program and expresses gratitude towards the audience.

Between core-web vitals and profiling tools there's always one big obstacle, company buy-in. There are many ways your performance work might not be seen or prioritised. So let's talk about them.

Why Your Performance Work Is Not Seen

Vinicius Dallacqua

JSNation 2023

Source maps allow understanding of transpiled, bundled, or minified code. Debugging with post hoc and debug identifiers helps identify files. Issues with source maps include hash collisions and missing function names. Various techniques can be used to determine the function that caused an error. Source maps can store additional information and improvements can be made to path resolution and column positions. Code points and token positions can differ across browsers. Detecting source maps can be challenging without a standardized JSON schema.

The current revision of the JavaScript Source Maps specification is over 12 years old. Throughout this time, the entire ecosystem has evolved immensely, but for some reason, we have done nothing to improve the debugging experience and are still stuck at version 3 of the specification. Can we do better?

JavaScript Source Maps, Can We Do Better?

Kamil Ogórek

[♪ music ♪ by The Illuminati plays)] I see a common thread across any project I work on. Different developers are making the same mistake and we have preferred ways of doing things. Preventing mistakes and sharing best practices are great reasons to look at tools like linters and in particular ESLint. Let's write our first rule together. We're just scratching the surface of building our own tools, which can have a massive impact on improving the developer experience.

Your first JavaScript tool might not be the next Babel or ESLint, but it can be built on them! Let's demystify the secret art of JavaScript tools, how they work, and how to build our own. We'll discover the opportunities in our everyday work to apply these techniques, writing our own ESLint rules to prevent mistakes and code transforms to make breaking changes easy to apply. We’ll walk through the fundamentals of working with an abstract syntax tree, and develop our understanding through a live-code. You will be amazed at what you can build, and together we’ll explore how to get started.

Start Building Your Own JavaScript Tools

Static analysis in JavaScript involves analyzing source code without executing it, producing metrics, problems, or warnings. Data flow analysis aims to determine the values of data in a program. Rule implementation in JavaScript can be straightforward or require extensive consideration of various cases and parameters. JavaScript's dynamic nature and uncertainty make static analysis challenging, but it can greatly improve code quality.

We are all using static analysis tools like ESLint every day to ensure the better quality of our code. How does it work, and what is tricky about JavaScript, making writing a proper rule often not trivial?

Static Analysis in JavaScript: What’s Easy and What’s Hard

Elena Vilchik

This Talk discusses browser automation techniques, including the introduction of a new web driver. It covers the history of browser automation, different techniques for automating browsers, and the use of web APIs and browser extensions. The Talk also explains how automation tools communicate with browser drivers and the challenges of waiting for elements to appear on the screen. It highlights the differences between the WebDriver protocol and the Chrome DevTools protocol, and introduces the WebDriver Bidirection project that aims to combine the best parts of both protocols. Lastly, it mentions the WebDriver Bidi support for console monitoring and introduces WebDriver ByteEye as a stable automation choice.

A journey through overwhelming ways to automate browsers. Join Michael on a journey to see what happens behind the scenes of "await page.goto('https://example.com');" et. al. See what pros and cons each of the three ways of browser automation have. Understand why we are adding a fourth - WebDriver BiDi.

Three Ways to Automate Your Browser, and Why We Are Adding a Fourth: WebDriver BiDi

Michael Hablich

React Summit

React Summit 2023

GitHub Copilot is an auto-completion tool that provides suggestions based on context. Research has shown that developers using Copilot feel less frustrated, spend less time searching externally, and experience less mental effort on repetitive tasks. Copilot can generate code for various tasks, including adding modals, testing, and refactoring. It is a useful tool for improving productivity and saving time, especially for junior developers and those working in unfamiliar domains. Security concerns have been addressed with optional data sharing and different versions for individuals and businesses.

GitHub Copilot is an AI pair programmer that can help you write code faster and spend less time writing repetitive code.This session will cover some interesting use cases for Copilot that could shine a light on its possibilities. This ranges from prompting Copilot to suggest a function based on a comment, learning how to use a new framework, tackling a security or accessibility bug, better documenting your code, translating  code from one language to another, etc.Agenda: Introduction to CoPilot - What is Copilot - How can you use it - How it can help you write code faster - Copilot Labs experimental features I will pick examples from the React ecosystem and show how we can fix Security Vulnerabilities and Accessibility issues in some components.

Improving Developer Happiness with AI

Senna Parsa

Rome is a toolchain built in Rust that aims to replace multiple tools and provide high-quality diagnostics for code maintenance. It simplifies tool interactions by performing all operations once, generating a shared structure for all tools. Rome offers a customizable format experience with a stable formatter and a linter with over 150 rules. It integrates with VCS and VLSP, supports error-resilient parsing, and has exciting plans for the future, including the ability to create JavaScript plugins. Rome aims to be a top-notch toolchain and welcomes community input to improve its work.

Modern JavaScript projects come in many shapes: websites, web applications, desktop apps, mobile apps, and more. For most of them, the common denominator is the technical debt that comes from settings up tools: bundlers, testing suite, code analysis, documentation, etc. I want to present you Rome, a toolchain that aims to be a all-in-one toolchain for the web, with one single tool you can maintain the health of all your projects!

Rome, a Modern Toolchain!

This workshop introduces Replay, a tool for solving bugs faster by providing context through session replays. It demonstrates the importance of context in bug solving and showcases the features of session replay, such as viewing HTML, console logs, network requests, and linking backend errors. The workshop also covers the use of virtual DOM and mutation observer for efficient page changes. Privacy concerns are addressed by replacing sensitive information in replays, and the power of session replay in identifying and understanding the sequence of errors is highlighted.

You know that annoying bug? The one that doesn’t show up locally? And no matter how many times you try to recreate the environment you can’t reproduce it? You’ve gone through the breadcrumbs, read through the stack trace, and are now playing detective to piece together support tickets to make sure it’s real. Join Sentry developer Ryan Albrecht in this talk to learn how developers can use Session Replay - a tool that provides video-like reproductions of user interactions - to identify, reproduce, and resolve errors and performance issues faster (without rolling your head on your keyboard).

Solve 100% Of Your Errors: How to Root Cause Issues Faster With Session Replay

Ryan Albrecht

React Day Berlin

React Day Berlin 2022

This Talk discusses automating code changes for Android repositories, utilizing tools like JSCodeShift and Abstract Syntax Tree. The speaker shares a real use case example of maintaining a design system library and making changes to a component. The talk emphasizes the importance of automating repetitive tasks and using the power of abstract syntax tree for code changes. The Q&A session covers topics like source code formatting, TypeScript support, and cultural embedding of code mods. The talk concludes with insights on when automation is worth it and the limitations of code mods for monorepo changes.

How I Automated Code Changes for 100 Repositories: Getting Started With Codemods

Konstantin Klimashevich

DevOps.js

DevOps.js Conf 2022

Sentry is an error monitoring platform that helps developers optimize the customer experience by alerting them of errors and slowdowns. It supports all major languages and frameworks, with a focus on error monitoring, performance monitoring, and release health. The Talk explores how Sentry organizes and represents error data, analyzes error details and tags, and investigates backend issues, performance problems, and release health. Collaboration with backend teams is emphasized to resolve issues and optimize transaction time. The Talk also highlights the importance of analyzing graphs, issues, and regressions to identify areas for improvement in release health.

Learn about tools to trace frontend to backend data and increase visibility on errors and performance. We'll go through how to know which teams are responsible for which error, what the impact is, and all the context needed to solve it. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Monitoring Errors and Slowdowns Across JS Applications

Simon Zhong

GraphQL Galaxy

GraphQL Galaxy 2021

This talk discusses the life of a GraphQL developer at Yelp, covering tooling, processes, and the scale of GraphQL usage. It emphasizes the importance of making good schema choices and using GraphQL Faker for quick iteration. The talk also highlights the challenges of using data loaders at Yelp and the solutions implemented, such as code generation and precommits. It mentions the significance of schema review, documentation, and GraphQL adoption. Lastly, it mentions the value of obsessive documentation and the use of vPress for generating markdown and an in-house UI for query reference.

In this talk, we'll cover the libraries, tooling and processes we use to roll out GraphQL to hundreds of developers at Yelp. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Tooling and Processes for Managing GraphQL at Scale

Mark Larah

React Advanced 2021

Babel macros allow for code transformation without multiple plugins, providing a solution to the downsides of regular Babel plugins. Understanding AST is crucial for developers working with transpilers, and exploring its structure and representations can help derive code. Babel started as a transpiler but has evolved into a tool for live code transformation. Babel macros are supported in various React-based frameworks and can be used for track translation and CSS to React Native macros. However, macros have limitations, such as being synchronous and evaluated at compile time.

The talk will cover all the possibilities Babel Macro opens up and also gives an overview of Abstract Syntax Tree. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Magic with Babel Macro

Dhrubesh Deb Sharma

JSNation Live

JSNation Live 2020

Today's Talk covers the evolution and future of Javascript tooling, including dependency management, transpiling, bundling, minifying, and module management. Webpack has grown in popularity and offers features like hot module replacement and code splitting. Other build tools like Rollup, Parcel, Snowpack, and ESBuild are also discussed. The Talk explores browser import and bundling-free approaches, and emphasizes the dynamic nature of the JavaScript ecosystem with evolving tools and project-specific trade-offs.

In this talk, I'd go through the Evolution of JavaScript Tooling and frontend build tools, Javascript itself and the future of them all. Also, Babel and other build tools, what they might most likely be in the future. Also, I'd talk about javascript itself as a language, it's present and it's future. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#tooling