2016 年做前端开发是什么体验?混乱+开倒车,这是我的体验

2016-10-18 09:16:02 +08:00
 murmur
有人说,你有什么资格发表这种高谈阔论,实际上是这样的,我在看 lol 比赛直播的时候,有个很有名的主播说过,打到 2400 以上的都去做职业玩家了, 1800-的还在挣扎,只有 2000 徘徊的才出来做主播,的却是这样,如果你是一个能力很强的程序员,你可以驾驭任何新技术、框架,那么你的牛逼可能掩盖一些真正的问题,但是有些人偏偏把问题说成 feature 。

很多前端开发以鄙视 jQuery 为荣,以 jq-free 作为吹资,这是没问题的,因为如果你的目标是 IE9+,或者移动端, MVVM 框架可以让你不用 jq 。但是,我们来考虑 2 点,为什么强迫用户升级 IE8 到 chrome ? win7 是如此优秀的操作系统,网吧的电脑,甚至很多办公电脑都是 xp ,大量的网站兼容了 IE8 ,用户就是上帝,我们有资格要求上帝无缘无故升级浏览器么?很多程序员鄙视 360 ,但是你们真应该好好感谢 360 , 360 用一种比较温和的方式让大量用户升级了有 chrome 内核的浏览器,相比之下 YY 简直是强奸用户一样,在后台做不可告人的勾当。

那么接下来说 JQ 优秀在何处, JQ 不是框架胜似框架,而且我希望每个产品经理都学习一下 JQ , JQ 的使用量绝对不是偶然,首先 JQ 的 api 设计非常优秀(用$代替所有选择器是太牛逼的设计,当然这里也要提一下underscore的下划线),这个比起开倒车的 fetch 不知道高到那里去,我也用过 axios , axios 在 get 和 post 下用一个用 params 一个用 data ,这是语义要求还是标准要求的呢?我不想管语义,因为工具类的封装就是要屏蔽掉语义的差异和不方便,做到以人为本。很多人批判 JQ 一个选择器干太多事,但是如果 jq 把$换成 jqDOM 、 jqString 、 jqSelector ,那么还会有多少人用一个框架。

兼容性就不提了, jq2 完美兼容 jq1 ,只是舍弃了一些浏览器。值得产品经理学习的是, jq 专注解决程序员遇到的 dom 操作问题,顺便附送了几乎完美的 ajax 封装和一些工具类,该有的都有了,而且几乎没有任何多余的功能。所以,在移动端没发力之前,很多前端都是 jq+模板搞定一切。所以说,想把 jq 批判一番,搞个大新闻?

接下来,让我们说一下 react ,我最近也跳了这个坑,没办法, ng2 和 vue 在我需要的一个第三方核心组件上表现的太差,甚至 vue 的这个组件 demo 都无法打开, star 也被几十倍的碾压。但是这不代表 react 没有问题,有很多人说 react 牛就牛在 jsx 上,是的,我最近在写, jsx 的却很灵活,内嵌函数的写法可以让你做到几乎无所不能。但是,我想反过来问你,你这辈子用过的模板,无论 js 、 java 、 python ,谁家的模板不支持 if 和 for ,这个时候有人跳出来教育我 jsx 不是模板,模板的定义太简单了,一个字符串,支持${}这样的变量替换,这就是模板, jsx 完全满足这个条件。当然,群众的需求总有人满足, npm 上有大量的 if 和 for 实现可以用。

另外一点我想说的是 redux 或者 flux ,这种设计,为了弥补 react 本身单向传递数据的不足(你说是 feature 我也没办法),我认为单向实际上也是一种倒车,因为无论以前 ng1 ,现在 ng2 ,国产 vue 还有支持 ie6 的 avalon 都是双绑支持,偏偏到了 react 这里就是单向绑定。我第一眼看到 redux ,这不就是一个状态机么,再想想,回想起本科学过的编译原理和形式语言与自动机这些课程,是的,状态机不简单,尤其是把一个大系统的状态清晰的梳理起来,不是一件容易的事,对团队要求很高,因此我在项目选型时,果断拒绝了 redux 使用了以前大家熟悉的事件模型。

这里顺便有一个我遇到的问题,一个选项卡组件,要求很简单(1)实现基本的选项卡功能,即点击选项卡高亮标签并切换对应选项卡(2)标签的样式和 html 由用户自行输入,不限制是什么,只要高亮标签的 bg-color 就够了。(3)选项卡标签和内容不一定在 dom 上有相邻或者嵌套关系,这点可选,这个需求用 jq 甚至源生应该是手写级别吧,那么大家试试 reactive 的开发需要多少代码呢?

接下来说说混合开发,这个东西,明显看出是专门为了企业开发而设计,当然对于那种创业多久就倒闭或者拿到钱转 native 的就不说了。企业开发,实现就可以了,不要求多炫酷的界面和流畅性,内网对网速不敏感,内部应用没人闲的去看你代码或者找你漏洞,这完美的避开的混合开发的弱点。没办法, js 的特性,无论混淆成什么样都裸的跟不穿底裤一样,这绝对比不上 lua 这种除了传统混淆还可以魔改解析器的脚本语言。那么,现在的微信小应用,除了传统 H5 的问题之外,你的入口、用户,整条命都落在别人手里,你甘心么?也许,这样可以净化一下现在的 app 乱象,留下用户真正需要的功能,也就是大公司、大企业的那些“公益”应用,比如查快递、挂号、查化验单,这些无人竞争,抄了都没用的东西,才是完美试用小应用的东西。

最近出了 rn ,又出了阿里的 weex ,这个跟 cordova (前段时间搞cordova的项目升级,真的跟名字一样,写作cordova读做坑多挖)系的框架不一样, cordova 上层无论什么,底层都有大量的 native 插件够你适配源生功能,用 rn 的还好毕竟上了 react 的船的太多了,有人解决 native 层的问题,然而对于新的 native 框架,你确认自己搞的定么。

前端人喜欢造轮子,前几天找一个 url param 拼接的框架,安装完发其他应用居然也依赖了 2 个 url param ,长的还不一样。仔细一翻,还有大量的 isEmail , isURL 这样的依赖,数一数一个项目刚开始做就 600 多个 node modules (当然包括了 dev 依存),如果放到 java 里,这简直是不可思议,因为 apache utils 一套就提供了不知道多少的功能。既然提到了 apache ,我要说一下 java ,很多人说前端风云大变,后端跟死水一样,那我到想问问,这几年无论 taobao 也好,还是 12306 ,都是前端优化的结果,后端只要放那自生自灭就能解决大并发问题了?

如果是一个 java 项目选型, spring 作为底层一定全票通过,接下来可能是 mybatis 和 hibernate 对决,这个根据项目特点也是几乎唯一的选择,这些定了后面就没什么可争论的了。但是前端选型,我估计 react 、 vue 、 ng 就能打一天。因此, java 这种十年不变的风格,沉淀了不知道多少的精髓,除了虚拟机的调优外,还有大量的跑车,这可不是轮子,包括演化了多少代的 lucene (现在都用 elasticsearch 了),还有一系列 hadoop 、 spark 这些数据挖掘框架,其余的什么工作流、数据总线都不好意思说了。但是现在前端跳出来了,他们要用 js 横扫一切,我想问一下那么多 java 、 php 、 python 、 c++、 erlang 、 golang 工程师会坐以待毙么?

不变应万变是个好事, js 当初草草开场,现在又飞速进化到 ecma2015 ,但是底层运行的还是丑陋的 ecma3 (我不拒绝上帝的要求,上帝给我钱我就做 IE8 兼容),相比之下多少人在用 java1.6 , python2.7 ,我相信,语言、语法糖本身绝对不是首选,因为如果大家真喜欢语法糖,那么你们应该拥护 c#才对,唯一的解释就是搞 js 的人没事自己闲的革自己的命。习惯是个好事,如果稳定,又能满足要求的话,你看的电视多少年都是方形的,自行车多少年都是两个圆轮子的,现在 js 世界是个什么样,有一个很牛逼的自行车,炫酷跑的又快,唯一的问题是,没有握把,握把需要你自己实现。。

刚需和自己乱革命是两回事,什么是真正解决刚需的,一个是 jq ,一个我认为是大规模推开 mvvm 的 ng1 ,可惜这两个都被你们鄙视了,然后 google 草草开出了 ng2 的车,又发现自己在前端内置一个超牛逼的 complier 反倒加重了系统负担,直到前几天正式发布才有了 aot 。然后又是react这种把html混写到js里。另一方面,我们看架构工具,glup和grunt已经是历史,webpack去年兴起今年就有人要革他的命,明年又是什么打包工具呢?grunt没有错,他的设计就是批处理,压缩、混淆、整合都能做到,webpack也是bundle更方便加热调试,那么新的架构工具又有什么feature能让用户放弃之前的东西,重新再造一次海量的轮子呢?

这样的乱象何时能了?不知道。
29942 次点击
所在节点    前端开发
173 条回复
kisnows
2016-10-18 15:03:20 +08:00
@murmur "一个 react bundle 没做什么东西 minify 完了就 800 多 k ,嗯这真的不冗余,"
别的不说,针对这句,你可能是打包的方法有问题。
我们项目这边基于 React 的一整套框架搭建下来,打包后核心文件就 300kb ,这包括十几个依赖的第三个包。
murmur
2016-10-18 15:16:18 +08:00
@kisnows 感谢提醒,检查了一下 react 自己的 minify ,然后看了一下依存,不知道哪个模块依赖了 moment ,然后 moment 的 local 就 300 多 k 未压缩前,准备先干掉 moment 的本地化再说
另外 800 多有点夸张,真实是设置了 prod 环境是 688k
yolio2003
2016-10-18 15:22:36 +08:00
看这么多评论就知道,确实混乱,不过还是觉得会有更好的事情发生
Nicksxs
2016-10-18 15:23:19 +08:00
赞观点
kisnows
2016-10-18 15:29:59 +08:00
我一开始也是没设置 prod 模式,导致打包出来的代码很多。
junp
2016-10-18 15:39:23 +08:00
在这贴能招到前端吗?深圳
jin5354
2016-10-18 15:41:48 +08:00
@murmur webpack 的打包体积优化是个细致活,优化前后差距巨大,我最近一直在鼓捣这个。
其实 vue2 全家桶只需 35k , react 全家桶使用 react-lite 做替换后大概也就在 50K 以下,不算大了。( react 这个没亲测过,看同事使用了 react-lite )。

重点是一定要做好按需加载!
仔细梳理依赖,用不到的删去,非必需的第三方库做好懒加载,
很多第三方库相当大, moment.js 就 30K ,图表库 chart.js 30 多 K , Echarts 有 50K 左右,全都不做懒加载体积会炸

一般的中小型项目优化完之后首屏的 js 都能压到 200k 以内

以上说的体积都是 min+gzip 后的
Infernalzero
2016-10-18 16:01:32 +08:00
LZ 写的很客观,然而并没有什么卵用,不用看回帖也知道肯定会被喷,毕竟贵站有不少用个 git 都能产生优越感的人,前端技术方面更不用说了
topgrd
2016-10-18 16:21:11 +08:00
不同的框架和工具都是为了解决不同问题而存在的,前端目前各种轮子都是为了解决遇到的实际问题的,在不同的场景,可能某些东西解决不了,而用别的就非常简单,如果楼主直接抛弃场景谈,是没道理的。
tonghuashuai
2016-10-18 17:54:53 +08:00
lz 的标题就是我对前段界的看法。

现有的工具完全可以相对完美的解决现有的需求为什么还要去造轮子。

每次看到我引入的 n 多个 js 文件就对这个虚假繁荣的前端环境表示无奈,甚至有人拿 js 去写 os ,我想说:踏踏实实做好本职就好了。
tonghuashuai
2016-10-18 17:55:29 +08:00
估计我上边的留言要被骂
fundon
2016-10-18 18:00:20 +08:00
工程化 通用化 易维护 易迭代 易协同 这才是实际意义!
fundon
2016-10-18 18:04:35 +08:00
@tonghuashuai “不要给小朋友买新衣服了,今年不是买了吗?”
Xrong
2016-10-18 18:12:58 +08:00
一直觉得前端太乱,不敢碰。。。
jiyinyiyong
2016-10-18 18:38:17 +08:00
昨天也在微博吐槽, React 是个好东西, Facebook 出的 React 全家桶某种程度上也算是好东西, 但是这个事情并不简单, Facebook 直接把他们公司里用的东西扔出来给大家用, 然后让大家帮忙找 bug. 跟 Google 比起来真的是不靠谱.

React 虽然是好东西, 但是绑定了很多内部的需求. 服务端渲染早先的 React 大会上就讲了一遍, 作者提交了 PR, 结果到现在 Facebook 官方用不到, 不合并. JSX 的问题, 之前很多人都说, CoffeeScript 直接用不就好了, 干啥子搞一套 JSX, 还升级 2.0 , Facebook 说自己用 XHP 很顺手啊, 而且内部代码用 ES6, 编译器一次能解决问题, 插个 JSX 小意思, 现在大家都被迫学习 Babel 怎么用.

GraphQL 也是, 你说好不好, 当然好, 解决了不少 Restful API 搞不定的问题, 但是我当时在简聊的场景, 我需要一个能解决掉服务端推送的方案啊, GraphQL 并不能. 包括 Redux, 和 Flux 的事情, 我们基于简聊都没法做平滑迁移, 后来烦了干脆自己写了一套, 也没比 Redux 差很多.

现在的前端, 感觉就是几个大厂看 js 扶不起来, 干脆自己开始搞, 然后干脆一搞搞个一整套. 牛逼不牛逼, 当然牛逼, 但是中间挖出来的坑也是超多. 而且麻烦的事情是作为小厂我们很难跟他们说, 我们的情况怎么怎么, 你们怎么怎么我们就怎么怎么了, 所以你们不能怎么怎么... 他们还是要以公司自身的发展为主, 其次考虑社区.

确实是混战. 而且个人开发者以及小公司搞不好就成了炮灰. 个人理解这样.
Elricpp
2016-10-18 19:36:39 +08:00
确实是混战,但是如果这一整套东西最终能够达成一个共识,将会是极好的。
比如说未来浏览器支持模块语法, 支持 ES6 ,现在这一整套 webpack , babel 的东西将会逐渐的退出。如果 GraphQL 或者 Redux , Vuex 单项数据流 这一些新的社区实践能够最终内置到浏览器里面,不管是开发体验或者是用户体验都会得到一个大的提升。还有 webAssembly 这种颠覆性的性能提升的东西。
现在前端的混战确实各个大厂想要一统江湖,加上社区对未来的期望推动出来的,小公司或者个人开发者也只能够随波逐流啦,当炮灰总比被时代抛弃好吧?
zewenzhang
2016-10-18 20:01:34 +08:00
@jin5354 你好,我也在使用 echarts ,体积一直比较大,方便指教一下您是怎么做到 50K 左右的吗?我主要用到了 pie, line, bar 三种。谢谢
zhuangzhuang1988
2016-10-18 21:02:55 +08:00
没提到 rxjs 不开心。。
rockzhou8
2016-10-19 08:53:54 +08:00
昨天才开始看 Angular2 的文档...一脸懵逼:这特么的还能这么玩?!
SilentDepth
2016-10-19 10:00:12 +08:00
楼主的观点中肯,但表述有些偏激。想吐槽但不知从哪儿吐起。

看起来楼主在用后端的视角来看前端的发展。落后自然要加速进步。想必楼主对天朝这些年的发展也有不少意见。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/313482

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX