OpenTiny的博客

开发者完成 addon 开发后，可以将其发布到各种仓库，供后续自己或其他开发者使用。不同于纯 JS 模块，addon 模块中有 C/C++代码，必须编译后才能使用。addon 开发者可以只发布 C/C++ 源码，让它在用户 npm install 装包的时候自动进行编译构建；也可以把编译产物也一起发布，让用户侧省去编译构建的步骤。如下图所示，是 addon 生命周期。其中，预构建是个可选环节，是否使用取决于 addon 开发者根据特定 addon 自身情况的选择。

作为 Node.js 的使用者，想必同学们对“内置模块”这个概念并不陌生：Node.js 内置模块也叫核心模块，预置在 Node.js 运行时中，这些内置模块不需要额外下载安装，可以在 js 代码中通过 require 引入。常用的内置模块包括 fs、http 等对于这些天天使用的功能，大家有没有好奇过它们是怎么开发出来的呢？为了更好地了解 Node.js 的底层实现，我把这套流程自己走了一遍。这里可以跟大家分享一下：如何基于 Node.js 开源代码定制开发，添加一组新的内置模块。

本文由体验技术团队Kagol 原创如果你有以上困扰，推荐大家使用一款 E2E 测试神器：Playwright，新手友好，即使是初学者也能轻松学会！Playwright 是由微软开发的一款强大的自动化测试工具，旨在为现代Web应用程序提供全面的端到端（E2E）测试解决方案。它支持主流浏览器，包括 Google Chrome、Microsoft Edge、Mozilla Firefox 和 Apple Safari，并且能够在 Windows、macOS 和 Linux 平台上运行。

本文由体验技术团队Kagol原创。2024年8月20日，刚开源一周的富文本 Fluent Editor 迎来了第一位贡献者：zzxming。

本文主要给大家分析了 Monorepo 方式组织项目代码的好处，以及不使用 Monorepo 可能带来的麻烦；然后以一个 Vite + Vue3 项目为例，手把手带大家一起将它改造成 Monorepo 项目；在此基础上，如何扩展一个新项目，并且新项目技术栈用的是 React，却可以和原来的 Vue 项目共同代码逻辑。别犹豫了，动手实践起来吧！最近我们新开源了一个基于 Quill 2.0 的富文本编辑器：Fluent Editor。

本文主要从以下几个部分给大家进行分享。先是带大家快速上手使用 Fluent Editor 富文本然后是介绍开发中最常见的配置工具栏，共内置 27 种实用的工具栏按钮再介绍 Fluent Editor 的 11 个内置模块，并重点介绍表格模块的配置为例，介绍如何配置 Quill 生态模块最后介绍了如何在 Vue / React 框架中使用 Fluent Editor。

本文由体验技术团队Kagol原创~前两天，common-intellisense 开源项目的作者 Simon-He95 在 VueConf 2024 群里发了一个重磅消息：common-intellisense 支持 TinyVue 组件库啦！common-intellisense 插件能够提供超级强大的智能提示功能，包含属性(props)、事件(events)、插槽(slots)以及对应的注释和类型，实例上的方法(methods)等等，支持多个UI库，让你的开发效率更上一层楼。

本篇文章将从一个Web前端的视角出发，浅谈ArkTS组件开发的基础问题，比如属性传递、插槽、条件渲染等。

热衷于折腾的开源爱好者、OpenTiny Vue贡献者、Hello-CTF贡献者。

其实组件的很多其他部分也可以外溢出去，包括子组件、内部方法、TypeScript类型等，将这些能力外溢，把自主权交给开发者，可以有效地增加组件的灵活性，让我们设计的组件既是“易用的”，又是“灵活的”，在易用性和灵活性之间取得一定的平衡。点击上一页、下一页，不仅页码会变化，上面的轮播内容也会跟随变化，基础功能已实现，接下来就是完善分页器样式，并增加页码指示器，让 Carousel 组件的功能更加完整。在实现具体的组件功能之前，我们先创建一个空的组件结构，走通组件本地效果预览的流程。

作为致力于实现跨框架的TinyVue组件库，旨在实现跨不同版本的Vue框架兼容性，其独特之处在于采用单份源代码策略，通过智能编译技术，能够同时生成适用于Vue 2.6、2.7版本以及Vue3版本的组件包。在本期《手把手教你实现mini版TinyVue组件库》的主题直播中，华为云前端开发DTSE技术布道师阿健老师给开发者们展开了组件库跨框架的讨论，同时针对TinyVue组件库的关键技术进行了剖析，并通过项目实战演示了一份源码编译出2个不同Vue 框架的组件。随后，这些状态值被返回给适配层。

让用户的数据只在用户的电脑内部传输，从而解决了安全和隐私的问题。W3C 的顾问委员会是 W3C 会员及团队参与的会议，讨论 W3C 的运营策略、及主要技术方向，征求会员及团队意见。到目前为止，W3C 已发布了400多项影响深远的 Web 技术标准及实施指南，如广为业界采用的超文本标记语言（HTML）、可扩展标记语言（XML）以及帮助残障人士有效获得 Web 内容的信息无障碍指南（WCAG）等，有效促进了 Web 技术的互相兼容，对互联网技术的发展和应用起到了基础性和根本性的支撑作用。

在上一期，我们成功地搭建了基础的 3D 场景。在本期中，我们将对场景进行优化，使其在视觉上更加真实，并为场景中的物体添加交互，同时编写游戏流程控制逻辑，最终完成这款3D汉诺塔游戏。

无论是参与共建还是使用项目，大家已然凝聚成一股神秘的力量，不断推动着 OpenTiny 开源社区的繁荣发展。(按照团队名称首字母进行排序，排名不分先后）如果前8强无法正常进行决赛路演，可以由第9名及第10名的团队依次按照名次补充进入决赛，因此大家进入前10位的小伙伴请及时完善作品。（2）TinyVue 相关任务的框架适配层应该复用现有组件的逻辑，并通过编写插件方式完全覆盖所有组件模板转换成对应技术栈的模板。（1）作品界面完整，提示清晰，使用简单，交互友好，有很好的使用体验。

本文分享如何利用 three.js 开发 3D 应用，涵盖 3D 场景搭建、透视相机、几何体、材质、光源、3D 坐标计算、补间动画以及物体交互实现等知识点。

OpenTiny 是一套企业级 Web 前端开发解决方案，提供跨端、跨框架、跨版本的 TinyVue 组件库，包含基于 Angular+TypeScript 的 TinyNG 组件库，拥有灵活扩展的低代码引擎 TinyEngine，具备主题配置系统TinyTheme / 中后台模板 TinyPro/ TinyCLI 命令行等丰富的效率提升工具，可帮助开发者高效开发 Web 应用。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。

OpenTiny 是一套企业级 Web 前端开发解决方案，提供跨端、跨框架、跨版本的 TinyVue 组件库，包含基于 Angular+TypeScript 的 TinyNG 组件库，拥有灵活扩展的低代码引擎 TinyEngine，具备主题配置系统TinyTheme / 中后台模板 TinyPro/ TinyCLI 命令行等丰富的效率提升工具，可帮助开发者高效开发 Web 应用。在转换过程中遇到时，它们要么被省略（在对象中），要么被更改为 null（在数组中）。不可枚举的属性被排除在外。

在 Angular 项目中，使用rxjs subscribe是非常普遍的事情。但是subscribe后，就一定要unsubscribe吗？请阅读本文章，您会对Angular项目中常见的subscribe场景是否需要unsubscribe有一定的了解

本文是一个 Quill 的综合案例，从自定义工具栏按钮，到自定义 Blot 编辑器内容格式，再到调用 Quill 实例的 insertEmbed 方法，完成在富文本编辑器中插入由 Canvas 绘制的龙这种复杂的自定义内容。本文是一个 Quill 的综合案例，从自定义工具栏按钮，到自定义 Blot 编辑器内容格式，再到调用 Quill 实例的 insertEmbed 方法，完成在富文本编辑器中插入由 Canvas 绘制的龙。需要注意的是大帅老师文章里的龙图片背景不是纯黑的，需要换一张纯黑的图片。

Map.groupBy() 静态方法使用提供的回调函数返回的值对给定可迭代对象中的元素进行分组。最终返回的 Map 使用测试函数返回的唯一值作为键，可用于获取每个组中的元素组成的数组。

我之所以整理出这些内容，是因为我没有找到任何有用、准确、易于理解的信息，没有一些现成的信息能够向我解答 “什么是realm” “realm的定义” 这些问题。为了更深入地了解 realm 在供应链攻击和安全中的作用，首先我需要充分了解 realm，这是对我来说至关重要的。我希望这些内容对你也有用。你可以随时在这个仓库上了解我对这个领域的研究和开发。我还建议你更多地了解LavaMoat 🌋开发的工具Snow-JS ❄️，以进一步了解围绕 JavaScript realm 的安全防御工作。

30万奖金等你拿，OpenTiny 前端 Web 应用开发挑战赛开赛啦~只要你对前端感兴趣，想要参与实战，就可以报名参赛

可信开源项目” 是由中国信通院推动的开源项目评估，对开源项目的健康程度与可持续性展开评测，以降低开源项目的安全风险，完善开源项目的开发者、用户生态。本次活动以优质的技术内容创作为依托，以“相信技术，传递价值”为动力，OpenTiny 社区也是持续分享前沿的技术创新，输出最佳的生产实践，因此也获得了一些朋友的打榜支持，在本次活动中也是获得人气榜的第五名。在这充满寄托和期待的日子里，不仅和大家一样沉浸在准备迎接新年的欢乐里，同时，也收到了一些好消息，先后获得了一些荣誉，让。莫听穿林打叶声,何妨吟啸且徐行!

12月17日，2023开放原子开发者大会的“AI 时代的前端开发分论坛”正式举行，由开放原子开源基金会 TOC 导师、资深 Web 开发专家贺师俊担任论坛出品人，与来自一线企业的前端开发者共同探讨和分享在 AI 时代背景下，如何有效积累和运用前端开发实践与经验，深入探讨了如何借助 AI 技术，提高开发效率，构建核心竞争优势，并协助前端开发者有效应对和克服AI带来的职业焦虑，把握行业发展的新趋势。在当下的 AI 时代，前端开发领域快速演进，使得新的技术和框架不断涌现，而旧的技术和框架则逐渐被淘汰或改进。

OpenTiny 主要为大家分享了。当然也介绍了前端当前的一些比较知名的框架、库和技能点，由此引出前端开发学习的方法，强调了关注行业趋势，在实践中开发学习以及夯实基础知识的重要性，最后引出要构建属于自己的知识图谱，并分享了一些资源地址。最后也鼓励大家在使用开源软件的过程多多参与开源，学会开源平台的友好协作开发，从开源贡献中提高自身水平，并阐述了一些开源迷思鼓励同学们参与到开源中去。同时也介绍了开源软件使用注意事项，重点说明几个方向，选择开发友好的开源库，对库的使用量/热度等进行评估，强调了许可证的重要性。

从今年2月份开源以来，有不少朋友给我们 TinyVue 组件库提了文档优化的建议，这些建议都非常中肯，我们也在持续对文档进行优化，并且从中总结出了大家对于文档优化的一些共性问题，形成了一份文档

本文通过实战操作梳理，带你手把手实现 TinyVue 跨框架组件库适配微前端~欢迎关注，点赞，评论~

赛意信息是企业数字化服务领域最具发展潜力的领军者之一，于2005年成立，秉承“让中国的企业成为世界的企业”的愿景，多年来聚焦于工业互联网、智能制造、新一代信息技术、数字化转型等领域的技术与商业模式创新应用，以前瞻性视野和创新技术，帮助企业跨越数字化转型挑战，帮助企业持续提升自身竞争力和创新力。TinyVue 组件库总体的特点是组件齐全，扩展方便，渲染性能优，线上社区反馈非常及时，有多套主题，其中有的页面风格比较适合做工业产品应用。简洁、易用、功能强大的组件及丰富的插件，

然后我觉得开源的话，首先就是它是一个比较开放的，由一个一个社区组成，然后就是在开源社区中有很多优秀的就是志同道合的开发者，其次就是这个项目的话它是面向互联网的，任何一个开发者都可以参与进来，就只要你对项目感兴趣，就可以投入进来。在完成这个项目时，确实有遇到一些问题，就是 Vue 和 React 两个框架之间，从设计层面就是有一些差异的，从使用者的角度来看，也是两种不同风格的框架，所以为了减少后续复用的开发成本就需要抹平一些使用上的差异，比如组件更新，每次更新都会去重新渲染组件，以及函数组件内部的逻辑。

OpenTiny 本次大版本更新，来看看有些什么

本文为我们介绍了用CSS+SVG做一个优雅的环形进度条的核心原理。利用两个重叠的圆环形，通过对上层圆环弧长的控制来表示进度，下层圆环则作为辅助，呈现环形进度条剩余的部分。

啸达同学刚写zone.js系列就说过，NgZone影响着Angular中的变更检测，历时一个多月的笔耕不辍，终于到了他初次下笔时的目的地~

华为全联接大会2023将于9月20日在上海拉开帷幕，OpenTiny也将在本次HC大会上正式发布低代码引擎TinyEngine,为更多开发者提供低代码底层基座，共同打造开发者生态。

本文主要是基于组件库开发的场景，介绍了Vue组件开发的基础知识与优秀实践。

Angular其实并没有对zone.js的框架或是核心做任何改动，只是利用zone.js的执行上下文来监听异步事件，从而指导Angular在合适的时机进行变更检测。

分析zone.js源码的过程是痛苦的，光从思维图上就可以看出，zone.js的绝大多数逻辑都是围绕Zone、ZoneDelegate、ZoneTask展开的。这兄弟三个之间相互引用、相互依赖，即使在我省略掉很多代码之后还是存在很多错综复杂的调用关系。如果你是一个颈椎病患者，那么建议你可以深度体验一下，你的脖子大概率会问候一下zone.js的全体研发团队。今天这篇文章其实只分析setTimeout的Patch逻辑，zone.js其实对很多其它API也都下手了。

本文重点介绍了zone.js中各个API的使用方式及相互间关系，通过大量的实验demo简单演示了一下这些API的用法。最后，还通过一个较底层的API打包了自己的Task。

通过对比几种Angular组件间的通信方式，给大家介绍了一种新的Angular组件间通信的解决方案。其中首创了公共的dataService，用于任意组件间通信。 dataService通过angular service特性和注册表的使用，可以实现消息的一收一发，无需再写单独的service逻辑。

本文基于 unplugin 这个三方库来对比研究Rollup 的插件系统与 webpack的插件系统之间的区别。

通过回顾线下meetup活动，介绍了OpenTiny如何构建跨端框架组件