React Summit

React Summit 2023

<p>As a front-end teamlead, I was faced with the challenge of transitioning multiple legacy projects, which happened rapidly and was a painful process. One of the main issues I encountered was dealing with a legacy project that had no documentation. I had to figure out how to stabilize it, put it in order, and reduce the cost of its maintenance and development.</p>

The Path Through Legacy: Delicate Balance Between Tolerance and Phobia

Hi, my name is Max. Today we will talk about the legacy. First, a couple of words about our projects. In Teotihu Kazakhstan, Altel Digital, we develop four main mobile apps, more than 10 web applications and more than 150 microservices. Let's talk about good old essential problems. What is legacy? It can be some ancient architecture, maybe board game cases. Everyone left their legacy path in this world. It works in both ways. Stickers on your board game map or your package cross-dependency in React project. Well, both legacy board games and legacy codes share the same commonality of passing down something from the past. The nature of their legacy is entirely different. Legacy game is built upon previous iterations to create a unique and personalized gaming experience. So what is legacy code anyway? You might fall into the trap of thinking that it's just an old code. Yes, it can be old. But old code is not necessarily considered legacy just because it's old. With this approach, your own very code you wrote yesterday is legacy by now. Next or following characteristics might seem familiar to you. The answer that we write code which most likely ends up as legacy is outside of the actual coding process and implementation aspect. If you are making your own small project or startup, you are more likely to write fast and revisit later. Nowadays, if you haven't taken this route as a small team or one-man army project, you most likely don't have a business. The key is acknowledging the problem in time to move the practical ways of combating the problem. Unfortunately, there is no such instrument in software development like Magic Wand or Sword of Thousand Truths to make everything we want perfectly. But just as weapons and money bars are tools to success in gaming experience, standard commitment is essential for using technology effectively and responsibly. As developers, we find the idea of rewriting because it's easier. At least that's what we think. It's easier to judge code written before us and think we have a better solution often ignoring the business logic that old code serves and what edge cases it was trying to solve. While I tend to believe that rewrite is often not necessary, there may be certain circumstances where it is justifiable. For instance, if a particular section of a project has reached its limit and further expansion requires complicated hacks or workarounds, or if certain components are no longer in use and can be isolated, starting anew may be the best course of action. Documentation is one of those things that all developers agree but few do, at least in a practical and efficient way. You can write an endless amount of disorganized outdated mess which makes it incredibly hard to update. It's far easier to write lots of mindless documentation. Some say code base can be documentation by itself, but having a small number of links and anchors in your repository can be a thing. It's pretty much an art in and of itself. A piece of code might work, but it's not useful if you can't extend it. Sure, it can work as expected and still generate profit for the company, but one day it can break the entire business workflow. You can minimize the problem by keeping things isolated so it doesn't affect the rest of the code. This can be a permanent solution. Usually when you write new stuff, they will depend on some legacy system, depending on the size, the larger the size of the code base, the more challenging it will be to fix it. So optimizing your code for change and making it easier to delete ironically makes it easier to extend in time and you will not produce legacy code today. Remember what I told you before, the code you write today is all code by tomorrow. Is your intention to be the most clever or is it to help all the future developers that will probably come long after you are gone? Our task is to leave the code base in a bit better condition than it was found. Rather than following best practices, it is preferable to prioritize creating code that is easily modifiable by others. The goal here is to slowly make incremental changes on legacy system. When the option stops, that is where code starts being legacy. Code that changes is only constant. An obvious decision is to write tests. Each time you visit a certain section, depending on the case, you can add unit or behavior tests and gradually achieving full coverage. Then you start moving stuff more easily. The only downside is that our legacy code bases don't even have tests or test infrastructure implemented. Regardless of it, initial effort and difficulties involved, this tool is eventually demonstrate its worth in the future. Okay, this might seem weird, but the general proofs that you don't have and don't generate legacy code today at least as much. Anyone in your team can go and make changes throughout the code base. And the newcomers have a way discovering how to work with it without the need to go around with clarification. This doesn't mean you don't have places in the code base where things aren't messy, but at least there is a way to navigate through. What I'm always trying to make, when your code base doesn't depend on a single person, this is a healthy sign. The ability to handle and work with legacy systems is considered a sign of seniority within teams. It's important to note that none of the mentioned before processes can be accomplished overnight. Incremental process is key. In summary, we have learned that legacy code is code that cannot be extended, but it's possible to coexist with it and gradually improve through well-documented updates and a continual focus on refactoring. As engineers, our primary objective is to solve problems through code, but it's essential not to become too attached to any code base. Eventually, all code will become obsolete, so it's crucial to keep seeking out new and interesting problems to solve. Here you go. Thanks for watching. Glad to see you on React Summit 2023.


Maxim Nam

We're bringing free articles, videos, courses, and tutorials to help you learn all about ReactJS, whether you're a beginner or a pro. Introduced in 2011, the framework has become essential for web and mobile developers alike, enabling modern apps by look and function. And while other JS tools have expanded or revised its original notions, React's popularity is still the one to beat.

React is a powerful JavaScript library for building user interfaces. Learn more about React with our comprehensive talks, workshops, tutorials and presentations. Our experts will help you understand the fundamentals of React, as well as advanced concepts such as state management, routing, performance optimization and more. With our resources, you’ll be able to create stunning web applications with React and take your development skills to the next level.

React Talks, Workshops, Tutorials and Presentations for JavaScript Developers

Building swift yet functional apps should be what all developers aspire to. And since you do, we put together a collection of talks and tutorials on application performance and made them available for free. Whether your challenge is on the front-end or the back-end, these talks and workshops will give your great tips and inspire you to try new solutions.

Performance is an essential skill for JavaScript developers. Our portal offers a range of talks, workshops, tutorials and presentations to help you become a better programmer and take your coding skills to the next level. Learn the latest techniques and strategies to improve the performance of your code, discover new tools to measure and track performance, and get tips on how to optimise your code for maximum efficiency. Whether youre looking to improve your existing skills or start from scratch, our comprehensive library of resources will provide you with all the information you need. Take your programming skills to the next level with our performance-focused talks, workshops, tutorials and presentations.

Maximising Performance with Talks, Workshops, Tutorials and Presentations for JavaScript Developers

Testing is a crucial albeit difficult part of software delivery. Make sure your JavaScript apps are always spotless with the following compilation of free online tutorials, courses, and talks from our conferences. They'll take you on a journey from basics to advanced methods and even philosophical questions about testing.

This page contains talks, workshops, tutorials and presentations about testing for JavaScript developers. Learn the best practices of testing code, how to design tests that are most effective, and how to debug problems in your code. Discover how to use automated testing tools, such as Jest and Mocha, to make sure your code is working correctly. Get answers to your questions on topics like unit testing, integration testing, end-to-end testing, and more. With these resources, you can become an expert in testing JavaScript code.

Testing Talks, Workshops, Tutorials, and Presentations for JavaScript Developers

Next.js is a React-based web application framework that allows for server-side rendering, static site generation, and client-side rendering. It offers features such as automatic code splitting, serverless functions, and dynamic imports to improve website performance and scalability. Additionally, it provides an easy-to-use file-based routing system and supports a wide range of technologies and libraries.

The page contains talks, workshops, tutorials and presentations about next.js, a powerful JavaScript framework for building web applications and websites. Learn the fundamentals of this framework through our comprehensive collection of talks, workshops, tutorials and presentations. Get an in-depth understanding of how to use Next.js to create modern, fast, and reliable applications. Discover best practices for structuring and deploying your code, and learn how to leverage the latest features and capabilities of Next.js. With these resources, youll be able to develop high-performing web applications quickly and easily.

Exploring Next.js: Talks, Workshops, Tutorials & Presentations for JavaScript Developers

Coding is like a piece of art — in its ideal state, it should be both functional and beautiful. But how to reach that point? Whether you’d like to make your JavaScript code cleaner or just discover how seasoned developers deal with debugging or building a product, the following tutorials will show you how to include best practices in your daily routine.

The page contains talks, workshops, tutorials and presentations about the best practices for JavaScript developers. Learn from experienced professionals about techniques and strategies to optimize your code, debug errors, and enhance your development skills. Get up-to-date information on the latest trends in the JavaScript ecosystem, such as frameworks, libraries, and tools. Discover the best practices for writing efficient, maintainable, and secure code. Take advantage of our interactive sessions and hands-on tutorials that will help you become a better JavaScript developer.

Best Practices in JavaScript Development: Talks, Workshops, Tutorials and Presentations

Did you know that TypeScript lets you write JavaScript the way you really want to? Explore the variety of Typescript courses we compiled from our speakers and collaborators and find out what you can do with this language and how it improves the development experience.

This page contains talks, workshops, tutorials and presentations about Typescript. Learn from experienced JavaScript developers how to get started with Typescript and how to use it in your projects. Get the latest tips and tricks for coding with Typescript and find out how to optimize your code for maximum performance. Discover how to create efficient and maintainable applications with Typescript and take your development skills to the next level.

Learn Typescript: Talks, Workshops, Tutorials & Presentations for JavaScript Developers

Design systems in web design are a set of interconnected design components that are organized in a systematic manner. They provide a consistent visual language and design guidelines for creating digital products, enabling designers to work faster and more efficiently. Design systems also promote better collaboration among team members and help to maintain brand consistency.

Design systems are an essential part of modern web development, and this page contains talks, workshops, tutorials and presentations about design systems for JavaScript developers. From understanding the basics of design systems to mastering advanced techniques, youll find the resources you need to become an expert in creating and maintaining design systems. Learn how to create a unified visual language, define components and use them across multiple projects, and keep your design system up to date as your project evolves. Our talks, workshops, tutorials and presentations will give you the knowledge and tools you need to create and maintain robust design systems.

Design Systems: Talks, Workshops, Tutorials & Presentations for JavaScript Developers

Feeling like boosting up your career? In this section, you'll find free JavaScript courses, tutorials, and coding lessons to help you stay up-to-date with the latest developments in the JS ecosystem and take you from basic to advanced. Dive into it, and you'll find out that the world's most popular programming language is easy to learn.

Welcome to the JavaScript Learning Portal! Here you will find a variety of talks, workshops, tutorials and presentations about JavaScript. Whether youre a beginner looking to learn the basics or an experienced developer looking to stay up-to-date on the latest trends in the language, this portal has something for everyone. We have organized our content into different categories so you can easily find what you need. Explore our selection of talks, workshops, tutorials and presentations today and start learning more about JavaScript!

JavaScript Talks, Workshops, Tutorials & Presentations - Learn JavaScript from the Experts!

Build tools are programs that automate the process of creating a software application. They are used to compile source code, run tests, package applications, and deploy them into production environments. Build tools help developers save time by automating the process of building an application from its source code. In JavaScript development, build tools like Grunt, Gulp, Webpack, and Browserify can be used to automate tasks such as minifying code, running unit tests, and compiling Sass or Less files.

This page contains talks, workshops, tutorials and presentations about build tools, a critical component of web development. Learn how to use build tools to automate tasks such as compilation, minification, unit testing, linting and more. Discover the best practices for efficient project management and get tips on how to get started with build tools. Get access to comprehensive resources from experienced professionals and stay up-to-date with the latest trends in JavaScript development.

Learn How to Use Build Tools for JavaScript Development: Talks, Workshops, Tutorials & Presentations

JS tooling is a term used to describe the tools and processes used to develop applications in JavaScript. This includes frameworks, libraries, build systems, task runners, and other tools that help developers create, test, and deploy their applications. We have talks and workshops on this topic to help students learn how to use these tools effectively and efficiently.

This page contains talks, workshops, tutorials and presentations about js tooling - the most up-to-date JavaScript tools and techniques for developers. Learn how to set up a JavaScript development environment, create custom scripts and build applications with the latest technologies. Discover the best practices for using popular tools like Gulp, Grunt, Webpack, Babel and more. Get tips on debugging and troubleshooting common problems. Whether you are a beginner or an experienced developer, these resources will help you get the most out of your JavaScript tooling.

Exploring JS Tooling: Talks, Workshops, Tutorials and Presentations

Managing the state of a browser-based JS application is tough — but it doesn’t have to. With tips and workarounds from our speakers’ tutorials and courses on JavaScript state management, you’ll find that even the most tedious tasks can be easy if you follow a few simple principles to avoid the most common pitfalls.

State management is a key concept in software development, particularly for JavaScript developers. This page contains talks, workshops, tutorials and presentations to help you understand state management and how it can be used to create powerful web applications. Learn the fundamentals of state management such as React, Redux, MobX and more, as well as best practices for managing state in your own projects. Get tips and tricks from experienced developers on how to use state management to build efficient and maintainable code. With this page, you will have all the resources you need to become an expert in state management.

State Management Talks, Workshops, Tutorials & Presentations for JavaScript Developers

Team productivity is the measure of how efficiently a team is able to complete tasks. It involves both the quality and quantity of work that is completed in a given amount of time. In terms of JavaScript, it is the ability of a team to develop high-quality code quickly and efficiently. This may involve creating new features, debugging existing code, or improving the performance of an application. Team productivity also requires effective communication between all members of the team, as well as good project management practices.

The page you are looking for contains talks, workshops, tutorials and presentations about team productivity, designed to help JavaScript developers increase their efficiency and collaboration. Our content covers a range of topics, from communication strategies to workflow management, and provides actionable advice on how to improve team performance. With our resources, you can learn how to create an effective working environment, establish better processes and practices, and maximize the productivity of your development team.

Maximising Team Productivity with JavaScript: Talks, Workshops, Tutorials & Presentations

Web components are a set of web platform APIs that allow developers to create custom, reusable HTML tags to use in web pages and web apps. They are made up of four main technologies: HTML templates, custom elements, Shadow DOM, and HTML imports. HTML templates allow developers to declare inert chunks of HTML that can be used as the foundation for an element's structure. Custom elements enable developers to define their own HTML tags and extend existing ones. Shadow DOM provides encapsulation for styling and DOM manipulation. Finally, HTML imports allow developers to include and reuse HTML documents in other HTML documents.

Web Components are an emerging web technology that allows developers to create encapsulated and reusable components for their web applications. They provide a way to create custom HTML elements, combine existing HTML elements together, and extend existing HTML elements. This page contains talks, workshops, tutorials and presentations about Web Components, providing developers with the knowledge and tools needed to use them in their projects. Learn how to create powerful, dynamic user interfaces with Web Components and discover the best practices for using them in your development workflow.

Web Components Talks, Workshops, Tutorials & Presentations - Learn JavaScript Development from Experts

DevTools is a set of web development tools built into the Chrome browser. They allow developers to inspect and debug HTML, CSS, and JavaScript code on any web page. DevTools provides access to the Document Object Model (DOM), allowing developers to view the structure of a page and make changes to it in real-time. It also provides features such as network performance analysis, JavaScript debugging, and memory profiling, which help developers optimize their code.

DevTools Talks, Workshops, Tutorials and Presentations

Discover the power of DevTools with our range of talks, workshops, tutorials and presentations. Our experts will help you understand how to use DevTools to debug, inspect, and improve your code. Learn best practices for debugging, profiling, and optimizing your JavaScript applications. Get up-to-date on the latest trends in DevTools and find out how they can help you become a better developer. Whether youre a beginner or an experienced programmer, we have something for everyone. Come join us and explore the world of DevTools!

DevTools Talks, Workshops, Tutorials & Presentations: Get the Most Out of Your JavaScript Development!

Web development is the process of creating websites, applications and other online services. It involves a combination of coding languages such as HTML, CSS, JavaScript and others to create an interactive user experience. The goal of web development is to create a website or application that is fast, secure, and easy to use. Web developers must understand how to design, build and maintain websites while also considering the user experience and making sure the code is optimized for performance.

The page contains talks, workshops, tutorials and presentations about web development for JavaScript developers. Learn the fundamentals of web development and use JavaScript to create dynamic and interactive websites. Our experts will guide you through the process from the basics of HTML and CSS to more advanced topics such as AJAX, jQuery, and Node.js. Get the skills you need to become a successful web developer and take your career to the next level.

Web Development Talks, Workshops, Tutorials, and Presentations

While ReactJS is one of the most popular frameworks out there, it still has its limits. That’s where React Hooks come to play: they are special functions that expand the abilities of functional components. Discover the following talks and workshops that will take you through React Hooks fundamentals and advanced techniques to ensure you’re always on top of your game.

React Hooks is a powerful feature of React that allows developers to write components with fewer lines of code. On this page, youll find talks, workshops, tutorials and presentations about React Hooks, so you can learn more about this important feature and become a better JavaScript developer. Weve gathered the best resources from experts in the field, so you can quickly get up to speed with React Hooks and start using them in your own projects.

React Hooks: Talks, Workshops, Tutorials and Presentations for JavaScript Developers

DevOps is a set of practices that combines software development (Dev) and information-technology operations (Ops). It is an approach to software development that emphasizes collaboration, communication, and automation between developers and IT professionals. DevOps is focused on automating processes to enable rapid deployment and continuous integration of applications, while also providing visibility into the entire system. This helps to ensure that the application meets customer expectations and is able to quickly adapt to changing business needs.

DevOps is a set of practices that combine software development and IT operations to shorten the systems development life cycle while delivering features, fixes, and updates frequently in close alignment with business objectives. This page contains talks, workshops, tutorials, and presentations about DevOps, which is a way of working that helps developers and operations teams collaborate better to deliver software faster and more reliably. Learn how to optimize your development workflow, increase collaboration between teams, and improve the quality of your applications with DevOps.

DevOps Talks, Workshops, Tutorials and Presentations for JavaScript Developers

Frontend refers to the part of a website or application that users interact with. It is typically built using HTML, CSS and JavaScript to create an interface that allows users to view and interact with content. Frontend developers are responsible for creating the visual elements of a website or application, such as layout, styling, animation, and user interaction. This includes designing how a page looks, how it responds to different events, and how it interacts with the user.

The page contains talks, workshops, tutorials and presentations about frontend and is designed for JavaScript developers looking to improve their knowledge and skills in this area. Here you can find the latest insights, tools and techniques to help you stay up-to-date with the ever-changing frontend landscape. Whether youre a beginner or an experienced developer, youll find something to help you become a better frontend engineer.