Original link: https://blog.besscroft.com/articles/2023/first-open-source-product/
foreword
The DiyFile v0.5.0 version was released a few days ago, which is considered to be a version that is not good-looking but basically usable. Let’s talk about the whole process today.
project preparation
why i want to do it
The reason for this is also very simple. When you learn a new technology, the best way to use it is to write a project. I also really want to open a studio. Although I don’t know if I can take this step, it is still no problem to accumulate experience for this small dream.
How to consider technology selection?
There are quite a lot of things to learn. First, I draw a prototype design draft. At first, I used Adobe XD to draw a simple homepage, and then basically designed it according to this. Recently, I briefly learned Figma by myself, and I plan to make products based on it later. The second is the selection of the project architecture. In plain English, it is what to use to process the interface, what to use to process services, and what to use to store data. At first, I wrote a simple version with Nuxt3, but later I switched to the Vite project, but I can’t do server-side rendering, which is a little regret. For the selection of the front-end component library, Arco-Design-Vue, Element Plus, Vuetify3, and Naive have all been used, and three versions have been changed before and after, which is what you see now (mixed use of Vuetify3 + Naive). It is true that I have stepped on a lot of pitfalls and wasted a lot of time, but the rewards are quite great.
Why do you say that? Because after contacting so many component libraries, I can correctly choose the component to use after knowing a certain requirement. I don’t know if you have thought about it, but now let’s go back to the demand in production. Let’s think about it first, after the UI prototype comes out, what do the front and back ends do (divide and conquer)? According to the design, the front end divides the UI components into a hierarchical structure, corresponding to each small component of the front end. According to the UI, the backend returns the corresponding JSON structure data (of course it may be other), we don’t care how the data comes here, it’s the business details, we just need to know that at this time the JSON data contains the UI prototype diagram. Displayed data content. Then (merge), the front-end maps to the component structure on the page according to the JSON structure returned by the back-end, thus completing the development.
Why is good design important? If the design is reasonable, then the JSON structure will be reasonable, and it will naturally correspond to each component. The UI and the data model have the same structure, even if they are divided into many layers and many groups, they can still match part of the data structure. This not only saves time (the front-end no longer has to wait for the back-end to finish writing), but the excellent design can also ensure that there are fewer logical bugs. But we all know that there is no silver bullet in software development, so when we actually work, we still have to be flexible. After all, this is just a little idea of mine.
Having said that, why did I give up Nuxt3? Although there are many plug-ins that are still in pre-release, or will be released in the next major version, after all, we can implement them ourselves. What really keeps me away from it is: “slow”. It’s not that I deliberately slandered it. I have never seen anything that is several times slower than SpringBoot 2.x, whether it is startup or hot update. . So I simply changed the backend to SpringBoot 3 and made a front-end and back-end separation architecture. On the database side, it is compatible with MySQL and SQLite.
In general, it is still a question of trade-offs, but I have another requirement for model selection, which is to ensure that customers can deploy and use it for free.
Project Development
Development Process
The development process is relatively free, because it is developed by myself, so I don’t have to pay so much attention. The front end is developed based on Vitesse , and the back end is based on SpringBoot 3. The project is hosted on GitHub and is divided into two warehouses, front and back. Then develop with two branches, one main and one dev, tag and release the version according to the actual situation.
There is nothing special to talk about, let’s talk about the places that may need attention during development. Both the front end and the front end use code checking, and the front end is more comfortable to write because of the introduction of TypeScript. However, I basically only solve error reporting and use eslint to constrain the code style. After all, being consistent will reduce the barriers to reading code. For the back-end code, I really like the syntactic sugar, and the introduction of the Ali coding protocol plug-in and SonarLint, combined with the scan that comes with idea, it is basically enough, the disadvantage is that it is very stuck (I basically have blue screens because of idea 
. But when writing Java code, I really like to eliminate all yellow warnings, and try to write as elegantly as possible. Of course, if the writing state is not good in the middle of the night, it may be. . .
After the code is written, it is submitted and pushed to GitHub. Sometimes I use emoji for git commit because it looks good. Then GitHub Actions will be triggered to scan the code. This step is still necessary. For example, the backend will perform a pre-build to ensure that the code can be built normally after switching to a new environment (I have encountered local success, CI failure case).
Then it is automatically deployed. After the review, the test is fine, and it can be merged.
deployment process
The deployment process is also very convenient, but the first configuration is a little troublesome. The front end takes Vercel as an example. It can build for each branch and commit. After the build is completed, the preview link sent by the bot will be displayed on the GitHub PR page. Click it to see the effect. For the backend, GitHub Actions will automatically build the image, and then update the image deployment within the cluster (this step can be done manually or automatically, open source projects can consider doing it manually to prevent malicious code from being PRed and then executed on the remote server).
The important thing is to configure the reverse proxy, as well as different front-end environments, to reverse generation to different back-end environments. Database production and testing can be lazy and use the same one, but based on PR (unmerged), it is recommended to use a separate one to avoid malicious code execution that will cause trousers to be taken off and keys to be leaked.
Documentation and community maintenance
When a product comes out, there must be a document for users to consult. After DiyFile was released, I wrote a document for it. As long as users know how to use the relevant components required for deployment, they should be able to deploy according to the document, such as Linux, Nginx and Docker.
Community maintenance is more difficult. Since there is no user group at present, there is no effort to do this. Just posted a promotion in some forums.
at last
After experiencing each of these products, I also roughly understand that a product needs to have three cores: good ideas, people using it, and people giving feedback. Many other things, I think, can be classified into these three. Without a good idea, it may be developed and no one will use it, and no one will give feedback, and the motivation to support you to continue will become smaller and smaller. Although every step of a project life cycle is crucial, design, development, release, and maintenance are all just processes.
With this experience (although there are still many problems to be solved in the project), I have learned a lot, and I may be more cautious when doing new projects in the future. Next, it will take a while to learn technology and prepare for the next product! Thank you for being here, I hope my experience can help you!
This article is transferred from: https://blog.besscroft.com/articles/2023/first-open-source-product/
This site is only for collection, and the copyright belongs to the original author.