React Day Berlin

React Day Berlin 2023

The talk discusses rethinking bundling strategies, focusing on challenges such as long-term caching and improving the state of Next.js and Webpack. It explores handling immutable caching and content hashes, optimizing asset references and page manifests, and addressing issues with client-side navigation and long-term caching. The talk also covers tree shaking and optimization, optimizing module fragments and code placement, and the usage and relationship of TurboPack with Webpack. Additionally, it touches on customizing configuration and hash risks, barrel imports and code splitting, and entry points and chunking heuristics.

<div>We take a look at different challenges and decisions when bundling code for web applications. We look at how these are commonly solved and why we need to rethink them.</div>

Rethinking Bundling Strategies

Tobias Koppers

React Advanced

React Advanced 2024

Welcome to React Advanced London. Today's agenda: what is bun? Features, benchmark, demo, key takeaways. Bun provides a better developer experience, faster CI, and decreased app file size. Building bun on top of Zig prioritizes performance, stability, and compatibility. Install bun with npm or download the binary from the official website. Bun is a comprehensive development toolkit with a fast and efficient package manager. Learn how to benchmark CLI commands using Hyperfine with flags. Compare different package managers. Bond is fast and provides a few features in its package manager: install, add, remove, update, link. Test the bond test runner against vtest and jest using hyperfine. Discover the features supported by the test runner and the importance of bundling in JavaScript applications. Learn about the main.js code, the performance comparison of different bundlers, and the features offered by Bun, including loaders and macros. Explore macros in Bonn and how to optimize the code by including the type macro. Discover the benefits of Bonn, such as reducing CPU usage and fast installation of node dependencies.

The JavaScript ecosystem has evolved significantly, with Bun.js marking a notable milestone. Built from the ground up in Zig, Bun.js is an all-in-one JavaScript runtime featuring an integrated package manager, bundler, test runner, and Nodejs-compatible environment designed for the growing demands of edge computing and server-side applications. My presentation will explore Bun.js's foundational principles, highlighting its performance benchmarks against traditional runtimes like Node.js, seamless TypeScript support, zero-configuration framework, and innovative features such as built-in hot reloading and efficient file operations.

Is Bun 'Actually' Faster?

Devlin Duldulao

Node Congress

Node Congress 2024

The Talk discusses the development of the Jam browser extension, which is a bug reporting tool. It explores the challenges of messaging between different execution environments within a browser and the need for message chunking to overcome size constraints. The Talk also explains how the development team rebuilt the system using a TCP/IP network stack approach, which allowed them to solve messaging difficulties similar to networking problems. The benefits of this approach include a smoother rollout, simpler debugging, and a focus on feature development without worrying about messaging constraints.

Engineering problems often repeat themselves in places you wouldn't expect. Sometimes the best solution has already been invented, in a different corner of the software engineering domain. In this talk, we show how and why we mirrored the TCP/IP network stack to solve a communication problem between different components of a browser extension.

Building a Network Stack for our Browser Extension

Cyrus Roshan

Today's Talk discusses different approaches for implementing real-time updates in server-side applications, including application-level updates and polling. The drawbacks of polling include inefficiency and complexity at scale. Adding extra infrastructure, like messaging systems, can ensure scalability but introduces operational overhead. Prisma Pulse is a system that simplifies change data capture, providing an easy setup for subscribing to database changes and solving scalability issues.

Are you building a chat app, a way to see users’ online status or a real-time collaboration dashboard? All of these use cases have one thing in common: Somehow the user-facing application needs to be informed in real-time about events that happen on the backend of your application.In this talk, we’ll look closely at common approaches like polling, application-level updates and pub-sub systems. We’ll explain the tradeoffs with each approach and elaborate why another approach, called Change Data Capture (CDC), is the most elegant and robust way to achieve this.

How not(!) to Build Real-time Apps

Nikolas Burk

TS Congress

TypeScript Congress 2023

Tibor Blanesy from Sonar presents advanced techniques for linting with ESLint, including the use of ControlFlowGraph to detect errors in code. The algorithm is based on liveness analysis, which identifies live variables at any point in the program. Additionally, the talk covers the computation of block sets using the difference between outset and kill set unionized with genset.

This talk will explore more advanced ways to write static analysis rules in ESLint using ESLint's control flow APIs. I will quickly explain what a control flow graph is and how you can use it to find issues in your code. I will show you how to detect when a value is assigned to variable uselessly and other logical problems you can detect using this technique.

Advanced linting rules with ESLint 

Tibor Blenessy

JS Nation

JSNation 2023

[♪ 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

React Advanced 2022

This Talk introduces Figma's Widget Code Generator and demonstrates how to build a FigJam widget using it. The speaker discusses the implementation of voting functionality, avatar functionality, and remove vote functionality. They also explain how the Widget Code Generator plugin works and how to access properties and modify names using the Figma plugin API.

Widgets are custom, interactive objects you place in a Figma or Figjam file to extend functionality and make everything a bit more fun. They are written in a declarative style similar to React components, which gets translated to become a node on the canvas. So can you go the other way, from canvas to code? Yes! We’ll discuss how we used the public Figma plugin API to generate widget code from a design file, and make a working widget together using this.

Building Figma’s Widget Code Generator

Jenny Lea

JSNation Live

JSNation Live 2021

Today's Workshop covered the challenges of building internal tools and introduced Retool, a tool that helps engineers create valuable software quickly. Retool eliminates the need for boilerplate code and allows for practical and functional designs. It offers a drag-and-drop interface, pre-built API and database connectors, and the ability to write JavaScript or SQL. The Workshop also covered topics such as building apps, customizing components, uploading CSV files, editing and updating records, adding delete functionality, connecting to APIs, building interfaces, and setting permissions and customization options.

Most businesses have to build custom software and bespoke interfaces to their data in order to power internal processes like user trial extensions, refunds, inventory management, user administration, etc. These applications have unique requirements and often, solving the problem quickly is more important than appearance. Retool makes it easy for js developers to rapidly build React-like apps for internal tools using prebuilt API and database interfaces as well as reusable UI components. In this workshop, we’ll walk through how some of the fastest growing businesses are doing internal tooling and build out some simple apps to explain how Retool works off of your existing JavaScript and ReactJS knowledge to enable rapid tool building. Prerequisites:A free Retool.com trial accountSome minimal JavaScript and SQL/NoSQL database experience Retool useful link: https://docs.retool.com/docs <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#tool building