我们需要什么样的帮助，由“前端收徒”想到的

[ianva]

看了前端收徒的帖子挺有感触的是，大多数的指导和培训都只是帮助初学者入门，但大部分的有经验的从业者也是需要一些帮助，我们经常会抱怨公司的某个 legacy 项目烂如💩山，那💩山是怎么来的？有很多朋友面对这个情况励志重构，但限于眼界和经验，重构出的结果在几次需求的变更之后又成为了变成了新的山峰。

我接触过很多初级的开发者，他们可能都会使用库和框架，都能实现功能，但问题是他们代码可能运行不了两周就得重写，我也面试过一些前端的 leader，确实有丰富的经验，了解过从上古到现代的各种框架，如数家珍，但真让他去做一个项目，都无法完成基本的建模，数据和状态甚至都无法分辨。

作为开发，其实大量的时间都是面对业务，新技术只是改善了开发的体验，但并没有提升项目的质量，和开发人员的素养。我们真正需要的是抽象的能力，比如 SICP 中提到的的，构造过程抽象，构造数据现象，模块化、对象和状态，元语言抽象，这是我们编程思考的基础。

前端的开发可能是这方面确实最大的一个群体，很多人没想到过一设计好一个 view model，能够让项目的维护性稳定有多大的提升。很多人都在讨论 react hooks 如此好用，但从没考虑过如何使用它剥离业务。很多人没有数据分层的概念，以至于无法在维护的时候理清逻辑等等。

我们如何能改善这些，我觉得我们不止是需要培训，我们需要在做具体业务的时候有人能够指导，所以 code review 应该是不错的方式。

有想法做一个这方面的业务实践，本人做过大厂的架构，也在创业公司和外企做过 leader，还是有一些实践，但我觉得如果有经验的开发者都能去做这样的事情我们面对的💩山也回越来越少。

[no1xsyzy]

@KuroNekoFan 正确的数据分层，一次都不用 jump （动态语言和类型系统羸弱的除外

[KuroNekoFan]

@no1xsyzy 我质疑数据分层可能有点笼统，不知道贴主是不是专职前端开发，但是在我看来前端开发如果从“数据”（后端意义上的数据模型）着手，有可能会比较别扭，而从交互 /功能着手，才会比较顺畅，另外我说 jump 很多的问题，具体来说是，一个状态改变，可能是在离用到这个状态的代码很远的地方开始，由一条很长的链路触发的，不过仔细想了想，这种问题也很难说跟“数据分层”有什么关联，毕竟“数据分层”也挺笼统的，另外在 react hooks 流行之后，react-redux 那套数据分层应该是不再被视做银弹了

[ianva]

多年专职前端，hooks 分层业务很好

[ianva]

@KuroNekoFan 交互也需要分层的，对前端来说交互就是业务，在交互复杂的 container，更是要把不同的交互方式拆分出来，数据层和 container 的对接也可以用 hooks 隔离出来。
当必然交互层的分隔甚至有多种方式，比如把组件抽成无状态的组件和通过 context 拆出的纯状态操作，等等，这都可以让当前的复杂的容器交互变的更简单

[ianva]

另外 react 这样的库让数据驱动变的更自然和容易，在我们之前使用 jQuery, YUI, 的时候我们做这件事情是需要成本本经验的，即便在那个时候你不去从数据驱动的方式入手，那代码是更难以维护的，也就是说为什么前端的老项目维护起来如此困难，能够做到这些的开发太少了

[KuroNekoFan]

@ianva 怎么说呢，还是名词定义问题吧，你这层回复我就觉得很对…个人认为 ui 编程本质就不是一个纯数据问题，过于强调数据就比较难搞

[ianva]

UI 在目前的本质就是数据对视图的映射，所以这就是我说的，大部分的前端欠缺建模的意识的，但不自知，因为缺少尝试，如果走 BFF，GraphQL, 可能会更容易理解

[ianva]

@ianva 想了下你的疑惑，我大概可以了解到可能存在的问题，
“具体来说是，一个状态改变，可能是在离用到这个状态的代码很远的地方开始，由一条很长的链路触发的”
状态为什么要和前端的 view model 有关系，当前的 view model 应该是从视图着手去描述你的业务，这是和交互无关，和状态无关的东西，这层 model 是要将后端的数据映射过来的，这层决定着项目的业务逻辑和稳定，后端接口的变化也在这一层隔离出来，所有的 container 的数据都应该基于这个模型

[charlie21]

要求从数据着手时能从数据着手
要求从功能着手时能从功能着手
前提是把活儿推给一个对当前工程足够熟悉（建立 profile ）的人 ...
btw 前端的活儿有多少是要 “接手” 的？
一次性消费品的气息很重的
对于这种东西，你完全可以自己写个 service 重新组装数据阿
把💩山堆得方方正正边界感十足就可以了，方便打包。这已经是银弹了阿

[no1xsyzy]

@KuroNekoFan 按楼主的 SICP 的话，数据分层其实就是指 bottom-up 的架构形式（相对地，从交互或者功能着手叫做 top-down ）
状态的改变不应当跨层。比如说你有一个底层的 IndexedDB API，你在这基础上搭建了一个 PouchDB，那你不再应该采用 idb 去操作这些数据。在这之上，你构造了一个（经典 demo ） to-do，你也不应当让用户去操作 PouchDB 更别说 idb 了。
hooks 倒可以用来做数据分层（只是一般用来描述局部状态，不需要很多分层），反而 redux 似乎根本没有做数据分层，倒是把所有数据搅作一团任人随意乱窜。BTW，在软件工程领域「银弹」一词的隐喻是「这东西看上去很好，但没有（或者不能）解决实际问题」，更深地隐喻是「这个问题本身无解，所有提出的解基本上非坏即蠢」——类似那个段子：在一个没有猫的黑屋子里找一只黑猫，并大喊「我找到了」。

话说，目前采用这种封装思维的似乎就是 Svelte

[xujinkai]

这个是真的难，既需要丰富的经验，也需要不断的思考。
貌似也没什么书籍会讨论这么具体，前一阵子刚看完 unix 编程艺术，很有收获，但还是很宽泛。
还有什么不错的书目，求楼下推荐

[ianva]

@charlie21 前端除了营销页，几乎大部分项目都是有很长的周期的，现在公司的所做的所有项目都是要长期维护的，还包括祖传几代的 AngularJS 项目

[ianva]

@xujinkai 相关书还 是很多的，unix 编程艺术其实主要关注的也是设计非常的重要，面向 Unix 命令行的工具的交互方式的探讨和设计。

[windyCity1]

现在公司每次提测基本都要 codeReview，我觉得提升很大，大佬手把手教优化，但是有一些深度优化没办法短时间讲清楚的就比较麻烦了。

抽象化的学习，感觉很难。好像一直没找到什么特别好的学习途径。

[ianva]

@windyCity1 是的确实需要经验的积累，但这方面的分享其实是最匮乏的，github 虽然能够分享好代码，库，框架，但没办法分享这些设计的方法和抽象的方法

[DiamondYuan]

比如去给顶级前端项目提交 MR，大牛会免费帮你 CR，举几个我提交过的 vs code，Ant Design 。


特别推荐 vs code，可以了解超大型跨端项目是如何组织代码的。

[ianva]

@DiamondYuan 能给大型的项目提交 MR 也应该有不错的能力了

[yunyuyuan]

还是得多思考

[Loserzhu]

确实，深感自己抽象能力不够。😢😢
手上的项目也蛮大的。每次开发完提 PR，reviewer 总能找到一堆问题。想试着想通过算法练习提高自己，不知道是自己太功利还是刷题太少。400 题下去，感觉提升很小。。

[JoStar]

@Loserzhu 屎山的问题我觉得不是刷算法题能解决的。

个人愚见：可以阅读下《代码大全》，然后 review 一下开源社区流行库的代码，不断总结。