武汉Web前端开发工程化实践观察与感受

这是一篇在博文“前端工程——基础篇”中的回复。如下是回复正文:

我在武汉,这里做Web开发不少企业依照几乎是10年前的方式进行:操作DOM节点、纯服务器端渲染、form表单提交、表情拽拽的把AJAX挂在嘴边说……这正是我身边每天发生的,而我所在的单位推进前端工程化则遇到很多奇怪因素的阻碍。

我最近待的2家企业,一个做自有电商平台,在使用react+redux+webpack短短一个季度后,退回了jQuery+纯服务器端模板引擎时代,原因有两个:新上任领导不会、员工培训跟不上(这两个原因好像是同一个事)。

另外一家单位外包做电商平台二次开发,据称为国内电商系统市场占有率第一,搞了近半年后我已经失望的提辞职。这一回的原因除了前家企业相同的两个原因外,还有个更有意思的:服务器端开发人员怕前端抢了他们的地盘。我最终选择离开是不愿再同整个团队通宵鏖战处理那些静态资源依赖关系,反复迭代内联样式直到! important都用上,最后将糟糕的产品连骗带哄交给客户。

有天周一旁边同事抱怨修改别人的样式和模板好难受,第二天我问他有没有想过如何改变这个问题,他沉默了。

这些事情每天在我眼前重复发生,实在忍受不了,心痛又无语的曾提交一个commit:

d8e4109 Berlin Chan on 16/5/24 at 下午6:07
我已经经过了绝望而变的无可奈何,想要呐喊却又无言。大家都很努力依次处理bug,就像对待每件日常平凡无奇的工作,他们并不着急避免这种事,而是冷静在处理问题中留下更多问题,这种冷静让我感到绝望。
In 5 branches: HEAD, master, develop, origin/master, origin/develop

阮一峰博客里面看到一句话,类似是这样:

在中国你不想骗人不想做坏事,那你就只能去编码了

我是从传统媒体转行做前端开发,之所以转行正是对这句话的充分实践。可是没想到在我这个Web开发圈子的人,让我再同样的失望一回。

近期参加的一些面试,偶尔会碰到有的企业意识到要做前后端分离与前端工程化,而已经深入实践的多为小型创业团队。曾经面试一创业公司,对方问我有没有写过“单元测试”“自动化测试”。后来我没去这家企业,现在想来很后悔。因为如果一个团队会用上这些工具,可见他们对代码质量(至少已经意识到)是如何的重视。

《黑客与画家》前言里面的一个例子:旅游网站Orbitz成功打入竞争激烈的网络订票市场,主要原因就是使用了更好的编程语言。引用这个例子不为说明语言的孰优孰虐,而是说技术选型的结果会直接影响一家企业的兴衰。

小型创业团队要在同一市场与人力财力更强大的企业竞争,技术方案是少有的可以成为优势的因素,当然何其珍贵了!

刚才我的愚蠢而善良的领导召集前后端开发人员开会,总结上一个项目的得出以下经验:

  1. PHP模版中的<{header}>中的内容一定是要公用的静态资源才能放进去
  2. 切图定义样式类只用class属性,后台开发人员只用id属性
  3. JS脚本资源引用,要按照切图静态页的顺序放进去
  4. 表单提交不要用button标签,以防有的服务器端开发人员不知道如何屏蔽submit事件
  5. 所有的JS交互直接写在HTML页中,方便服务器端开发人员定位交互代码

然后演示了服务器端开发人员,将我已经用vue写好前端渲染的页面,重新用JS渲染出来的页面后,获得了在座一致认同——下面就这么搞!服务器端开发人员玩转前端的自豪感难以掩藏挂在脸上(包括我那愚善的领导),殊不知将整个团队拖入泥潭。而我这个习得性无助的人只能淡然视之。在一个封闭的圈子里面,经验和知识是如此的难以取得。若我们失败了,一定是败给了人性的弱点。

若武汉是个稍微封闭地方,但从我面试过一些求职者来看,也许这个范围更为广泛(或是我单位很容易吸引初级开发者)。有2位从北京、上海回来的前端开发,从业4年有余,从交流中得知他们依然看到前端是做一些切图的工作。后来我跟一位优秀的实习生讨论,觉得这是一件多么可怕的事情:呆在一个地方,被蒙蔽了视野。做一个岗位,应当与整个行业同步,而不仅限于跟圈子站在一起。

互联网是如此开放的环境,又有那么多优秀而慷慨的乐于人分享他们的智慧。这是我最喜欢互联网的原因之一,这让“身在小镇,胸怀世界”成为可能,并且能始终与“巨人”们站在一起。做互联网的人是最有资源利用好这一点的人群。

我专职做前端开发的时间不长,短短1年,但从2000年初的个人站长热就开始接触网页三剑客,持续关注Web开发也有十余年时间。当我在报社、门户网站做过记者、摄影师、编辑后,又回到了Web开发领域,看到网页三剑客已衰落至死;看到ES6标准使Javascript拥有更多高级语言的特性;看到NodeJS拓展Javascript程序员的空间;看到npm成为前端开发的大宝库;看到React、Angular这些优秀的JS框架;看到Sass将老旧的CSS焕发新生;看到webpack将Web应用打包的干净优雅……最初看到这些事物的时候,每天都有新东西思考、探索和研究,就如同看到“一个全新的世界”,这也是为什么我喜欢前端开发。

而此时当我还看到有人在操作DOM节点,找“父亲的兄弟的儿子”时,心中着急如猫抓。

上个月我在infoQ的微信公众号看到一篇文章ThoughtWorks前端架构师为AngularJS2布道的文章,还听说他们参与举办了一次武汉前端开发交流会,为武汉Web前端开发圈技术革新的推广付出努力,在武汉真是难能可贵。

希望武汉的Web前端开发圈能够更好,下一份工作我能更优雅的编码。

为什么Web开发应该前后端分离

新换的工作是在一家公司做电商应用ECstore二次开发,在项目工作中发现这套应用对于用户体验和开发体验上面做的非常糟糕。在做完一个项目后,我以具体开发过程中的情形,深刻感受了Web应用开发为什么需要前后端分离,从而提高开发体验与效率。

写完这个总结我自己看了觉得很可笑——为何如反复解释此显而易见的事情。但最近接触武汉的Web开发圈子,发现Web前端工程化、前后端分离方面普遍做的不好,而且我将这些思想介绍给其他同事,还是能改善一些陈旧的思维定势,所以把这篇文章贴出来。如下是正文: 继续阅读“为什么Web开发应该前后端分离”