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

简介: DingTalk「开发者说」是钉钉开发者最新上线的开发者栏目,联合阿里云ACE团队,分享钉应用开发解决方案、技术更新、实战技巧,致力于成为钉钉与开发者的桥梁与纽带,让更多的钉钉开发者传播技术、提升技能、分享观点。在数字化变革的时代,“云钉一体”“钉钉全面开放”战略之后,希望钉钉技术可以持续激发开发者的创造力,为组织数字化赋能。本篇介绍了钉钉前端开放的概况及其对开发者的业务价值思考,最后从高级技术专家视角,为大家讲解前端团队如何在业务中取得突破

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

视频地址:一键回看

正文:

一、钉钉前端开放概况

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
  • 钉应用设计与素材下载

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

开发者文档门户可以下载并使用已开放的能力:https://open.dingtalk.com/document/

二、钉钉开放能力介绍

1. DingTalk Design CLI开发工具

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

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

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

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

d. 内网穿透能力集成

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

https://open.dingtalk.com/document/resourcedownload/introduction

功能演示(详见视频):

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,使开发者使用更加便捷。

相关文章
|
3月前
|
JavaScript 前端开发 测试技术
Vue.js开发者必看!Vue Test Utils携手端到端测试,打造无懈可击的应用体验,引领前端测试新风尚!
【8月更文挑战第30天】随着Vue.js的普及,构建可靠的Vue应用至关重要。测试不仅能确保应用质量,还能提升开发效率。Vue Test Utils作为官方测试库,方便进行单元测试,而结合端到端(E2E)测试,则能构建全面的测试体系,保障应用稳定性。本文将带你深入了解如何使用Vue Test Utils进行单元测试,通过具体示例展示如何测试组件行为;并通过Cypress进行E2E测试,确保整个应用流程的正确性。无论是单元测试还是E2E测试,都能显著提高Vue应用的质量,让你更加自信地交付高质量的应用。
63 0
|
3月前
|
存储 前端开发 JavaScript
Vuex 难题困扰无数开发者,掌握这些秘诀,让你在前端热潮中轻松突围!
【8月更文挑战第27天】Vuex 是 Vue.js 的一种状态管理模式,它支持集中式存储及状态管理。使用过程中,开发者常遇问题包括:状态更新不一致、异步操作困难以及模块组织不当等。为确保状态更新的一致性,应利用 mutations 进行状态更改。对于异步操作,推荐使用 actions 处理以避免状态变更追踪难题。此外,合理划分模块并采用清晰命名有助于提升大型项目的可维护性。
31 0
|
3月前
|
前端开发 数据安全/隐私保护 开发者
热门聚焦!Web 前端 CSS 选择器 —— 解锁精美网页的密码,触动开发者心灵深处!
【8月更文挑战第23天】CSS 选择器是 Web 前端设计中的关键工具,用于精准定位和美化页面元素。主要包括:直观的元素选择器(如 `p`),灵活的类选择器(如 `.my-class`),唯一的 ID 选择器(如 `#unique-div`),以及可根据属性选择的属性选择器(如 `a[title]`)。此外,后代选择器(如 `div p`)、子选择器(如 `ul > li`)和相邻兄弟选择器(如 `h1 + p`)可用于更复杂的选择。通用选择器(如 `*`)则适用于所有元素。通过组合这些选择器,开发者能够创建出既复杂又美观的网页样式,提升用户体验。
34 0
|
3月前
|
存储 前端开发 开发者
Web 前端热点来袭!数组去重难题何解?快来探索这些超实用方法,引发开发者共鸣!
【8月更文挑战第23天】在Web前端开发中,去除数组中的重复项是提升数据准确性和效率的关键步骤。本文介绍了四种常用的数组去重方法:一是运用ES6的Set数据结构,通过构造Set对象并转换回数组,快速剔除重复值;二是结合for循环与`indexOf`方法,逐个检查元素是否已存在于新数组中;三是采用`forEach`循环与`includes`方法实现类似功能;四是利用`reduce`方法,以函数式编程方式完成累积检查和去重。这四种方法各有优势,可根据项目需求和环境选择使用。
58 0
|
5月前
|
JavaScript 前端开发 Java
基于SpringBoot+Vue+uniapp的在线开放课程的Web前端的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的在线开放课程的Web前端的详细设计和实现(源码+lw+部署文档+讲解等)
|
6月前
|
前端开发 JavaScript 网络协议
【专栏】探讨了前端性能优化中的 Performance 工具,它能帮助开发者分析页面加载速度和交互体验
【4月更文挑战第29天】本文探讨了前端性能优化中的 Performance 工具,它能帮助开发者分析页面加载速度和交互体验。通过 Performance,可检测资源加载时间、JavaScript 执行时间、重绘与回流等关键指标,找到性能瓶颈。文中列举了三个实践案例,如优化图片加载、减少 JavaScript 执行时间和避免重绘回流,展示如何利用 Performance 改进页面性能,提升用户体验。开发者应定期使用 Performance 分析并学习新优化技术,以适应Web开发的快速发展。
237 1
|
6月前
|
前端开发 JavaScript NoSQL
从前端到后端:构建全栈开发者的必备技能
随着互联网技术的不断发展,全栈开发者的需求日益增长。本文将介绍如何从前端到后端,掌握全栈开发所需的关键技能,包括前端框架的选择、后端语言的学习以及数据库的应用,帮助读者构建成为全面的技术专家。
|
6月前
|
Dart 数据处理 开发者
【Flutter前端技术开发专栏】Flutter是谷歌的开源移动框架,以其高性能和跨平台能力受开发者青睐。
【4月更文挑战第30天】Flutter是谷歌的开源移动框架,以其高性能和跨平台能力受开发者青睐。本文聚焦Flutter开发关键知识点:1) Dart语言和Flutter框架基础,如Widget和State;2) 路由管理,包括基本和命名路由,以及路由传值;3) 使用http、dio等库进行网络请求和数据处理;4) ThemeData定义应用主题,实现样式主题化。掌握这些技能将提升Flutter开发效率和应用质量。
60 0
|
18天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
|
18天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
33 0