Open ChenJiaH opened 4 years ago
首发于微信公众号《前端成长记》,写于 2020.01.22
PPT地址
内容源自作者上个月部门内部的分享,本文将围绕着以下四个角色来聊:
京东数科CEO陈生强在杭州乌镇互联网大会上说道:产业数字化核心本就是去解决企业的效率问题。
所谓“工欲善其事,必先利其器”。有了一些开发工具的辅助,我们能更高效地进行工作。
交互和前端合作起来有个最大的痛点,就是原型更新同步需要人力沟通,出错率高,所以我们可以通过一下两种方式来解决。
Axure Interactive Redline Tool
可以类比 Sketch 中的 Measure 插件。主要优点如下:
基于 Nginx 搭建局域网一体化文档平台
交互同学在本机搭建 Nginx 服务,配置好目录后,每次生成文件导出到该指定目录即可完成更新。前端同学可以通过 IP 完成局域网访问。这样都可以避免更新传递过程导致的问题。
视觉和前端合作的时候,有时候会利用率不高,需要重复设计或者重复开发,所以为了解决这个问题,通常会采用下面的方式。
设计元素库 + 协同修改
在某种程度上统一设计规范,提供多套色系模版,以便快速生成对应的设计元素库,再配合开发 Sketch 插件,即可做到实时协同。本质上也是解决的是协同的效率和准确性。
元素 -> 组件 -> 系统模版
有了元素库以后,元素组合或者调整就可以发布成新的组件。组件组合加页面约束就可以生成系统,能够高效复用,快速完成相似度高的中后台系统的搭建与开发。
这里的页面约束指的是边距等一些基本设计约束定义。
GUI 工具
使用现有模版或者自行拖拽组合现有的组件,快速初始化对应项目UI及基本交互。这里可以参考阿里的飞冰。
Sketch 插件进行发布维护
通过 Sketch 插件进行组件的发布维护,将组件的维护权交给设计端,解决设计稿的还原度问题,解放前端花在 UI 上的时间。
这里我们有遇到这么一个痛点:交互的初稿过程是带有逻辑性的,如果给产品看原型的话可能不够直观,并且说服力不足。这里我们有一个解决方案如下:
原型 -> 页面
通过原型导出成 Markdown 文件,然后针对该文件做解析,然后拿到结构自动生成带导航内容的预览页面。
前端也总结了几种方式来提高效率。
功能抽象,反馈交互和视觉
针对功能性需求,尽可能将其进行抽象,反馈给交互和视觉拓展组件元素,提高复用性。
Git Hooks + ESlint
类似设计,约定一套代码规范。在多人协作过程中,通过 BeforeCommit 钩子,自动进行代码质量检查,保障合作效率。
JSON + 组件 + 页面约束
通过 JSON 配置来建立组件的引用关系,加上页面阅读即可快速高效地生成一些偏固化的流程页。比如:实名认证、修改密码、风险评估等。
协议平台
以前的协议需要设计排版和前端制作,费时费力。通过将协议编译成 HTML,加上基本的设计约束和设计样式即可自动生成协议页面,大大提高效率,节省了时间。
前端和后端最大的一个吐槽点就是接口文档,格式参差不齐,交付方式千奇百怪。
接口文档平台
前后端的接口沟通往往是最费时且容易出错的。我们通过代码注释,生成可维护可预览的接口文档,在线对比测试,降低了出错率和沟通成本,同时也可以接入 Mock 进行更为完善的测试,节约测试资源。
网关平台
让后端只需要关心服务提供,前端只需要关心接口调用。中间的差异抹平交由网关层,同时也支持多接口调用,也能提高开发效率。
后端由于只是略有涉猎,在这大胆做两个设想。
GraphQl + 可行的数据库设计
之前可能会出现需求微调,导致前后端都需要做字段更新等操作。引入 GraphQl 后,取什么数据由前端来决定。接口服务与数据库的链接可以参考 Restful 风格设计,或者其他可行的设计方式。
结合 GUI 工具快速完成简单项目
可以利用之前提到的 GUI 工具,通过拖拽实现自动布局,快速生成无复杂交互的项目,如一些表单项目:EBS、保单填写等。
我们首先要做的事:
需要我们长期做的事:
在业务相对趋于平稳的时期,提升各方面效率依然可以持续地创造价值。
最后,一句话共勉:有你有我,未来可期。
以上是分享的全部内容,感谢!
(完)
本文为原创文章,可能会更新知识点及修正错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验 如果能给您带去些许帮助,欢迎 ⭐️star 或 ✏️ fork (转载请注明出处:https://chenjiahao.xyz)
test
换个角度聊效率
PPT地址
内容源自作者上个月部门内部的分享,本文将围绕着以下四个角色来聊:
为什么要聊这个
京东数科CEO陈生强在杭州乌镇互联网大会上说道:产业数字化核心本就是去解决企业的效率问题。
效率的基本保障
所谓“工欲善其事,必先利其器”。有了一些开发工具的辅助,我们能更高效地进行工作。
如何提升效率
交互&前端
交互和前端合作起来有个最大的痛点,就是原型更新同步需要人力沟通,出错率高,所以我们可以通过一下两种方式来解决。
Axure Interactive Redline Tool
可以类比 Sketch 中的 Measure 插件。主要优点如下:
基于 Nginx 搭建局域网一体化文档平台
交互同学在本机搭建 Nginx 服务,配置好目录后,每次生成文件导出到该指定目录即可完成更新。前端同学可以通过 IP 完成局域网访问。这样都可以避免更新传递过程导致的问题。
视觉&前端
视觉和前端合作的时候,有时候会利用率不高,需要重复设计或者重复开发,所以为了解决这个问题,通常会采用下面的方式。
设计元素库 + 协同修改
在某种程度上统一设计规范,提供多套色系模版,以便快速生成对应的设计元素库,再配合开发 Sketch 插件,即可做到实时协同。本质上也是解决的是协同的效率和准确性。
元素 -> 组件 -> 系统模版
有了元素库以后,元素组合或者调整就可以发布成新的组件。组件组合加页面约束就可以生成系统,能够高效复用,快速完成相似度高的中后台系统的搭建与开发。
GUI 工具
使用现有模版或者自行拖拽组合现有的组件,快速初始化对应项目UI及基本交互。这里可以参考阿里的飞冰。
Sketch 插件进行发布维护
通过 Sketch 插件进行组件的发布维护,将组件的维护权交给设计端,解决设计稿的还原度问题,解放前端花在 UI 上的时间。
交互&视觉&前端
这里我们有遇到这么一个痛点:交互的初稿过程是带有逻辑性的,如果给产品看原型的话可能不够直观,并且说服力不足。这里我们有一个解决方案如下:
原型 -> 页面
通过原型导出成 Markdown 文件,然后针对该文件做解析,然后拿到结构自动生成带导航内容的预览页面。
前端
前端也总结了几种方式来提高效率。
功能抽象,反馈交互和视觉
针对功能性需求,尽可能将其进行抽象,反馈给交互和视觉拓展组件元素,提高复用性。
Git Hooks + ESlint
类似设计,约定一套代码规范。在多人协作过程中,通过 BeforeCommit 钩子,自动进行代码质量检查,保障合作效率。
JSON + 组件 + 页面约束
通过 JSON 配置来建立组件的引用关系,加上页面阅读即可快速高效地生成一些偏固化的流程页。比如:实名认证、修改密码、风险评估等。
协议平台
以前的协议需要设计排版和前端制作,费时费力。通过将协议编译成 HTML,加上基本的设计约束和设计样式即可自动生成协议页面,大大提高效率,节省了时间。
前端&后端
前端和后端最大的一个吐槽点就是接口文档,格式参差不齐,交付方式千奇百怪。
接口文档平台
前后端的接口沟通往往是最费时且容易出错的。我们通过代码注释,生成可维护可预览的接口文档,在线对比测试,降低了出错率和沟通成本,同时也可以接入 Mock 进行更为完善的测试,节约测试资源。
网关平台
让后端只需要关心服务提供,前端只需要关心接口调用。中间的差异抹平交由网关层,同时也支持多接口调用,也能提高开发效率。
后端
后端由于只是略有涉猎,在这大胆做两个设想。
GraphQl + 可行的数据库设计
之前可能会出现需求微调,导致前后端都需要做字段更新等操作。引入 GraphQl 后,取什么数据由前端来决定。接口服务与数据库的链接可以参考 Restful 风格设计,或者其他可行的设计方式。
结合 GUI 工具快速完成简单项目
可以利用之前提到的 GUI 工具,通过拖拽实现自动布局,快速生成无复杂交互的项目,如一些表单项目:EBS、保单填写等。
做个总结
TODOS
我们首先要做的事:
NEEDS
需要我们长期做的事:
SUMMARY
在业务相对趋于平稳的时期,提升各方面效率依然可以持续地创造价值。
最后,一句话共勉:有你有我,未来可期。
以上是分享的全部内容,感谢!
(完)