盒子
目录
文章目录
  1. 废话开篇
  2. 四个分享
  3. 废话结篇

w3ctech 小米前端技术感受心得

为了不被 w3ctech 拉黑,特意撰此流水账一篇,毫无干货(fuck things),看官权当一笑。

废话开篇

2014年12月20日 天气阴

大概在两周之前在微博看见了 w3ctech 走进名企 2014年 最后一季 『走进小米前端专场』预报名,看了下有 HTML5,CSS3,有代码规范、质量,及 Mobile 开发, 恩?这一场特别适合我的样子,全部都是我能听懂想深入了解的东西的呢, 尤其是 HTML5,CSS3,而且小米在清河,离西二旗很近。报名,报名,报名!

期间 w3ctech 两次发来邮件确认是否参加,第二次是因为场地变更。不得不赞, w3ctech 之用心。

在连续加了两周的班之后,已经感觉到自己精神恍惚,终于迎来一个一觉自然醒的周末,在这之前又报名了羽毛球群里组织的活动。羽毛球?w3ctech?到底是听从身体的召唤还是技术的召唤呢?是在球场上体力不支做猪队友,还是在小米精神恍惚感受技术的熏陶?最后还是和群里的小伙伴们请了假,接受 w3ctech 的感召!

于是在一觉自然醒之后,吭哧吭哧背上双肩包,穿上码农套装,在平坦的道路上一步两步,一步两步,摩擦摩擦。虽然天气阴沉沉的,但公交车看起来很高兴的样子,大周末的完全没有堵车的意思。到了清河,艾玛,小米总基到底在哪儿?我面对着一栋栋高楼大厦,在人群中穿梭,感受着北京 12 月丝毫不留情面的寒风,45 度仰望天空,阳光打在我的脸上(嗯?好像没有阳光,这不重要),叫天天不应,叫地地不灵,于是我只好打开了百度地图,打开了高德地图,打开了谷歌地图,穿过了大街小巷,穿越了工地、垃圾场,『跋山涉水』,尘土飞扬,一路颠簸。恩,我甚至还开启了语音指路。终于辗转到了小米总基门前。伴随着脑补的『我曾经跨过山和大海,也穿过人山人海
我曾经问遍整个世界,终于来到了小米』。

登记之后一个不小心冲入了 B2 小米餐厅,竟然还有很多小米的同学在吃午饭,看上去很高大上的样子,B1 办公区灯火通明,小米的同学们一个个屏幕前安静的忙碌着。嗯,今天不是周末?又走了会迷宫,终于来到了 波大 前,电脑上输入邮箱签到之后,终于入场了。

四个分享

这场小米分享有四个演讲:

  • 路由器中的前端开发(张建斌)
    • 主要讲述前端工程师如何与硬件接合,路由操作系统中如何搭建前端环境,和服务器前端开发的区别,如何国际化开发。(PPT下载戳这里
  • 控制多人合作时的代码风格和质量 (陈晓东)
    • 通过在开发的过程中集成类似 jshint, jscs 这样的语法检查工具保障代码质量和统一代码风格。(PPT下载戳这里
  • 小米黄页 HTML5 && native 之路 (余鹏)
    • 小米黄页如何预置,离线访问是怎么回事,小米黄页 webview 提供哪些功能。 (PPT下载戳这里
  • HTML5&CSS 新特性和在小米网的应用 (孙星繁)
    • 随着 H5 的定稿与 CSS 的发展,越来越多的网站加入更加友好、炫丽的交互效果。本节将分享一些在小米网的发展过程中经历的新技术实践,以及在未来的发展中应用新特性可能性。(PPT下载戳这里

分别说下听这四个分享我的一些感受:

  1. 路由器中的前端开发,从我这只菜鸟的角度来看,分享的就是如何把前端代码塞进路由器里,一堆配置踩坑,不过还是挺有意思的。
  2. 陈晓东前辈分享的『控制多人合作时的代码风格和质量』 主要介绍了在多人合作中为了统一代码风格和保证代码质量,先后使用的一些工具,主要是分享现在使用的两个工具:
    • pre-commit 代码提交之前强制检查,不符合规范则不能提交。 pre-commit 也可以 只检查当前修改的文件,这样可以先不对旧的代码进行强制检查。
    • grunt-usemin 对静态资源打包压缩。
  3. 余鹏前辈分享的小米黄页涉及到移动端,尚未涉猎,听得昏昏欲睡。
  4. 终于等到了压轴的 我繁子哥 的 HTML5&CSS 的分享。帅气的 PPT,不时调侃下产品汪和设计师,当然这些不重要,重要的是 HTML5&CSS 的干货太多,感觉到腹中隐隐作痛,有点消化不良的感觉,于是只好拿出了小黑本,做了点笔记,现在已经有了 幻灯片 。这段时间一直在做动画,动画的讲解让我有点醍醐灌顶,茅塞顿开的赶脚,以后可以尝试用 requestAnimationFrame 做动画特效等等。

    • 目前主流的动画实现方式
      • jQuery Animate(setInterval):易用,低效,兼容好;
      • CSS Transition:硬件加速、移动端兼容,高效;
      • requestAnimationFrame:易用,充分发挥浏览器性能。
    • 特点比较

      ||jQuery|CSS Transitions|JavaScript Animation|
      |—||—|—|—|—|—|
      |性能 |Bad |Good | Good
      |效果 | Not| bad Not| bad Good
      |功能 | Good | Not bad| Good
      |兼容 | Good | Bad IE10+ | Good IE10+
      | |避免使用| 简单交互 | 复杂交互

    • 交互中提到了 APNG 并比较了gif、apng 和 png sprite。

      | |gif| apng| png sprite|
      |—|—|—|—|
      |颜色 |256| 24位 |24位|
      |透明度 |索引透明,有毛边| Alpha 透明 | Alpha 透明|
      |尺寸 | 中 | 小 | 大|
      |兼容 |Good | IE9+ | IE7+|
      | |底色固定 | 可降级| 兼容|

    • 还提到了造轮子的问题——有适合自己使用的好轮子直接使用,不适合的轮子才再造一个,这个观点非常同意,现在很多公司都是为了造轮子而造轮子,感觉没什么必要。

      w3ctech 的小伙伴向我推荐了 360前端技术专场黄薇 的『Web高性能动画』,PPT 在这里,视频 在这里

      再一次,更多的内容请详细看网页ppt,需下载 源文件

这次分享获益最多的当然要属 HTML5&CSS 的分享,这是和我目前所接触的联系最密切的东西,的确 get 到了不少新技能,长了很多见识,受益颇多,希望明年可以继续参加更多这样的分享,get 到更多干货。=.=

废话结篇

在听完最后一个分享之后,正饿的肚皮朝天,准备出去大吃一顿,就着火锅将这些干货慢慢消化,
加上 N 次抽奖之后,连我特想被抽中的那本《 Sass 与 Compass 实战》的机会也没有了,什么小米手环,小米手机就算了吧,既然已经不能靠脸吃饭了,连靠运气吃饭的机会也渐渐泯灭了。恩,还是回去多啃点书当饭吃吧。正准备收拾包,起身离开,一抬头,屏幕上定格的数字似乎有点熟悉,咦,这是我的号码!啊,感觉就在此刻,此时,此地,上帝选择了我。只有一个感觉——难以置信。完全蒙圈了。直愣愣的上台接过波大手中的米4。然后波大让我说点什么。额,感谢 CCTV,MTV,LETV,MiTV 什么的我一点儿也想不起来了,反正就是蒙圈了。语无伦次的说了些有的没的。然后现在还有点没醒过来的样子。

我知道,所有没通过努力的得到都不是我应得的。

谢谢 w3ctech,小米公司。
谢谢学前端这大半年各路大神、同学的带领、指引和帮助。

ps: 这半年来参加了很多前端分享,得到了很多帮助和给予。一直有想为前端同学们做点自己力所能及的事。借米4的机会,在元旦,我的微博里 赠送10本前端书籍 给大家,已经赠送完毕
祝大家 2015 越来越好。