如何最简化化前端开发？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

本人十余年经验的后端程序员
我写后端，除了前一两年用了 MFC ，之后都不用框架。基本是组件库+自己搭。

最近一年开始写前端
首先开发了一个微信小程序，用的微信内置特征+weui 组件库。用那个数据绑定功能时，总感觉原应属于 js 的逻辑，侵入到了展示页面的 HTML 。
最近开发了一个单页网站，基于 bootstrap ，全用 bootstrap 样式类，除了一点设定宽度的内联 style ，没写自定义样式。
接下来需要把那个单页网站，升级为一个相对简单但五脏俱全的网站。
暂时考虑的是 react-bootstrap 。v 站上有说法，react 是组件库；也有说法，react 很复杂。
我这个年纪，在 HR 和胎毛未退的面试官眼里，肯定是年老学不动。但我自觉状态还行。所以不用太担心学习难度问题。更重要的是用起来简单，依赖低，高内聚低耦合，高度可复用。
希望大家就我这个情况，推荐你觉得合适的技术栈。

我个人的想法是：
1. 能不能不用 npm ？目前我还没开张用 npm 。我承认，一个项目复杂了，包管理就难免。但之前有几年，我的确没用包管理，后端服务也写得好好的。
2. 能不能一切皆组件？替换成本尽可能低，组件之间无冲突？

上面两条应该无法完全做到，但希望是尽可能接近。

第 1 条附言 · 25 天前

有几年，我用 go get 。因为 go 服务依赖少，开源库质量高
更早的几年，忘了怎么管理依赖的，那是都没有依赖管理的概念，应该属于几位朋友所说，自己手动管理依赖

27 条回复 • 2024-10-26 22:53:30 +08:00

est

27 天前

你这个症状比较适合 htmx

DOLLOR

27 天前

不想用 npm 就直接用无构建的 vue ，一个 script 文件就能干活，你要的组件化全都有。
https://cn.vuejs.org/guide/quick-start.html#using-vue-from-cdn

rabbbit

27 天前

https://lit.dev/

bzw875

27 天前 via iPhone

你确实学不动了，第一抱着落后 bootstrap 不放，现在是 tailwind ，第二拒绝学习先进的技术 npm 。

IvanLi127

26 天前

选什么技术栈得看产品要什么效果。最简单的不就是多页面网站，前端部分不会有多余的东西。何苦要搞单页面，服务端模板渲染满足不了业务需求么？

agdhole

26 天前

后端也不用包管理，这不是学不动了，这是完全没学过

gouflv

26 天前 via iPhone

“用起来简单，依赖低，高内聚低耦合，高度可复用”

真不建议学任何一个前端技术

gouflv

26 天前 via iPhone

我只有在大学的时候，才沉浸在完美主义中自 high ，看完帖子还真有点怀念

Nosub

26 天前 via iPhone

@bzw875 并不认同，使用 bootstrap 并不表示落后，工具是用来解决问题的，要平衡学习成本，现在样式库全部是抄袭的 bootstrap ，无非做了更加精细化的控制。

Nosub

26 天前 via iPhone

@bzw875 如果以同样的观点，现在用 promise 的全部是抱着落后的思想不放，应该使用 rxjs ，那你去看看学习 rxjs 成本有多高。

theprimone

26 天前

后端也不用包管理？直接看呆，除了语言直接提供的 API ，其他全都自己手搓？

renmu

26 天前 via Android

首先不要用 react 和 jsx

SuperMild

26 天前

我认为最关键的是，先决定：要不要使用 UI 库。

如果不用 UI 库也行，那一些类似 htmx, Mithril 之类的就够用了。
如果觉得还是要借助 UI 库，那就直接找 UI 库，找一个看得顺眼的，它采用什么技术，学就是了。

目的比手段更重要。

0o0O0o0O0o

26 天前 via iPhone

不敢想后端不用包管理全部自己手搓的服务得有多少漏洞

glcolof

26 天前

不用包管理是 C++程序员的典型习惯，因为 C++没有“官方”的包管理机制，也没有广泛使用的第三方包管理器。
Web 程序员们也不要误解，“不用包管理”不是说所有功能都自己写，而是手动管理第三方库，要用哪个包，手动下载、手动复制粘贴到依赖项目录下面。

wen20

26 天前

同感，页面布局不够直接，不如后端代码直接。
可能是因为后端代码可以有冗余，类中多几个用不到的属性也无所谓，无感。
页面布局每一项都是要控制什么条件下显示，什么条件下不显示，有嵌套情况下，看着一坨代码就不舒服。

vue 比小程序友好点，模版中可以直接调用 js 函数。

回到问题
1 ，npm 必须用。
2 ，目前没碰到一切皆组件。组件之间数据传递，事件响应等逻辑可能会导致一切皆组件的代码更复杂。

Danswerme

26 天前 via Android

@glcolof 那如果开源一个 C++ 项目到 Github 上，所引入的第三方库也是直接放到依赖项目录里，随着项目代码一起用 Git 直接管理吗？

另外包管理器之前好像看到过一个叫 vcpkg 的工具，这个工具在 C++ 项目中用的多吗？

june4

26 天前

为了一开始懒这几天学习成本不用包管理手动下载、不用 ts/lint 工具肉眼检查、不用现代前端框架用原生 js/jquery,这么怕搞技术为何要从事这行。
你说的开发单页网站、组件化，你固守的 bootstrap/jquery 时代恰恰是最不方便搞这个。

glcolof

26 天前

@Danswerme 随意，行业内没有相关的惯例，看作者的个人喜好。
vcpkg 在 C++项目用得应该也不多，网上没什么人讨论，身边也没有见到有人用，可能 C++用户本身就没有使用包管理器的习惯吧，毕竟 C++用户连内存都得手动管理，何况工作量更少的包管理呢？

bojackhorseman

26 天前 via iPhone

deno2.0 刚发布，推荐你看看

zhennann

26 天前

建议使用[Zova]( https://github.com/cabloy/zova)框架。Zova 提供的模块化机制，让业务拆分更容易，便于开发高内聚低耦合的系统。Zova 框架同时结合了 Vue/React/Angular 的优点，并规避他们的缺点，让我们的开发体验更加优雅，并且显著减轻心智负担。

1. Vue：Zova 仍然使用 Vue3 便利的响应式系统，但是定义响应式变量就像原生变量一样，不需要使用 ref/reactive ，自然也不需要 ref.value 。
2. React：Zova 在一个 Render Class 中通过 tsx 语法来书写渲染逻辑，不仅可以与 TS 类型系统完美契合，也可以支持渲染代码的拆分，即便是面对复杂业务也可以保持代码的舒展与优雅。在 Zova 中没有类似 React 的众多 hook api ，大量减轻心智负担。
3. Angular：在实际开发当中，会遇到三个场景的状态共享：组件内部状态共享、组件之间状态共享、全局状态共享。在传统的 Vue3 当中，分别采用不同的机制来实现，而在 Zova 中只需要采用统一的 IOC 容器机制即可。Zova 提供的 IOC 容器，摒弃了 Angular 繁琐的设计，概念更加清晰，功能更加强大。