In fact, most developers are eager to open source, and there are many masters in the field of open source. We are not senior enough, but we are still doing it while exploring. At the same time, I also hope that we can take this opportunity to explore some experience to share with you.
01 What is Flat
Flat is a practical and sincere open source classroom. Practicality is reflected in that the product is based on a variety of mature cloud services and has the ability to be directly used in actual business. It is not a toy. Sincerity is reflected in the fact that we are not tied to specific cloud services, including ourselves. Instead, developers can use either Agora’s live audio and video service or WebRTC.
Picture: Flat class
Since Flat is open to developers, we must first explain which layer we are open source on, which layer we are using which SDK, so as to avoid the misunderstanding that “this is another open source with all the kernel packaged”. That would never have been the intent of our program.
Figure: Open source structure diagram of Flat
The green part indicates that the code is completely open source, including the Web, Mac, Windows, Android, iOS, Pad and iPad. Some middleware based on whiteboard SDK package is also open source, for example, Window Manager is used to manage Window courseware, such as courseware maximization and minimization; Netless app is used to extend classroom add-ons, such as code editors and math formulas; Sync Player is used to play multiple videos together. In fact, to make a full application, there are a lot of things to do besides the underlying SDK, which is quite laborious.
The blue part is the third-party service that users can choose, which can be developed by themselves or from any service provider. By default, The service of Sonnet is used in Flat.
The orange part is the service provided by the white board itself. Since many details of the Flat are designed around our white board, it will be objectively difficult to replace it.
02 Why make Flat
What we do is an online interactive whiteboard, and we serve a lot of customers who do education. At the beginning, we wanted to make an online classroom with our own SDK, and we also experienced the experience of customers to help us deeply understand the difficulties and pain points of making this scene.
Secondly, we also use Flat in our daily work, such as morning meetings and internal sharing. In this way, we can experience our own projects in different scenes, time and space, and personally experience the feeling of using the product. Only in this way can we know clearly where the product is good and where it is not good. To better optimize our SDK.
When we are satisfied with our own use, we can open it up for others to use. As a teaching tool to improve the efficiency of knowledge transfer, we can also make some small contributions to the community.
What technical challenges have we encountered
We also encountered some design, technical and product challenges during the development of the project, and we have posted the details of the problems we encountered and how to solve them on GitHub. Interested developers can go to see the detailed source code and documentation: github.com/netless-io/… .
Here are a few of the typical challenges we encountered:
The first is the design of window plug-in system, project address: github.com/netless-io/… .
One of the most common problems faced by educational developers is to keep the visual area consistent in multiple scenarios. For example, the consistency between teacher PC and student PC (such as mobile phone). We believe that maintaining multifaceted consistency is not that easy, and at least three issues need to be addressed:
1. The drag area of the window frame is consistent;
2. The contents displayed inside the window are consistent;
3. Keep the window Title Bar at a constant height.
To solve this problem, we use a solution that can dynamically fill and adjust the inner and outer boxes. For details, you can view the implementation through the link above.
Figure: Window plug-in
The second is the combination of playback implementation, project address: github.com/netless-io/… .
The advantages of combined playback are hd, low cost and interactive. Multiple media resources and whiteboard are played synchronously, and the synchronization model is simplified by recursive scheme. The behavior of playing video varies from browser to browser. Even if a library like Video.js is used, the events and timing generated during playing are also different. Here, we use different transfer modes to smooth out the differences (Video.js smooths out the interface, while combo player smooths out the behavior). Combine the status of the two players as one player.
Figure: Combined playback
The third is the separation of UI and logic. The Storybook address of the Flat is netless-io.github. IO/Flat.
How to balance the contradiction between products and designs that need repeated modifications and attempts to get inspiration, and technologies that need definite needs to produce stable output. It’s best to do:
1. Parallel development of front-end and back-end without waiting for each other;
2. Designers and products can modify the UI without any burden.
By strictly mapping the PRD of the product to the Storybook, the product and design can easily modularize the UI and deal with boundary conditions. In this way, the product and design can adjust the UI repeatedly, and the r&d can receive relatively stable demands.
Graph: Flat Storybook
In the development process of Flat, we used a lot of technology from the community, and we also fed back to the community: For example, assisted Firefox, Electron, electric-Devtools-Installer, Axios, Mobx, Lens, Vscode, Vite and Scratch to fix some bugs; Assist the Electron – builder, the Helm – kubectl, AvaJavaScriptTestRunnerRunConfigurationGenerator support some new features. We advocate the open source spirit, and believe that only those who have the open source spirit can truly do open source projects well, so that open source can truly sustain and sustainable development.
Therefore, don’t feel any pressure to ask us for PR, because even if you help us correct a spelling mistake, we are very happy, and the PR is very meaningful.
04 Follow-up project planning
It is very quick to launch open source projects, but it is not easy to persist in long-term polishing and maintenance of a project, and many early good projects are “aborted” on the way. In order to avoid the situation of “it is easier to open a pit than to guard it”, Flat needs to provide the community with an expectation for better use in the future. We’ve listed what we’re planning to do next on GitHub, and you can always check it out at github.com/netless-io/… .
The follow-up planning can be divided into three aspects:
The first is full client support. At present, Flat can be used normally on Web, Mac, Windows and Android. Next, we will give priority to complementing the capabilities of iOS, Pad and iPad.
The second is to enrich the plug-in ecosystem. In terms of ecology, the idea was that we would first go in and implement every practical plugin we could think of for an educational scenario, rather than waiting for developers to come up with the code for us.
Plug-ins can be roughly divided into two categories: general teaching plug-ins, such as timer, answer machine, random selection, check-in, etc., which can greatly enrich the fun and interaction of class.
Advanced plug-ins include classes for programming instruction, such as Scrach and code editors; Math teaching, such as Geogebra; Children’s literacy, such as interactive Cocos H5 courseware; Some plug-ins are already integrated into Flat, so you can try them out.
In the future, we will integrate tools that will be used in the quality-oriented education scene such as art and music. Productivity tools like flow charts, mind maps, online brainstorming with friends, and collaboration are really important.
Flat multi-window plugin
The above plug-ins written by us will also be open source. Open-source code means that the product is alive, that it’s not restricted by us, that the community of developers can implement whatever they want. For example, if you want to make a multiplayer online interactive mini-game, you can make a plug-in for offline chess based on Flat, or even draw and guess with your friends online.
I would like to add that we use external open source projects, or developers help us develop plug-ins, and if the authors are willing to charge, we would also like to help those authors monetize their contributions.
The third is the launch of continuous integration and operations tools. If users want easy development and build, rapid iteration, or need selective configuration, they need powerful CI/CD tools to support. This will also be a direction of our future efforts, and now we still focus on the first two points to do well, this is listed here, we will do it later.
How is Flat doing now
The Flat open classroom has issued multiple versions, support the function of many online interactive whiteboard, audio and video interaction, chat, course cloud disk recording playback, multimedia courseware, such as screen sharing, individual users can directly through WeChat, making login, can easily add after a successful login, create, reserve a room.
At present, we are still optimizing the product experience, and we hope that Flat can become the first teaching tool for individual teachers to attend online classes. At the same time, community developers can refer to our source code to quickly build their own online classroom.
In the discussion about Flat in the community some time ago, a lot of users participated in the discussion, some gave us suggestions, some also expressed support to us. With the support of community developers, Flat topped the third place in the overall GitHub Trending list. At present, Flat has attracted nearly 3000 followers on GitHub. The positive feedback from the community made us believe that what we were doing was worthwhile. We will continue to optimize the experience of Flat products, so that people can use it more smoothly.
Finally, the open source project address of Flat is displayed. Welcome to experience it: github.com/netless-io/… .
If you have feedback and suggestions on the use of the product, you can send them to us through GitHub Issue or [email protected], and your communication and ideas will eventually be converted into open source code.