iWeb南京2015峰会笔记

触屏版前端重构化之路

苏宁 - 朱海源

  • 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类搭建系统中的应用。但是小公司由于人员水平层次不齐,考虑到后期维护的学习成本,很多技术没法在实际的业务中推动起来。