我眼中的iWeb峰会——开发者篇

作者:林洋

在上海回北京的高铁上,回味着峰会上点点滴滴,作为技术男,还是比较关心技术相关的内容。在高铁上写了大部分内容,然后公司做了修饰和更改,同时加上了几张图片,不尽之处,请谅解。

6月4日,一个很特殊的日子,上午主会场加上下午自己选择的工具应用场中,有五个分享对我的印象比较深刻。

Google的《新一代移动网站》

Hax的《ES6+代码风格和质量标准》

勾股的《Weex 跨平台渲染实现》

Intel的《VR & Realsense in Crosswalk》

瑶姐的《如何打造靠谱的前端技术团队》

移动Web的优势和痛点

Google的分享人带来了很多数据和分析,其中包括下面一个很常见的流程:

Link Click => App Store Page => Install => Open App => Sigu Up => Create Content => Post

移动Web其实省去了从 App Store Page 到 Open App 这部分流程。一个优秀(包括 App Store Page 和 App Store 内的简介、图片等)的Native App 在 Open App的阶段,只留存了 50% 的用户,而一个比较low的App只能留存20%作用的用户。由此可见App繁琐的下载安装过程,很影响用户的留存。这是移动Web的优势。

与此同时,Open App 后,移动 Web 的留存率下降得比较陡,说明移动 Web 的性能和体验也是很影响用户的行为的。同时另一数据『当页面加载时间超过4s时,80%用户会流失』也说明,性能和体验是移动Web的瓶颈。

其他的数据并不多说,可以去看iWeb官方近日就会放出的演讲PPT。

其实 Google的目的是推广他们的服务,包括Chrome 和 Android新版本就会或者将会支持这个提高移动 Web 性能体验的服务,据说有4x fasrer和10x less data的效果。

ES6+代码风格和质量标准

Hax 贺老用一贯的潇洒风趣来演绎代码『哲学』问题。在大家都逐渐迈入 ES6 的怀抱时,定制一个团队级别的代码风格规范,会更容易控制代码的质量。其中特意介绍了 ESLint,感觉赞赞哒。

事后,笔者试用了 ESLint ,同时采用贺老推荐的 airbnb 的代码规范,跑了一下自己写的框架,6000行的代码,报了7500个problem,一下子傻眼了,我写的代码这么不(chao)规(wen)范(yi)?其实更多的时候是习惯问题,例如:

oneList.forEach(function(item) {

    // doSomething

});

这样的代码会报 Missing function expression name 的警告。改成如下可以消除这个警告。

oneList.forEach(function each(item) {

    // doSomething

});

笔者认为后一种写法,并没有实际的优点。(但总感觉 airbnb 这样做是有目的的,求各路大神解惑)

总结是要根据不同的情况:业务&框架、 ES5&ES6+、Brower&Node等不同场景,分别定制更适用的编码规范。

Weex 跨平台渲染实践

Week 是阿里出品的跨平台移动开发工具。

随着2015年双11,Weex 成功突围,算是成为阿里最好的跨平台工具,再从 QConf 宣布内测 和 iWeb 的分享 到 6 月份的正式开源,Weex 为更多人所认知,毕竟是大厂出品,又经过了双11的考验,可靠程度还是值得信任的。不过,细节在这里,笔者就不做讨论了,谈一个笔者认为比较有触动的点 —— 模板。

Weex 和 React Native 的一大区别是模板的构建形式:

React Naitve 的 UI 和业务逻辑一般是在一起的,这比较符合 Native 的开发习惯。笔者之前玩过 iOS 和 Android 开发,虽然 Xcode 和 Android Studio 都提供了可视化的 UI 构建工具,但是一般来说,都是在代码里用 new 的方式来创建 UI。虽然构建工具会生成 XML 文件存储 UI 布局这些配置(算是模板),但是其可编辑性和可读性很差。

而 Weex 采用了前端更常用的方式,模板和逻辑分离,而模板采用 vuejs、hogan、avalon、artTemplate 等等模板使用的 {{}} 双大括号的形式,使前端工程师开发起来非常顺手。同时,Native 工程师学习使用 Weex ,成本将会提高。

最后,笔者感觉 Weex 是针对前端开发人员设计的一款工具框架,比较适合前端同学使用;而 React Native 是基于前端语言构建的一个 Native 框架,前端开发者会有一定的学习使用成本的同时(Native 的开发思想等),Native 开发者也会有一定的学习使用成本(ES6 语法等)。当然,环境搭建是共有的成本。

VR & Realsense in Crosswalk

VR!一个很潮的技术。前端能搞 VR?答案是 Yes!去年,深圳的 JSconf 有人分享了用 NodeJS 控制单片机,感觉控制无人机已经不远了。而这次的 iWeb 峰会中,前端 VR 技术让我真正认识到 JS 真的没有什么不能做的。

WebVR 1.0 标准已经订制,2.0 标准正在制定中。而CrossWalk 是其中对 WebVR 标准实现比较优秀的一款浏览器内核,现场演示的 VR 赛车游戏,真的很炫。可以憧憬将来的某一天,用 VR 设备浏览用前端技术创建的场景。

如何打造靠谱的前端技术团队

最后一个压轴大戏是笔者Leader杜瑶关于前端技术团队建设的分享。

作为这个成功团队的一员,谈一谈自己的感受:首先团队建设不只是Leader的事情,是团队里每个人的事情,每个人都要为促成优秀团队而努力。而有一个优秀的团队,会让每个人各尽其职,让每个人都得到应有的成长,为每个人提供最好的发挥空间。在工作的前几年,选择一个优秀的团队是非常重要的,在这期间可以做好应付之后各种问题的积累,让你之后的路更好,走得更高。

最后,做个硬广,欢迎加入我们的团队。

关于iWeb峰会

从2012年毕业入职微博来到北京开始,笔者几乎参加了HTML5梦工厂在北京举办的所有活动。从一开始的『HTML5峰会』到现在的『iWeb峰会』,始终伴随着笔者的前端职业生涯。

讲真,『iWeb峰会』并不是一个纯干货的地方,毕竟是一个商业活动,赞助和广告是必不可免的。但是,随着峰会不断的发展,货也越来越干,大厂的深度技术分享越来越多,与此同时,所谓的『广告』也越来越有意义,有些是给开发者带来福利,有些则是展现 HTML5的发展趋势。

列举一下,笔者从峰会上的斩获:

2012 年,了解到了 Node,接触到了移动前端开发。

2013 年,理解了 V8 底层引擎的 JS 优化机制,通过 heX 认识到 HTML5 还能做桌面开发。

2014 年,深入了解了 Hybrid 机制和移动前端开发中的问题和经验。

2015 年,学习各种移动前端框架的想法和经验。

2016 年 上海,知道了 Weex 的渲染机制,被科普了 ESLint、WebVR。

总结就到这里,笔者在这次 iWeb 峰会上收获颇丰,同时也期待两个月后 8 月 27 日,北京的 iWeb 峰会带来更大的惊喜!

Thank you & Enjoy it!