【春哥故事会 04】React,你太重了!

10,718 阅读11分钟

系列专栏:《春哥故事会》(系列文章都在这里,点我查看!)

春哥,最近新出了个叫 React Native 的技术,听说特别牛逼! —— 铸哥 于2016年

一、被迫学习前端

其实从 2015年 开始,互联网虚浮的泡沫就有逐渐冷却的迹象,开始有了“资本寒冬”的说法。

换句话说:从“创业”到“融资”这个过程不再像往年那么容易。

至少,我认为,按照当时 “美宅APP” 上那惨淡的客户数量,想要获得一笔可观的融资无异于痴人说梦。

我能看出来的问题,老板一定能看出来。

因为投资人的“资金紧张”,反而促使老板比以往任何一次都看得更加清楚。

从某一天开始,我们突然不再在 APP 里添加新功能了。

我纯粹的 “安卓开发任务” 也就是从那天起变得不再纯粹的,项目的需求里多了很多 H5 页面的开发,很多活动页需要撰写,这些页面需要接入到不同的平台。

京东到家、淘宝家政、各类商城等等……

老板终于意识到,原生App 没人想下载,接入各类主流平台引流才是唯一的出路。

那么,谁还记得上文提到的嗷嗷待哺的“水果商城”?

废话!投资人都没钱了,谁还管他的需求啊……

于是乎,原生 APP 的开发完全被放弃了。

我也被安排进行一些 H5 页面的开发。

起初我是拒绝的。

毕竟我当时给自己的定位就是一名“初级安卓研发”,我的目标是通过不断的学习、不断地训练和摸索,变成一名可以拿到 8K+ 工资的“中级安卓研发”。

至于前端……我学那个干啥?

不过,在磊哥的安利之下,我还是把 w3c-school 里的基础教程简单刷了一遍,刷完之后我突然发现:

前端开发这么爽?这也比安卓爽太多了吧!

二、初尝前端的甜

前文说到,入职“宅宝”公司的时候,因为公司已经没有多余的办公电脑了,所以我是自带设备到岗的。

我自带的那个设备,实在……

Y470,2011年购入,4G内存,CPU 2.3GHz……

一台使用了5年的笔记本,用来作为安卓开发本,一个字:慢。

有多慢?

经常改了一行代码,想通过调试工具在自己的手机里看到效果,得在电脑前等上 20分钟……

但是“前端”完全不一样。

前端改完 HTML 之后,只需要点一下刷新,卧槽,效果有了!

这样也嫌麻烦了?甚至可以直接按 F12,所见即所得,在 Chrome 开发工具里把样式调整适当之后再写到文件里。

有那么一瞬间,我觉得我开悟了。

我宝贵的人生可以无需再等待“编译中……”,拥抱“所见即所得”的快乐……

然而,多年以后,当我在某个巨石前端vue工程里,面对 yarn start 后需要编译 20+分钟 的痛苦,我又再次想起了那个被 "前端无需编译" 所震惊的午后。

彼时我怀疑整前端工程化的那帮人,是否遗忘了自己的初衷?

总之,当时的我,因为前端的这份快乐,开始享受静态活动页面的开发了。

三、官网的技术选型

尽管我们开始积极接入各种平台,引流也初见成效,有了更多的订单和用户。

但这些微薄的收入增加,并无法负担整个研发团队的开销。

“融资” 依然是公司的重中之重。

但是很可惜,资本寒冬真的来了。

一连和几个投资人沟通,公司都未能获得任何融资。

对于我们研发而言,为 “融资” 铺路也成了一项至关重要的工作。

老板一声令下:

我们需要一个官网!可以在线下单的那种!

是的,你没看错,运营了如此之久,“宅宝APP” 居然一直没有官网。

最终挑选出了三个研发一起作为“前端”角色来开发“宅宝官网”。

这三个人分别是:

  • 我,初学前端不到半个月,只开发过静态页面的纯萌新。
  • 铸哥,IOS开发,之前也几乎没有前端开发经验。
  • 段哥,服务端开发,之前有一些前端经验,在 .jsp 文件中写 jQuery 的那种程度。

按以上配置,我和铸哥基本白给,段哥算是团队 “前端战力的天花板” 了。

段哥经过一段时间的技术选型,然后兴冲冲地告诉我们:

"我选了一个当前最先进的技术,叫 React。"

当时,我还没意识到这次选型,对于我们这支临时拼凑的团队究竟意味着什么。

等到我明白时,早已为时过晚。

对于铸哥,尤其如此。

四、铸哥其人

铸哥,我入职时他大概 22 岁,刚刚专科毕业一年。

据说他大学学的是工商管理专业,但因为是老板的远房亲戚,因此大三就到 “宅宝公司” 实习做客服。因为恰好赶上公司继续 IOS 开发,因此得到了 “工费参加 IOS 培训” 的机会。

阴差阳错地就变成了一名程序员。

铸哥不仅年轻,脾气也是出奇的好,总是一副笑眯眯的样子,和谁说话都和颜悦色、彬彬有礼的。

我的印象中完全没有铸哥和人争吵的样子。

这导致整个公司从上到下都非常喜欢这个小伙子。

铸哥的口头禅是:“听说特别牛逼”。

从入职开始,我就不止一次地听铸哥用这个短语描述各种大家半知半解的技术或者人物。

“最近出了个 React Native 技术,听说特别牛逼。”

“那个 Facebook 的总裁,听说特别牛逼!”

……

如是云云。

这次的 “官网开发计划” 刚出炉时,铸哥起初也是摩拳擦掌,觉得能通过这个机会学到一门新技术,是非常不错的机会。

但是项目真正开始开发之后,带给我们的却是一副完全不同的体验。

五、苦海

如果你没有必备的 HtmlJsCss 经验,直接在 2016年 通过 React.js 来开发一个前端应用会是什么体验?

我可以告诉是,那绝对是:

一次痛苦不堪的体验。

我们几乎是靠着其他语言的底子来拼凑 Javascript 代码的 (尽管此之前我粗略地翻看过一遍“犀牛书”),但时常在碰到 Es6 语法时,还是让我们感到痛苦不堪:

"() => {}" 箭头函数到底是啥意思?为啥网上很多示例都用的这种写法?

三个点是什么操作符?这些博客作者能不能写点正常代码?

{ name } 这写法是啥意思?为什么要这么写?

这些问题,在当时,团队里没有一个人能回答。

每一天我的脑海中都充满问号,写代码时、在网络上的博客里寻找答案时充满了困惑。

除了 Es6 的语法困境之外,我们的遇到的困境远非如此:

我们不太理解,React 所起的 webpack dev 服务,究竟哪部分发生在浏览器里,哪部分发生在 nodejs 里。

不理解,为什么 z-index 属性在 React 里要写成 zIndex ……

不理解,为啥这样写它就能成功运行,那样写它就会报错。

……

困惑、迷茫、无助、不理解!

虽然这种摸索的过程极度痛苦,但好在,我对它并不陌生。

因为:

自学安卓的那几个月里,无人解惑独自摸索的痛苦,比这更加深刻。我常常因为一个明眼人一眼就能看出的问题,困惑、止步整整一天,最后只能删掉代码从头开始。

至少这一次,我们仨还可以互相交流,这已经是莫大的快乐了。

我能忍受,不代表所有人可以忍受。

六、分崩

当我一天十几个小时全身心投入项目开发,在不断摸索、尝试理解、缓慢学习前端各种知识点,并拼命赶着项目进度的同时。

铸哥却向老板提出了 “转岗” 的诉求。

铸哥后来也和我们说明了想转岗的理由:

在开发官网项目的一个多月里,他每天都在不停地陷入自我怀疑之中,完全无法理解自己所写的代码,只能靠百度搜索的结果进行拼凑。

过程极度痛苦。

让他分明地认识到,写代码对于他是一个痛苦的过程。

他觉得自己或许并不适合写代码。

老板起初觉得很难理解,让铸哥冷静几天再做决定。

几天过去之后,铸哥还是坚持他的决定。

于是铸哥又回到了 “客服” 的角色,依然留在公司里。

React,你太重了,重到直接压垮了铸哥的码农之路。

当我以为只能靠我和段哥来完成这个项目时。

另一个晴天霹雳降临了:

段哥提出了辞职,理由是太累了,想换一份轻松的工作。

就这样,从三个人开始的项目组,在临近尾声之时,居然只剩下我一个孤零零的半吊子前端开发。

让你失望了,这次同事离职,我居然没有涨薪……

尽管如此,我依然完成了官网的开发。

不过……

这个官网有点——“不一样”。

七、这官网,不太一样

我们的官网到底有啥不一样呢?

7.1 首先,它的体积特别大🤣

官网的页面上有一个全局的 Header4个Tab页

于是,我们构建了 5个 bundle包,每个 bundle 包都有 6 M 大小,并且完全没有拆包。

这完全是因为我们完全没有 React 开发的常识,使用了完全错误的架构,使得我们 bundle 的数量变成了它应有的 5 倍。

7.2 头部和内容页没办法通信🤣

上面说了,Header4个Tab页 分用了 5个 完整且独立的 bundle 包,因此常规的 event-bus 等通讯手段直接丧失效用,使得一些常见的通信手段我们直接玩不转了。

当时我们还一本正经地和老板解释:

老板,React 这种技术有局限,这种交互做不了。

老板……被我们说服了……

7.3 完全没有路由的概念🤣

这是后来我回想起这个项目时,感到最无厘头的一点。

我们完全没有 react-router 的概念,整个前端项目全是在 “/” 路由下完成的,所有的试图记住当前页面状态的举动都是无法实现的,只要一刷新,必定回到首页。

后来,我们给网站在某度投推广。(当时身为客服的铸哥负责了推广事宜)

某度的推广员问铸哥:"你们这个网站,不同页面怎么路径都一样?"

铸哥非常自豪且一本正经地介绍我们的网站:

“我们网站是用一种全新技术开发的,和传统网站不一样,你不懂,听说特别牛逼。”

自然的,更没有 SEO 优化一说,除了购买的关键词,几乎没有任何办法可以搜索到我们的官网。

站在此时此刻,如果让我评价一下当初我们做出的网站,我一定会客观地给出两个字的评价:

狗屎。

八、新出路

听说段哥离职后,直接被老板推荐到了另一个单位,在那里段哥确确实实做到了 “轻松活少”。我和段哥的故事还未结束,因此暂时留个伏笔。

官网开发完成,公司投入了几千块钱进行百度推广,但“宅宝”的运营情况却一再恶化。

尽管此时此刻,我们的研发团队只剩下四个人:

  • 后台研发 * 1 (磊哥)
  • 安卓兼前端 * 1 (我)
  • IOS研发 * 1 (小方,一位女生)
  • UI * 1 (小汤,另一位女生)

但紧靠“宅宝”本身的业务盈利依然不足以支撑各项开销,并养活这样一支 4人 的研发团队。

在这种环境下,老板大概也是终于认清了一个现实:"宅宝大概是真的融不到资了。"

此时此刻,他也终于回想起了他的老本行。

于是磊哥和老板经过一番合计,最终决定要接 “外包活” ,做项目养活团队,在此基础上再谋求发展。

很快,老板就利用他的人脉找到的一个项目:

给一家小型机械公司订制一个官网,要提供商品的维护和展示能力,并附带一个小型论坛系统。

To Be Continue

本章结束。

系列未完。

本章说

我是春哥
大龄前端打工仔,依然在努力学习。
我的目标是给大家分享最实用、最有用的知识点,希望大家都可以早早下班,并可以飞速完成工作,淡定摸鱼🐟。

你可以在公众号里找到我:前端要摸鱼