我的 React 2015 之路

首先要感谢 React,拯救了我的第一个职业倦怠期,自 2014 年带着 React 在蚂蚁必定能有所作为的执念来到这里,经过 2015 一年惊心动魄的历程,期间基本没精力写文章,在小伙伴们的帮助下到如今终于开花结果,回想 2015,感激而庆幸。

业务特点

经典的冰山理论:

中后台系统繁多,前端人员严重不足

应用方案

采用全栈开发模式,人人都是前端,而前端专业团队提供基础前端架构与基础设施

前端架构

根据公司的技术特点(java 开发为主)提出了基于 React(class based es6) 的前端架构

组件

在组件方面形成了 antd/antm/react-component 的三驾马车

其中定位各有侧重

react-component antd
定位 提供底层功能 完善的套件
样式 提供参考样式 统一的设计规范
配置 强大,复杂 精简
文档 高阶,复杂 精美,面向初级用户
扩展性

antd 目前有 50+ 基础组件,特点包括: 实用主义,小而美,统一交互,完善动画等。

而正在进行中的 antm 则力图在 mobile web, react-native 领域有所作为:

工具

基于 webpack babel koa anyproxy 封装了简单易用的 ant-tool,涵盖了开发流程的各个方面:

应用架构

探索适合蚂蚁业务的应用架构 roof,包含两层含义

首先是一个轻量级的 roof 核心数据绑定功能,满足大部分的一般应用。

其次是对于复杂业务由 roof 精心挑选社区的优秀类库组合形成推荐的应用架构,包括

业务结合

如今 antd 已覆盖蚂蚁金服全部前端系统的 40%, 中台新系统覆盖率接近 100%,取得了良好效果:

被和谐

整体反馈良好,在 蚂蚁技术年度盛典 中获得点赞前10,对于一个纯前端项目十分难得。

集团合作

antd 在淘宝,天猫,钉钉,阿里云等兄弟公司也多有直接应用,其宝贵反馈对 antd 的完善起到了重要作用。

对于有自己鲜明设计特点的团队,基于 react-component 各自搭建了具备自己特色的 UI 框架,其宝贵反馈对 react-component 的完善起到了重要作用. 例如

http://uxco.re

被和谐

再次感谢.

分享

2015 我们在 D2, QCON, 合作公司饿了么 都有分享和交流,思维碰撞激发了新的方向。

更有幸前往 facebook 参加 f8,和 react 核心开发 ben 当面交流,之后线上交流感觉更加顺畅了.

外部发展

antd 发布一年后在国内外社区有了广泛的影响力

不仅在国内积累了不少 忠实用户,国外也开始了使用和 关注

pr:

推广:

对于 react-component 基础组件更是数不胜数。

这对 antd 的完善和团队的激励起到了重要作用.

react 上游

我们在开发组件过程中遇到诸多问题,反馈 react 后也得到了核心团队的积极回应,patch 大多也得以合并主干。

接下来的路

未来我们除了对 antd 承诺的持续投入,将依靠 antm 发力移动时代,依托 react-native 提高移动端的前端体验,在应用架构/工具方面紧跟社区进展,将最好的东西带给我们的业务,同时将我们业务遇到的问题,创新抽象反馈社区。

最后期待同大家的合作和交流。

广告

我的 React 2015 之路”的一个响应

  1. 仰慕大神依旧!最近也在写一些react组件,遇到一个问题:做一个下拉选择框的组件,但是这个选择的面板不能被创建到被使用的容器当中,而想要塞到body层当中,如何办到呢?
    父组件:render(){
    return (

    )
    }

    子组件:
    render(){

    这个div必须放到body层,而非父组件容器类

    }

发表评论

Fill in your details below or click an icon to log in:

WordPress.com 徽标

您正在使用您的 WordPress.com 账号评论。 注销 /  更改 )

Facebook photo

您正在使用您的 Facebook 账号评论。 注销 /  更改 )

Connecting to %s