传统前端开发真的在消亡吗?

发表时间: 2024-06-20 19:23

在 SPA 出现之前,Web 应用程序通常是多页的。这意味着每次用户与应用程序交互时,服务器都会发送一个完整的新页面,然后浏览器会再次加载它。每次用户在页面之间导航时,都需要完整的页面重新加载,这可能会减慢速度并带来不太流畅的用户体验。此类的应用程序通常使用服务器端技术构建,例如 PHP、Ruby on Rails、ASP.NET 等,这些技术在服务器端生成 HTML 代码并将其发送到浏览器。

PHP Web 应用程序的工作原理

Web 开发人员是全能型专家,他们同时负责前端和后端部分。随着 Web 技术的发展和用户的需求,需要新的解决方案,使他们能够使用交互式界面,而无需等待后端页面响应。

正是由于当时服务器资源有限,为了降低服务器负载并通过 JS 提供网页交互功能(无需等待服务器更新后再加载新页面),才出现了使用 Backbone.js 或 Angular.js 构建单页面应用 (SPA) 的初始解决方案。

纯前端开发人员的角色变得更加需要和多样化。他们开始专注于创建用户界面、使用HTMLCSSJavaScript以及与 API 和服务器交互。另一方面,后端开发人员更加专注于数据处理、应用程序业务逻辑、使用数据库和创建服务器 API。

因此,我们迎来了 React、Angular2、Vue 等其他网页应用开发工具的新时代。现在,我们不再局限于创建简单的表单和列表,而是拥有了诸如 js 路由、状态管理、浏览器 API、将授权令牌绑定到请求、数据映射等功能。

然而带来的结果是:

  • 沟通和协调的困难: API 契约和通信方式 (HTTP 1.1、Websocket、GraphQL) 需要达成一致。JSON 解析和验证也需要规范。
  • 理解和知识的差异: 开发人员的认知水平可能会存在差异。例如,前端开发人员可能认为创建大量查询是正常的优化手段,但后端开发人员会意识到这会导致大量数据库访问和数据聚合,影响性能和维护成本。
  • 工作重复: 许多后端 CRUD 操作在前端也需要类似的逻辑。数据不仅从服务器获取,还需要存储到前端状态管理中 (store()),每个用户操作都要通过分发函数 (dispatch()) 进行处理,然后等待请求执行,最后根据结果更新状态 (reducer())。基本上,后端对数据库做的操作,前端都要重复一遍。(此外,重新加载页面以及从服务器恢复 SPA 的当前状态也是一个让人头疼的问题。)
  • 调试和测试困难: 需要考虑可能的集成问题,并在应用的前后端环境中进行测试。虽然可以创建前端应用的独立端到端测试 (e2e-tests),但并不能保证生产环境的可靠性。服务器响应的验证可以使用 ZoD 库,但实际应用比例有多少呢?
  • 开发时间和成本增加: 任何 API 契约的变更都需要前后端人员同时协作。不像以前那样可以直接修改模板发送到服务器。变更需要经过评审、拆解成单独的任务,可能还需要业务分析人员的参与,才能顺利实施。
  • SEO: 由于整个应用是由 JS 构建的,搜索引擎无法获取应用内容和导航信息进行正确索引,因此需要 SSR (服务器端渲染) 和 SSG (静态站点生成) 解决方案。
  • 安全性: 页面上输入的任何关键数据在发送到服务器之前都需要隐藏。此外,应用程序还需要从服务器请求大量个人信息,暴露了访问令牌等安全凭证。

为什么传统的前端开发方式逐渐没落?

浏览招聘网站,你会发现大量后端开发的职位空缺,例如:

  • Python + Django
  • PHP + Laravel
  • Next.js + React
  • Nuxt.js + Vue

这些都是基于服务器端的 Web 应用开发框架。得益于「服务端渲染 (Hydration)」和「可恢复性 (Resumability)」技术,服务器端只需要渲染界面更新的部分,无需整个页面重新加载。

后端开发方式的优势:

  • 服务器端应用不再需要复杂的 HTTP 或 WebSocket 协议,并且双方都无需支持这些协议。服务器端可以使用更好的方法(例如 gRPC)与其他服务交换信息。
  • 由于不需要中间审批流程,变更的效率更高。开发者可以立即看到用户界面反映的修改结果。
  • 测试可以整体检查应用程序,无需集成测试,减少错误发生率。
  • 传输的数据仅为 HTML 标记,用户看不到请求-响应的底层逻辑。
  • 无需大量 JSON 数据恢复 SPA 状态,可以直接传递现成的模板。
  • 由于页面中的 JS 代码很少,因此不必担心浏览器兼容性问题,也无需使用 Babel 等转译工具。

随着无代码解决方案、AI模板生成、强大服务器资源以及 SEO 需求的兴起,仅仅依赖现有数量的前端开发人员和工具来开发前端部分已经变得没有必要。

企业主会提出一个合理的问题:“为什么开发一个简单应用程序我需要同时雇佣一个纯前端开发人员和一个纯后端开发人员呢?”

全栈开发并非仅仅是为了节省人力成本而提出的管理概念,在当下它已经成为主流。你并不需要一个纯粹的前端开发人员,而需要的是能够构建整个应用程序的开发人员,他们可以直接执行简单的数据库操作或调用其他服务并展示结果。

毫无疑问,复杂的应用仍然需要分离的前端和后端,但大多数应用程序将逐渐远离 SPA,回归传统开发模式,只不过现在我们拥有了解决这些问题的方案。随着 HTMX 的出现,任何具有基础知识的后端开发人员都可以创建网络应用程序。现在,你甚至不需要懂 JS 就能创建简单的单页面应用。

你可能会问:“以前前端开发人员不仅负责 JS 逻辑,还负责 CSS 和选择器、HTML 及其语义化,现在后端开发人员也需要掌握这些了吗?” - 不用,现在可以利用 AI 或“HTML 布局设计器”根据设计工具生成的布局来生成模板。HTML 模板的逻辑和交互性现在都可以在服务器端定义。

结论

现在是时候好好思考一下你是否真的需要所有这些复杂的前端开发工具,以及是否应该继续专注于纯前端开发了。

我认为未来的前端开发人员需要向全栈方向发展,具备 60% 的前端开发能力和 40% 的后端开发能力才能保持竞争力。HTMX 只是一个开端,朝着 Next.js 或 Nuxt.js 等工具发展的趋势将会愈演愈烈。如果不能适应新的实现方式,类似于 Angular 的框架最终可能会走向衰落,尽管 Angular 生态系统中已经出现了基于 Analog.js 的原型项目。