我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 本文作者：霜序本文首发于：https://juejin.cn/post/7299384698882539574 在大数据业务中，时常会出现且或关系逻辑的拼接，有需要做成可视化配置，如下图 目前该组件已经开源到了我们组件库dt-react-component，详细查看 前期分析 需要确定好数据结构 因为是嵌套结构，可以通过➕➖来增加层级或者数据，因此采用树形结构来存储数据。 exportinterfaceIFilterValue<T>{ key:s...

我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 本文作者：佳岚 Suspense Suspense组件我们并不陌生，中文名可以理解为暂停or悬停 ,在React16中我们通常在路由懒加载中配合Lazy组件一起使用，当然这也是官方早起版本推荐的唯一用法。 那它暂停了什么？进行异步网络请求，然后再拿到请求后的数据进行渲染是很常见的需求，但这不可避免的需要先渲染一次没有数据的页面，数据返回后再去重新渲染。so,我们想要暂停的就是第一次的无数据渲染。 通常我们在没有使用Suspense时一般采用下面这种写...

我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 本文作者：佳岚 Themoreyourtestsresemblethewayyoursoftwareisused,themoreconfidencetheycangiveyou.您的测试越接近软件的使用方式，它们就越能给您带来信心。 什么是testing-library? 在了解testing-library前，我们可以看看使用原生方法是如何进行React组件测试的。 importHeaderfrom".." importclientfrom'react-...

我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 本文作者：修能 生产力工具+AI是不可逆转的趋势，慢慢的大模型能力通过AIAgent落地的工程化能力也开始趋于成熟。作为大数据产品的数栈也必然是需要借助AI能力提升产品竞争力。去年12月，我们在产品中上线了AI+的功能，借助已经开源的大模型的能力，帮助我们探索和落地更多地应用场景。在初版AI+的功能中，我们实现了基础功能的通话。 SSE 在ChatGPT中，我们在等待大模型生成回答的时间通常不需要很久。这是因为ChatGPT通过server-sentevent...

我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 本文作者：大喜 相关文章：袋鼠云出品！数栈UI5.0全新体验升级，设计背后的故事 前言 表单是B端产品中最常见的组件之一，主要⽤于数据收集、校验和提交。比如登陆流程的账号密码填写，注册流程的邮箱、用户名等信息填写，都是表单应用的常见案例，在数栈产品中也是出现频率⾮常⾼的组件。 尽管表单应用十分普遍，但在我们对旧版数栈产品进行调研时，发现许多产品同学都反馈了关于表单的问题。所以在实际设计时关于「表单」会有很多需要去思考的问题: 标签是使⽤左右布局还是上下布...

我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 本文作者：星野 困境频生前端代码管理何解？ 前端代码管理一直是困扰着不少前端开发团队的难题，从开发到发布的整体工作流程中，除了常规的技术问题外，往往还伴随着沟通成本、维护成本及协作效率等问题。这些问题在团队规模较小的时候可能不太明显，但是当团队规模变大时矛盾就越发凸显。数栈前端开发团队负责着离线开发、实时开发、数据服务、数据资产等多条产品线的开发和维护工作，面对众多的产品线，如何合理的管理代码，成了团队需要思考的问题，虽然借助了Multirepo进行管理，但还...

我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 本文作者：贝儿 前言 本文中会提到很多目前数栈中使用的特定名词，统一做下解释描述 dt-common：每个子产品都会引入的公共包(类似NPM包) AppMenus：在子产品中快速进入到其他子产品的导航栏，统一维护在dt-common中，子产品从dt-common中引入 Portal：所有子产品的统一入口 APP_CONF：子产品的一些配置信息存放 背景 由于迭代中，我们有很多需求都是针对AppMenus的，这些需求的生效需要各个子产品的配合，进行统一变更。...

我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 本文作者：奇铭 前言 目前数栈的多个产品中都支持在线编辑SQL来生成对应的任务。比如离线开发产品和实时开发产品。在使用MonacoEditor为编辑器的基础上，我们还支持了如下几个重要功能： 多种SQL的语法高亮 多种SQL的报错提示（错误位置飘红） 多种SQL的自动补全（智能提示） 本文旨在讲解上述功能的实现思路，对于技术细节，由于篇幅原因不会阐述的太详细。 MonacoLanguages MonacoEditor内置的languages MonacoE...

我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 本文作者：修能 朝闻道，夕死可矣 何为Molecule？轻量级的WebIDEUI框架——Molecule我们开源了一个轻量的WebIDEUI框架Molecule实现数栈至简前端开发新体验 前言 构建通常指的是把源代码转换成发布到线上的可执行JavaScrip、CSS、HTML代码。在前端发展的过程中，源代码的模块体系在不断的更新，最终产物也在不断的更新。而随之也使得构建工具也在不断更新换代。 而目前来看，基于前端的细化领域下，针对不同领域下的构建工具也日新...

我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 本文作者：的卢 引入 在日常开发过程中，我们会使用很多性能优化的API，比如像使用memo、useMemo优化组件或者值，再比如使用shouldComponentUpdate减少组件更新频次，懒加载等等，都是一些比较好的性能优化方式，今天我将从组件设计、结构上来谈一下React性能优化以及数栈产品内的实践。 如何设计组件会有好的性能？ 先看下面一张图： 这是一颗React组件树，App下面有三个子组件，分别是Header、Content、Footer，在Co...

我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 本文作者：佳岚 回顾传统React动画 对于普通的React动画，我们大多使用官方推荐的react-transition-group，其提供了四个基本组件Transition、CSSTransition、SwitchTransition、TransitionGroup Transition Transition组件允许您使用简单的声明式API来描述组件的状态变化，默认情况下，Transition组件不会改变它呈现的组件的行为，它只跟踪组件的“进入”和“退出”状...

前言 加密解密是前后端开发经常需要使用到的技术，应用场景包括不限于用户鉴权、数据传输等，不同的应用场景也会需要使用到不同的签名加密算法，或者需要搭配不一样的签名加密算法来达到业务目标。所以了解加解密，以及常用的加解密函数库，可以根据不同的业务场景，选择适合当下业务场景的加解密函数库。 安全性威胁 这里借用workPlus对于安全性威胁概括，进行说明： 第一，中断 攻击者有意破坏和切断他人在网络上的通信，这是对可用性的攻击。 第二，截获 属于被动攻击，攻击者从网络上窃听他人的通信内容，破坏信息的机密性。 第三，篡改 攻击者故意篡改网络上传送的报文，这是对完整性的攻击。 第四，伪造 攻击者伪造信息...

ThereareathousandHamletsinathousandpeople'seyes.----威廉·莎士比亚 免责声明：以下充满个人观点，辩证学习 React目前开发以函数组件为主，辅以hooks实现大部分的页面逻辑。目前数栈的react版本是16.13.1，该版本是支持hooks的，故以下实践是hooks相关的最佳实践。 前置理解 首先，应当明确React所推崇的函数式编程以及f(data)=UI是什么？ 函数式编程 函数式编程是什么？这里的函数并非JavaScript中的函数，或任何语言中的函数。此处的函数是数学概念中的函数。让我们来回忆一下数学中的函数是什么。 在数学概念中，...

我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 本文作者：琉易https://liuxianyu.cn 本次分享基于『袋鼠云数栈UED团队』新发布的UEDLanding页实践得来，UEDLanding页集合了团队目前所有的基础建设以及精选文章，是团队展现风采的一个地方。项目基于next.js、ts、pnpm、koa2、MongoDB等技术方式实现，代码仓库：https://github.com/DTStack/UED，欢迎star。 需求介绍 Landing页有一个专栏页面，需要展示团队以往发在掘金社区的...

我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 本文作者：正则 作为一名前端开发人员，平时开发中使用最多的就是Chromedevtools，但可能很多同学像我一样平时用的最多也就Console、Elements和Network面板了。除了我们常用的一些功能，它还提供了很多强大但我们不太常见的功能，这些功能可以大大提高我们的开发效率。下面我们就来了解一下。 使用Chrome的截图工具 进行网页截图，一般情况我们都使用的是第三方工具，但其实Chrome已经为我们提供了截图功能。使用Command+SHIFT+P...

我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 本文作者：霜序(LuckyFBB) 前言 在之前的文章中，我们讲述了React的数据流管理，从props→context→Redux，以及Redux相关的三方库React-Redux。 那其实说到React的状态管理器，除了Redux之外，Mobx也是应用较多的管理方案。Mobx是一个响应式库，在某种程度上可以看作没有模版的Vue，两者的原理差不多 先看一下Mobx的简单使用，线上示例 exportclassTodoList{ @observabletodos...

我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 前言 访问控制（Accesscontrol）是指对访问者向受保护资源进行访问操作的控制管理。该控制管理保证被授权者可访问受保护资源，未被授权者不能访问受保护资源。 现实生活中的访问控制可以由付费或者认证达成。例如：进电影院看电影，需要够买电影票，否则检票员就不让你进去。 访问控制有很多模型，比如： 自主访问控制模型(DiscretionaryAccessControl) 强制访问控制模型(MAC:MandatoryAccessControl) 角色访问控制模...

我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 兼容性问题 第三方依赖兼容问题 React最低v16.9，部分组件使用hooks重构react升级相关文档 Less最低v3.1.0，建议升级到less4.x @ant-design/icons-antd不再内置Icon组件，请使用独立的包 对3.x的兼容性处理 或许是考虑到部分组件升级的毁坏性，antd4.x中依然保留了对3.x版本的兼容，废弃的组件通过@ant-design/compatible保持兼容，例如Icon,Form注：建议@ant-design...

我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 前言 单元测试是一种用于测试“单元”的软件测试方法，其中“单元”的意思是指软件中各个独立的组件或模块。开发者需要为他们的代码编写测试用例以确保这些代码可以正常使用。 在我们的业务开发中，通常应用的是敏捷开发的模型。在此类模型中，单元测试在大部分情况下是为了确保代码的正常运行以及防止在未来迭代的过程中出现问题。 测试目的 1、排除故障 每个应用的开发中，多少会出现一些意料之外的bug。通过测试应用程序，可以帮助我们大大减少此类问题，并且增强应用程序的逻辑性。 2、保...

我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 前言 数栈作为云原⽣⼀站式⼤数据开发平台，从2016年发布第⼀个版本开始，数栈就始终坚持着以技术为核⼼、安全为底线、提效为⽬标、中台为战略的思想，坚定不移地⾛国产化信创路线，不断推进产品功能迭代、技术创新、服务细化、性能升级。 伴随业务的⻜速发展，我们也启动了针对数栈产品的体验升级计划，从策划到最后应⽤到各个⼦产品，共经历了五个阶段：策划⽅案制定、设计⽅案落地、转化设计语⾔、Theme&RC升级、⼦产品实施。本⽂主要阐述了在数栈UI5.0体验升级中，数栈设...