This article will stand in the perspective of an intern, share the author’s internship experience in LogicFlow and some analysis and solution ideas for the problems encountered. This article is not a list of internship summaries, but rather a combination of internship experience and technical articles, describing how interns grow quickly in open source projects, compared to technical articles, relatively easy to read.

preface

Count on for a whole year, I have just joined the army for three at the time, is by increase of the interview the interviewer refused and self doubt, and in self-reflection after being rejected again and again to regain confidence, after more than two months to find at the end of for the first internship job, then across half companies came to shenzhen a bank of China, I did some scattered projects with my senior brother. In my first internship, I only learned some differences between the workplace and the campus. However, due to the limitation of the project size, my growth rate was relatively slow. The end of my first internship coincided with the beginning of the autumn recruitment. Perhaps benefiting from the experience of the first internship, I got good feedback on my resume and interview. Finally, I chose Didi from the offers in hand, and the college recruitment was successfully concluded.

After signing a contract with Didi, I came to Beijing for an internship in advance because I wanted to get familiar with my future colleagues and projects. On the first day of my employment, I learned from my senior at lunch that the team was working on an open source project (LogicFlow), and my main work during the internship was to assist them in some development.

Heard the open source project, my mind a quiver, subconsciously, open source project development is difficult, and high technical level requirements for the developers, consciously some difficult to do, at the same time feel unusually lucky, never thought that can catch up with the “rocket” in practice stage, the future there will be plenty of opportunities to push me to learn new knowledge, In this way, I began my internship with the greatest luck in the whole year.

Start the project

When I first joined the team, the team leaders had already completed the core functions of LogicFlow and the corresponding documents. At this time, LogicFlow was not open source, so MY initial work was to add operational examples to the documents.

First met

Once I had access to the internal repository, I downloaded the code locally and took a quick look at the rough structure of the project directory:

LogicFlow ├ ─ ─ docs / / document ├ ─ ─ examples / / sample ├ ─ ─ packages │ ├ ─ ─ the core / / core packages │ │ ├ ─ ─ the SRC │ │ └ ─ ─ package. The json │ ├ ─ ─ The extension / / expansion pack │ │ ├ ─ ─ the SRC │ │ └ ─ ─ package. The json │ └ ─ ─ site / / debug the sample │ ├ ─ ─ the SRC │ └ ─ ─ package. The json ├ ─ ─ the commitlintrc. Js ├ ─ ─ Babel. Config. Js ├ ─ ─ eslintrc. Js ├ ─ ─ the gitignore ├ ─ ─ lerna. Json ├ ─ ─ package. The json ├ ─ ─ developer. The md ├ ─ ─ the README. Md └ ─ ─ yarn.lockCopy the code

After reading the catalogue, I got the following main information:

  • The LogicFlow documentation is in the docs directory
  • Examples of the documents I want to develop are in the examples directory
  • The Packages directory contains the LogicFlow core package, extension package, and sample site
  • A file never seen before – lerna.json
  • A hands-on guide for developers – developer.md
  • LogicFlow project Introduction – readme.md

wondering

After looking at the directory, I decided what to do next: follow developer.md to install dependencies for the project.

You can see the commands to install dependencies from developer.md:

npm run bootstrap
Copy the code

The LogicFlow root directory and examples, core, extension, and site directories have a node_modules folder.

  • Why does LogicFlow store multiple items in a single item?
  • How does the NPM run bootstrap command install dependencies for multiple projects simultaneously?

Curiosity led me to look at the original command in NPM run bootstrap, which is defined like this in the root directory package.json:

{
  "scripts": {
    "bootstrap": "yarn && lerna bootstrap",}}Copy the code

NPM run bootstrap installs global dependencies for the project from the root package.json via YARN. We then install dependencies for examples, Core, Extension, and Site via Lerna Bootstrap.

Analysis of blind spots (Monorepo and Lerna)

So far, I can confirm that LogicFlow manages projects using lerna, which supports multiple subprojects within a project, and lerNA is a new knowledge blind spot for me.

Confused, I found lerna’s code repository, and in the official readme. md, I quickly captured the following key information:

  • Lerna is a management tool for JavaScript projects that can contain multiple packages internally
  • This form of a project containing multiple packages is called a multi-package repository (or monorePO)

At the same time, the core lerna command lerna bootstrap was found, which mainly accomplished the following:

  • Execute NPM Install in the directory of each package in the project to install external dependencies for it
  • Establish a soft link between two interdependent packages

The soft chain relationship is as follows:

/ node_modules/examples └ ─ ─ node_modules ├ ─ ─ @ logicflow/core - > / packages/core / / soft chain └ ─ ─ @ logicflow/extension - > / packages/extension / / soft chain/packages ├ ─ ─ the core │ └ ─ ─ node_modules ├ ─ ─ the extension │ └ ─ ─ node_modules │ └ ─ ─ @ logicflow/core -- > / packages/core / / soft chain └ ─ ─ site └ ─ ─ node_modules ├ ─ ─ @ logicflow/core - > / packages/core / / soft chain └ ─ ─ @ logicflow/extension -> /packages/extension //Copy the code

Now we can explain a couple of questions:

  • How does the NPM run bootstrap command install dependencies for multiple projects simultaneously?
    • NPM run bootstrap executes NPM install in each package directory
  • Why does LogicFlow store multiple items in a single item?
    • Extension relies on Core, while examples and sites rely on Extension + Core, and can be developed and released simultaneously in a single project. Lerna’s Symlink can ensure that each package directly depends on the latest local code of other packages
  • What is lerna.json in the root directory that you have never seen?
    • Is a configuration file for Lerna that tells LERna what packages exist in a project

Successful startup

Now that we know that packages can be developed directly by referring to the latest local code, we should build each package before starting the project so that other packages can reference it, such as the build command in developer.md:

#Build the type first
#LogicFlow is developed using TS, and there are type dependencies between different packages
npm run build:types

#To build the source code
npm run build
Copy the code

After executing the above two commands in the root directory, you can go to the examples directory for development and debugging:

cd examples
npm run start
Copy the code

Tools to optimize

When LogicFlow became open source, the multi-package management of the project took a new turn. During the official release of LogicFlow, my brother added a yarn workspaces function, which also touched my knowledge blind spot.

New Questions (Workspaces)

With YARN workspaces, package.json changes:

{
  "workspaces": ["packages/*"."examples"]."scripts": {
    "bootstrap": "yarn",}}Copy the code

A workspaces field has been added to package.json, and the NPM run bootstrap command installs dependencies only by executing YARN. After installing dependencies, the only difference from before adding yarn Workspace is inside the node_modules of each package, that is, if there are the same dependencies in each package, these dependencies will be extracted into the node_modules of the root directory. The size of the project would be greatly reduced locally.

For example, if @babel/core is used in core, Extension, examples, and site, then @babel/core will be extracted into node_modules in the root directory. The node_modules directory for those four packages is reduced.

/ node_modules ├ ─ ─ @ Babel/core ├ ─ ─ @ logicflow/core - > / packages/core / / soft chain └ ─ ─ @ logicflow/extension - > / packages/extension / / soft chain/examples └ ─ ─ node_modules/packages ├ ─ ─ the core │ └ ─ ─ node_modules ├ ─ ─ the extension │ └ ─ ─ ├ ─ ├ ─ sci-imp (sci-impCopy the code

Compared with before adding YARN workspaces, the most important thing is that the function of the soft link (Symlink) has been preserved. So far, this yarn workspaces has made me wonder again:

  • Since yarn Workspaces and LERNA can both install dependencies and add soft chains for individual packages, what is the difference between the two?
  • Why do I keep LERNA even after I have YARN Workspaces?

With these questions, began a new exploration.

Workspaces versus Lerna

Similarly, I found yarn’s description of Workspaces, which states that YARN Workspaces can accomplish the following tasks:

  • You can create soft links between locally interdependent packages
  • Install dependencies between packages together and put them in the root directory
  • Each package uses the same yarn.lock file to reduce conflicts and facilitate viewing

In other words, YARN Workspaces is also a monorepo management tool, but it only provides the same function as the low-level function provided by Lerna, which is to establish a soft chain for locally interdependent packages and optimize on this basis to extract the co-dependencies of each package to the root directory.

Yarn Workspaces does not support any other advanced functions except the low-level functions of LERNA. This is why LogicFlow retains LerNA after yarn Workspaces is available:

  • Use YARN Workspaces instead of lerna Bootstrap install dependencies
  • Still use the various advanced features provided by Lerna, such as:
    • Use Lerna Version to tag the change code for each package
    • Use Lerna publish to publish multiple packages at the same time

So, for the monorepo form, we can use both Workspaces and LERna for project management. In addition, workspaces is already supported in NPM 7.x.

Thinking summary

When LogicFlow is added, the project has already started to use monorepo management form, so there will be corresponding questions, LogicFlow why use Monorepo, what are its advantages, does it have any disadvantages?

The advantages of monorepo

Using LogicFlow as an example, I summarized some of the benefits monorepo brought to the project:

Easy code reference

Monorepo can ensure that extension references the latest code directly from the native core. If it is in the form of multirepo, it needs to be packaged by Core and then downloaded in Extension.

Monorepo eliminates the need for frequent releases and installs of core packages during development.

Easy dependency management

Monorepo can install dependencies for multiple packages at once, and in the case of Multirepo you need to install dependencies once for each project.

Using the workspaces described above, you can also extract the same dependencies from individual packages, reducing the local volume of the entire project.

It is convenient for quick release

In LogicFlow, Extension depends on the code of Core, and when core changes, Extension often changes with it. To ensure that the dependencies between the two packages are clear and stable, LogicFlow always keeps the version number of both packages the same. This requires simultaneous and rapid releases, and Monorepo ensures that multiple packages are operated on simultaneously.

The disadvantage of monorepo

In fact, the advantages of MonorePO are basically brought by various tools on the basis of MonorePO, its MonorePO itself also has disadvantages.

Management cost

For example, when the LogicFlow core and Extension are changed, the corresponding examples will also change. This requires core and Extension to be packaged separately for use by examples development, so each action of Monorepo contains multiple project steps, increasing administrative costs.

Solution: Introduce LerNA to manage MonorePO, allowing simultaneous build or online of multiple packages, etc.

Item size increases

When all packages are placed into a project, the size of the entire project increases after installing dependencies, and multiple similar node_modules can cause the project size to skyrocket.

Solution: Use Workspaces to install the same dependencies in different packages into the root directory for reuse.

Commits to chaos

Changing code for multiple packages in a Git Repository causes commits to be mixed together, which can increase analysis costs in viewing commit logs.

Solution: Standardize the commit format and specify the package to which the change belongs, for example, fix(core): something.

Access control is missing

Having multiple packages in the same repository means that their access must be consistent, which doesn’t affect open source projects like LogicFlow, but monorepo doesn’t work when some projects have packages with different access rights.

The beginning of the dream

As every programmer knows, it is rare to have a good project in your career as an opportunity to hone your skills. Open source projects are free from the repetitive and complex logic of business requirements and retain the application of cutting-edge technologies in the industry, which is a great opportunity for developers to grow quickly. I am very lucky to have the opportunity to join LogicFlow as an intern. It is like a dream. Every question and problem I encounter in LogicFlow is like a teacher guiding me forward.

The last

From the perspective of an intern, this article describes the “new concept” of Monorepo encountered when facing the open source project LogicFlow for the first time, and shares the author’s learning and understanding of Monorepo. Monorepo itself has its flaws. It is a package management form that open source projects can consider using. In the later internship phase, I will also share other interesting new challenges with you.

Read more:

  • LogicFlow github:github.com/didi/LogicF…
  • Official document: logic-flow.org/LogicFlow
  • Design principle overview: juejin.cn/post/693341…
  • LogicFlow extension mechanism: juejin.cn/post/693831…
  • Edge drawing and interaction: juejin.cn/post/694272…
  • Add wechat to user group: logic-flow