iWeb南京2015峰会笔记

发表于 | 分类于
这次有幸参加免费的iWeb HTML5峰会，总体上和之前QCon上的前端主题类似，各公司都在做移动端以及工程化方面的探索和融合。让我震撼的是很多小公司一样有厉害的人和团队，大公司在做的新技术的尝试和应用，小公司同样也在做，比如React和Native的融合，以及React在CMS类搭建系统中的应用。但是小公司由于人员水平层次不齐，考虑到后期维护的学习成本，很多技术没法在实际的业务中推动起来。

触屏版前端重构化之路

苏宁 - 朱海源

  • H5泛指触屏版？（我觉得是一种交互和跨终端的理念）
  • 原生实现的双向绑定 Object.defineProperty
  • 前后端痛点
    • 前后端交叉开发，后端会触碰到前端的js文件
    • 前端提供的静态资源被后端随意放置
    • 双方联调严重依赖后端环境
    • 后端开发不爱洗头发
  • 尝试办法
    • js控制权移交前端，前端承接js业务逻辑
    • 静态资源管理权完全移交前端
    • 搭建前端预览环境 （他们只需装个tomcat）
  • 重构之路
    • 公用 view.js view.css –> 皮肤
    • 数据接口化 –> 前后端初步分离
    • 核心页面兼顾SEO –> 关键数据源码输出

可持续维护的前端生态圈

焦点网 - 沈阳

  • 项目演化
    • 分为Common和App
    • 组件代码和第三方代码全部移到Common中
    • Common包含：组件代码、第三方代码、全站共用代码、全站共用业务代码
    • App只包含业务代码和应用私有共用代码
    • App与App之间不能存在代码依赖关系！
  • 好的习惯
    • 在每个封装的一开始写一段空白的函数，作为注释
  • 开发工具
    • webstorm
    • sublime
    • intellij
    • F5/browser-sync, markman

web前后端实践和探索：融合or分离

YOHO - 周奇琪

  • web开发痛点
    • 频繁的变更需求
    • 代码质量把控
    • 无处不在的业务逻辑
    • 各种兼容
    • 重复的部分
  • 应对方法
    • 界定前后端切面（接口标准化）
    • 前后端职责分离（职能专业化）
    • 组件化，服务化，模块化
    • 依赖管理，切面治理（Java有AOP，前端也能实现类似的概念）
  • 实践方式
    • 服务接口定义
    • 页面流设计（路由）
    • 组件化开发和使用
    • 集成服务
  • 用了哪些轮子
    • spm sea.js
    • handlebars
    • gulp
    • nodejs
    • compass
  • yo framework
  • 分离什么
    • 前端能力封装
      • 标准化的组件
      • 通用开发模式
      • 开箱即用的流程化工具（桩服务生成）
      • 前端切面的分离（数据，结构，样式，行为）
      • 单元测试，端对端测试
    • 后端服务封装
      • 标准的数据源（基于资源，基于服务）
      • 标准的增删改查的行为封装（RESTful）
      • 流程化的客户端工具（服务调试，验证，服务文档生成）
  • 已有的项目
    • 组件化：React，Polymer，WebComponents
    • 开发模式：MVC，MVVM，FLUX
    • 应用框架：angular，vuejs，Ember.js
    • 服务标准：RESTful，GraphQL，JSON API，json-schema
    • 开箱即用工具：Gulp，Yeoman，mocha，jsmine，webpack，swagger，jslint，babel，domJS
  • 融合什么
    • 对前后端标准的共识（服务，组件，切面）
    • 业务开发的融合（业务理解更透彻）
    • 工程化的融合（开发过程，开发工具，系统规范）

Android插件架构原理

途牛 - 汪亮亮

  • 问题：方法数爆棚 65535
  • 解法：拆分classes.dex文件
  • 插件原理
    • 主app是一个apk
    • 每个模块都作为一个子app，都有单独的apk
    • 每个团队开发自己的子apk
    • 主apk里实现按需加载，缩小自身体积

canvas花式玩法

同程 - 张扬

  • canvas玩法
    • 画图像 drawImage
    • 图像处理，如高斯模糊，滤镜
    • canvas一样可绘制DOM结构，样式、事件、DOM操作
    • 视频中人物和背景的叠加
    • 融入页面背景的复杂动画（无法用css实现）
      • video标签一定会有自己的背景区域，无法将背景透明
      • 制作一个动画的视频
      • 再提取带α通道的动画视频
      • 两者叠加，运用PS中蒙版的概念，将蒙版中非白色的区域叠加成透明
      • 类似css中的mask
  • canvas优势
    • 只消耗CPU绘制过程，但页面中只有一个节点，比起SVG有一堆节点，会节约内存
    • 比起svg里的path，canvas绘制不会有毛边，放大时
    • 可以有效利用GPU加速
    • 现在地图类的绘制都改成canvas了

React魔方-可视化建站

千米网 - 杨晓东

  • 业务痛点
    • 同样的功能 不同的DOM
    • UED + 前端 开发协调问题（主要因为有些公司UED做静态页面，前端做js动态部分，有可能把DOM结构改了）
    • 做重复功能时，习惯性 Ctrl+C Ctrl+V
    • 跨项目重用
    • 业务复杂页面代码臃肿
    • 合并代码过程痛苦
    • 上线后再处理问题
  • React优势
    • React的强项是view，强调组件化（页面中的每块都可以封装成自己的标签，如 <ItemList> <Item>）
    • React为什么渲染快 virtual DOM和diff算法
    • 但是组件上位后组件之间的通信成为瓶颈
    • 数据怎么在组件之间流转，怎么处理状态
      • React本身无状态，所以更简单
      • 根据传入的状态，显示相应的渲染
      • 前后两次传入的状态相同时，不会再次渲染
      • shouldComponentUpdate 可自己控制
  • 推荐工具
    • flux 单向绑定的思想
    • immutable
    • iflux 探索将immutable.js和react.js更好粘合的一种方案

总结

这次有幸参加免费的iWeb HTML5峰会，总体上和之前QCon上的前端主题类似，各公司都在做移动端以及工程化方面的探索和融合。让我震撼的是很多小公司一样有厉害的人和团队，大公司在做的新技术的尝试和应用，小公司同样也在做，比如React和Native的融合，以及React在CMS类搭建系统中的应用。但是小公司由于人员水平层次不齐，考虑到后期维护的学习成本，很多技术没法在实际的业务中推动起来。