5 Outdated Web Development Strategies to Drop in 2024, According to Developers

Web development is constantly evolving. Once limited to text-based sites, web development now includes single-page applications, mobile apps, progressive web apps, and more complex applications. The rise of Flash gave way to JavaScript, then jQuery, React and Angular. HTML has evolved to HTML5. There’s also CSS3, XML, PHP, and so many more technologies available today.

While some of the stages of evolution in web development could only be perceived years later, others can be seen in real time. “Developers can observe changes in what people tweet about, talk about at conferences, or what companies are using and promoting as their preference,” said Piotr Staniów, a senior software engineer at HubSpot.

Keeping up with new trends, technologies, and strategies in web development can make you — and your products — more competitive in the market. With this in mind, let’s look at a few web development strategies that you may want to drop this year and alternatives to try instead.

Outdated Web Development Strategies

1. Manually Formatting Code
2. Using Float to Make Grids and Layouts
3. Using Class Components in React
4. Shallow Testing React Components with Enzyme
5. Using Redux to Store Backend State

1. Manually Formatting Code

What to do instead: Use an opinionated code formatter

For years, what style to use for formatting code has been hotly debated. Developers had their own personal tastes as well as company policies to abide by, and spent a lot of time focusing on what their code looked like instead of what their code did.

Kevin McLarnon, Senior Software Engineer at HubSpot, recommends that developers stop formatting code themselves: “Pick an opinionated auto-format tool for your chosen language, integrate it into your build, and stop wasting time thinking about code style.”

For example, Prettier is a popular opinionated code formatter that works for many languages, including JSX, Vue, and Less. Since it requires very little configuration and automatically formats code, it saves developers time from formatting code themselves — or arguing about how to format it.

Image Source

2. Using Float to Make Grids and Layouts

What to do instead: Use Flexbox or another layout model

Arthur Albuquerque Ferreira, Senior Software Engineer at HubSpot, said using the CSS float property to make grids and layouts has probably been outdated for years now. But for about a decade, floats were the only option for laying out a complex web page.

During this period, developers had to “hack” their CSS, using floats to put block-level elements side-by-side instead of on top of each other in order to create magazine-style layouts. There were a few problems with this method. First, it lacked key functionality, like vertical centering, which made it frustrating to create layouts that looked the same across browsers. It also made maintaining the code of a site much more difficult.

To simplify both the creation and maintenance of web pages, responsive layout models were created. Using a model like Flexbox, CSS Grid, or Bootstrap enables developers to create responsive layouts that look the same across platforms and browsers much easier and faster than using the float property.

Image Source

3. Using Class Components in React

What to do instead: Use function components with hooks

According to Ferreira, class components in React are also quite outdated. While React has explicitly said they do not intend to deprecate class components, many developers like Robin Wieruch believe they will fade away. Meaning, while class components will still be widely used in many existing React projects, developers will opt to use React Hooks.

Image Source

A new addition in React 16.8, hooks let developers use state and other React features without writing a class. Hooks offer a number of benefits, including that they let you reuse, organize, and understand your code better.

4. Shallow Testing React Components with Enzyme

What to do instead: Use integration testing with React Testing Library

Staniów said there’s been a massive shift in recent years in thinking about how to write unit tests for React components, from more backend-like thinking about components to an integration testing approach: “In 2016, the state of the art was shallow testing with Enzyme and mocking out all the dependencies. Three years later, everyone was super excited about the React Testing Library.”

This library was created to help developers write maintainable tests for their React components. With a library like Enzyme, you have to include implementation details of your components. The problem is that if there are refractors of your components (changes to implementation but not functionality), then they will break your tests. Because the React Testing Library lets you create tests without implementation details of your components, they will be maintainable in the long run.

Staniów notes that Enzyme still got a steady number of two million downloads a week last year, but React Testing Library’s weekly downloads skyrocketed from 2.5 million to 4.9 million over that same period. “While some companies or teams may decide to keep using only Enzyme as a more cost-effective or easier way to test, there’s a clear winner in terms of scale of usage and upwards trend in adoption numbers,” he said.

One big reason for the transition is how outdated Enzyme is. While it’s supposed to allow developers to test React applications, Enzyme doesn’t support all React features, which makes it impossible to test some of the code people write with it.

Knowing that there won’t be full agreement amongst the developer community over which one is universally better, Staniów advises: “Given what’s happening broadly in the community — even without trying to tell what’s good or bad — it’s probably fair to say 2022 is a good moment for front-end developers to revisit their testing strategies if they haven’t yet.”

5. Using Redux to Store Backend State

What to do instead: Use React Query

Redux revolutionized how web applications are developed. By allowing immutable data to be shared across an application, developers were able to separate their backend and frontend code. However, because data had to live in two places, there were new challenges about how to best store that data globally while reducing network latency. There are plenty of Redux libraries available to help manage data from the backend but they add complexity.

Instead, Software Engineer Gabriel Abud in an article on DEV community recommends using React Query when an application requires more server state management than global state management. It requires less boilerplate code and is easy to apply consistently in a large codebase.

Image Source

The Future of Web Development

Web development is evolving rapidly and so are developers’ strategies and tech stacks. While no development practices or tools are inherently bad, some have been replaced by faster, more efficient, or simpler alternatives. Knowing about the latest development strategies, like the ones above, can save you time and frustration.