"Nodejs Development Crypto Currency" 26: Easily generate UML class diagrams from JS files

Objective

Previous "Functional Programming Primer classic", wordy long, many small partners see foggy. Here is an example of how functional programming is fascinating and interesting. Of course, there is no point in writing code just for example, and the example provided in this book is a specific project or tool that takes on a task, which is naturally not the exception.

This book uses a lot of UML class diagram, often have small partners asked me what tool to draw. To tell the truth, the first few are my personal little manual finishing, but then feel in a waste of life, as a programmer, how can tolerate such things recurring. So, there's js2uml (see Reference) for this gadget. Only, the original purpose, only using regular expressions to filter the JS code (v0.1.0), so not flexible enough, nature has not been put out alone. Abstract syntax trees are now introduced, which can be refactored using functional programming, which makes the tool more general-purpose.

Because of the small amount of code, and the front face of functional programming a lot of elaboration, here is no longer detailed description of the coding process, just the design ideas and procedures to provide, like the small partners please consult their own source code bar.

Tool Brief Introduction

This is a command-line tool that makes it easy to generate UML class diagrams from JS files, such as:

The main implementation of the following two features:

(1) directly read the JS source code, generate PLANTUML recognized format files. I personally like to use it .pu as a suffix. Content formats, such as:

2016.07.23 http://bitcoin-on-nodejs.ebookchain.orgheader 《Nodejs开发加密货币》分析用图：《区块链》  Class Loader {    ...  }  ‘ relationship  Block -right-> transaction@enduml

Then, using the Graphviz tool, you can export images in PNG format. The reason to provide the export of such format files, mainly tools for the layout of the processing is not smart enough, layout, association, background pictures, etc., sometimes need to be further modified by hand. In addition, it facilitates integration with other tools in the future.

(2) Directly generate image files in Png,svg and other formats. This is a direct extension of the Graphviz.

The specific installation method is very simple, please check its documentation directly, here no longer repeat.

What can you learn from it?

With the development of this gadget, you can learn the following skills:

• The processing of an abstract syntax tree (abstract Syntax tree, AST). Abstract syntax tree has many uses, most people may rarely use directly in the code, but almost everyone is in use, such as: The editor's automatic prompt, automatic completion and other functions, the use of Nodejs's small partners, the final code to be confused, compressed and other processing, those tools are also used;
• Function-type programming. The original version, is completely object-oriented programming, and does not use the AST, so the code is long, limited functionality. This version, optimized, uses functional programming, greatly reduces the amount of code, and also provides direct export. Png/.svg/.pu and other formats of the ability of the picture;
• Learn plantuml. This is the best way to use code to process UML, directly using the dot language (the generated. Pu file is), like writing a program to draw UML diagram, really only the program ape can realize the carefree.
• Command line tool development.

About the abstract syntax tree

In the absence of any operating environment, in order to analyze the source code, there are usually two methods to choose, one is the regular expression, as used in the first version, but the regular expression can only extract the limited source of the format, it is easy to fix the format, especially for JS This is not the concept of real class scripting language, is even less common. Abstract syntax tree is an intermediate representation of a program and is designed for program analysis. Any application involving the operation and processing of the source program will use abstract syntax trees, such as the Smart Editor, language translator, etc. that we all use frequently. Therefore, the better and most common approach is to use abstract syntax trees.

Abstract syntax tree has the characteristics of not dependent on the specific programming language grammar and language details, so for different coding methods, and even different programming languages, in the grammar analysis, can construct the same syntax tree, which for the backend to achieve a clear, unified interface. This provides a feasible operation method for controlling the quality of code, control coding behavior and even batch reconfiguration when necessary. The reason why we want to research and use this technology, a fundamental goal is a supporting project with billion book project-billion book open source collaborative development platform.

This platform, can monitor each contributor's code quantity and the quality, gives the optimization suggestion, to the contributor each code contribution, through the billion book Smart contract automatically pays the reasonable billion book currency remuneration, finally writes the blockchain. This platform will change the programmer's way of life, let the contribution of the code to be more scientific, coupled with the underlying support of the Blockchain Smart contract, the programmer wherever you are, can always contribute their wisdom, and gain, make telecommuting a very simple and realistic thing.

The previous also said that the confusion and compression of JS code, all use the abstract syntax tree. The famous obfuscation and compression tool, UGLIFYJS, was the first to develop its own parsing tools, but the latest version UglifyJS2 was rewritten using acorn. In the World of node. JS, there are several excellent abstract syntax tree processing packages, in addition to Acorn, there is a esprima. I'm using Esprima here.

Tool implementation process (1) Basic requirements

This tool needs very simple, is to give a JS source file, directly exported the parsed UML file or image. This kind of simple application model, is very common, even can say any big application project, is the kind of simple application model builds the building up. As we mentioned in the introductory section, using node. js, it is best to get used to the concept of "stream" of data, from the JS file to the UML or image file, the typical data "stream" implementation. All we have to do is make some "filters" on this "flow".

In an article on functional programming, we also say that functional programming is more appropriate for handling data "streams", and one of the main points of the practice is to tell the program what it is (declarative), not how to do it (imperative). In other words, we just have to describe what the "filters" here are, and don't care what they do. For example, in the process of development, for debugging convenience, I first such a building block (imperative):

26行function(data) {    var functionList = parser(data);    var formatData = format(functionList);    var result = template(formatData);    ...}

This code can be written like this at a glance:

var result = template(format(parser(data)));

So, this code is in functional programming (we use RAMDA to handle functional programming):

// 11行var= _.//声明式// 28行var= getPuml(data);

By splitting and grouping along this line of thought, the whole process is handled very clearly.

(2) Architecture process and code structure

It is very simple to use a picture to illustrate it.

Summarize

These two articles are sufficient for the methodology of coding. This article simply provides a small example of functional programming. The example itself is not perfect, does not collect attribute variables, and does not add testing (actual project does not advocate), many functional programming advanced features are not involved, not fully functional programming, follow-up will further improve the promotion. In the follow-up development of billions of books, it will also use a lot of good experience in functional programming, good practices, further compression of code, improve robustness and maintainability.

All things too much, despite the use of a lot of space to introduce functional programming, but does not mean that we have to fully use functional programming to develop, if you can get people to deal with some problems, the unconscious use of some functional programming method of practice, will achieve the purpose. For example, if necessary, a function, a module, or even just some functions, the proper use of functional coding, is enough to improve productivity and code robustness.

Link

This series of articles is updated immediately, to keep up to date, please follow the link below

Source Address: Https://github.com/imfly/bitcoin-on-nodejs

Billion Book official website: http://ebookchain.org

Billion book official QQ Group: 185046161 (Billion book full open source Open, welcome all the small partners to participate)

Reference

Js2uml

v0.1.0

Plantuml

Abstract Syntax Tree

Fun with Esprima and Static analysis

Uglifyjs

UglifyJS2

"Nodejs Development Crypto Currency" 26: Easily generate UML class diagrams from JS files