A junior developer beats a team of a dozen people, here's the secret!

Toutiao is very popular recently. As a developer who likes to study, I have carefully studied their APP and found that they have developed an RPC framework. Developers should know how difficult it is to build a framework. If there is a developed framework in front of me, I will use it without hesitation, just like node.js or imag.js.
imag.js is a mobile cross-platform development framework, which calls the underlying API interface through JavaScript and encapsulates it. The UI module can help developers to develop APP simply and quickly. The controls in the imag.js framework are all native, just like the Label control. On iOS, it is the UILabel control that calls the system, while on Android, it is the TextView control that calls the system to ensure that the developed APP has smooth performance and native APP. Comparable.
Let's take a look at the news APP developed by Xiaomeng based on imag.js technology.





So many pages to write a lot of code, right? This talks about a major feature of imag.js: less code and fast development efficiency! As long as a <list> control can complete the layout of the following figure.

Attach the source code to see (login page 

<?xml version="1.0" encoding="utf-8"?>  
<imag>
    <page>
        <title style="background:#ffffff">  
            <left><button role="back" style="color:#1f1f1f"/></left>  
            <center><label style="color:#1f1f1f;font-size:17">Mobile phone number login</label></center>  
        </title>  
        <content style="background:#f4f5f6">
            <list type="transparent" style="margin:28 19">
                <item style="padding:1 1 0;border:1 #efefef">
                    <row>
                        <input type="text" placeholder="手机号" style="font-size:14;color:#0a0a0a;background:#ffffff;height:40"/>
                    </row>
                </item>
                <item style="padding:1;border:1 #efefef;background:#ffffff;col-width:*,1,70">
                    <col>
                        <row><input type="text" placeholder="密码" style="font-size:14;color:#0a0a0a;height:40;background:#ffffff;"/></row>
                    </col>
                    <col><row style="height:14;background:#efefef"></row></col>
                    <col><row><label style="font-size:14;color:#8c8c8c;align:center">找回密码</label></row></col>
                </item>
                <item style="margin:20 0;padding:14;background:#999999;corner-radius:4">
                    <col><row><label style="color:#ffffff;font-size:15;align:center">登 录</label></row></col>
                </item>
                <item style="padding:0">
                    <col><row><label style="color:#1a88d5;font-szie:14;align:center">注册账号</label></row></col>
                </item>
            </list>
        </content>
    </page>
</imag>  

From the code, <imag> is the root node of the XML document, and page contains the content of the entire page, which is an abstraction and encapsulation of the page. In the above code, <page> includes two parts, <title> and <content>, which are the title and content of the page respectively. title is the page title navigation bar, with <center>, <left>, <right> three child nodes, which are used to center, left and right on the title to place text and buttons. There is a <list> control in <content>, which is quite a container for displaying input boxes and buttons. 

Here is just part of the code, the detailed code can be clicked on the link