| Author: Liu Qilin, front-end development engineer of JD Finance – Mobile R&D Department

Before the speech

I remember someone telling me that “the next step in front-end engineering is a team-level IDE”. I didn’t know what I was doing then, but NOW I’m terrified. For example, we can package development scaffolding, template engineering to unify the team stack. We can integrate the launch system, the test bug feedback system to achieve full service. And so on. It turns out that a team-level IDE really packs everyone’s work in. This is such a big topic.

But today I’m not going to pull the pie stuff, but something real. Talk about how to develop an IDE for your team, which I dubbed “Developing an IDE is as easy as cooking a dish”.

Is article

I divide cooking into four links: “cuisine”, “main ingredients”, “cooking” and “plate setting”. As for THE development of IDE, I also plan to start from these four process nodes and tell the story of each link.

Cuisine – Collection of function points

“Cuisine” is the first step in cooking. We need to map out the capabilities of our IDE, that is, what “dish” we want to make. Our team, for example, started out with an IDE that would make it easy to develop three-end RN applications and integrate emulation and packaging. Therefore, the author roughly lists the following function points during development:

  • Code editing system (including loading directory tree, an editor to host code additions, deletions, changes and reviews)

  • Simulator (under OSX, it is necessary to call the simulator of Apple device to open app and render the developed page)

  • Compile (compile RN code into development or release versions)

  • Console (watch code build logs, simulator run logs, etc.)

The feature point collection area varies from team to team, and every team develops an IDE from a different starting point, so the upfront requirements must be different.

Material selection – frame and warehouse selection

“Sourcing” is a crucial part of finding all the technical scaffolding needed to implement an IDE.

The first is the framework

We are front-end engineers and JS is our main weapon. To develop PC native applications like ides, the first technical point is to find a cross-platform shell project. Finally we determine to choose Eletron https://electron.atom.io/ shell project to develop. For details on Electron, check out its website. Crooked kernel to write the official website you know, or quite popular easy to understand.

Here are some of the advantages of this framework:

Division of labor

The project involves user’s visual operation interface, file read and write operation, system application call, network call and so on. Electron provides general planning advice for the main and Render processes, but don’t throw all the logic for the underlying operations into the main process. Since the electron framework has a NodeJS running environment, we can start new Node child processes to perform some large independent functions.

For our project, MY division of labor is as follows:

engineering

Develop sub – render process web applications, app main process and other sub – process functional applications.

Therefore:

  • The Render process, the Web application, builds the project using the React + Redux + Middleware framework and the Webpack scaffolding.

  • App main process starts the project with electron command

  • The Node child process starts the service using the Nodemon

Here are some of the basic components of the Render process that IDE uses regardless of “cuisine” :

  • Codemirror https://github.com/codemirror/CodeMirror web IDE editor component, highlighting support type code

  • The react – UI – tree https://github.com/pqx/react-ui-tree web file tree components

  • UI framework Material -u http://www.material-ui.com/#/ Web UI framework

    “Cooking” – some technical points encountered during logic development

“Cooking” link, with good material selection design in the early stage, to the RESEARCH and development link is the natural thing, in this link, is mainly focused on solving some difficulties in the implementation and pay attention to some details of the skills. Here are some of my IDE development experiences. The common thing is supposed to be the so-called communication problem.

Communication problems

The above architecture designs various communication mechanisms

  • Communication between the main app and render process: Electron has its own communication mechanism encapsulated in ipcRender and ipcMain respectively. See the documentation on the official website for details.

  • In the Render process, ipcRender listens for the reducer bindings of the callback and redux: that is, add the bind process after createStore. Specific key codes are as follows:

  • Communication between the main process and other child processes: The same as normal NodeJS interprocess communication.

File tree too large

It is common to run into problems with too large a file tree, such as the load folder with the node_module subfolder. This will crash the IDE if you load directly, so extra processing is required.

  • Hierarchical loading: Each operation of a user adds only the load and render operations of level-1 folders.

  • Set the maximum number of render files per folder level.

“Plate” – package and publish

“Plate” is the final link, but also to get the final “dish” moment. This link can be said not too much, that is, it involves two pieces, one is packaging, one is encryption.

  • Packing: Electron comes with a packing method. Several are officially recommended, and one comes with an installer. Here recommend using NPM libraries by electron – packager https://www.npmjs.com/package/electron-packager for packaging. There are all kinds of configurations in the API that basically meet all your needs.

  • Encryption, of course, is asar, this is no skill, look at the official website on the line, a command thing.

conclusion

To sum up, developing an IDE is as easy as cooking a dish. The above is just a primer for developing an IDE that is meant to spark the seeds of curiosity and exploration for anyone who wants to try it out. It’s also fun to write your own IDE with your own tag. And when the results of curiosity attempts, after repeated polishing, gradually become an engineering product, it will become a very meaningful thing.

.

Apple is going to charge 30% tolls for praise

The following channels are dedicated to IOS users

Thank you for your support, we will continue to work hard!

.