TechLead Conference

TechLead Conference 2023

Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.

Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt.In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

A Framework for Managing Technical Debt

Alex Moldovan

React Day Berlin

React Day Berlin 2022

This Talk discusses the importance of refactoring in software development and engineering. It introduces a framework called the three pillars of refactoring: practices, inventory, and process. The Talk emphasizes the need for clear practices, understanding of technical debt, and a well-defined process for successful refactoring. It also highlights the importance of visibility, reward, and resilience in the refactoring process. The Talk concludes by discussing the role of ownership, management, and prioritization in managing technical debt and refactoring efforts.

Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt. In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

Fighting Technical Debt With Continuous Refactoring

React Advanced

React Advanced 2022

Microfrontends are considered as a solution to the problems of exponential growth, code duplication, and unclear ownership in older applications. Transitioning from a monolith to microfrontends involves decoupling the system and exploring options like a modular monolith. Microfrontends enable independent deployments and runtime composition, but there is a discussion about the alternative of keeping an integrated application composed at runtime. Choosing a composition model and a router are crucial decisions in the technical plan. The Strangler pattern and the reverse Strangler pattern are used to gradually replace parts of the monolith with the new application.

Many companies worldwide are considering adopting Micro-Frontends to improve business agility and scale, however, there are many unknowns when it comes to what the migration path looks like in practice. In this talk, I will discuss the steps required to successfully migrate a monolithic React Application into a more modular decoupled frontend architecture.

Monolith to Micro-Frontends

Ruben Casas

React Day Berlin 2023

JSX can be used to create builds in Minecraft by writing pseudo-HTML code within JavaScript. It can be transpiled into a format that the browser can understand and is not limited to React. JSX allows for the creation of an intermediary representation that can be converted into commands for Minecraft. Existing tooling can be used with JSX, eliminating the need for custom parsers and enabling linting and IDE support. The source code for the project is available on GitHub.

When combined with a custom rendering function, JSX can be used to quickly build a custom domain-specific markup language. I will show you how to approach this using the example of creating builds in Minecraft.

Hacking JSX: Building in Minecraft with React

Felix Wotschofsky

React Summit

React Summit 2023

This Talk explores the power of Abstract Syntax Trees (ASTs) in software development. It covers the use of ASTs in maintaining React examples, automating dependency identification, and introducing generic typing. The Talk also discusses using ASTs to reason about and generate code, as well as their application in building ESLint plugins and code mods. Additionally, it highlights resources for exploring ASTs, testing AST scripts, and building Babel plugins.

When refactoring large code bases, Find and Replace even with Regexes, can only get you so far. When that fails don’t fallback to painful manual updates instead reach for Abstract Syntax Trees (AST). In this session we introduce AST’s and show how they can be used to reason about / generate code. You will leave with a greater understanding of how you can automatically update code and new insights into how code linters work under the hood.

Supercharged Code Refactoring via Abstract Syntax Trees

Stephen Cooper

The Talk discusses the 'rewrite trap' in software development, where the urge to start from scratch often leads to poor outcomes. It emphasizes the importance of understanding the existing project before making big technical decisions and the benefits of gradual improvement. The Talk also highlights the challenges and pitfalls of a complete rewrite, such as false sense of productivity, problems with edge cases, and the accumulation of tech debt. It stresses the need to understand the system and its influences, cater to the needs of stakeholders outside of engineering, and focus on creating value.

Let's throw away everything and start fresh. Sounds great, right? While this can feel very good it rarely speeds up anything. I'll show you why a complete rewrite is usually not what you want.

The Rewrite Trap

Philipp Giese

Today's talk is about the Game Theory of Software Decisions, exploring how game theory can be applied to software development. The speaker shares tips on creating a productive team environment and effective decision-making. They emphasize the importance of letting go of unimportant things and focusing on what's best for the project. The talk also discusses handling coding dilemmas and decision-making, suggesting strategies such as defining KPIs and consulting a neutral jury. The speaker concludes by emphasizing the importance of staying rational, bringing data, and maintaining professionalism in software development.

As we’re working to build the best possible software engineering solution, we encounter many decisions we must make. Daily. Sometimes this involves very active and passionate conversations, which might sometimes go down the negative path, creating a bad atmosphere in the team. On top of that, it’s a huge waste of time. But what if those daily decisions could be much easier and simple? In this talk I’ll try to attack and eliminate the pain points of decision making in software engineering and will show how I helped my team benefit from a lighter decision making process.

The Game Theory of Software Decision Making

Ziv Levy

Today's Talk discusses the importance of a good component API and the balance between rigidity and flexibility. The demo showcases the gradual evolution of a component's configurability while maintaining ease of use. Measuring the effectiveness of a component library involves factors like adoption rate and component coverage. Collecting data and embracing breaking changes are crucial for continuous improvement. Ensuring consumers are updated and on the cutting edge is a responsibility of the library provider.

What makes a component library good? In order to create a component library that people want to use you need to navigate tradeoffs between extensibility, ease of use, and design consistency. This talk will cover how to traverse these factors when building a component library in React, how to measure its success, and how to improve adoption rates.

Developing and Driving Adoption of Component Libraries

Logan Ralston

Lachlan Bradford

React Summit 2022

This Talk discusses the benefits of using a single app to host multiple experiences or mini-apps, as opposed to a micro front-end architecture. By using a single app, it becomes easier to share state, simplify code sharing, handle analytics and errors, and deploy and monitor the app. The Talk also covers the handling of the shell app, routing, authentication, and subdomains for authentication.

More and more, React is being used for complex apps that accommodate numerous types of users, workflows, and mechanics. Sometimes it’s different people who each use part of the app, but a single-user multi-workflow scenario isn’t uncommon as well.In this session, we’ll learn about our options when building multiple experiences within a single React app — without losing our sanity. I’ll use some examples from what we do at Wilco.

Multiple apps, one code to rule them all

Shem Magnezi

This presentation focuses on sharing code between React web and React native mobile apps. The speaker demonstrates how to achieve feature parity using a Monorepo with NX. They highlight the importance of sharing non-UI code, such as business logic and state management, through shared libraries. This approach allows the apps to focus on UI code while keeping non-UI code separate. For more details, refer to the speaker's blog post.

Usually creating web and mobile apps require different tech stacks, and it is pretty hard to share code. This talk will show how I added a React web app and a React Native mobile app in the same monorepo using Nx, and how I optimized codeshare between react web app and react native mobile app.

How to Share Code between React Web App and React Native Mobile App in Monorepo

Emily Xiong

React Advanced 2021

This Talk covers advanced patterns for API management in large-scale React applications. It introduces the concept of an API layer to manage API requests in a more organized and maintainable way. The benefits of using an API layer include improved maintainability, scalability, flexibility, and code reusability. The Talk also explores how to handle API states and statuses in React, and provides examples of canceling requests with Axios and React Query. Additionally, it explains how to use the API layer with React Query for simplified API management.

In this talk, you will discover how to manage async operations and request cancellation implementing a maintainable and scalable API layer and enhancing it with de-coupled cancellation logic. You will also learn how to handle different API states in a clean and flexible manner. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Advanced Patterns for API Management in Large-Scale React Applications

Thomas Findlay

React Finland

React Finland 2021

If you must have legacy code, you want it written in statecharts. We'll break down the mental models required for understanding unfamiliar UI code, and compare the maintenance costs with and without statecharts. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Make legacy code delightful with statecharts

Matt Pocock

React Summit Remote Edition

React Summit Remote Edition 2021

This Talk discusses the process of converting to TypeScript at CodeCademy. It emphasizes the importance of encouraging adoption and knowledge sharing within the team. The Talk also highlights the seamless integration of TypeScript into the existing infrastructure and build system. The strategy for converting to TypeScript involved using dedicated pull requests and automated tools. The speaker shares tips on automating changes, setting up a styling guide, and celebrating victories. Resources for learning TypeScript are also mentioned.

TypeScript is great, but migrating an existing app to it can be a pain. Codecademy took multiple existing React apps and converted them to TypeScript. We'll cover how to make those kinds of conversions successful from both cultural and technical standpoints. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Stories and Strategies from Converting to TypeScript

Josh Goldberg

This Talk discusses the challenges of dealing with legacy code and the benefits of partnerships in software development. It highlights the case study of ServingMonkey and Rango, showcasing the solutions implemented to modernize their code bases. The talk emphasizes the importance of three-tiered architecture and collective ownership in achieving sustainable changes. It also addresses the challenges of migrating to new technologies and the need to consider business value when making technology decisions. The talk concludes with insights on preventing code from becoming legacy and the benefits of code migration and collaboration.

In 2020, Rangle partnered with the Survey Monkey team to migrate a legacy codebase to React. Survey Monkey’s best-in-class digital products were being held back fragmentation and complexity, which created a lot of rework and wasted effort for their engineering teams. Working together, we implemented a number of process and architecture changes that cut the complexity and improved workflows, letting our blended team deliver results with speed and consistently, even early in the engagement. These were not one-size-fits-all solutions, but solves that were unique and fitted to the needs of the engineering and product teams. The success of the project was due to Survey Monkey’s motivated teams that were: 1) Ready to embrace change; 2) Able to keep a firm focus on the outcomes; and 3) Readily understood the complexity of the project. This allowed us to co-create some non-intuitive solutions that engineers at similar enterprise-level companies should know about. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#developer challenges