Conquering Complexity: Refactoring JavaScript Projects

Rate this content
Bookmark

One of the most common issues in JavaScript code bases is that our code is too complex. As projects and their requirements evolve, complexity creeps in. Excess complexity slows progress, frustrating us as we try to keep large chunks of a program in our heads just to understand what is happening.


To conquer complexity, we must refactor! In this talk, we'll investigate how to identify unnecessary complexity in our code base using cognitive complexity as a measure, how to approach refactoring complex code, and what tools are available to help us refactor. We'll put it all into practice through a live example. By the end of the talk, you'll be excited to tackle that 1000-line monstrosity of a function in your own code base (you know the one).

Phil Nash
Phil Nash
21 min
17 Jun, 2024

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Today's Talk explores the complexity in code and its impact. It discusses different methods of measuring complexity, such as cyclomatic complexity and cognitive complexity. The importance of understanding and conquering complexity is emphasized, with a demo showcasing complexity in a codebase. The Talk also delves into the need for change and the role of refactoring in dealing with complexity. Tips and techniques for refactoring are shared, including the use of language features and tools to simplify code. Overall, the Talk provides insights into managing and reducing complexity in software development.

1. Introduction to Complexity

Short description:

Today, I want to talk about complexity in our code. Our jobs are complex as we have to model real-life things in programming languages. Let's explore what complexity means and how it affects our code.

What's up, everybody? My name is Phil Nash, and I'm a developer relations engineer at Datastacks. Datastacks is a company behind AstroDB, which is a serverless vector database that you can use to build your generative AI applications. Again, my name's Phil Nash. If you need to find me anywhere on the internet, I will be Phil Nash, and Twitter, Mastodon, whatever social network you're using at the moment, even LinkedIn, my goodness. Anyway, what I want to talk to you about today is complexity, complexity in our code. So let's start by talking about what I mean by complexity. You see, our jobs are complex. We often have to model real-life, real-world things the medium of JavaScript or TypeScript or any other kind of language. And the world itself is inherently complex, and then we just add to that by trying to turn it into code. And code, therefore, itself is inherently complex.

2. Measuring Complexity and Cyclomatic Complexity

Short description:

Our job is managing complexity, and we need a method of measuring it in our code. Let's examine the complexity of functions through examples. Cyclomatic complexity, invented in 1976, gives a score to a function based on its flow breaks, such as loops and conditionals.

What we want to avoid doing is actually just adding any more complexity to our applications than the problem that we're trying to solve demands itself. And ultimately, this means that our job becomes managing complexity. As long as we can keep on top of this complexity, then our codebases stay sane, easy to understand, and easy to work on over time and over changes of team and all sorts of things like that.

So our job is managing complexity. However, last year at some other conferences, I gave a talk in which I looked into the top five issues in JavaScript projects that could be discovered by static analysis, and in at number two was the fact that the complexity of functions in our projects was just too high. And so that's a problem. That's why I wanted to give this talk to get over that. And so really the question is, what is too high? We need a method of measuring our complexity in our code. And so how might we go about that? How do we measure complexity?

Well, first of all, let me, if I showed you a piece of code, if I showed you a function like this, a sum of prime numbers, and asked you how complex is it, just have a think about what you might answer and how useful that would be. There is obviously some complexity here. We've got some loops. We've got some conditionals. We're dealing with prime numbers. That's going to be complex. And then we've got this other function. This is a get words function. We pass in a number and it returns words like one, a couple, a few, many, or lots. It's a big switch statement. How complex is this? Well, there have been ways to measure complexity that have come, been invented over the years. Back in 1976, cyclomatic complexity was invented. Cyclomatic complexity gives a score to a function based on a couple of things. Mainly it adds scores for when a function has a break in flow. That is, when there is a loop or a conditional for the most part. And so if we look at our sum of prime numbers function, cyclomatic complexity actually scores one for being a function. Everything starts as one. So it starts up there. And then we score one for this first four loop. There's a second four loop which scores one. There's a conditional. And then there's another conditional at the bottom.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

The Future of Performance Tooling
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Top Content
Our understanding of performance & 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.
Rome, a Modern Toolchain!
JSNation 2023JSNation 2023
31 min
Rome, a Modern Toolchain!
Top Content
Modern JavaScript projects come in many shapes: websites, web applications, desktop apps, mobile apps, and more. For most of them, the common denominator is the technical debt that comes from settings up tools: bundlers, testing suite, code analysis, documentation, etc. I want to present you Rome, a toolchain that aims to be a all-in-one toolchain for the web, with one single tool you can maintain the health of all your projects!
Improving Developer Happiness with AI
React Summit 2023React Summit 2023
29 min
Improving Developer Happiness with AI
GitHub Copilot is an AI pair programmer that can help you write code faster and spend less time writing repetitive code.This session will cover some interesting use cases for Copilot that could shine a light on its possibilities. This ranges from prompting Copilot to suggest a function based on a comment, learning how to use a new framework, tackling a security or accessibility bug, better documenting your code, translating  code from one language to another, etc.Agenda:
Introduction to CoPilot
- What is Copilot
- How can you use it
- How it can help you write code faster
- Copilot Labs experimental features I will pick examples from the React ecosystem and show how we can fix Security Vulnerabilities and Accessibility issues in some components.
Static Analysis in JavaScript: What’s Easy and What’s Hard
JSNation 2023JSNation 2023
23 min
Static Analysis in JavaScript: What’s Easy and What’s Hard
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?
How I Automated Code Changes for 100 Repositories: Getting Started With Codemods
React Day Berlin 2022React Day Berlin 2022
28 min
How I Automated Code Changes for 100 Repositories: Getting Started With Codemods
Three Ways to Automate Your Browser, and Why We Are Adding a Fourth: WebDriver BiDi
JSNation 2023JSNation 2023
19 min
Three Ways to Automate Your Browser, and Why We Are Adding a Fourth: WebDriver BiDi
A journey through overwhelming ways to automate browsers. Join Michael on a journey to see what happens behind the scenes of "await page.goto('https://example.com');" et. al. See what pros and cons each of the three ways of browser automation have.
Understand why we are adding a fourth - WebDriver BiDi.

Workshops on related topic

Solve 100% Of Your Errors: How to Root Cause Issues Faster With Session Replay
JSNation 2023JSNation 2023
44 min
Solve 100% Of Your Errors: How to Root Cause Issues Faster With Session Replay
WorkshopFree
Ryan Albrecht
Ryan Albrecht
You know that annoying bug? The one that doesn’t show up locally? And no matter how many times you try to recreate the environment you can’t reproduce it? You’ve gone through the breadcrumbs, read through the stack trace, and are now playing detective to piece together support tickets to make sure it’s real.
Join Sentry developer Ryan Albrecht in this talk to learn how developers can use Session Replay - a tool that provides video-like reproductions of user interactions - to identify, reproduce, and resolve errors and performance issues faster (without rolling your head on your keyboard).