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

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

Will Klein

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

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