前端渲染框架,业务开发利器Gear


GEAR

Gear意为齿轮,本项目主要是从渲染层提供一种业务开发新思路。

前端框架有很多种,我自己将所有的前端框架分为两类:开发类框架和业务类框架。GEAR正是为业务而生。前端的生命线莫过于网页的加载与渲染。Gear主要从加载和渲染的角度来提供业务开发的工作流,它分为两种模式:制作页面和渲染页面。

制作页面模式: Gear会加载配置好的组件库,同时页面会进入编辑模式,用户可以编辑页面,可以改变展示形态。

渲染页面模式:Gear会加载设计好的数据模型展示渲染页面。这部分会对性能和接口做出对应优化。

Gear整体的思想是一种前端开发解决方案,采用它可以最大程度降低开发成本,提升开发效率,加速迭代业务的开发,这是一种整体的战略布局,借助Gear编辑和渲染一体化的平台,大家可以做的事情很多,前端开发同学可以一边歇歇了!

试用地址:http://gear.haomou.net/dist/#/project
GIT: https://github.com/chalecao/gear

喜欢给我点亮星星哦!

介绍

整体的设计思想:(Gear工作流程图如下)

前端渲染框架,业务开发利器Gear

项目中集成的思路,主要分两种:

  1. 直接集成到项目中,采用Gear来渲染项目页面
  2. 导出HTML/CSS/JavaScript代码到项目中,项目中保留原有渲染方式

上面这两种方式Gear都可以做到,我之前的思路也一直是导出代码的方式,例如我做的工具CMP(https://github.com/chalecao/cmp ) ,基本就是导出代码的思想,后来在实际工作中发现会有很多人工维护的工作成本,所以不建议采用这种导出代码的方式。

集成到项目中的使用方式比较推荐,有很多可以优化的工作,比如页面加载速度的提升,页面渲染效率的提升,甚至还支持页面热修复(妈妈再也不用担心我在半夜修bug了)。

用户群体

Gear面向用户群体:策划,交互,视觉,运营甚至是开发同学。Gear系统比较适合做运营活动、营销页面,支持线上即时修改、即时效果预览、即时发布等特性。

Gear的学习成本比较低,策划和交互基本不用学习就能用Gear做出交互原型,视觉可以在Gear平台上补充视觉内容,最后如果功能不是很复杂,运营同学只要学习如何补充业务逻辑(当然后端接口采用通用数据接口),然后发布上线就可以了。这个闭环是不是很漂亮,开发哥哥们都乐了。

基于Gear的工作流程如下:

前端渲染框架,业务开发利器Gear

直接在线使用,所有数据默认保存在本地,也可以将数据导出分享给他人或者备份。

约定

1.元素可编程属性

programTxt属性指定了可编程字段,格式: special.src 

2.绑定事件
在action属性中操作,数据格式如下:

1
click@searchTerm(form-termId)>searchTable

其中:事件名: click

关联元素名称(kid): searchTerm

参数关联元素名称(kid): form-termId

回调数据处理接收关联元素: searchTable (根据可编程属性来关联返回值)

使用方法

可以参考dist目录中标准示例,默认不开启编辑模式,开启编辑模式方式:按住ctrl键 + body上点击鼠标左键,打开编辑模式的快捷键支持自定义。

todo list

  1. 单页系统由于Gear本身占用了HASH,所以SPA的支持采用HASH后面加query参数,这样需要Gear类处理这些参数

特性

  1. 新增Cache元素类型,用于处理请求
  2. 新增Action元素类型,用于处理数据,目前采用JS代码处理,类似管道操作,可以用于对接数据字段名称,是的接口的结果和关联元素的关联返回值一致。
  3. 新增函数类型,函数目前支持For和If,可以用来处理一些逻辑。
  4. 嵌套层级结构支持。
  5. 页面级别组件和通用组件支持。可以直接被引用。

谢谢!

转载请注明出处:http://www.fed123.com/2017/04/19/2017_vue_react/
欢迎关注皓眸学问公众号(扫描左侧二维码),每天好文、新技术!任何学习疑问或者工作问题都可以给我留言、互动。T_T 皓眸大前端开发学习 T_T

未经允许不得转载:皓眸大前端 » 前端渲染框架,业务开发利器Gear

赞 (0)
分享到:更多 ()

评论 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. chalecao没人能懂?回复
  2. chalecao心酸啊心酸,何时能走向成功!回复