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

Web developmentis 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.HTMLhas evolved toHTML5. There’s also CSS3,XML，PHP以及今天提供的更多技术。

尽管仅在几年后才能感知到网络开发的某些演变阶段，但可以实时看到其他阶段。HubSpot的高级软件工程师PiotrStaniów说：“开发人员可以观察人们在会议上发布的推文，谈论的变化，或者公司使用的内容并促进其偏好。”bob电竞官方下载

跟上新的趋势，Web开发的技术和策略可以使您和您的产品在市场上更具竞争力。考虑到这一点，让我们看一下您今年可能要放弃的一些网络开发策略，以及尝试的替代方法。

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.

HubSpot的高级软件工程师Kevin Mcbob电竞官方下载Larnon建议开发人员停止格式化代码：“为您选择的语言选择一个自以为是的自动格式工具，将其集成到构建中，并停止浪费时间来思考代码样式。”

For example,更漂亮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.

图像源

2.使用浮子制作网格和布局

What to do instead:Use Flexbox or another layout model

Arthur Albuquerque Ferreira, Senior Software Engineer at HubSpot, said using theCSS float propertyto 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.

为了简化网页的创建和维护，创建了响应式布局模型。使用类似的模型Flexbox，CSS网格或Bootstrap使开发人员能够创建响应迅速的布局，这些布局在平台和浏览器之间看起来相同，并且比使用Float属性更容易，更快。

图像源

3.在React中使用类组件

What to do instead:Use function components with hooks

费雷拉称,在反应类组件re also quite outdated. While React has explicitly said they do not intend to deprecate class components, many developers like Robin Wieruch believe they willfade away. Meaning, while class components will still be widely used in many existing React projects, developers will opt to use React Hooks.

图像源

React 16.8中的新添加功能使开发人员在不编写课程的情况下使用状态和其他React功能。钩子提供了许多好处，包括它们让您更好地重复使用，组织和理解您的代码。

4.浅层测试与酶的反应组件

What to do instead:与React测试库一起使用集成测试

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指出，去年酶每周仍然每周下载200万次，但在同一时期，React测试图书馆的每周下载量从250万到490万。他说：“尽管某些公司或团队可能会决定仅使用酶作为一种更具成本效益或更轻松的测试方法，但在采用数字的使用规模和向上的趋势方面，有一个明显的赢家。”

One big reason for the transition is howoutdated 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.使用redux存储后端状态

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 anarticle on DEV communityrecommends 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.

图像源

网络开发的未来

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.