开发者其实很多时候都十分向往开源，开源畛域的大佬也特地多，咱们谈不上有多资深，也是一边摸索一边做。共事，也心愿能够借这次机会把咱们摸索到的一些教训分享给大家。
01 Flat 是什么
Flat 是一个实用、诚意的开源教室。实用体现在产品是基于各种成熟的云服务搭建的，具备能够间接用于理论业务的能力，它不是一个玩具。诚意体现在咱们不绑死特定的云服务，包含咱们本人。开发者能够替换掉一些组件，既能够应用声网 Agora 的实时音视频服务，也能够应用 WebRTC。
图：Flat 大班课
因为 Flat 是面向开发者的，所以咱们必须先说一下咱们到底是在哪一层做的开源，在哪一层用的哪些 SDK，防止大家有误会说“这又是一个内核全副都封装好的开源”？这相对不会是咱们我的项目的初衷。
图：Flat 开源结构图
绿色局部代表代码齐全开源，包含 Web、Mac、Windows、Android、iOS、Pad、iPad 各端都是开源的。包含基于白板 SDK 封装的一些中间件也是开源的，比方 Window manager 是用来治理窗口课件，比方课件的最大化、最小化；Netless app 用来拓展课堂插件，比方代码编辑器、数学公式；Sync player 是用来把多个视频对齐播放。其实做一个残缺的利用，除了底层的 SDK 还有很多事要做，其实挺吃力的。
蓝色局部是用户可选的第三方服务，能够用自研，也能够用任何一家服务提供商，Flat 默认应用的是声网本人的服务。
橙色局部是白板自身提供的服务，因为 Flat 很多细节都是围绕咱们白板设计的，所以主观上代替会有肯定的难度。
02 为什么要做 Flat
咱们做的是在线互动白板，服务了很多做教育的客户，最开始咱们想的就是用本人的 SDK 做一遍在线教室，咱们也经验一遍客户所经验的，来帮忙咱们深刻理解做这个场景的难点和痛点。
其次咱们本人在日常工作中也会应用到 Flat，比方开早会、外部分享，这样一来咱们能够在不同的场景、工夫与空间中体验咱们本人的我的项目，切身体会一下产品应用起来的感触，能力更明确地晓得产品哪里好用、哪里不好用？进而更好地去优化咱们的 SDK。
咱们本人用起来比较满意了能够凋谢进去给别人应用，作为一个进步传递常识效率的教学工具，也算为社区做一些小小的奉献。
03 咱们遇到了哪些技术挑战
在我的项目开发的过程中咱们当然也会遇到一些设计上、技术上、产品上的挑战，并且将这些咱们遇到的问题以及如何解决的详细情况都放到了 GitHub 上，感兴趣的开发者能够返回查看具体的源码和文档：https://github.com/netless-io/flat。
这里能够简略给列举几个咱们遇到的比拟典型的挑战：
第一个是窗口 插件零碎的设计，我的项目地址：https://github.com/netless-io/window-manager。
教育领域开发者，最常遇到的问题是：在多端的状况下要放弃可视区域统一。比方老师 PC 端和学生端（如手机）的一致性。咱们认为放弃多端一致性并没那么简略，要解决好至多三个问题：
1. 窗口外框可拖动区域统一；
2. 窗口外部展现内容统一；
3. 窗口 Title Bar 恒定高度。
咱们是用一种能够动静填充调整内外框的计划来解决这个问题的，想理解具体内容能够通过上方链接来查看具体实现。
图：窗口插件
第二个是 组合回放的实现，我的项目地址：https://github.com/netless-io/sync-player。
组合回放的劣势有高清、低成本、可交互。多个媒体资源和白板同步播放，通过递归计划简化同步模型。各个浏览器播放视频的行为各不统一，即使应用了 video.js 这样的库，播放时产生的事件与机会也是各不相同，这里咱们应用不同的转接形式来抹平差别（video.js 抹平的是接口，组合播放器抹平的是行为）通过状态机同步两个播放器状态，同时将两个播放器的状态对立后作为一个播放器。
图：组合回放
第三个是 UI 和逻辑拆散，Flat 的 Storybook 地址：https://netless-io.github.io/flat。
产品和设计须要重复批改和尝试能力取得灵感，技术须要确定的需要能力稳固产出，如何均衡这对矛盾。最好能做到：
1. 前端和后端并行开发，不必互相期待；
2. 设计师和产品能够无累赘批改 UI。
咱们通过把产品的 PRD 严格映射到 Storybook，产品、设计也能够很不便的模块化调整 UI、解决边界状况，这样既不影响产品、设计重复调整 UI，研发又能够接管到绝对稳固的需要。
图：Flat Storybook
Flat 在开发过程中，用到了很多来自社区的技术，同时咱们也对社区进行了一些“反哺”：例如帮助 Firefox、Electron、Electron-devtools-installer、Axios、Mobx、Lens、Vscode、Vite、Scratch 修复了一些 bug；帮助 Electron-builder、Helm-kubectl、AvaJavaScriptTestRunnerRunConfigurationGenerator 反对了一些新性能。咱们崇尚开源精力，也置信只有领有开源精力的技术人才能真正做好开源我的项目，这样开源才能够真正地继续、长久地倒退。
因而，大家在给咱们提 PR 的时候也不要有任何累赘，因为就算是帮忙咱们修改了一个拼写错误，咱们也会很认可、很开心，这样的 PR 也是很有意义的。
04 后续的我的项目布局
做开源发动我的项目很快，但要保持长期打磨和保护一个我的项目其实是不容易的，很多后期不错的我的项目都“夭折”在了途中。为了防止“开坑容易守坑难”的状况，Flat 须要给社区一个预期，不便大家将来更好地应用。咱们把接下来打算做的事件都列在了 GitHub 上，大家也能够随时进行查看 https://github.com/netless-io/flat/projects。
后续的布局大略分三个方面：
第一个是全客户端的反对。目前 Flat 在 Web、Mac、Windows、Android 端都是能够失常应用的，接下来咱们会优先补齐 iOS、Pad、iPad 端的能力。
第二个是丰盛插件生态。说到生态，咱们的思路是这样的，首先咱们会本人先冲进去，把围绕教育场景咱们能想到的实用插件都实现一遍，而不是坐等开发者帮咱们提代码。
插件大略分为两类，教学通用插件，比方计时器、答题器、随机选人、签到等，这些小插件能够大大丰盛课堂的趣味性和交互性。
高级插件包含很多类，编程教学，比方 Scrach、代码编辑器；数学教学，比方 Geogebra；少儿识字，比方交互性比拟好的 Cocos H5 课件；目前有些插件曾经集成到 Flat 里了，大家能够去体验一下。
将来还会去集成美术类、音乐类等素质教育场景下会用到的工具。以及一些效率类的实用工具，比如说流程图、思维导图，和敌人一起在线头脑风暴、合作，这些效率工具其实很重要。
图：Flat 多窗口插件
以上咱们本人写的插件也将会全副开源。代码开源意味着这个产品有了生命力，它能够不受咱们的限度，社区的开发者有什么想法都能够本人去实现。比如说你想做一个多人在线互动小游戏，你能够基于 Flat 做一个在线下象棋的插件，甚至能够和敌人一起在线你画我猜。
而后这里想补充一点，就是咱们用到了内部的开源我的项目，或者开发者帮忙咱们开发了插件，如果作者有免费的志愿，咱们也很心愿能够去帮忙这些作者变现他们的奉献。
第三个是推出继续集成和运维工具。如果用户要不便的开发构建、疾速迭代，或者须要选择性配置，都须要弱小的 CI/CD 工具来反对。这也将是咱们将来致力的一个方向，而当初咱们还是专一地去把前两个点做好，这个咱们先列在这里，前面肯定会去做。
05 Flat 当初做的怎么样
目前 Flat 开源教室曾经公布了多个版本，反对的性能有多人在线白板互动、音视频互动、聊天互动、课程录制回放、多媒体课件云盘、屏幕共享等，个人用户能够间接通过微信、GitHub 登录，登录胜利后就能够不便地退出、创立、预约房间。
目前咱们依然在继续优化产品体验，咱们心愿 Flat 能够成为集体老师在线上课首选的教学工具。同时社区开发者也能够参考咱们的源代码疾速搭建本人的在线教室。
前段时间在社区对于 Flat 的探讨有不少用户参加，有给咱们提倡议的，也有人对咱们示意反对。Flat 在社区开发者的反对下，冲上了 GitHub Trending 总榜的第三，目前 Flat 在 GitHub 上的关注度曾经靠近 3000。来自于社区的踊跃反馈，让咱们更加置信咱们做的事件是有价值的。咱们会继续优化 Flat 产品体验，让大家应用起来更加顺畅。
最初放一下 Flat 开源我的项目地址，欢送大家体验：https://github.com/netless-io/flat。
如果大家有产品应用反馈和倡议，能够通过 GitHub issue 或者邮箱 flat@agora.io 反馈给咱们，大家的交换与想法最终都会转化成开源代码。