React Summit

React Summit 2024

The Workshop introduced various aspects of prompt engineering, including Retrieval Augmented Generation (RAG) which allows for shorter context length. It covered topics such as coding with LLM, connecting to LLM models, getting structured output, defining output format, and using prompt templates with dynamic variables. The Workshop also delved into loading and manipulating documents, creating embeddings, and searching in VectorDB. The final sections explored using LLM with retriever and retrieving answers from the vector database. The Workshop provided valuable insights and resources for further learning in the field of software development and engineering.

Dive into the world of AI with our interactive workshop designed specifically for web developers. "Hands-On AI: Integrating LangChain with JavaScript for Web Developers" offers a unique opportunity to bridge the gap between AI and web development. Despite the prominence of Python in AI development, the vast potential of JavaScript remains largely untapped. This workshop aims to change that.Throughout this hands-on session, participants will learn how to leverage LangChain—a tool designed to make large language models more accessible and useful—to build dynamic AI agents directly within JavaScript environments. This approach opens up new possibilities for enhancing web applications with intelligent features, from automated customer support to content generation and beyond.We'll start with the basics of LangChain and AI models, ensuring a solid foundation even for those new to AI. From there, we'll dive into practical exercises that demonstrate how to integrate these technologies into real-world JavaScript projects. Participants will work through examples, facing and overcoming the challenges of making AI work seamlessly on the web.This workshop is more than just a learning experience; it's a chance to be at the forefront of an emerging field. By the end, attendees will not only have gained valuable skills but also created AI-enhanced features they can take back to their projects or workplaces.Whether you're a seasoned web developer curious about AI or looking to expand your skillset into new and exciting areas, "Hands-On AI: Integrating LangChain with JavaScript for Web Developers" is your gateway to the future of web development. Join us to unlock the potential of AI in your web projects, making them smarter, more interactive, and more engaging for users.

Integrating LangChain with JavaScript for Web Developers

Vivek Nayyar

React Summit US

React Summit US 2023

The Workshop covers advanced concepts in TypeScript, such as strict types and type guards. It explores the use of development tools and the advantages of using TypeScript in software development. The Workshop also delves into mapping union types and object types, as well as keywords and conditional types. Bug fixes and type validation are discussed, along with recursive parsing and entity validation. The Workshop concludes with a final bug fix and key takeaways for using TypeScript effectively.

TypeScript is not just types and interfaces. Join this workshop to master more advanced features of TypeScript that will make your code bullet-proof. We will cover conditional types and infer notation, template strings and how to map over union types and object/array properties. Each topic will be demonstrated on a sample application that was written with basic types or no types at all and we will together improve the code so you get more familiar with each feature and can bring this new knowledge directly into your projects. You will learn:- - What are conditional types and infer notation- What are template strings- How to map over union types and object/array properties.

Mastering advanced concepts in TypeScript

Jiri Lojda

JS Nation

JSNation 2023

This Talk discusses modern web debugging and the latest updates in Chrome DevTools. It highlights new features that help pinpoint issues quicker, improved file visibility and source mapping, and ignoring and configuring files. The Breakpoints panel in DevTools has been redesigned for easier access and management. The Talk also covers the challenges of debugging with source maps and the efforts to standardize the source map format. Lastly, it provides tips for improving productivity with DevTools and emphasizes the importance of reporting bugs and using source maps for debugging production code.

Few developers enjoy debugging, and debugging can be complex for modern web apps because of the multiple frameworks, languages, and libraries used. But, developer tools have come a long way in making the process easier. In this talk, Jecelyn will dig into the modern state of debugging, improvements in DevTools, and how you can use them to reliably debug your apps.

Modern Web Debugging

Jecelyn Yeen

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

DevOps.js

DevOps.js Conf 2022

pnpm is a fast and efficient package manager that gained popularity in 2021 and is used by big tech companies like Microsoft and TikTok. It has a unique isolated node module structure that prevents package conflicts and ensures each project only has access to its own dependencies. pnpm also offers superior monorepo support with its node module structure. It solves the disk space usage issue by using a content addressable storage, reducing disk space consumption. pnpm is incredibly fast due to its installation process and deterministic node module structure. It also allows file linking using hardlinks instead of symlinks.

You will learn about one of the most popular package managers for JavaScript and its advantages over npm and Yarn.<ul><li>A brief history of JavaScript package managers</li><li>The isolated node_modules structure created pnpm</li><li>What makes pnpm so fast</li><li>What makes pnpm disk space efficient</li><li>Monorepo support</li><li>Managing Node.js versions with pnpm</li></ul> <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

pnpm – a Fast, Disk Space Efficient Package Manager for JavaScript

Zoltan Kochan

React Advanced

React Advanced 2021

Today's workshop focuses on test-driven development in React, covering topics such as running, building, and testing React apps, using Prettier for code formatting, refactoring and creating subcomponents, implementing state and event handling in components, and project management and IDE integration. The workshop emphasizes the benefits of test-driven development, the use of IDEs, and the integration with tools like Jest and React Testing Library. TypeScript is also highlighted as a valuable tool for type checking and improving code quality. Overall, the workshop provides a comprehensive guide to developing React components test-first and following best practices in software development.

ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported. The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials. React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React, TypeScript, and TDD

Paul Everitt

React Advanced 2024

A software engineer from AGGrid discusses profiling and optimization in React DevTools and Chrome DevTools. The React DevTools allow for analyzing and optimizing renders, and can help improve Core Web Vitals. Chrome DevTools provide in-depth performance analysis and optimization options. The engineer shares specific strategies for optimizing rendering, animation, and layout thrashing. They also discuss performance profiling and benchmark testing, as well as testing tools and the performance testing process. The speaker emphasizes the importance of exploring resources and metrics in Chrome DevTools.

One skill that will always be relevant is profiling. No matter the framework, no matter the version, at some point you will have to dive into why your application is not performing at its best. In this talk, we will show how you can use React Dev Tools alongside the standard Dev Tools to identify and resolve performance and memory issues. There are some hidden gems within Dev Tools profiling panel that goes beyond just measuring how much time is spent executing a function and we will discover them together including new features released this year.

Perfecting Your Profiling

Stephen Cooper

Vue.js Live Conference

Vue.js Live 2024

Welcome to the Trust.js workshop where we'll cover the fundamentals of the library, creating 3D scenes, using components and composables, and adding interactivity. We'll explore topics such as camera manipulation, object creation and modification, working with materials and lighting, and animating objects. Additionally, we'll learn how to import 3D models and programmatically create instances. The workshop provides practical exercises to follow along with and resources for further learning.

Introducing "Mastering 3D Web Development with TresJS," a specialized workshop crafted for Vue.js developers eager to explore the realm of 3D graphics within their web applications. TresJS, a powerful custom renderer for Vue, is specifically designed to work seamlessly with Vue's reactive system. This workshop offers a deep dive into integrating sophisticated 3D visualizations and interactive experiences directly into Vue applications, leveraging the unique strengths of both Vue and TresJS ecosystems. <span style="color:rgb(13, 13, 13);font-family:Söhne, ui-sans-serif, system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, Ubuntu, Cantarell, &quot;Noto Sans&quot;, sans-serif, &quot;Helvetica Neue&quot;, Arial, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;;font-size:16px;font-style:normal;font-variant-ligatures:normal;font-variant-caps:normal;font-weight:400;letter-spacing:normal;orphans:2;text-align:start;text-indent:0px;text-transform:none;widows:2;word-spacing:0px;-webkit-text-stroke-width:0px;white-space:normal;background-color:rgb(255, 255, 255);text-decoration-thickness:initial;text-decoration-style:initial;text-decoration-color:initial;display:inline !important;float:none">This workshop is designed for Vue.js developers looking to expand their skill set into the third dimension, UI/UX designers interested in incorporating 3D elements into web applications, and front-end developers curious about the potential of 3D graphics in enhancing user experiences. You'll need to be familiar with Vue.js to benefit from this workshop fully. What You Will Learn- Introduction to TresJS: Discover the fundamentals of TresJS and how it integrates with the Vue ecosystem to bring 3D graphics to life.- Creating 3D Scenes with Vue: Learn to construct intricate 3D scenes utilizing Vue components, enhancing your user interfaces with dynamic and immersive visuals.- Interactivity and Animation: Master the techniques to make your 3D scenes interactive, responding to user inputs for a captivating user experience.- Integrating with Vue Features: Explore advanced integration of TresJS with Vue’s reactivity, composables, and the Vuex store to manage state in 3D web applications.- Performance and Best Practices: Gain insights into optimizing your 3D scenes for performance and best practices to maintain smooth, responsive web applications.

Mastering 3D Web Development with TresJS ecosystem: A Vue.js Workshop

Alvaro Saburido

Reactive and ref are both reactive in Vue, allowing objects to be reactive and removing the need for writing 'value'. Store to refs is a specific version of refs in Vue. The exercises are located in the 'exercises' folder and include automated tests. Implementing FX scope in Vue allows for refactoring and better code organization. Weak maps are used for resource disposal and dependency injection is useful for resolving prop drilling issues.

Let's dive into how Pinia works under the hood by building our own `defineStore()`. During this workshop we will cover some advanced Vue concepts like dependency Injection and effect scopes. It will give you a better understanding of Vue.js Composition API and Pinia. Requirements: experience building applications with Vue and its Composition API.

Building Pinia From Scratch

Eduardo San Martin Morote

DevOps.js Conf 2024

JavaScript code is converted to low-level binaries by JavaScript engines like MV8, Chakra, and SpiderMonkey. WebAssembly allows writing code in other languages and compiling it to run on a JavaScript engine. External functions can be imported in WebAssembly using the import statement. WebAssembly can run in non-browser scenarios with additional interfaces like WASI and provides memory isolation. The Jco toolchain is an experimental tool for componentizing JavaScript code into WASM modules.

JavaScript is no longer a language confined to the browsers. New standards are enabling fully portable, lightweight runtimes, to make JavaScript the definitive language for isomorphic applications. Let's explore use-cases, some experimental, some consolidated, to take our Wasm game with JavaScript, to the next level.

JavaScript to Wasi Enabled Wasm: Portable JavaScript Composition

Natalia Venditto

React Day Berlin

React Day Berlin 2023

Durable Objects is a versatile programming paradigm by Cloudflare that allows for stateful and uniquely addressable server environments. It simplifies feature development, enables real-time updates through WebSocket connections, and provides a built-in key-value store for long-term storage. It can be used to create collaborative applications, manage data storage efficiently, and explore co-located compute and data at the edge. Other companies like Azure also offer similar technologies. Deno's KV and fly.io's Flame are innovative products that eliminate the need for provisioning databases and Kubernetes clusters.

Cloudflare's Durable Objects are a new JavaScript runtime that makes building stateful, on-demand backend servers on the edge as easy and cheap as serverless functions. By colocating compute and state, Durable Objects melt complexity at scale, and allow you to focus on building your product.In this fast-paced talk we'll live code a real-time backend from scratch, show how Durable Objects work, and explore how you can apply this versatile tool to a wide range of everyday engineering problems.

Durable Objects - Everything Everywhere All At Once For Not Very Much Money

Jani Eväkallio

Race conditions can be complex to debug and reproduce, causing frustration for users. The speaker discusses examples of race conditions and ways to fix and avoid them. They demonstrate an example of an auto-completion field in React and how to handle race conditions in API calls. The speaker introduces the FastCheck framework for property-based testing to address race conditions and improve tests. Randomizing inputs and outputs can help uncover bugs specific to certain scenarios. The speaker also discusses mitigating race conditions in React and handling test overhead and reproducibility.

Race conditions are among some of the most challenging to detect and reproduce issues. As such they pose a significant challenge in development notably in UI. In this talk, we explore how to detect race conditions by leveraging fuzzing techniques. We walk you through discovering the real problem of race conditions and how they impact user experience. We provide you tools and examples demonstrating how to easily detect them in your daily work thanks to tests relying on fuzzing. After that talk, we hope your React code will be race conditions free or at least that you will have the right tools to help you.

Break the Race: Easy Race Condition Detection for React

Nicolas Dubien

ASTs, or abstract syntax trees, are used by popular tools like Babel, TypeScript, ESlint, and Prettier to improve the developer experience. They have various use cases including compiling and code analysis. Editor tooling and writing tools can be enhanced using ASTs, with examples including formatting with Prettier, type annotations in JetBrains editors, and code mods for framework upgrades. Ts-morph is a useful tool for code transformations, while Tree Sitter is a portable tool that supports many languages and can be used to build IDEs or text editors in the browser.

ASTs are prevalent in everything we do. ESLint, Typescript, etc allow us to dive into our source code in a way we might not be familiar with. Let's take a look at how some modern tools use ASTs to improve our lives as developers. Some of the tools to be covered include: TS-Morph, Typescript, TreeSitter, and ESlint. Depending on time, I can dig into various tools and patterns for working with ASTs and how they can fit into any modern developer workflow.

Trees aren't just Foliage: ASTs and Practical Usage

Chris Griffing

The workshop focuses on building a basic Todo application and transforming it into a fully functioning SaaS product using modern developer tools. Dev tools like Next.js, Vercel, Clerc, PlanetScale, and Stripe are used to simplify the development process. The workshop covers topics such as fixing issues, adding interactivity and database integration, implementing authentication and payment, customizing Clerk components, adding premium payment plans with Stripe integration, and implementing multi-tenancy features. Participants are encouraged to provide feedback and share their projects built with Clerk.

If you’re like me, you probably have a million side-project ideas, some that could even make you money as a micro SaaS, or could turn out to be the next billion dollar startup. But how do you know which ones? How do you go from an idea into a functioning product that can be put into the hands of paying customers without quitting your job and sinking all of your time and investment into it? How can your solo side-projects compete with applications built by enormous teams and large enterprise companies? Building rich SaaS products comes with technical challenges like infrastructure, scaling, availability, security, and complicated subsystems like auth and payments. This is why it’s often the already established tech giants who can reasonably build and operate products like that. However, a new generation of devtools are enabling us developers to easily build complete solutions that take advantage of the best cloud infrastructure available, and offer an experience that allows you to rapidly iterate on your ideas for a low cost of $0. They take all the technical challenges of building and operating software products away from you so that you only have to spend your time building the features that your users want, giving you a reasonable chance to compete against the market by staying incredibly agile and responsive to the needs of users. In this 3 hour workshop you will start with a simple task management application built with React and Next.js and turn it into a scalable and fully functioning SaaS product by integrating a scalable database (PlanetScale), multi-tenant authentication (Clerk), and subscription based payments (Stripe). You will also learn how the principles of agile software development and domain driven design can help you build products quickly and cost-efficiently, and compete with existing solutions.

From Todo App to B2B SaaS with Next.js and Clerk

Dev Agrawal

React Advanced 2023

Steven, a design tool nerd, worked on InVision Studio and now focuses on LiveBlocks, providing APIs and tools for multiplayer collaboration. Collaborative design tools like Figma, Canva, Mural, Notion, Mirror, Linear, and Pitch use conflict resolution algorithms such as OTs and CRDTs. Data migration and collaboration patterns are important considerations for building production applications. Figma stands out for its seamless assembly of collaboration features. LiveBlocks enables front-end developers to build collaborative experiences without complex backend infrastructure, using fractional indexing for consistent ordering.

Practical talk showing how to go from a local state to an on-the-edge offline capable persisted state to make an app like Figma, Notion, and more.

Real-Time Collaborative State on the Edge

Steven Fabre

Today's Talk focused on building better React dev tools with replay time travel analysis. The React DevTools provide valuable insights into React apps, using a fiber data structure to represent component instances. Replay is a time-traveling debugger for React, with plans to make Chrome their primary recording browser. They extract React information from recordings using their time travel API and have built a UI for debugging and inspecting the content. The long-term goal is to have Replay work offline and in permanent record mode.

React's component model and one-way data flow give us a great mental model for building our apps, but debugging React apps can still be confusing. React's internals are a black box, and it's often hard to understand why components rendered or what caused errors. The Replay time-travel debugger makes it easier to debug React apps by letting you inspect what's happening at any point in time. But what if we could go beyond the usual debugger features, and build new debugging features that tell us more about what React is doing? Let's see how Replay's API makes that possible.

Building Better React Debugging with Replay Analysis

Mark Erikson

The speaker discusses the challenges of server state and test maintenance, and how they found solutions using React Query and Mock Service Worker. They emphasize the benefits of defining contracts for faster development and stress reduction. The speaker also highlights the advantages of using Mock Service Worker over mock servers and explains how it allows for easy customization and test overrides. They mention the upcoming release of V2 of MS-Double and encourage the audience to stay updated.

How many times have you had to wait for your backend team to finish building the API so you can start your tasks? What if all you needed to move that task to in progress was the API contract? What if there was a library that did this for REST and GraphQL APIs and, at the same time, taking your tests to the next level? Join me and prepare to enhance your developer experience while learning all the battle-earned experiences of using one of my favorite libraries: Mock Service Worker.

All You Need Is a Contract…

Daniel Afonso

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

Today's Talk explores the world of TypeScript ecosystem tooling, discussing essential tools for project setup, including package managers and project scaffolding. It also covers code analysis, testing, and deployment in TypeScript, as well as best practices for maintaining high-quality code. The Talk emphasizes the importance of intelligent code editors, code formatters, and linters in ensuring code quality. It also highlights the significance of codebase maintainability and following TypeScript best practices for efficient and scalable code.

Dive into the world of TypeScript ecosystem tooling and uncover the transformative capabilities that can supercharge your development workflow. In this talk, you can discover essential tools for project setup, code analysis, testing, and deployment. Also, learn how intelligent code editors, formatters, and linters improve code quality. Finally, let's explore type checkers, static analyzers, and refactoring tools that enhance codebase maintainability, TypeScript libraries and frameworks, and witness their seamless integration with bundlers, task runners, testing frameworks, and CI pipelines. Don't miss this talk to unleash the full potential of TypeScript and maximize your productivity with the extensive ecosystem of tools at your disposal and that you probably didn't know!

Unlocking TypeScript's Potential: Exploring the Power of Ecosystem Tooling

Lizz Parody

Today's Talk explores TypeScript integration and refactoring, code action handling, the TypeScript server and refactoring process, bug reporting, and the TypeScript protocol and LSP. The Talk discusses how TypeScript is integrated into editors, the role of code action providers, and the communication between the client and server. It also highlights the two-stage process of code actions and the importance of bug reporting. Additionally, it mentions the TypeScript protocol and how it allows for language-specific extensions. LSP is mentioned as a powerful extensibility solution used by various languages.

How can an editor ""automagically"" show type errors when you create a single TypeScript file without running ""npm install typescript"" or having a tsconfig.json file? Is a completion list build by your coding editor, TypeScript itself, or some other mysterious being? What is TSServer? In this talk I will give you an overview of how the TypeScript server communicates with IDEs and other editors, delivering rich language features without ever running tsc.

How TypeScript is integrated in your editor

Maria Solano

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

Node Congress

Node Congress 2023

JavaScript became popular in the mid-2010s with the introduction of Node and advanced frameworks like Angular and React. Monorepos, which are single repositories containing multiple artifacts, are a popular approach for managing JavaScript projects. Linking packages internally in a monorepo can be done through local or global installation, or by publishing them to an artifact registry. Managing monorepos has become more complex with the introduction of tools like TypeScript and Babel. The development process for web applications involves a build process, testing, and linting, which can be facilitated by tools like Yarn Workspace and NPM Workspace. The release strategy for monorepos can be either unified or distributed, and it is important to select tools that align with the chosen strategy.

Not all monorepos are made the same, and not all teams are equal. Managing a monorepo is way more than just ""let's select this tool or that tool"". It comprises many design decisions that you need to make for the product and for the developers.  In this talk, I will go over the main monorepos challenges - packages installation and linking, development and deployment processes - and describe the possibilities that exist for each stage.  At the end of the talk, you will have a simple and powerful model that will help you in making the right choice of tools and processes for your monorepo.

Tale of Two Repos 

Tally Barak

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

We can improve developer efficiency by helping people understand code more effectively through open source software, iterative development, cloud infrastructure, continuous integration, and service-based architecture. The software development lifecycle consists of an outer loop focused on team efforts and an inner loop for individual developers. A universal search platform helps developers understand and search code, reducing the time spent on code comprehension. Code navigation and automation tools like Sourcegraph enable developers to navigate code, adhere to best practices, and automate changes across multiple repositories.

The transition from a monolithic architecture to a service based approach began a number of years ago. The advantage of a service based approach is to increase agility and shorten the build and release development cycle. And more recently the rise of micro frontends means that this approach not only encompasses backend application but also frontend development. However one side effect is increased complexity of the codebase. Resulting in challenges in terms of visibility into how components relate, who owns a component and the impact of activities on dependent components. This session will touch on these challenges and what is needed to maintain individual developer velocity.

Understand Your Codebase to Innovate Faster

Simon Waterer

React Summit 2022

Francois, a developer happiness engineer, discusses the challenges of slow builds and their impact on productivity. He explores the implementation of showing unavailable menu items in a food delivery app and demonstrates the use of Storybook for component design. Francois introduces Preview.js, a tool for previewing React, Vue, and Solid components, and explains how it simplifies the development process. He also highlights the benefits of using PrivyJS with Storybook and VIT for faster and more efficient development.

A look into Preview.js, an open-source extension for Visual Studio Code, IntelliJ and WebStorm that lets you preview individual React components instantly, updated as you type.

Improving Developer Happiness with Preview.js

François Wouts

This Talk discusses mobile app performance and provides tips for performance analysis. It includes a performance test on the TF1 news app and demonstrates how to analyze JS performance with React DevTools. The Talk also explores optimizing rendering in React components, such as FlatList and nested lists with carousels. It concludes with strategies for optimizing the virtualized list and carousel to achieve better performance.

The web has several tools to measure performance, but what about us, React Native devs? Have you ever added some optimization in your code (like a memo here and there) and wondered if it had a real impact on performance?Presenting a Flipper plugin to measure React Native performance, with a concrete case of how we used it to bring our app performance to the top quality.Bonus: a deep dive into React DevTools flame charts!

Measuring and Improving React Native Performance

Alexandre Moureaux

This talk covers the latest features in Chrome DevTools, including network tab analysis, performance tab optimization, and user flows. It discusses optimizing HTTP requests with fetch priority to improve loading time. The performance tab provides insights on frame drops, long tasks, and the importance of minimizing total blocking time. The talk also highlights the optimization of page rendering and introduces user flows in Chrome DevTools.

Knowing how to run performance tests on your web application properly is one thing, and putting those metrics to good use is another. And both these aspects are crucial to the overall success of your performance optimization efforts. However, it can be quite an endeavor at times for it means you need to have a precise understanding of all the ins and outs of both performance data and performance tooling. This talk will shed light on how to overcome this challenge and walk you through the pitfalls and tricks of the trade of Chrome DevTools, providing you with a complete roadmap for performance analysis and optimization.

High-Speed Web Applications: Beyond the Basics

Michael Hladky

GitHub Copilot is a software development productivity tool that suggests whole blocks of code based on the collective knowledge of software developers. It has been in technical preview for a year and is used by thousands of developers. Copilot's success has grown over time, and it now supports multiple editors and programming languages. The AI model used in Copilot, called Codex, operates on natural language and doesn't require special encoding. Copilot will become a paid product in the summer but will remain free for students and verified open source contributors.

GitHub Copilot is an AI pair programmer tool that puts the collective knowledge of millions of developers right at your fingertips, directly in your IDE.During the talk, Krzysztof, a core team member behind GitHub Copilot, will demo how Copilot works and discuss the design principles used while creating the project.He will also dive into some of the project's technical details - how Copilot communicates with its AI, what ""queries"" it uses, how it processes responses, and how it integrates with various IDE to create characteristic Copilot's UX.

Bringing the Power of AI into your Editor with GitHub Copilot

Krzysztof Cieślak

The Talk discusses optimizing rendering of big tables using Flipper, a new version that is ten times faster with improved user interaction and richer data. It explores optimizing rendering with React, virtualization, filtering, sorting, and windowing techniques. The introduction of the Flipper Datasource packet simplifies handling updates, inserts, and removals. The performance of the Flipper data source package is excellent, even in a debug build of React, with minimal CPU usage. The Q&A session covers incremental sorting, dynamic row height, and the potential for two-dimensional virtualization in the future.

There is generally a good understanding on how to render large (say, 100K items) datasets using virtual lists, …if they remain largely static. But what if new entries are being added or updated at a rate of hundreds per second? And what if the user should be able to filter and sort them freely? How can we stay responsive in such scenarios? In this talk we discuss how Flipper introduced map-reduce inspired FSRW transformations to handle such scenarios gracefully. By applying the techniques introduced in this talk Flipper frame rates increased at least 10-fold and we hope to open-source this approach soon. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Beyond Virtual Lists: How to Render 100K Items with 100s of Updates/sec in React

Michel Weststrate

Developers can use Sourcegraph to easily search for code using literal, regular expression, and structural patterns. Sourcegraph allows searching through open source and private code indexed across GitHub and GitLab, and supports searching for unstable batch API in React.js. It also enables searching with regular expressions, finding dependencies and usage patterns. With structural search, developers can search for specific blocks of code and narrow down their search using keywords. Sourcegraph is essential for developer velocity, helping teams quickly search through repositories, find references to shared systems, and providing powerful search parameters.

Google &amp; Facebook Engineers are able to search over their gargantuan codebase using an internal code search engine. The search engine accelerates the ability of their developers (both old &amp; new) to understand any part of their codebase &amp; start contributing immediately! What about the rest of us? In this talk, I'll walk through the different types of code search, tools &amp; software, and advanced tips &amp; tricks to navigate any type of codebase easily. With the advent of large code repositories and sophisticated search capabilities, code search is increasingly becoming a key software development activity. Every developer in the world that spends an insane amount of time reading rather than writing code should have access to the best code search tools that amplifies their productivity. The audience will walk away with everything they need to confidently onboard, navigate &amp; understand any small, medium-sized and daunting codebase. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Supercharging Developer Productivity With Advanced Code Search

Prosper Otemuyiwa

JSNation Live

JSNation Live 2020

Gleb Akhmetov explains how to visually test React components, emphasizing the importance of addressing climate change and collaboration. He discusses component testing, styling, and the challenges of CSS changes. Gleb highlights the use of image snapshots for visual testing and the importance of controlling data for accurate results. He also discusses using Docker for consistent visual testing and the support for multiple browsers. Cypress is focused on flake-free testing and has plans for test retries and new features in the roadmap.

Many modern web frameworks use components as their building blocks. In this talk, I will show component testing using Cypress - and I mean "show" literally. You will see the component running inside a real browser, you will interact with the component like a real user, and you can debug the component using the real browser's DevTools. Finally, I will go through the current open source and commercial options for visually testing the component's styles and rendering. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

I See What is Going on: Visual Testing for Your Components

Gleb Bahmutov

React Summit 2020

Flipper is an extensible dev tool platform for React Native, developed at Facebook, that allows inspection of the React development tree and native elements. It offers plugins for image cache inspection, preference modification, and network requests. Flipper can be used to build application-specific plugins and integrates with Redux and ReactorTron. The tool is undergoing a major redesign with new features like dark mode and a standardized component library. Maintainers can debug plugins within plugins and there are plans to integrate with GraphQL.

Are you a React Native developer? Have you always been longing for the rich ecosystem of developer tooling that exists for the web in e.g. Chrome and Firefox? Flipper is Facebooks internal, extensible mobile devtool platform, used the mobile devs that work on the Facebook, WhatsApp, Instagram and many more apps. Recently the React Native and Flipper team have been working hard to add first class support for React Native as well. This means that monitoring network traffic and performance, using the React Devtools, inspecting device and application logs or even debugging JavaScript can now can now be conveniently done using one coherent tool. And best of all: Flipper is extensible, so let's build our own plugin while at it! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Flipper: The Extensible DevTool Platform for React Native

React's web-based tools allow for independent learning. Dazzone, a sports streaming service, faces challenges with low memory and CPU targets. Measuring, analyzing, and fixing performance issues is crucial. Virtualization improves rendering efficiency and performance. The application is now much faster with significantly less jank.

There are many ways to measure web performance, but the most important thing is to measure what actually matters to users. This talk is about how to measure, analyze and fix slow running JavaScript code using browser APIs. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Visualising Front-End Performance Bottlenecks

Richie McColl

JSNation Live 2021

Here are some tips for better utilizing DevTools, including using the run command, customizing keyboard shortcuts, and emulating the focus effect. Learn how to inspect memory, use the network panel for more control over network requests, and take advantage of console utilities. Save frequently used code as snippets and use local overrides for easy editing. Optimize images by using a more optimized format like AVIF and track changes in the network panel to see the reduced data size.

Jecelyn will share some tips and tricks to help you debug your web app effectively with Chrome DevTools. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Debugging with Chrome DevTools

The Talk covers various tips and features of using VS Code, including the command palette, Zen mode, external terminals, and debugging. It also highlights advanced editing and refactoring features, Git integration, and the use of dev containers. The speaker demonstrates how to set up a dev container for a Python app, run code in a container, and create and configure dev containers. The benefits of using dev containers are also discussed, such as eliminating manual configuration, handling dependencies, and facilitating team-based development.

How do you debug so easily in VS Code? How do codespaces work? What are those key combinations to edit code so quickly? What extensions are the ones I shouldn't code without? Get ready to hit the ground running in this fast-paced, demo-heavy talk that takes you through some of the best and most effective tips and tricks in VS Code. Learn how to setup your environment and customize it the way you like it. You'll walk out with several tips on how to be more efficient with one of the hottest tools on the Web today! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

VS Code Can Do That!

John Papa

This talk discusses the visual future of state management and the use of state machines and state charts. XState is introduced as a state machine and state chart library for JavaScript, providing a clean and visualizable way to represent state machines. The talk highlights the features of XState, such as its state-first approach and utilities for interpreting the machine as a service. It also mentions the future goals of XState, including visualization, testing, analytics, and the development of a visual software modeling suite called Stately.

Learn about state modeling with state machines and statecharts can improve the way you develop application logic, and get a sneak peek of never-before-seen upcoming visual tools that will take state management to the next level. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#devtools