[关闭]
@ghostcdy 2015-12-26T10:40:00.000000Z 字数 2863 阅读 404

框架变革之路 - Reduck

SPA React 框架 Reduck


在这互联网的站场,前端用什么武器最具有战斗力呢?我们如何高效的完成需求?如何保证业务可用?
我只想说:没有最好,只有更好。兵器趁手就行,框架顺手就行。

分歧

现框架Abstract基于最初业务原型抽象出来,专门用于开发游戏公会体系下的需求。它可以说是面向流程的开始。开发业务时,仅需要关注渲染过程,对应时期做对应事情。开发效率非常高,代码也比较清晰。
But,业务发展迅速,变的复杂的多,交互和逻辑都变的复杂了。使用原框架开发出来的代码模块调用逻辑复杂,一个渲染过程中需要做很多事情,方法体变得庞大,不便于维护。基于流程开发的框架适合当时的业务,却受到了扩展性的挑战。

痛点

择路

前端框架层出不穷,我们该如何选择?在旧的框架上改造?重写?
从最初的JQuery、Zepto ,到后来的MV*框架AngularJS、BackboneJS等等,以及专注渲染层的React。
我们的业务以游戏玩法为主,具有强交互,产品形态多样,分权限和身份渲染等特性。

框架 特点 解决痛点
JQuery/Zepto 基于DOM的编程,强大的选择器和DOM操作以及Ajax等扩展 开发效率问题 yes_ok_16px_1075787_easyicon.net.png-0.8kB
AngularJS 双向绑定数据,具有自己的一套完整的渲染流程
React 专注UI层,虚拟DOM树,高效替换DOM 渲染问题、组件化yes_ok_16px_1075787_easyicon.net.png-0.8kB

换框架是痛苦的,但收益是不错的。

梦想-我们需要啥?

I have a dream。有一个称手的框架是每一个开发团队的梦想。什么才是适合好用的框架呢?

特性 目标 解决方案
复用性 跨项目复用 统一标准、组件化
扩展性 易于扩展、增加功能 标准化API、完善的生态
易用性 结构清晰、新人易上手 层次清晰、规范化
可维护 出现问题可以快速定位 分层、日志 、状态记录
可测试 可单元测试 组件化、低耦合、测试API

启程

架构设计:

实战

QQ公会总大厅一个新的业务,按计划用上了新框架。在实践中发现框架还没有想像中那么的美,遇到了下面这些问题,使得框架不断的完善。

  1. var data = {
  2. list: [{a:1},{a:2},{a:3}],
  3. length: 3
  4. };
  5. //用法一:
  6. getData('list 0 a', 0 , data);
  7. //或者
  8. getData(['list', 0, 'a'], 0, data);
  9. //用法二:
  10. data.get = getData;
  11. data.get('list 0 a', 0);

最后

我们实现了框架,增加了很多小特性,亲切的称它Reduck,有没有很高大上呢?但这些都还不够,我们希望它能为业务提供更多的帮助。后续,我们还将框架支持TSW渲染、支持其他的渲染模板、优化框架性能和体验。我们还在继续前行。

ps: 感谢和我一起奋战、不断采坑填坑、勇于尝试新框架的sesamewen同学,以及帅气、追求完美、不断尝鲜的导师jameszuo。

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注