Experimental and feasibility report of part theory set of big front-end Technology based on MonorePO (front-end project management background)
Abstract
As front-end engineering becomes increasingly complex and some businesses or tool libraries usually involve many warehouses, the disadvantages of multiple warehouse development become increasingly apparent over time, and a new project management method — Monorepo[1] emerges. Therefore, the purpose of this investigation — Experiment and Feasibility Report of Theoretical Set of Large Front-end Technology based on MonorePO (hereinafter referred to as this report) is to combine MonorePO with various categories of high-quality front-end technology and front-end engineering related frameworks, so as to help others quickly iterate the technology stack and learn new technologies. React has an advantage over the existing front-end infrastructure. Its unique high customization fits well with the new features of javascript, so it can be used with many new technologies. Node.js package manager, in the eyes of ordinary people, has always been the duality between NPM and YARN, in fact, before their big brother PNPM, in the next iteration of the upgrade, there are many new features that are better than the former two. TypeScript stands out as a superset of JavaScript in competition with the academic language Rescript. As the js framework with the fastest iteration and upgrade in recent years, VS Code is one of the most popular editors in the front-end development community based on TypeScript. Angular, the well-known backend framework NestJS, and the machine learning framework TFJS are all developed based on TypeScript [2]. So TS has become one of the essential skills for the front end. At the stage of front-end project development and compilation, Vite, as a new technology that has just appeared for 2 years, combines the features of Native ES Model and rollup packaging tool, making it develop local compilation faster than other traditional packaging tools. To be used with Monorepo, Lerna, as a good product of Monorepo practice of Babel team [3], has been widely praised once open source, while tools that are well matched with Lerna also include YARN/PNPM workspace. Ant Design, which is deeply rooted in front-end enterprise UI component products, can already be used for direct landing projects or secondary packaging. Over the years, front-end plug-ins, components, frameworks emerge in endlessly, but these mainstream frameworks that are well received, all of them are the most suitable for the results of the development of the current front-end market, and what we have to do is to learn these mainstream programming ideas and solutions. These will not be eliminated over time, but will only become more fragrant.
keywords
Management background; Menorepo; The React; Typescript. Vite. The PNPM; Woekspace; Ant design; Lerna. Node. Js; Nest. Js; Functional programming;
The introduction
The rapid development of front-end technology, in order to be ready to meet the increasingly serious technical challenges, in order to team members all-round technical growth. The person in charge of the front end xie made important instructions: the front end, is the volume of deathless, is not afraid of difficulties, is not afraid of the Chinese fearless spirit of the resolutely inheritor. Therefore, we must always maintain the fighting spirit, in times of peace. Seek well-being for the team, break a path for the team. At this point, by decision of the group, the project “Front End Group Project Management Background” was officially launched. We hope this project can become a good partner and comrade-in-arms of the front end people of our company for generations [4]
Zero, monorepo
1. What is Monorepo?
In short, Monorepo manages all sub-projects with a single source. Unlike multi-source project management, monorepo removes the public infrastructure, as shown below
Code reuse: a company cannot have only one project, and most of the projects may be migrated from the main project or sister project, such as the h5 projects in this group. If you have different repositories, you may need to copy and paste from one project to another, or change many copies as you adjust, each time you develop compatible features. It may be a good idea to release a common package, but it’s a bit cumbersome
Versioning: Dependency management may be the same for different packages, but it needs to be configured separately for each package, which can lead to inexplicable bugs
Project infrastructure: In front-end engineering, continuous project build and continuous integration are necessary. If multiple warehouses are developed, each warehouse needs to be configured with continuous build and continuous integration
2. What are the benefits of using Monorepo?
Saves a lot of storage space: 
Easy debugging: WySIWYG is WYSIWYG between strongly related projects. Yarn Link is no longer needed for soft connection
Resource pack upgrade: The same configuration items will no longer have unexpected defects due to version-dependent issues
3. What are the hidden dangers of using Monorepo?
The master package is large: Because all the small projects are merged together, the master package can become so large that subproject developers have to take on the business code component of other subprojects as well
Permissions difficult: When all projects are combined, developers without permissions can modify other people’s project code at will, so submission checks are critical and CodeView’s importance increases dramatically
First, development tools
1. VSCode (free) VS WebStorm (paid)
Plugin community activity
Start with the plug-in market for community activity for development tools
Vscode:
The official website of vsCode plug-in
Webstorm:
Webstorm plugin official website
Simple summary of plugin community activity
Vscode is free, open source and active, with a large and diverse plug-in market. Even if you have special requirements, you can write your own plug-ins.
function
vscode
The official website shows below, other functions such as Docker are downloaded in the extension.
webstorm
The official website shows as follows
Function summary
Webstorm function configuration is better than VScode, vscode more basic needs to configure. But vscode is free.
Take log as an example: vscode enters log and press Enter to automatically complete conosle.log(), but WebStorm’s intelligent completion is more intelligent [6]
Front-end project compatibility
Vscode uses the Language Server Protocol to support all Language recognition, but compiling environments requires more environment and plug-in support. Webstorm, along with JetBrans other IDEA, removes the database server and related language support, leaving webStorm. But both are compatible for front-end correlation
performance
Since vscode was developed at electron, it is very fast to launch. Webstorm big project started slowly and was very resource-hungry
Second, development language
JavaScript
Development framework
1.React vs Vue vs Svelte
The principle of
React, Vue and Svelte JS frameworks [7]
For comparison details, please refer to front-end mumu. Current cognition of front-end framework React, Vue and Svelte [R]. Rare Earth Mining, 201,0-1
Community activity
compatibility
IE9 and above can be compatible with Polyfill.
performance
React/Vue/React/Svelte/Vue/React
Svelte and Vue
However, in the face of Vue and React, there are too many comparisons between them so far. In combination with the team situation and vision, React was finally chosen. 2021 React VS Vue
In addition, it should be noted that in the face of the paradigm struggle between frameworks, we need to actively receive a variety of positive and negative information to reduce information polarization. We need to understand that JavaScript is a multi-paradigm language. And different paradigms have their own scenarios. Just because framers emphasize their own paradigms and paths does not mean that they deny other paradigms. Compilation techniques and meta-programming features of the language, such as Proxy/Reflect, allow our code to derive new semantics and behaviors, building Bridges between different paradigms. Be open and inclusive [8].
2.Vite vs Webpack
Webpack schematic [9]
Vite schematic [9]
See # Vite vs. WebPack for comparison details
In addition, WebPack projects can also be migrated to Vite compilation via Wp2Vite.
3.npm vs yarn vs pnpm
In front end applications, the package manager is not really a concern because the NPM of the swap source is sufficient. Today we focus on PNPM, comparing it to other packages, which are included in Benchmarks on the PNPM website.
Download the same dependency speed
Why is PNPM so fast compared to other “traditional” package managers? The planned summary is that Pnpm has no blocking phase during installation. Each dependency has its own phase.
“Traditional” package manager download dependency procedure:
PNPM Downloads the dependency process
4.TypeScript
With the increasing complexity of front-end applications, the problem is that maintainability and extensibility deteriorate, and writing code using TS greatly reduces bug debugging time.
TypeScript document
Benefits of learning TypeScript:
- Learning costs are low
- Can reduce team ineffective communication
- It makes your code more robust
- Can help you quickly master other backend languages
5.lerna
Lerna is a Monorepo solution
Lerna is a management tool that optimizes the workflow of a multi-package code base hosted on Git \ NPM. It allows you to manage multiple sub-projects under the main project, eliminating the problem of multiple packages being dependent on each other and having to manually maintain multiple packages at release time.
Lerna suitable projects:
- Build a platform base component library project from scratch
- Framework projects (e.g. vue3 source code)
- Corporate component library project
- Tool-based projects (e.g. Babel, Facebook/Jest, Alibaba/Rax)
Strictly speaking, the current project planned by the front-end group is not a good fit for Monorepo and Lerna. The main consideration is that later on, the backend management projects will only get bigger and bigger, and the component libraries, the plug-in libraries and so on will become more and more, and they will be suitable to introduce LerNA. However, in order to accumulate technology, background management projects will also be introduced into LERNA in the early stage. When the development is too large in the later stage, the background management system will be independent.
Iv. Development specifications
See [Front-end group knowledge base Specification] for details.
5. Development process
6. Project analysis
The project of the first version was approved to solve the fundamental problem of version control terminal of all front-end projects. Therefore, the purpose of the official launch of the first version included: to control the packaging and release of front-end Jenkins project; Can control the small program version of the package release; Ability to add applet permissions and preview for test use.
Future upgrades will integrate front-end UI component library, front-end IDE plug-in library, front-end engineering base package, front-end self-developed scaffolding, etc.
7. System deployment
The company allocates local servers that expose interfaces and local services to the Internet through Intranet penetration. The MAC connects to the server through screen sharing, and the Window connects to the server through the TightVNC Viewer
Summary and Prospect
The project serves as a testing ground for new and popular technologies, where all team members can create their own ideas. Please do not aim at the use of new technology, but at the realization of the principle of new technology and programming, gather hundreds of long, into a single statement. Try to build your own plug-in/framework/component set/compiler/interpreter/engine, etc
Refer to the link
[1] God three yuan. Why is modern front-end engineering increasingly dependent on Monorepo? [J]. Gold Science and Technology, 2017, 25 (2) : 1-8
[2] TypeScript: From Basics to TypeScript programming [M]. Rare earth mining,202,0-0
[3] Guo is in Shenzhen. —- Monorepo, Lerna [R]. Rare Earth Mining, 201,0-1
[4] Clear your mind: How should front-end technology research be done? [J]. Gold Science and Technology, 2017, 25 (2) : 1-8
[5] Master of One. Ant Design takes you from scratch to understand dACHang front-end development paradigm [R]. Rare earth Mining,2019,0-1
[6] Cang Cang cool. Comparison of shallowness between WebStorm and VSCode [R]. Zhihu,2020,0-1
[7] Wood at the front. Current cognition of front-end framework React, Vue and Svelte [R]. Rare Earth Mining, 201,0-1
[8] Videring. Debate on Paradigm breaking frames (React,vue&Svelte) [R]. Jane, 2019, 0-1
[9] twinkle | | CLL. Webpack and different, vite vite speed where [R]. CSDN, 2020, 0-1
The PNPM’s official website
Lerna website
Statistical tools
npmtrends