说句实话，我后端现在已经看不懂前端了，太难了

[phpxiaowangzi]

看不懂惹，肿么办，最近在学 react，完全抓瞎。

一直用的 jquery，手动找位置然后对应 dom 操作，现在各种前端各种依赖，一会 route 一会 webpack 的 给爷整蒙了都

这问题其实只是为了吐槽下现在前端真的今非昔比了，很🐮🍺，本人也是后端渣渣一枚，并没有对前端任何不敬惹，只是感慨下，各位请理性看待问题嗷铁汁们。

by the way，禁止套娃

[qq292382270]

看了三个月的 layui,没看懂哈哈.. 是我太不用心了..

[wangcansun]

看不懂就看不懂，不懂 FP 就别乱说话。。。
用心去想想为啥看不懂，为啥别人那么写，为啥他能变得流行，而不是到处乱喷。。。。。
真是服了那些 diss redux 的人。。。

[shadeofgod]

来了来了，用 redux 难受的给你们推荐自己撸的一个轮子，自家后端同事都说 https://www.npmjs.com/package/reackt

[SquirrelMAN]

react redux 啥的都还行 CSS 真的好难（后端哭了

[xiangyuecn]

@bylh vue template+v-once 的史诗级 bug😂 /t/626123

[cruii]

css 才是头痛

[glacial]

Angular 一把梭

[hbolive]

作为后端 er 表示，css 得心应手毫无压力，但是 react 会被整蒙呢？难道是我机械制图学得好的缘故么？

[hyyou2010]

我最初也非常懵，下面这篇文章是我看到的一篇不错的演进解说，可能非常适合发懵的同学：
向恐龙解释现代 JavaScript： https://zhuanlan.zhihu.com/p/38209210
原文： https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70

不过还缺少 react+redux，这是上述之后的下一环。

[Osk]

周末遇到的：几个 helloworld 项目十几万个小文件，备份时慢到让我怀疑人生。。。

后悔没用 lvm...

[sheaned]

还行，面向文档编程

[gtexpanse]

@hyyou2010 #109 感谢，看了这个我终于明白前端这一堆东西的功能以及解决的问题了，此前尝试检索过很多次都没看到能把这些内容联系起来并且讲清楚的

[beyondex]

后端的话，要不是你试试 Angular

[zxcfka2004]

同感，app，后端开发都写过一些，学习 vue 最大的感觉是无法按照面向对象的思路去做，而且还得学习 element，css 啥的，东西特别多

[Ssskyl]

都是工具，最后还是为了程序效率和自己的开发效率

[cnuser002]

还好吧，现在前端就是拿浏览器为载体，拼一个客户端出来，跟后台交换数据，来实现功能，跟安卓 IOS 桌面开发区别很小了。其中 Vue / React 是两个大框架，用来造控件，提供回调接口，显示数据，配套的 Vuex，Redux 用来做数据载体，Router 提供在浏览器内换页面的方法。 至于 Webpack 这个东西，前端要引入的东西来源杂，配置多，所以用这个统一管理起来。

[jingcoco]

告诉你个坏消息。。。。现在入门门槛又高了点。。。。。主流的都开始用 typescript （ js 超集，做静态代码检查）了。。。。不过语法跟 c#类似。。。。。没用过 c#看着还挺郁闷。。。

[Chieh]

后端表示很想学习前端，但是发现并不容易

[charlie21]

@hyyou2010 这个文章很好，基本上一步步折腾过来的都明白，各种构建工具摆在那里，折腾的时候感觉就像拼乐高。但是 现在看来 “hello world 没写完 先拖家带口一大堆构建工具用上了” 不知道算是先进还是累赘

就像一台 mac OS 的电脑，必须要安装好各种小软件 （美其名曰 “调教” ） 才能用得顺手，那么只能说明它本身多么残疾。

[songsong]

现在的前端感觉已经比 5 年期的前端还要简单不了, 不管是 react 还是 vue , 各种脚手架, 现成的前端 UI 框架, antd, iview 只需要花个一两个天就能照葫芦画瓢了, 当然底层实现原理还是得慢慢才能搞懂, 不过就拿 react 的 antd 来说, 真的已经很简单了, 路由 , 组件, 状态管理, 数据流, model , 再也不需要 5 年前那有自己写 html , css , jq 写一大堆来实现功能, 现在都已经给你封装好现成的组件, 后端稍微花上点时间, 什么都能写了, 当然 我用 antd , ivew 都写了好几个项目了

[songsong]

现在的前端感觉已经比 5 年期的前端还要简单少, v2 的回复不能删的么...

[songsong]

还要简单不少, 总算打对了 :)

[userdhf]

v-query 和 j-eact 无敌。。。

[koalli]

这几年闲下来的时候试过 jquery、react、vue 等等，我只能说跟以前所见即所得的时代是完全不一样了...
以前在学校学 C#的时候做桌面应用各种拖控件的时代也是过去式了...
现在工具、脚手架各种完善，敲两行代码就可以创建好一个帮你组织好结构、最基本的样式的项目工程...
直接就可以开始往里面堆砌功能，各种第三方库也都是一行代码就可以导入，甚至还有 TypeScript 这种大厂出品的项目...

[JerryCha]

初步上手把 webpack 给扔了，直接引打包好的文件。

[agdhole]

@Osk #110 备份就不应该把下下来的包也一起备份了

[cominghome]

俺也一样，能用 vue-admin-template 勉强写后台页面，但么 typescript，webpack，babel 这些真是看着头都疼

[dingyaguang117]

学 vue 好很多

[Seanfuck]

已退休的 php 全栈表示宁愿手写 html+css+jq 也不想用那些花俏不稳重的东西

[wangyzj]

@cominghome 原来母们后端都考这个 vue-admin-template 活着

[Osk]

@agdhole 换硬盘，挪系统，直接复制了 / 。一直觉得 node_modules 很可怕，太太太太太多小文件了。

[railgun]

一个把脚本语言变成编译性语言的过程

[BXGo]

1.前端变得更复杂了
2.前端整体复杂度远不及后端

[ruanyu1]

@shadeofgod 前几天在 Github 搜到了你的项目，感觉很不错的👍
我自己也在维护一个类似的 lib： https://github.com/ruanyl/reapex，目前在公司内部推广开了，已经加入到新入职员工培训里面。已有的代码正在逐渐迁移，大家的反馈都很积极。

[luozic]

typescript 的类型系统，每次用 kotlin/Java 都想说我叉，scala 的 dotty 到底啥时候 release，c#啥时候有成熟的大规模中间层推广一下。 面向对象的时候才真正学会了啥叫数据表驱动编程，上帝之手打你儿子的 mvc 编程啥时候终结啊。

[Mutoo]

看到很多人被 oop 洗脑了，不知 functional programming 的精髓。

[laibin6]

日常 reactnative,redux 至今不会用，用的 minx,redux 有的太难理解了

[ahojcn]

还好吧，我一个准后端程序员，项目需要看了几天 Vue 就上手干了。

[dyllen]

我也看了几天 react，redux 我是看了几遍是真没怎么看懂。
redux 不是必须的用的，我还看到一句话：不知道 redux 是什么，用来干什么的人，没必要上 redux，增加复杂度。

[simo]

有其他语言基础（至少一种熟悉或者精通的程度），基本学几天就入门，上几个项目就熟手了：）
web 前端好多思想都是从后端过来的，不管是 js 语言本身的发展还是外围环境的发展，是个渐进的过程，没有经历这个过程，直接进入某个切面，肯定会有个习惯过程：）
我理解的，大部分 js 语言之外的服务程序，都是伴随着前端业务加重而弥补语言本身工程化设计不足而产生的。除了 UI 相关的（其他语言 UI 处理方面的不熟悉），基本每个工具都有对标的后端工具。

[geying]

搬个板凳看戏，想问下广大前端 coder 你们现在用的是啥框架，用的顺手么

[wly19960911]

@simo 构建工具方面肯定是全部语言都共享的，但是也不要求大家都懂怎么构建啊，难道后端那套构建就是自己去做的？插件自己来写的？...你懂了也要有能用的场景，上来就手写 maven 插件谁受得了呢...

UI 方面其实也是有革新的，至少 react 这套现在越走越顺，包括 flutter、android、iOS 那边现在都有这种声明式 UI 的 趋势或者苗头，写起来快多了。

[linZ]

@laibin6 没那么难理解的。。。redux 就相当于一个数据库，所有内容都与 redux 里的内容同步的。至于数据流什么的，action 那一部分忽略，直接 reducer 做 dispatch，然后 state 就更新，这样就好理解多了。。（记得忽略 action 那个东西，没吊用）

[linZ]

@avastms 你自己管理代码，别人还维护不维护了，统一用 redux，维护成本不是低好多

[Felldeadbird]

@qq292382270 我个人看法是，layui 比其他前端简单多了(vue 之类)。相对于以前开箱即用的前端框架(bootstrap)，多了一层原生 JS(JSON)传递绑定，来实现各种优雅的操作。 但带来了一个很麻烦的事情，我每一个操作，都需要传递 JS，不如我后端生成模板方便。 所以，后面我又回去 bootstrap + JQ 了

[frantic]

@hyy1995 #37 结合最近这一年利用 Vue 来写后台管理系统的经历来看，非常赞同你的说法。任何一个领域要深入都要花大量的时间和精力，不如聚焦在自己的原本领域，性价比最高。对自己的成长来看，成为一个 T 形人才是要比一个什么都会一点 什么都不精的庸才要好的多的多

[kitebear]

😳

[sgiyy]

@Seanfuck 写个表单多，逻辑复杂的项目试一试？

[winiex]

和十年前比较，甚至五年前比较，前端的开发难度其实很低了。十年前还需要考虑兼容 IE6，最强工具时 jQuery 的日子才难过，一个半透明效果和布局兼容 bug 就可以让你调到怀疑人生。

现代前端开发的主要难度在于入手要学习的概念和模式太多，reactive 编程、ReactJS/VueJS、flux/Redux/MobX、webpack/browsify、es6/typescript 等等，但一旦都了解掌握了就再也回不去了。

[H15018327040]

三天看完 Vue 全家桶，俩天看完 React，学习难度彼此彼此.

[chuhemiao]

刷了 dva+react+redux+antd 脑阔疼......

[mikulch]

@hyyou2010 麻烦问下 react+redux 的这个专栏还有吗对应的文章么。

[Ixizi]

vue3.0 也要开始 react 化了 可能是未来几年前端最终的解决方案

[micean]

看到 JS 的各种配置就烦
XML 你们嫌弃落后繁琐，可人家有 DTD，什么都规范好了，哪怕 spring 的 application.properties 都有 IDEA 的加强，直接跳转到相应的配置类查看，一目了然

[wangxiaoaer]

@Felldeadbird #145 你说的对，写 hello world 这种展示性为主的应用还是 jQuery 一把梭比较简单。

[maomaomao001]

redux 又不是唯一选择， 你可以试试 react + mobx 组合 ， 相当好用

[hyyou2010]

@mikulch

我可能写得不精确，应该只写 react，因为 redux 是常用，但非框架相关概念的关键。也就是说，下一步应该是理解为什么会冒出这些前端框架，react+vue+angular 这些，而 react 是理念的先行者，所以我更推荐通过 react 来理解框架的作用。

react 官网上有 helloworld 及 tutorial，而且都有中文版，前者尤其易读，我认为阅读这两篇文档可能就是理解为什么要有 react 框架的最好途径：
helloworld： https://zh-hans.reactjs.org/docs/hello-world.html 阅读 1.Hello World 到 12.React 哲学 即可。
turorial： https://zh-hans.reactjs.org/tutorial/tutorial.html#overview

理解的重点概念可能是：
1，小组件可以搭积木构成大组件，
2，使用 props/state 传递和管理数据。

这两点就是各种前端框架做的最核心的两件事。

[shadeofgod]

redux 的 action 是一个很重要的概念，要管理状态是很简单的，一个 {} 就可以了，但是应用复杂度一上去，这就是灾难了，有 action 这么一个概念存在，可以做到很方便的维护和 debug，让你明确 “when, where, why, and how your application's state changed”，理解这个目的，就很容易理解 redux 为什么要这样设计了。

但是 redux 有两个比较坑的点， 一个是把 action 这个概念暴露给了使用者，导致使用者自己要定义一堆的 action type，action creator，社区后来又出现了 https://redux-toolkit.js.org/ 这一类的工具来减少工作量。如果是从头开始写的话，你会觉得 redux 写起来真的太繁琐了，但是只维护的话，其实是非常轻松的，每一次交互操作触发了什么样的 action，携带了什么样的 payload，导致状态如何变化，都非常清晰。

第二个是 redux 的 reducer 是要求必须是同步和 pure 的，把最常需要处理的副作用完全不管，全部丢给了第三方的 middleware 来处理，各种各样的 middleware 层出不穷，又会额外引入非常多的概念。

[wangyzj]

@Ixizi 为什么一定要对象化
所有东西混编多闹心啊

[FragmentLs]

前端最烦的还是 webpack，有种你不挖个深坑跳进去你永远都不能好好用它的感觉...

虽然各种 boilerplate，但每次看到 error 时你总是怀疑是不是 webpack 的锅...

[wiluxy]

@Osk 备份的时候不用备份 node_modules 的，要用的时候 npm install 一下 依赖全回来了

[KuroNekoFan]

webpack 再繁琐能跟 android 的 gradle 比吗？我吐了

[fzz]

原来大家都有配置烦恼。

[method]

有没有发现，公司里整天抱怨这个那个的开发，就是那种半吊子? 牛逼人要么解决问题，要么避开问题，不会浪费精力在最没用的事情上-diss

[hoyixi]

其实都不难，那些工具，很多都是用来打包和“翻译”的，比如翻译 JSX，翻译 ES6+。

要说复杂倒是真的，而且 JS 语言特点+前端程序员写出来的库，说难听点，生态就是一个词：乱七八槽

[Perry]

这问题在 V 站不管问多少遍，吐槽抱怨 React webpack 的，一上来就梭 jQuery，大半都是懒得去学习新的事物。前端说简单人人都能操作 DOM，说难可以把 Fiber，Hooks 这些原理都拿出来（当然这里我说的难还不是最难的）。与其花时间打字去吐槽一个自己用不会或者懒得学深入的工具，不如放下手机电脑多眺望一下远方。

[lxk11153]

https://www.v2ex.com/t/634929?p=1#r_8430510
会使用 Vue，但只会写"browser-compatible js/html/css"，未接触过其它 (转换)引擎 / 中间件

[zzzmh]

同后端之前刚入行啃下来一本 js 权威指南，感觉 html css js jquery 都还行，结果这两年也是完全跟不上，目前只学了半吊子的 vue cli， 自己写项目还是更喜欢 bootstrap

[gaigechunfeng]

需要学习吗？
github 下载一个开源项目，做二开就出活了。还需要研究 webpack 吗？
啊哈哈哈哈哈

[shintendo]

@zzzmh 你这仿佛说吃饭不喜欢用筷子而喜欢用碗一样令人困惑……

[QuincyX]

本来就应该看不懂，就像前端本来就应该看不懂后端代码一样

[murmur]

@method 出现问题的时候说出来给大家作为参考也是一种美德，因为你没法保证大家都比你牛逼，总有和你一样的新人会踩到坑上
大牛的话你听一半忘一半就行，人牛逼了会无视一切问题（能自己解决），甚至把一些恶心人的东西当 feature 看待
但是绝大多数人做不到这点，都会多多少少遇到问题

[TangMonk]

说实话现在 SPA 过度了，到处都是 Vue, React。

想要组件化直接 Typescript + browserify 也可以啊，什么都来 React , Vue 完全没必要。

[murmur]

@TangMonk vue 的独立页面开发也很方便，cdn 拉一个 vue 的 minifiy 版，然后 new vue 开编就行

[zzzmh]

@shintendo 主要现在的前端一般是用例如 vue react angular，vue 再往下是 iview element，横向的还要懂点 ES5 和 ES6 据说已经出到 ES7 了，还有我至今都搞不懂是啥的 webpack。所以我那个年代的 jquery bootstrap，以及原生 js 代码，虽说目前并未过时，但已经和前沿一点的前端脱节了，我目前在自学 vue cli + element，想办法再跟上去一点

[zzzmh]

@TangMonk spa 用户体验好，但 seo 难做，我的一些网站就是整站 spa 模式，用户可以点哪 无刷新 就立马渲染完成 ，强迫症用起来会很爽，缺点最明显的一个就是百度收录起来费劲，只收一个 url，关键字搜索永远搜不到第一页

[TangMonk]

@zzzmh #176

我感觉只有工具性网站才有必要 SPA，比如阅读器，在线表格，在线绘图之类的工具。

一般的信息型的网站，博客，新闻，Admin 之类的，用户无所谓的。

[lclscofield]

@zzzmh 已经 ES10 了，虽然还只是草案...

[shintendo]

@TangMonk spa 的大头是后台管理系统

[Osk]

@wiluxy 懒得写例外。。。本来我以为没多少小文件的

[ofooo]

推荐学习微信小程序, 我之前也是看了下 vue 然后发现要看什么 webpack, nodejs, 各种依赖

然后看了下微信小程序, 新建一个项目立马就能看见结果, 非常适合对前端一点知识没有的新人~~~

然后再看看帮助文档, 基本上至少能看见自己写的界面了~~~

推荐一下这个学习路径~~~

[laibin6]

@linZ 好的，多谢，之前就是感觉 action 太麻烦了，看到 action 就不想用了

[alphardex]

个人认为，前端虽然在框架上百花齐放，但终究会过时（看看之前的 jQuery 就知道了）
只要基础牢固，甚至可以脱离框架，除非工作需要，那也是迫不得已
还有 CSS 真没有某些人想象中的那么“简单”： https://juejin.im/post/5e070cd9f265da33f8653f00

[rogwan]

@zzzmh 你这个整站 spa，用户第一次访问需要加载多大的 js 文件？平均多长时间可以显示出内容？

[EPr2hh6LADQWqRVH]

我来贴一下我在另外一个帖子里的回复。

我发现很多前端觉得现在自己走在函数式编程的康庄大道上，和其他 C 狗 Java 狗不一样，甚至和 jQuery 的前端老油条也不一样，完全属于特立独行，开天辟地，践行着一条没有前人走过的前端特色函数式编程道路，简直就是众人皆醉我独醒。

首先我要来指出一点，纯函数编程，永远也不可能成为主流。 为什么？ 因为人类的平均智商还不够！明白了吗。你以为 js 是一种先进的函数式语言吗，别井底之蛙了，出来看看吧，都别提 haskell，一个 scala 都是搬不走的山。

别他们研究人员抛出个大概念，博士们都说好，然后一帮一知半解都谈不上的人，就跟着无脑在下面顶礼膜拜。

而且函数式编程概念一点也不新，他们最早一辈就开拓出来了，js 诞生之初就是函数传来传去的，根本没法用来唬人，好吧。


其次我要说的是，函数式编程和面向对象编程并不冲突，当然它和命令式编程就更不冲突，这其实也是 Scala 那帮人一直在说的。
你会爬了之后，突然听说了有一种移动方式叫蹦，这是不是意味着你就不用掌握走路了？


还有就别再说什么，FP 才是最适合我们前端的 GUI 编程范式，我们这么多人摸着石头走过来的一定没有错，Vue 啦什么 React 啦 jsx 啦，这都是历史的选择，是历史选择了 redux 什么 Vuex 之流来领导我们前端，他们永远是走在时代前面的，不断引领最正确的道路。

要不你问一下各大 GUI 系统的老油条，什么 Windows，X 之流，为什么不用最适合 GUI 编程的 FP 语言？
你猜也是 XML 写 UI 的 Qt，是不是也把模板写代码里然后预编译一下？


你们啊，还是要提升自己的姿势水平啊！

[okampfer]

我是一个后端出身(Java & C#.NET)的前端。

我从 2013 年开始接触 jquery，2015 年开始学习 react。正值 ES2015 (ES6)横空出世，又学它，写好的代码无法直接由浏览器执行而需要转码(transpile)，于是又看 babel 的文档，转完码还是无法由浏览器执行，又去学习 webpack (幸好当时已经有了 create-react-app)，这些都学完了后才终于把 ES6 写的 hello world 在浏览器里跑起来！我记得当时就已经有人吐槽，摆弄前端工程化比写业务代码本身还复杂，吐槽的同时也感谢有 create-react-app 这种脚手架。然而实际使用当中我很快发现它无法满足所有需求，同时由于它不能修改 webpack 配置(是的，它是"0 配置"的，不过准确地说是"不能配置"地)，只能 eject 出来自己改，头痛。这些都还没完，很快我又发现在一个稍大的项目当中，react 组件之间共享状态相当不方便，又去学习 redux，理解 react 的响应式思想并没有费多大劲，但 redux 的 flux pattern 着实把我难住了。直到几年后我做第一个前端外包项目时，才真正熟悉它。

所以各位后端童鞋的吐槽我真是发自内心地理解。

抛开框架，我觉得前端工程化之所以这么复杂是因为长时间里没有统一的模块系统，以及浏览器对新标准支持的滞后性。ES6 时，终于有了 import/export，但无奈浏览器支持没跟上，长时间里无法 100%支持 ES6 及这个模块化标准。

1. 无法 100%支持 ES6，就需要转码。不仅是 ES6，之后的每一代新 ES 标准出来后，浏览器跟进都会滞后。
2. 不支持模块化标准，就需要第三方库来解决依赖关系(包括代码和静态资源)，比如 webpack，它不仅解决依赖关系还负责打包。

一言以蔽之，我们写的代码和浏览器能懂的代码之间有鸿沟。我们写的前端业务代码，必须借助其它工具处理之后，浏览器才能执行。这个处理过程需要配置，有时配置负担甚至会大过业务逻辑的复杂度，导致"配置地狱"。

2020 年了，主流浏览器(不包括 IE，IE 不是主流是毒瘤)已经 100%支持 ES6 了，包括 import/export 这个模块化标准。不过静态资源的模块化还得再等等，Web Components 标准里有了 CSS module 第一版(不是 https://github.com/css-modules/css-modules)，微软也在提把 svg 等图片资源模块化。相信近几年的将来，import 静态资源不需要 webpack/rollup 去做什么处理浏览器也能懂了。虽然没能完全填平鸿沟，但也好了不少。可以看看[这篇文章]( https://philipwalton.com/articles/using-native-javascript-modules-in-production-today/)。

再来说说代码框架。

我觉得 react 并不是很难，但是它的配套生态比较"散乱"(facebook 官方并未提出完整解决方案)，而 vue 则有官方全家桶(vue-router & vuex & vue-cli)更加完备。

- redux 样板代码太多，建议采用 dva/rematch 这些衍生框架； vuex 更简洁完备，selector 也有了，而 react 那边还需要 reselect 之类的 library。
- 模块化 CSS，react 没有官方解决方案； vue 则有<style scoped>。
- create-react-app 配置灵活性远不如 vue-cli。

所以，从后端转前端，我觉得 vue 是个比 react 更好的选择。不过我个人更喜欢 JSX 那种"一切皆为 JS"的写法。

前端已经过了刀耕火种的时代，相信未来的前端工程化会越来越简便。

若我以上的理解有误，还请各位前端大佬指正。

[way2create]

css 一直不太熟 js 新出的那一套也不太熟悉

[zzzmh]

@rogwan 站小，页面少，而且我没用主流框架，除了 vue，其他都尽量自己写，所以还好，第一版的 js 才 10k，现在估计得三五十 kb 吧 bz.zzzmh.cn 就是百度收录和排名都给安排的非常难受

[zzzmh]

@TangMonk 恩恩 肯定要按需求做技术选型 看菜吃饭

[Torpedo]

@avastms 如果用了这么简单的 redux 代码都不可读，你需要审视一下自己和同事的水平了

[TangMonk]

@shintendo #179 后天必须要用 SPA 吗？没这个必要吧。

[TangMonk]

@TangMonk #191 后天 -> 后台

[wanguorui123]

现代前端一时爽，后端开发火葬场

[aaronlam]

@okampfer 感觉写的我内心一个劲的感同身受。。

[charlie21]

其实不是 html 前端和服务器端，而是 客户端和服务器端。

只不过 AVR 客户端（ angular, vue, react.js ）的展示层是 html 和 DOM 而已。AVR 客户端 SDK 是三种对 html 的包装的思路各不相同，但都是从 对 html 的包装开始的，直接拉出独立的一层来 给出各种 API 。

你可以觉得这是 html 吗但已经是很脱胎换骨的了
但实际上它根本就是不同层面的东西，是 2 个东西，且在不同层面。否则怎么创造就业岗位

如果一个人看不出缺层，这是意识有问题，这其实是没法弄的。建议多去看看计算机网络 OSI 模型，体会分层思想、不同层面解决不同问题的思想、把一个问题先归到某个层面再去解决的思想