How does GitHub develop Atom based on node. JS and Chromium?

Last Update:2015-07-01 Source: Internet

Author: User

Tags gtk

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

In the answer, most of them did not answer the point, and some gave very subjective opinions without giving the actual conclusion and the analysis process.

There are four problems with the main problem:

1. How does Github develop Atom based on node. js and Chromium?

Atom is based on Atom-shell (Atom/atom-shell GitHub), Atom-shell is a shell framework that integrates Chromium and node. JS (which has been replaced with Io.js in the latest release). So how did he integrate node. js and chromium? Atom-shell node. JS's event loop is added to the browser's underlying and render layers, which in the browser kernel is a driver for the JS. The reason that the rendering layer and the kernel layer of the event loop is differentiated, is designed for the CEF3 rendering architecture, and in order to enable the rendering layer, as well as between the rendering layer and the kernel layer, using IPC encapsulation, the specific IPC implementation I did not go deep to see the source code, it should be gone directly Chromium IPC interface.
Similar Shell techniques include nw.js and Bracket-shell. But these shell technologies are different, and the specific differences can be read in these documents:

Atom-shell/atom-shell-vs-node-webkit.md at Master Atom/atom-shell GitHub
https://speakerdeck.com/zcbenz/practice-on-embedding-node-dot-js-into-atom-editor
https://speakerdeck.com/zcbenz/node-webkit-app-runtime-based-on-chromium-and-node-dot-js

Github's Atom is based on the Atom-shell, through the Coffee-script write the performance of the page end, through the integration of node.js/io.js processing IO layer requirements. Then the ability to integrate some native windows in the operating system through Atom-shell.

2. Have you ever been able to share your learning experience?

Learning experience is not to mention, I basically read the Atom-shell official document, focusing on how to use IPC to communicate between windows, the kernel layer, and page programming knowledge. In this process, I think there are several places that can be systematically studied:

1. Establishment of communication models:

In order to better communicate with the IPC, we need some effective empirical model to summarize the method of communication, so I found two communication model documents to learn:

Getting Started with ' nanomsg '
http:/ /zguide.zeromq.org/page

Through the summary of several communication methods proposed in Nanomsg, ZERO-MQ, we have gradually designed the message communication Code specification, and the type of communication which meet our needs.

2. CSS layout, DOM page rendering Knowledge:

In order to enable my GUI to work efficiently on the page, I need to learn more about how the browser renders the DOM, how to parse the CSS and other browsers to render the kernel, and for this I read the following documents:

How Browsers work:behind The scenes of modern web Browsers (this is a good primer on the basics, he lets me understand how the browser works in just 1 weeks, through my own coding practices and extended reading)
Getting Started with the WebKit layout code (this is also a very good article, he through the analysis of the WebKit of the underlying Layout codes, let you understand how the entire browser is the CSS layout work)
A Visual Method for understanding WebKit layout (This article inherits from the previous article, further understanding of the technical content of Layout through practice)
Rendering:repaint, Reflow/relayout, Restyle/stoyan's phpied.com (This article also speaks about Reflow's underlying details)
Understanding the CSS specifications (and then because the CSS document itself is too obscure, I am a beginner of the Web front-end programming people at first not to read, so I first found this article to learn)
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) specification (after that, I did some practice, almost feel I can grasp, read through this document, and through a small number of coding, to complete the majority of Css2 of the typesetting process, to open up my mind for the layout of the many questions)

After that, I expanded to read some of the following CSS drafts:

CSS Animations CSS3 Animation Draft
CSS Transitions CSS3 Transition Draft, Transition and Animaiton seem to have a lot of coincident points, to be delved into
Web Animations 1.0 Web Animation Draft
CSS flexible Box Layout Module Level 1 CSS3 Flexbox Draft
CSS Grid layout Module Level 1 CSS3 Grid Layout Draft
CSS Transforms Module Level 1 CSS3 Transform, Transform and position are different, two properties are not overly redundant
CSS Shapes Module Level 1 CSS3 Float Shape Draft, picture and text mix, belongs to the advanced demand

Then through the above several rounds of practice, I went back to learn the following a few about the layout of the knowledge points:

Introduction to layout in Mozilla this is the Layout technical details of the Mozilla Gecko engine
David Baron's CSS Playground Mozilla's developer blog, with a lot of technical details inside
David's inline box Model This is a piece of the above developer's description of the inline box
The WebKit Open Source Project is a related document in WebKit about its technical details.
CSS animations and transitions performance:looking inside the browser

It took about 4 months to complete the basics of web rendering and typesetting.

3. Node.js/io.js Learning

node. JS learning I was in the project to continue, during this period due to the project progress is relatively tense, I did not do a good job of various study notes, so I am sorry, there is no special much to share the experience.

3. What about developing mobile apps in this way?

Some of the Hybrid applications are constructed in a similar way, and are more famous for:

PhoneGap | Home
The Crosswalk Project

I don't have much experience in this area, so there's not much to share.

4. What are the suggestions based on the Node development class desktop application?

I think the project itself needs to be considered from the point of view, if you are a JavaScript dependent on more projects, or a partial page application of the project, then build based on Node/chromium desktop app will give you a very good infrastructure, let you focus on the development itself.

*************************************************************************************************************** ******************************************

The main topic does not have to be limited to ATOM, for the general application, I would recommend the XDK framework Nodw-webkit, which is now the nw.js, this framework is very handy.

I do not recommend ATOM's Atom-shell because it is more difficult to get started, especially with the introduction of IPC communication mechanisms. If you are doing some applications like CS architecture, then IPC is your right hand. If you are just doing some common desktop applications, IPC will force you to complicate simple tasks and violate the KISS principle. And IPC has a lot of pits that will be the most time-consuming part of your development.

The following is a unified overview of the technical framework and success stories in this area:

Atom-shell

Atom was developed based on Atom-shell, and Atom-shell was developed based on node. JS (Io.js) and Chromium (CEF2).
Atom-shell representative case can refer to the Fireball General designer to answer this post: How many years, front-end development can be as easy as client development? -Johnny Wu's answer

Nw.js

Nw.js by Node-webkit renamed, Technical Bottom and Atom-shell is the same, than Atom-shell also easy to use, with the most people. Node-webkit to support Intel's own XDK, who would have thought that such an IDE artifact was written in JavaScript? But it is precisely because of this, the previous update of NW stalled for some time, so we abandoned the ruthless, this project seems to have been re-active recently.

After reading the above two frames and the corresponding case, I think the main mind will have the answer. In addition, similar frameworks have relatively small brackets-shell and HeX, respectively supporting the development of brackets and Youdao dictionary.

Here is the moment of the Spit:

Nodejs + CHROMIUM≈SB

Why say that, first say ≠ part, if you want to spend 30 minutes in Linux to write an interface cool features simple gadget, nodejs+chromium (that is, Node-webkit) is a good choice, in Windows is VB, to the interface cool words http://vb.net/c# + Wpf,mac also please exit the pit, the default is good enough.

Everyone knows that WPF and VB are very useful, but what about cross-platform? If you want to cross the platform, it's better to use Node+web.

If you're going to do something heavier, chromium's efficiency and bugs will drag you into a dog, you say NPM? Node-webkit is wearing node skin but using the local code of the compilation of scrambled eggs hurt.

Atom-shell's bug response time is calculated on a daily basis, and chromium's efficiency is really great. Compilation of local code where's the egg ache? No, just a command line? If you change other technologies, it would be nice to compile a variety of dependent libraries.

If you want to do a small thing, but for people, with a node-webkit do not know how
much ...

Good dozens of MB, it sounds very heavy, but I use Youdao dictionary so many years, has not found it very heavy ah? Who would have noticed that it was CEF-made? You made a great tool, who cares about volume these days?

the other, you want to cool the interface Opengl/directui

Web interface is called cool, look at me above the Atom-shell case

you want to cross the platform gtk/qt each have a good

AIR and Java are better, GTK/QT has buried.

slow performance and low execution efficiency.

Look at my case, the game engine can do, the XDK such a heavyweight IDE can do, and what performance can be questioned?

consumes more resources.

What application do you do, to be resident backstage? Is your memory still dozens of MB?

long development cycle.

Obviously shorten the development cycle OK ... Don't believe you try to cross a platform. Even if not cross-platform, you look at my front atom-shell paste case, the Web page to do the UI development of high efficiency.