DingTalk「开发者说」第7期 钉钉前端开放及其业务思考

分享人：氐宿，钉钉开放平台大前端负责人，高级前端专家

视频地址：一键回看

正文：

一、钉钉前端开放概况

1. 前端开放的目的

目前，JavaScript是业界应用最广泛的语言。Jeff Atwood在2007年说过：任何可以使用JS编写的应用最终都会由JS来编写。随着JS的流行，前端的重要性和稀缺性就更加突出。钉钉希望提供给开发者一整套前端开箱即用的工具产品，帮助开发者更方便快速的开发钉应用。

Atwood’s Law

“any application that can be written in JavaScript, will eventually be written in JavaScript.”

by Jeff Atwood 2007

Out of the box

“我们希望提供给开发者一整套前端开箱即用的工具产品，帮助开发者更方便快速的开发钉应用”

by 氐宿 just now

2. 前端视角开放设计

前端视角开放设计的方法论是“两建一提一定”：

a. 两建：

• 构建开放场景：根据业务/企业需求，发挥钉钉的优势做好企业所需的办公应用，开放底座让更多生态一起为企业提供定制化服务，如：工作台、智能人事、机器人、应用中心，等；
• 建设开放能力/产品：通过前端底座技术的开放让生态得以快速将自身能力集成到场景中，如：DSL、宜搭、DingDesign、组件/图表，等；

b. 一提：

• 提供开放基础设施，如：开发/调试、脚手架、部署、性能/数据分析、框架/SDK等；

c. 一定：

• 制定开放标准/规范，如：编码规范、设计规范、埋点/安全生产、协议/模型，等，以减少侵入式代码对核心功能的影响。

3. 前端配合业务的工具能力开放

前端配合业务的工具能力矩阵

前端开放策略体现在两个方面：

a. 通过钉钉已有的前端能力服务一二三方开发者，同时从服务通路获取开发者反馈；

b. 通过技术降低开发者门槛，通过文章、分享为钉钉已有能力进行布道和传播。

4. 目前开放平台已开放的能力

• 小程序开发工具
• 前端API调试工具
• 内网穿透工具
• D-Design组件库
• 服务端API调试工具
• 微应用调试工具
• DingTalk Design CLI
• 钉应用设计与素材下载

钉钉希望能覆盖开发者研发周期里的各个环节，以缩短开发者的应用交付周期。

开发者文档门户可以下载并使用已开放的能力：钉钉开发文档

二、钉钉开放能力介绍

1. DingTalk Design CLI开发工具

DingTalk Design CLI是钉钉前端应用研发命令行工具，它提供以下能力：

a. 小程序、H5微应用、工作台组件的初始化能力；

b. 小程序和工作台组件的本地构建、开发调试、预览、校验和上传等能力；

c. H5微应用本地模拟器开发的能力；

d. 内网穿透能力集成。

感兴趣的朋友可以通过下面网址下载并了解该能力：

DingTalk Design CLI简介 - 钉钉开放平台

功能演示（详见视频）：

以H5调试为例，基本步骤如下：

a. 查看DingTalk Design CLI版本；

b. 使用DingTalk Design CLI初始化代码，初始化一个H5微应用；

c. 初始化完成后启动H5本地开放模拟器；

d. 启动H5开放模拟器后，扫码登录；

e. 登录完成后就可以在模拟器中调试页面及JSAPI；

f. 完成本地开发后就可以开始准备真机调试和部署。

2. D-Design

D-Design（DingDesign，https://standard.dingtalk.com）是钉钉设计和产研配合的结晶，旨在帮助开发者快速开发符合钉钉设计规范的开箱即用前端组件库。D-Design的能力包括：

a. 完美支持钉钉主题，支持浅色主题以及暗色主题；

b. 提供小程序、React Mobile、React PC 的组件支持。

DingDesign拥有丰富的组件样式和类型

开箱即用的使用体验、多端代码示例及样式预览

3. DingStudio（即将发布）

DingStudio是一款辅助应用开发的桌面端应用程序，集成了钉钉微应用研发、调试等能力，让应用开发更加便捷（支持Windows/MacOS）。

操作演示（抢先版）

DingStudio主界面

操作演示主要基于DingStudio的核心能力进行介绍。

a. 项目的运行和管理

代理能力：通过代理配置来完成；

Web调试

项目的创建和运行

• 新建项目：可以选择使用本地目录或使用模板；

• 项目建好后就可以进行相应的功能配置；
• 运行新建项目，选择使用模板系统会有相应的运行命令配置；

运行后可在模拟器中查看运行效果；

b. 插件：是附加的脚本以实现特殊效果，在DingStudio初始会提供2个插件：复制corpid和复制页面链接；

示例：复制页面链接

开发者也可以在钉钉开发者后台-应用开发-开发管理中，选择所需要的插件并添加到DingStudio插件中使用。

4. 能力中心应用开发大图&前端开放的位置

下图是钉钉能力中心应用开发规划图。

最上层是钉钉开发者，钉钉将开发者分为不同等级（低代码开发者、初级开发者、中级开发者、资深级开发者），并针对不同等级开发者提供不同的能力和工具。前端开放的位置在钉原生和云原生的部分（见红框），其目的是配合两个原生平台生产更多更好用的应用产品。

三、开放平台前端业务

1. 钉钉开放平台业务大图

前端开放不等于开放平台业务前端。钉钉开放平台旨在衔接企业用户与生态之间的需求匹配，帮助生态更好更便捷的服务企业用户。

钉钉开放平台业务大图

钉钉开放平台希望与生态一起构建完整的选、用、开体系，实现业务共赢。通过高质量服务企业用户，赢取口碑宣传，以吸引更多开发者入驻，并提出更多能力开放需求，从而丰富钉钉应用平台。

2. 开放平台端侧业务支撑及分工

下图是钉钉开放平台端团队的业务分工模块，在后期的“开发者说”会有专人进行详细讲解，敬请关注。

3. ToB用户体验的挑战

麦肯锡比较了2004年到2014年设计驱动公司的设计价值指数与标准普尔指数，在这10年中，设计价值指数的增长超过标准普尔指数219%，从实践上验证了重视体验的企业获得了远远超过行业平均水平的发展速度。ToB领域体验经济的发展远远落后于ToC领域。

根据麦肯锡的数据，B2C的用户体验评分在65-80分之间，而B2B的用户体验评分低于50分。

a. 为什么ToB领域体验优化难？

• ToB领域的用户群体专业性比终端消费者强；
• ToB的系统的流程涉及跨部门多角色，功能远比ToC复杂；
• 互联网加速ToC体验，ToB互联网的发展因专业性较强发展滞后；

b. ToB领域体验如何做？

• 互联网沉淀了多年ToC的体验，ToB需要借鉴经验；
• 应用功能碎片化，企业用户流程如何集中；
• 单一应用类型无法满足企业运转，需要场景化；
• 系统迭代加速导致培训跟不上，需要做到开箱即用；

4. 向前一步，分析业务

在具体业务中如何落实上文的ToB领域体验，首先需要进行业务分析。

a. 收集信息

收集业务信息的渠道有很多，比如：企业财报，数据平台的行业数据分析等等。

b. 分析业务面临的挑战

• 产品定位

• • 钉钉面向的是工作场景，是任务驱动型的，主要体现在一些工具软件方面。效率才是产品的使用目标。

• 选和用

• • 面向用户（诸如工作台、应用中心等产品）
  • What：提升工作效率的工具/工具集合；
  • How：如何更快更便捷的连接用户与工具/工具集合；
  • 业务前端的角色：导购，帮助用户快速的找到自己需要的商品；
  • 挑战：现在的应用品类和数量都不够丰富；
  • 解决方案：构建开发者生态，丰富钉钉应用品类，给用户更多的选择；

• 选和开

面向开发者

• • What：在钉钉上生产/开发工具应用；
  • How：如何在钉钉上开发更多的工具/应用；
  • 业务前端的角色：生产车间，帮助厂家快速的生产满足市场需求的商品；
  • 挑战：细节体验及专业性较差；
  • 解决方案：帮助开发者构建满足企业需求的专业性SaaS应用；

5. 思考技术/前端在业务中的价值

管理者对技术的期待（下图）是希望通过技术支撑业务，业务再投资技术，从而使技术的生产力发生变化，并驱动技术变革，从创造价值和降低成本出发，发展出新的技术特性，从而涌现新业务，新增业务价值再回报给技术并推动技术生产力的发展，实现技术和业务发展的良性循环。

管理者期待的业务和技术的化学作用

因此，技术在改变业务现状中的价值表现在7个方向：

a. 技术创新

• 角度：技术/业务；
• 前瞻性技术探索创造客户价值，同时要具备业务能力发现业务中的增量和价值；

b. 流程优化

• 角度：技术/管理；
• 重塑合作模式与研发生态，一方面作为平台让生态集成进来，一方面作为解决方案中的一部分服务企业；

c. 团队合作

• 角度：管理/业务；
• 开放共创的心态推动团队高效合力；

d. 团队管理

• 角度：业务/管理；
• 从公司生命周期出发填补大盘碎片；

e. 驱动业务

• 角度：业务/产品；
• 技术人员具备业务能力，让技术驱动业务，为业务航向引入新的增长因子；

f. 商业决策

• 角度：业务/产品；
• 从数据角度驱动更优决策诞生；

g. 影响大盘

• 角度：管理/业务；
• 保障组织目标实施组建人才梯队。

6. 了解更多方法论

• 氐宿：《技术人的灵魂3问，阿里工程师如何解答》

如何在业务中发现有技术价值的问题？

发现问题后如何思考和发起再到解决？

最后的技术结果跟业务结果如何衔接？

文章针对上述技术人的灵魂3问给出的答案是，要从业务工程师角度出发实现业务先赢。技术人要具备导弹性思维，在行动中实现智能导航，锁定并跟踪目标，根据实际情况修正自身路径，要先将“为什么”考虑清楚才能引导正确的决策。因此，最好的工程师不只要了解技术，还需要掌握多种领域技能。

• 钉钉官方推荐：《钉钉小程序开发权威指南》

本书细致全面地介绍钉钉小程序技术原理及开发要点，详细解说从成为一名钉钉开发者到小程序应用商家的每一步流程。

四、Q&A

Q：DingTalk Design CLI与阿里云的CLI有哪些区别？是否可以使用DingTalk Design CLI完成在开发者后台的所有操作？

A：DingTalk Design与阿里云的CLI区别在于：

• 阿里云CLI：

主要针对云服务开放的API包装，面向服务端运维类的开发者，通过API操作服务端上的应用；

• DingTalk Design CLI：

1. 主要面向前端和全站，帮助开发者解决应用开发周期中遇到的各种问题；

2. 由于DingTalk Design CLI致力于通过线下解决研发流程中的问题，在开发者后台中的一些功能主要面向线下开发者提供的工具。

Q：明年钉钉开放平台对开发者有哪些利好内容？

A：比如上面介绍的DingStudio，会作为未来主要面向开发者的工具，钉钉会集成更多能力到DingStudio，使开发者使用更加便捷。