GITC 2016 - 前端技术专场

Posted by li3huo on Thursday, November 24, 2016

GITC 2016

GITC 2016 入场券

托孙总的福,有了这次参会机会。

会议室分布

前端技术专场

今天主要听了几场前端技术的分享,对我来说信息量颇大,收益匪浅。

新知识(only 4 me)

落地的前端工程化

可实施的前端工程开发流程

  1. 本地开发(developing)
  2. 静态代码检查(linting)JSLint/ESLint
  3. 单元测试(testing)Mocha
  4. 合并进入主干(merging)
  5. 自动构建(building)
  6. 自动发布(publishing)

前端开源框架&工具

  • React Facebook出品的最流行的前端框架
  • Ant Design 蚂蚁金服前端框架,基于 React 框架,开发和服务于企业级后台产品
  • JSLint JavaScript 代码检测工具
  • webpack 前端资源加载/打包工具
  • Gulp 基于流的自动化构建工具
  • Vue.js
  • Element 饿了么前端框架,基于Vue.js, 适用于后台管理系统

主题分享

搜狗前端工程化探索之路(段振兴)

网上介绍前后分离和前端工程化的资料很多,搜狗的前端工程化探索之路,把重要的里程碑按照“痛点->改进->总结”进行讲解,技术点讲得很细,并且结合了自身的业务场景,是一个不错的学习素材。

石器时代的痛点

  • 本地调试不支持
  • 静态资源文件无组织
  • 复用性、可维护性差
  • 工具化工具无

第一次改进

  • 本地可调试 SpringMVC + Velocity模板
  • 目录规范+模块化开发 JS模块化 CSS模块化(@import SASS)
  • 自动化构建+一键发布 构建工具前后对比(构建峰值 & 工具代码量)
  • web安全加固

第二次改进

  • Webpack + Gulp
  • React + Vue.js + ES7/8

总结

  • React、Vue.js、ES6/7/8、模块化、组件化、基础库
  • 实时开发辅助工具:wenke-dev
  • 前端监控(性能、异常等)

经验

  1. 尽可能建设比较完备的前端基础设施
  2. 善用提升效率的工具和方法
  3. 与时俱进,稳步推进团队技术升级

微信小程序云端解决方案探索(刘家鸣)

Wafer - 企业级微信小程序全栈方案

看这个架势,微信小程序以后真要一统江湖了

在业务驱动的公司内推动技术变革——途牛前端nodejs推进实践(禹立彬)

禹立彬分享了他带前端团队的心得。首先,技术得为市场服务,推动技术变革,必须得有实打实的效果出来;

然后就是上node.js的实践分享了,主要是求稳,版本就用4.2, web framework就用express;

最后是一些他的思考:人效大于性能;三个重要问题(是啥来着?);风险控制;耐心

等ppt

更了不起的 Node.js(桑世龙)

i5ting讲得内容很多,npm,异步流程控制(promise + aysnc),然后Koa 2.x,前后端分离等。

node.js 6没接触过,以后有时间看看。

Dva: React 应用框架在蚂蚁金服的实践(陈成)

slides

https://github.com/dvajs/dva

https://github.com/dvajs/dva-knowledgemap

令人印象深刻的项目生态: 内核(项目自身)、工具和插件、文档及培训,以及围绕Dva的整体前端技术栈。

基于 Vue 2.0 的 Element 组件库实践心得(曾海平)

找到这么个链接:饿了么基于Vue 2.0的通用组件库开发之路 ,感觉和会上讲得差不多,看完做了个笔记。

目标

Element是一套为开发后台系统所写的支撑框架,提升了后台系统界面的可用性和一致性。

套用此框架,即使没有设计师参与,也能让产品或开发设计出一套好用的后台系统。

设计阶段

  • 方向: 因为业务变化太快,调整方向为基础组件
  • 过程: 确定组件的功能和交互后,然后进行视觉封装(包括制定颜色、字体等各类规范),并搭建主体网站
  • 二次迭代: 根据初版评审意见进行调整

开发目的

  • 后台系统缺乏一套完整的基础组件库
  • Vue 在公司内部是一个比较年轻的技术栈,希望做一些基础设施的建设
  • 提升公司在技术社区的影响力

开发流程

  1. 如何与设计师进行配合

  2. 如何管理多组件项目

    仿照babel项目的目录结构

  3. 如何解决自定义主题

    采用BEM方式管理类名,同时尽可能将属性值用变量代替,维护一份变量文件便于直接修改变量就能定制一套主题

    提供命令行工具指导用户快速自定义一套主题

  4. 如何提供一份直观的文档

    如何在文档里运行组件示例?

    webpack loader: 将 Markdown 转成 Vue 文件

  5. 多语言官网如何配置和管理

  6. 最终技术栈

    • 用 ES2015 和 CSS4 作开发语言
    • Lerna 负责管理组件
    • 用 Karma 搭配 Mocha 和 Chai 等工具在 Travis CI 里做持续集成测试
    • 用 Markdown 结合 Vue 写文档

问题分析

分享在开发的过程中遇到的问题及解决方法

  1. 如何应对父子组件间事件派发机制的改变

  2. 是否需要为用户代理自定义组件上的原生事件

    最后我们决定从易用性的角度出发,让用户在使用 Button 组件时可以监听原生 click 事件,因为对于桌面端来说,Button 在绝大部分场景下都是需要监听点击事件的

  3. 版本迭代的过程中,若 API 发生变化,如何友好地提示用户

  4. 如何跟踪问题

    我们选择使用 Tower 来配合 GitHub 进行 issue 的追踪和处理

FAQ

  1. 有没有模板可以参考?

    https://github.com/ElementUI/element-starter

  2. 初学要做前端,应该先从哪开始入手学习?

    freecodecampcodecademy 都是很好的入门途径