小码农的碎碎念之2017上半年总结

强行假装老司机的小菜鸡

没有一点点防备,也没有一丝顾虑,2017年的一半就这么飞过去了……

“回头看看,是不是离梦想又更远了呢?”
“滚!”

前端

其实这个上半年过得蛮刺激的,挑战了一个自己以前没什么工程经验的领域——网站前端。

我们公司每年会填一份年终总结表,里面会问到之后一年你想在哪方面提升自己。在去年年初写前年的总结时,我给自己的目标就是学习前端。不过后来由于项目分工,我还是主要做着后端的工作。

那时我们大部分时候的网站开发主要还是两种比较传统的方式:一是后端HTML模板,二是后端API和前端jQuery+AJAX。直到今年年初,在农历年前时,我们要做一个交互比较多的网站,而且很可能会先上一部分功能,再根据用户反馈做调整和扩展以后,才定第二版的细节。开完那个网站的需求讨论会后,我认真考虑了一下,觉得后端HTML模板的方式很难满足这个网站的交互性,而如果用纯天然原生态的jQuery+AJAX,发布第一个版本可能还不太难,但要在这个版本上再调整和维护,就可能非常麻烦了——毕竟在重后端的团队,想把前端的工程化做好,并非一朝一夕的事情。

面对这种有一定挑战的项目,我经常表现得不(ai)够(gao)成(shi)熟(qing)。纠结了一会儿,我跟原型设计师说,我会把一个最基本的线框原型先用Vue划出来,然后她再到相应的组件里填CSS。

扑通~成功给自己挖了一个新坑。

我押Vue

其实早在14年底的时候,我就已经注意到了Vue这个轻巧的前端框架。当然那时的Vue还是一副“简易版Angular 1”的样子,不过那正是吸引我的地方——我在以前的实习用过一小阵子Angular 1,当时经验和认识比现在还浅得多,除了Controller以外写得真是一脸懵逼,用起来和带命名空间的DOM操作也没有两样。基础都用不明白的框架还怎么深入学习?学得不深入还怎么在组内推广?和Angular的一身武装相反,Vue总有一种T恤短裤,分分钟就能搞懂并上手的感觉。不过我做为一个没什么前端经验的小菜鸡,之前一直没折腾出超过hello world级别的小demo。

这下好了,把自己逼上梁山——直接用一个工作上相对有挑战的项目,来在第一手的实践中学习新姿势——不成功便成仁,啊不对,便走人。在用vue-cli把项目架子搭好之后,对着文档强改硬撸了几下,还真把最基本的线框UI画好了。接下来就要考虑状态管理了——这还真是个纠结了好一阵子的决定:是就用最直觉的vuex呢?还是设计一下加上rxjs这样的高端货?这个问题我纠结了快一天,终于先把rxjs放下了,毕竟项目也是有死线的,不能无止境地调研新玩具。

不记得从入手到有基本功能花了多久,反正这个网站倒饬倒饬还真按时上线了。现在回头再看,深刻的感受有四点:

  1. 拖延症患者拿公司项目来逼自己学习,起效真是飞快。之前我在业余时间下过多少次决心想把Vue学起来,全都默默地无疾而终(哪门子无疾,拖延症不是疾是什么?!)
  2. 这种事情不能多干,玩脱了就惨了。当时我也是冒了挺大的风险,在没有老司机带路的情况下强行瞎倒腾。如果项目没法按时上线,对我自己和对我们组都有很大的伤害。我也为此在遇到一些困难的时候担心过。
  3. 当然上不了线是最严重的结果,但是除此之外我当时还有另一层考虑,就是这个项目如果写完了,真要推广起Vue的应用,可能会有小童鞋在做新项目的时候,翻这个项目的代码找参考实现。所以我在实现功能和代码设计上时常会陷入一种平衡的纠结——是试出个方案就草草了事?还是多想一想有没有更好点的实践,来给之后的童鞋多一些线索和方向?
  4. 没有部门和小组对技术选型的开放,就没有搞事情的余地,没有搞事情的余地,就难有技术上的成长。

在这次试水以后,我在三月开始安利大家用Vue来做工程化的前端。组里的小童鞋们对Vue的学习情况都不错,新的需求和功能基本上都可以正常实现和交付。除了三月底四月初做的一个新网站,需要用一个vue-router guard来实现一个稍微难搞些的转页效果以外,其他的都顺利解决了。哦对了,四月还被安排去台湾出了个差,和做原型的设计师同事一起交流了一下,也算是入职以来的一次解锁吧。


有个独立于上面这一大坨东西的事情,也需要特别记录一下。最近的一个网站要用Canvas来画泡泡。根据Codepen上一个demo做出来的第一版,占了我50%的CPU,泡泡又各种锯齿,简直跪得双膝出血……后来找了一个上海分公司的React老司机帮我调整Canvas性能。他大手一挥,甩回给我一个泡泡均匀绵密,CPU占用不到15%的版本,直接收走我的膝盖。从他那里学到了Canvas的离屏渲染,实在是太涨姿势了。一方面要感谢一下老司机带路,一方面自己也要多打怪多升级啊。


还有一个值得小提一下的事情。有一个历史遗留网站,之前没有很好的工程设计,现在前端要加新功能了。我尝试着用MVC的思路写了一个完全独立的模块,纯闭包无原型也无Class,用Axios取后端数据和模板文件,用Lodash来编译模板,把这个纯粹基于DOM操作的旧系统扩展给吭哧吭哧送上了线,也算个有趣的设计模式练习。

后端

不走寻常路的OpenResty

之前对OpenResty就一直很有兴趣,尤其是它的性能。继去年用它写了一个简单的服务做调研以后,我对它的开发体验也非常满意。在Nginx里用OpenResty写服务,其实和Flask有很多相同点,都是以URL为入口找相应的handler(或者说视图函数),也都通过一些特定的“魔法”来封装一个请求生命周期会需要的功能,如Flask里有request这个线程安全的“全局”变量,而OpenResty里则把所有相关的接口都挂在ngx这个对象上。

今年初把前端的框架技术选型定下来并玩爽了以后,就开始着手重写我们和游戏对接的服务。之前我们把游戏的API或者DB调用,用Django封装了一层统一的API,做一定程度的业务逻辑隔离和访问控制。现在这层API在访问量大的时候会有一定抖动,而且开发的准备步骤很复杂,文档也相对欠缺。我在去年年底的时候就盘算着,找个机会把这个服务用OpenResty做一个统一的网关,然后在内部再转发到不同游戏的“微服务”上游,这些游戏相关的“微服务”可以用OpenResty来实现,也可以用Python来实现,依库的完备程度和服务的性能需求而定。

我花了近一周的时间,用Nginx的共享内存做存储和全局任务锁,搞出了一个兼容旧数据库设计的认证网关。经过初步的测试,开发笔记本上的一个Docker容器就可以达到目前线上两台物理机的性能,果然异步大法好啊,还少了一层DB的IO。然后又用了一周多的时间,把一个游戏的大部分API用OpenResty实现了一遍,在这过程中通过各种尝试和反复重构,根据我们这部分API基本是做上游API和数据库的封装和转发这一特点,初步制定了一套非常简单的API文档和测试接口规范,并用一个很小的工具模块封装起来。不过这些重写的API只定好了测试接口,测试用例还没来得及跟上,就又双叒叕有新的前端任务杀过来了。我准备等测试得完整了以后再把新的API部署上线。

技术不太相关的其他

受到蔡学鏞在微博的推荐,今年年初我终于把约翰薯黍的《软技能》给看完了,从中明白了不少道理——很重要的一条就是,程序员其实也是一个销售工种——我们卖的是服务,无效的交流要排斥,但是没有必要排斥交流本身。所以我在上个月给一个童鞋做项目需求接口,一起把一个在去年就有计划,但是因为部门间的交流问题而一直搁浅着的项目,一点一点地调通并实现了。从这件事情中,我也认识并实践到了不少跨部门交流合作的沟通方式。

另外一方面,从最近一年搞的这些乱七八糟的事情来看,我觉得我有时在和小童鞋的合作中不是很有威望。组长大人跟我说,应该是我和小童鞋们关系太好,不容易竖立威信;另外一个老员工跟我说,应该是我给小童鞋太大的压力,以至于有时起了反作用——我想可能他们都对,人总是更注重关系好的朋友对自己的看法,也就更容易感觉到这样的朋友对自己的压力。最近读到的一句话可以记下来慢慢参悟一下:世界上最傻的事,就是对年轻人掏心掏肺讲道理。不过明明对项目的交付来说,组长和老员工是要对质量负责的,不讲道理的话难道发火和用强权不成?不懂啊不懂(喂,说得你自己这只小菜鸡就很老一样啊你个傻X)

展望

呼……不知不觉居然写了这么多(我果然是个嘴炮选手啊),该给下半年定些目标了。

现在我们已经入手了一个前端的框架,对团队来说,最重要的就是大家的CSS水平也要跟上,这样团队的前端综合实力才不会被制约。所以接下来一个很重要的任务就是要提高自己的CSS技巧,引入一定的CSS规范,让网站静态原型的工程质量能在保证外观的基础上,对后期的JS+API对接更友好。然后在此基础上调研一些常见UI组件的实现方式,并把可复用的UI组件文档化、系统化地管理起来,方便大家的随时引用。

另一方面就是继续提高网页的交互性了。这里有三块内容:一是我希望能多了解一些SVG的API,特别是如何用Snap这个库来让SVG的控制更有效,然后用SVG来到达更好的网页效果;二是我觉得我们现在的webpack项目构建流程以后还可以再加上图片的压缩和雪碧化,这个可以抽时间来调研一下下,提高网站的加载效率,也省下开发和设计师同事的时间;三就是进一步调整网站静态资源的缓存策略,还有Nginx的配置细节,让网站的响应更快——这点感觉可以多从屈光宇大牛的博客里学习学习。

说到Nginx,我们的Relay API也需要找个空闲些的时间来把集成测试用例完善好,再把新的服务部署起来。毕竟这个是我们部门最基础的服务,而且OpenResty也是我近几年最想深入了解的技术。

昨晚看到一个很符合我三观的Ted演讲,就以它为结束好了(习惯用Markdown写文章没法直接插入视频)——在奔三的这十年中期,不求活得通达明白,但求过得认真无悔。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,198评论 4 359
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,663评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,985评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,673评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,994评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,399评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,717评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,407评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,112评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,371评论 2 241
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,891评论 1 256
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,255评论 2 250
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,881评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,010评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,764评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,412评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,299评论 2 260

推荐阅读更多精彩内容

  • 题图来自我在四月份借元代吴澄的《勉学吟》组诗中一句,再凑一句,做的一首小(shun)拙(kou)诗(liu)。当时...
    槑菜干超人阅读 516评论 0 2
  • 一直以后大学生就被社会诟病,心里抵抗力差,啃老,花钱大的凯子等贬义词。他们被冠上垮掉的一代。
    没有大白牙就没有么么哒阅读 198评论 0 0
  • 23:30,关闭电脑。揉揉已经酸痛的肩膀和手腕,喝一口热水,准备收拾笔记去睡觉。 小兜不在家,便有了更多属于自己的...
    石长生之阅读 932评论 7 4
  • 可能是长久控酒的缘故,3月31下午几位老大哥组局邀请一起聚,心里便起了嘀咕。可能3月下旬杂事太多,一直憋屈着寻找一...
    郭小猛阅读 252评论 0 0
  • 天气晴朗,太阳已从东方升起,自己到大连进行了六天疗养,今天第一天回来上班,骑车刚路过漫水桥,忽然发现在漫水桥的北侧...
    黑白无阅读 379评论 3 4