如何最简化化前端开发？

[gosky]

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

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

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

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

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

[est]

你这个症状比较适合 htmx

[DOLLOR]

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

[rabbbit]

https://lit.dev/

[bzw875]

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

[IvanLi127]

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

[agdhole]

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

[gouflv]

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

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

[gouflv]

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

[Nosub]

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

[Nosub]

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

[theprimone]

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

[renmu]

首先不要用 react 和 jsx

[SuperMild]

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

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

目的比手段更重要。

[0o0O0o0O0o]

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

[glcolof]

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

[wen20]

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

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

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

[Danswerme]

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

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

[june4]

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

[glcolof]

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

[bojackhorseman]

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

[zhennann]

建议使用[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 繁琐的设计，概念更加清晰，功能更加强大。

[codek1986]

前两三年也是 jquery ，bootstrap 这些，js 基础还行。今年学了下 vue,真好用，后来又改了下自己的后台代码生成器一键生成前端代码~~~省事

[gosky]

@rabbbit lit 貌似一个很不错的解决方案
朋友推荐 lit 搭配什么 css 组件库？

[gosky]

@codek1986 所以现在是 bootstrap+vue ？

[monokuma88]

一把梭：第一步：h5App/小程序用 uniapp 、spa 用 vue/react+element/antd 、纯页面直接写原生。第二步：交给 ai/搜索引擎