Author: Bai Huancheng
Voice community Clubhouse has become a global hit recently. LeanCloud user Bestony recreated Clubhouse Web, NES style “NESHouse” in 55 hours and opened it as an open source. Bestony said that NESHouse, as a Hackthon project, may have a shorter life cycle and will not enter the stage of formal operation compared to other projects. However, there are some interesting points about the technology selection and design of the project, which are worth sharing with everyone.
Hackthon, fast!
After sharing the content in recent days, some developers leave comments: This project uses other people’s services, what is your value?
NESHouse, as a Hackthon project, aims to achieve requirements from 0 to 1 within a limited period of time. In this process, developers need to carefully evaluate their own resources and goals to match resources and goals, so as to complete their own development work well. Achieve your goals for this Hackthon.
As a GO back-end developer, for this project I used a cloud service provided by LeanCloud instead of writing an HTTP server myself using GIN, which seems counterintuitive and does not use the technical solution I am most familiar with. However, if you look at resources and requirements together, you can see that this choice is quite normal. Gin is certainly familiar to me, but WHAT I am not familiar with is the front end. If I spend part of my time on the back end, it will definitely squeeze my time in front end development.
Therefore, in the NEShouse project, I chose LeanClod, the Serverless cloud service with the shortest development cycle that I was familiar with, to complete my back-end workload, so that I could spend almost no time and energy on the back-end to complete the work. For audio services, I chose to use existing services instead of implementing one by myself for the same reason. I expected to complete the development of this project within 72 hours, rather than build a complete real-time audio system by myself. So I will inevitably choose a more user-friendly, more readily available solution to simplify my own work.
In addition, one of the things that was appropriate for the workload assessment was that I used LeanCloud’s LiveQuery capabilities for the project. LiveQuery provides real-time data synchronization capabilities that you can do with WebSocket, but, How to give a good and fast, at the same time in the WebSocket server to complete all kinds of authentication and expansion capabilities, is a troublesome thing. You can use this very simple feature to estimate how long it would take you to perform all the functions if you did them yourself. So you can understand why I chose LeanCloud for this project to get the job done.
Browser compatible, you are really pit!
In the development of NESHouse, I didn’t spend much time, but I spent a lot of time on the way back to my hometown. In fact, the most troubling aspect of the whole project was compatibility between the various browsers.
One of the big problems with Browser-based NESHouse compared to other audio applications based on the system’s native apis is that the browser handles audio devices differently. The audio interface NESHouse uses is based on the API of the layer after the browser encapsulation, and this API is considered to protect users. In some specific scenarios, you will be required to generate some operations before the audio playback can be triggered. Therefore, you need to write different adaptation codes for different browsers. This code ends up making your code stinky and long, with lots of redundant code.
For example, in the wechat browser, you can’t hear the audio returned by WebRTC by default. You have to click on the page to play it.
NESHouse realizes this part of logic by judging that if the user is a wechat browser, a user authorization page will be displayed for the user to click actively to complete audio playback.
Alpine. Js, really sweet
As a back end, for the front end of several big frame, also only limited in can use, can write I want the function of the application. But for the implementation, I didn’t use Vue/React/Angular for some reason, and I wanted to use some new technology in hackthon, so I used Alpine.
What is Alpine. Js? Alpine. Js is a framework that implements Vue/React bidirectional binding in the basic DOM. The difference between Alpine. You don’t have to rewrite the entire code.
For example, if you want to implement bidirectional binding in Vue/React, you need to put your code in a template or convert it to JSX to get the corresponding bidirectional binding capability. But in Alpine. Js, all you need to do is add x-model= XXX where you need to bind, and it’s easy.
Alpine also implements most of the functions of Vue/React applications, such as x-for, X-ON, x-if and other common commands. When writing logic, I use a lot of these logic to complete my own work, which is very convenient
Alpine. Js is widely used in NESHouse
Alpine. Js makes it easy for a back-end engineer unfamiliar with front-end building tools like Webpack to implement bidirectional binding in his own application. For back-end engineers, this is a tool you can’t miss.
conclusion
NESHouse’s stack is very simple compared to many complex applications, and Leancloud + RTE can do almost all the functions, but I believe this technology architecture selection can be helpful for projects that require less computing and less business load. Even if you could slay a dragon, why would you use him to kill a chicken?
Click on the text to view open source projects