On Github’s trending list, we reveal the principles of iMove, a process visualization tool.

F(X) team-lubamboo

IMove is a logically reusable, function-oriented, process-visualizing JavaScript tool library.

Rose 280+ star in one day? !

Recently, our open source project iMove rose 280+ star in one day, and was listed at the top of the Github trend list. The achievement is still good, indicating that the project is accurately positioned and has really solved the developer problem.

Today, through this article and you introduce the iMove open source project, including the iMove function and implementation principle, the original online code running ability, and how to automatically resolve node NPM package dependencies, there are a lot of highlights and innovation.

Why do we do iMove?

I’m going to talk a little bit about that in this video

• Why do we do it?iMove ？
• What does my ideal front end look like?
• For exampleiMoveWhat problem did this process visualization tool ultimately solve?

Front end problems

I think there are many problems with front-end development, especially the following three.

• UI is changing, so development needs to keep up
• Logic challenges, development also has to change the code, a lot of back-end processing logic is in there
• Composite interfaces, for historical reasons, are mainly associated with the backend. There is noNode BFFLayer, all done by components can be very problematic

I see the ideal front end

In short, my ideal front end can do the following four things.

• Logical assembly: this is essentially the reuse of interfaces and UIs at the smallest granularity.
• Process visualization: These reusable, minimal units can be choreographed through processes to simplify operations.
• Operational configuration convergence: This is due to high operational costs due to multiple systems, which are best unified.
• Gameplay ability precipitation: the ability to precipitate gameplay into reusable products.

For developers, iMove is the ideal tool to accomplish these goals. Move the mouse, write a node function, code export, in the specific project can be directly used, is it very convenient?

So, what is iMove?

1. It’s a tool. It’s non-invasive.
2. Double-click the write function, and the choreographed process can be exported as executable code for integration in specific projects.
3. Test convenient, right click to execute directly, there is innovation.
4. Let development like operational configuration to complete functional development, achieve reuse andLowcode 。

For example, 🌰

Let’s look at an example ~

Suppose one day you receive a request for a details page buy button:

• Get the product information on the details page
• The product information is included below
  • Whether the current user has received the coupon
  • The gift certificate needs to pay attention to the shop or join the membership
• Depending on the product information returned, the buy button can take several forms
  • If the coupon has been received, the button will say “Coupon received + Purchase”.
  • If there is no coupon
  • If you need to pay attention to the store to get the coupon, the button shows “Pay attention to the store to get the coupon + buy”.
  • If you need to join a member to get a coupon, the button shows “Join a member to get a coupon + buy”.
  • When exceptions occur, show the bottom pocket style
• Note: If the user is not logged in, invoke the login page

We can turn this complex business logic into the following schematic pseudocode:

// Check the login
const checkLogin = () = > {
  return requestData('/is/login').then((res) = > {
    const {isLogin} = res || {};
    return isLogin;
  }).catch(err= > {
    return false;
  });
};
// Get the details page data
const fetchDetailData = () = > {
  return requestData('/get/detail/data').then((res) = > {
    const {
      hasApplied,
      needFollowShop,
      needAddVip,
    } = res;
    if(hasApplied) {
      setStatus('hasApplied');
    } else {
      if(needFollowShop) {
        setStatus('needFollowShop');
      } else if(needAddVip) {
        setStatus('needAddVip');
      } else {
        setStatus('exception');
      }
    }
  }).catch(err= > {
    setStatus('exception');
  });
};
checkLogin().then(isLogin= > {
  if(isLogin) {
    return fetchDetailData();
  } else{ goLogin(); }});Copy the code

As the above examples show, although the complexity of the business is not very high, the cost of communication and understanding is not low, and the actual scenarios you encounter in your own business are much more complicated than this. However, the complexity of the business logic determines the complexity of the code, and the more complex the code, the more difficult it is to maintain. If you take on someone else’s project with complicated logic, the maintenance costs will be very high. However, this is one of the problems that iMove solves, so let’s take a look at how to develop using iMove for the same business requirements mentioned above.

As you can see above, the originally arcane code logic is expressed in the form of a flowchart through iMove, and now the business logic of the product is clear. In addition, each node in the iMove is coded, and the direction of the flowchart determines the order of execution of the nodes in the diagram, so to speak, “process visualization is natural code annotation.”

Therefore, in terms of “legibility” and “maintainability” : iMove process visual form > product manager PRD literal description form > program code form.

Application scenarios of the iMove

The front-end React component typically initiates requests in ComponentDidMount and completes rendering or other business logic based on the data that was successfully requested. This is a completely UI-free Ajax request processing. Aside from the component declaration cycle, there are interaction events, where UI and Ajax are often mixed.

1. Front-end processes, such as click events, component lifecycle callbacks, and so on.
2. Back-end processes, such asNode.js 或 ServerlessField.
3. Front end + back end, like front end click event,AjaxRequests and the back endAPI 。

IMove advantage

The above mentioned content is just the tip of the iceberg of iMove, let’s take a look at the advantages of iMove:

1) Logic reusability Faced with the daily business requirements of frequent iterations, we are bound to encounter a lot of similar, repetitive development efforts. In code it can be a common utils tool method or a common piece of business logic (such as sharing), but at its core they are just snippets of code. To improve code reuse, we tend to encapsulate it into generic classes or functions and then copy and paste them across projects (better packaged as NPM packages, but it’s a bit cumbersome to modify the distribution process).

In iMove, each reusable code fragment can be encapsulated as a node in a flowchart. When you want to reuse logic in different projects, you can directly introduce the corresponding node/subprocess. Each node also supports parameter configuration, which further improves the node reuse, and the use experience can be said to be very simple.

Further, if iMove has accumulated a certain amount of business nodes in a business scenario, the next time when similar business needs are encountered, can the logical part be directly reused to assemble the existing nodes? This can greatly improve the efficiency of research and development and shorten the research and development cycle of the project.

2) Function oriented in node design, iMove is relatively restraint, each node is actually exported a function, so the coding experience is almost no cost, as long as you have JavaScript foundation can use. You can import any other NPM package as usual and treat it as a normal JS file without worrying about global variable naming contamination between nodes.

3) Process visualization This development method of process visualization is called “logical choreography”, and its benefits (logical expression is more intuitive and easy to understand) have already been introduced, so I won’t repeat them here.

4) Logic /UI decoupling We often encounter in daily business development: UI style often changes, while business logic is relatively stable, and there is even an ABTest requirement to check the effect of revision.

However, many developers do not envision this in the future at the beginning of component development, so a business component tends to couple “business logic” with “UI style “. When it comes time for revision, it is not easy to extract and reuse the business logic, and maintenance costs are greatly increased. But as you develop with iMove, the component code automatically breaks down into “business logic” + “UI style “. Moreover, different versions of the UI can maintain multiple sets, but iMove can maintain only one set of business logic. This approach not only maximizes the reuse of business logic code, but also improves project maintainability.

To improve the iMove experience, we have implemented the function of “running node code online on the browser side”. This means that when you’re done with a node, you can always mock the input in the browser to see if the node behaves as you expect.

In other words, you can test a node’s function independently without introducing a testing framework and out of context, which greatly reduces the cost and threshold of code testing. At the same time, you can also conveniently save each test input/output as test cases, gradually forming a complete test case, which can not only guarantee the code quality of the node, but also can be referenced in other projects more confidently.

6) No language/scenario restrictions Although iMove itself is a JavaScript tool library, in our design iMove does not restrict the use of languages and scenarios. That is, you can use iMove not only to orchestrate JS code in front-end projects, but also to orchestrate Java code in back-end projects, and even other languages for other scenarios. In the end, it all depends on what language iMove compiles the flow chart into.

Principle of iMove technology

After having a certain understanding of the project background of iMove, this article will take you to uncover the technical principle behind it

How to build a simple flow chart to draw the application?

Aside from the iMove development of the function do not say, you can use it as a flowchart drawing tool (after drawing can also export pictures to save to the local ~). So how does iMove draw flowcharts? Surely we must be more curious about this, here must give the ant team to do X6 engine point 👍, really good to use ~

The X6 itself isn’t bundled with React or Vue, so you can use it with any framework. In addition, it provides a range of interaction components out of the box and easy-to-use node customization capabilities that can be implemented quickly by simply calling a few apis.

“Drop configuration Schema” click “Edit”

We’ll have an article on how iMove can use X6 to quickly build a charting application.

The core of iMove is based on the X6 protocol implementation.

• With nodes: useX6Visual interface for easy reuse and choreography.
• There is a pointing edge: that is, the process visualization, simple and intuitive, the edge can also take parameters.
• There arefunction 和 schema2form, supports function definition, which is for developers. supportform, so that each function can be configured into the parameters, this part is based on Ali open sourceform-renderThe implementation.

The whole project is not difficult. Based on the further integration of X6 and form-Render, the writing method is standardized and the arrangement is instrumentalized. Such a controlled design makes iMove have the characteristics of small and beautiful, which is convenient for development and use.

How do I compile a flowchart into running code?

What makes iMove even more attractive than drawing a flowchart is that it can compile a flowchart into code that can actually be run in a business project.

Compile online vs. compile locally

First of all, iMove supports both online compilation on the browser side, which can be downloaded as a ZIP package, and real-time compilation on the local command line Watch.

1) Compile online

To reduce the cost of getting started with iMove, we added the ability to compile the code online in the browser, so developers can download the compiled code without having to install a tool.

How do you do that? After some research, we found that Jszip is a JavaScript library that can read/write/modify zip files all in one, but also can run on the browser side. Therefore, we can generate a JSON file according to the directory of the code, throw it to jszip, and then use file-saver to provide download.

// key is "file/directory name", value is "file content"
{
  "nodeFns": {
    "node1.js": "..."."node2.js": "..."."index.js": "..."
  },
  "context.js": "..."."dsl.json": "..."."index.js": "..."."logic.js": "..."
}
Copy the code

2) Local compilation online compilation is simple, but there is a problem in project development: every time the code is modified, it needs to download the ZIP package again and decompress it to the specified directory, especially during debugging, it will be very inconvenient to frequently modify the code. To solve this problem, iMove provides a native compilation method to compile the code into the business project in real time through the save operation of the Watch flowchart.

How do you do that? The key to the above problem is: how to locally listen to the flowchart save operation on the browser side. But think about it the other way around, why not send a message locally when a flowchart is saved? In this way, we can either use libraries like Socket. IO to establish WebSocket communication between the browser and the local area, or we can use libraries like KOA/Express to start an HTTP server locally by triggering the compilation of the code when the flow chart is saved.

Basic principles of how iMove code works

Now that you’ve solved the problem of how iMove compiles code, let’s take a look at how iMove compiled code works.

In order to run code, iMove solves two core problems:

1. How do I execute the nodes in the sequence of the flowchart?
2. How do you process the data flow (for example, the return value of the previous node is input to the next node)?

RxJS seems like a good choice, and functional responsive programming seems like a natural solution to the above problems. However, considering the cost of getting started and the mental burden on iMove users, we did not adopt this solution.

1) For the first sequential execution problem, iMove takes a low-cost approach:

• First of all,X6Exporting flowchart is supportedjsonData, we can simplify it and save it as one copyDSLFile.
• Secondly, according to thisDSLFile, from which we can extract the code part of each node into a separate file, thus forming aNode-function set.
• Finally, the next step is to call the corresponding node functions according to the order of upstream and downstream relationships of nodes and edges.

2) For the second data flow problem, iMove takes into account various scenarios of data operation by nodes in practical applications and designs four data read and write modes:

• Config: read-only. Nodes do not interfere with each other.
• payload:ROM,logic.invokeWhen triggering logic, you can pass onepayloadValue that can be read by each node.
• Pipe: read-only, where the output of the previous node is the input of the next node.
• context:Read-write, public data in a logical flow if the ancestor node passes againsetContextSet the data so that descendants can cross the nodesgetContextAccess to the data.

At this point, iMove solves the problem of flowchart code running. If you look at the iMove compiled code, you will see the following structure:

To understand the Flow

The basic concept of a Flow is simple. It is a directed acyclic graph (DAG) in which data flows between nodes.

• Node Node
  • Node is the main unit of flow, responsible for processing the data flowing into the node, and output to the subsequent nodes for further processing.
• Port to Port
  • Each node has input and output ports. The input ports are responsible for data flow into the node, and the output ports are responsible for data flow out of the node. Each node may have one or more input and output ports.
• Connect the Link
  • The output port of one node is connected to the input port of another node, and the data processed by the node flows through the connection to the next node.

The basic idea of Flow is to use a function to implement a node, and the input port is mapped to the input parameter of the function. The output port is mapped to the return value of the function.

A Node in the flow is set as the End Node. Through the connection relationship between nodes, starting from the End Node, all dependencies are searched through the connection (tree search) to get the stack of a Node running. For example, in the figure above, we can get a stack like [node1, node2, node3]. Executing the functions of each node in a sequential stack mode runs the entire flow. (Note that this is a simple version of the implementation of Flow, which is still a batch, not streaming)

The function of each node should be assumed to be stateless, so that the input and output ports can be used to cache the computed results, but when the input value is an already computed value, the computed value is returned without any computation.

This is the concept of Flow in Flow-Base Programing (FBP). It’s actually the same concept as iMove. Imove is based on X6, x6 to solve the DAG implementation and visualization problems, combined with node extension function writing, and then realize the logic layout tool for developers. It’s as simple as that.

How do I run node code online?

One cool feature of iMove is that you can run the node function code online in the browser and see the results in real time. What you see is what you get is a user-friendly development experience that not only reduces the cost of test debugging, but also serves as a test case set to further ensure node quality. Write code in iMove, just double-click the node.

Right click to execute the code to complete the test on a single node.

Open the running panel, fill in the corresponding parameters, you can execute the specific code.

Running the iMove node code online addresses the following issues:

• How does the browser run the node directlyimport/export 等 esmStandard code
• A nodeimportCome innpmThe bag could still becjsSpecification, how does the browser work
• How does the code run when multiple nodes are selected simultaneously

IMove is implemented using http-import. We will publish an article on how to implement iMove

How do I resolve node NPM package dependencies automatically?

Since each iMove node supports importing other NPM packages, each node has NPM dependencies. However, the experience would have been very poor if the work had been filled in manually, so we did automatic parsing.

The principle is actually relatively simple, understand the NPM view command. Take NPM view lodash.get as an example. Look at the command line output and you can see:

$NPM view lodash. Get [email protected] | MIT | deps: none | versions: 13 The lodash method `_.get` exported as a module. https://lodash.com/ dist .tarball: https://r.cnpmjs.org/lodash.get/download/lodash.get-4.4.2.tgz shasum: 2d177f652fa31e939b4438d5341499dfa3825e99 maintainers: - phated <[email protected]> dist-tags: latest: 4.4.2 Published over a year ago by jdalton <[email protected]>Copy the code

As mentioned above, the command succeeds in getting the latest version of the lodash.get package. Of course, the NPM view command is not suitable for execution in the browser side, but in essence, it is a network request query. Let’s use NPM view lodash.get –verbose to see that the request was actually made: r.cnpmjs.org/lodash.get.

The next step is as simple as matching the dependencies in the node code with the re according to the import syntax rules and calling the API above to automatically resolve the package dependencies of the node.

conclusion

Having a draft-to-code tool like IMGCook on the UI side is enough to deal with the changes. But in the realm of logic, there are very few developers who can actually solve problems, and iMove is an exploration in this direction. I believe that through the above explanation, everyone can feel its charm.

The slogan of iMove is Move your mouse, generate code from flow chart, that is, Move the mouse, write the node function, export the code, and put it into a specific project can be directly used. Developing like an operational configuration is no longer a wish, it is a reality. If you are interested in iMove, you can also participate in open source projects.

---