微信扫描登录
或者
请输入您的邮件地址来登录或者创建帐号
提 交取 消
GITBOOK.CN需要您的浏览器打开cookies设置以支持登录功能

2016 上海 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 性能体验的服务,据说有 4 x fasrer 和 10 x 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的考验,可靠程度还是值得信任的。不过,细节在这里,笔者就不做讨论了,谈一个笔者认为比较有触动的点 —— 模板

WeexReact Native 的一大区别是模板的构建形式:

  • React Naitve 的 UI 和业务逻辑一般是在一起的,这比较符合 Native 的开发习惯。笔者之前玩过 iOS 和 Android 开发,虽然 Xcode 和 Android Studio 都提供了可视化的 UI 构建工具,但是一般来说,都是在代码里用 new 的方式来创建 UI。虽然构建工具会生成 XML 文件存储 UI 布局这些配置(算是模板),但是其可编辑性和可读性很差。
  • Weex 采用了前端更常用的方式,模板和逻辑分离,而模板采用 vuejshoganavalonartTemplate 等等模板使用的 {{}} 双大括号的形式,使前端工程师开发起来非常顺手。同时,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!

注:本文中『盗』取了很多 iWeb 峰会 官方微博 的图片,感谢 娜姐和她的小伙伴们!(欢迎关注微博)

最后,副一张笔者微信,欢迎微信交流。

二维码