idea's blog

I must say ALL web technology frameworks for mobile go in the wrong way! Every of these frameworks aims to be a web framework, which recreates native look and feel controls.

CocoaUI framework goes in the right and bright way! CocoaUI is a native UI framework, builds native UI apps with web technologies.

Why mobile web frameworks are doing wrong?

Performace is a vital weakness!

There is no doubt that web apps are much slower than native Apps, especially when they try to draw native look like UI.

The goal of web browsers or webview widgets embed in native Apps, is to render a wide range of user interfaces, and to process user interactions. But most native Apps are made to do exactly one or two things. So native Apps are optimized, but web Apps are not, and not able to be efficiently optimized.

A lot more work to do

There are two major things mobile web frameworks have to do, one is the UI thing, the another is event handling.

Mobile web frameworks wasted too much times on drawing native UI look like controls, when native UI changed, they do the same thing again. They draw native UI look like controls with HTML+CSS, again and again. They act like DongShiXiaoPin, an ancient Chinese idiom, which tells an ugly woman named DongShi clumzily copy every motion of a beatiful woman.

The right way!

The right way is not building a mobile web App framework, but building a native App framework using web technologies. This is what CocoaUI doing now.

Have you ever dreamed of creating iOS App’s UI with clean and human nature HTML/XML? Now CocoaUI provides you an easy way to do this, the UI develop of an App is not a big deal any more!

I will show you how to create a register form UI with XML, it is native, not webview based, nor hybrid.

Let’s first see how a register form look like on iPhone 5(simulator):

It is a normal register form, with:

• A logo of your company or product, on top of the form, center-aligned.
• Then a text input for user to input user name to register, there is a small icon on the left, also, there is a bottom line below the icon and the text input.
• Much the same as user name input.
• A line of text, which contains two links(buttons) to show Terms of Service and Privacy Policy.
• Last, at the bottom there is a button which is 100% width stretched to fill the screen horizontally, with blue background.

As described above, with CocoaUI‘s powerful HTML/XML UI descriptive language, you are able to simply translate human readable sentences into CocoaUI’s UI codes.

The logo

<img id="logo" src="logo.png"
    style="float: center; clear: both; width: 64; height: 64; margin: 10 0;" />

The logo image is floating horizontally centered, and clear any possible controls on its both sides(left and right), it has 10pt blank spaces above and below it, and no addition blank spaces on its left and right(float: center has already give it blank spaces as well), which is defined by margin.

The Username and Password inputs

<div style="margin: 15 0; border-bottom: 1 solid #eee;">
    <img src="name.png" style="width: 18; height: 24; margin: 8 8 0 0;" />
    <input type="text" placeholder="Username" style="width: 100%; height: 40;" />
</div>

The div is the wrapper box of the small icon and the text input. There is 15pt blank spaces above and below the wrapper box, and the box has a bottom line.

Then the small icon given by image file name.png. The text input will layout to the right side of the icon, and fill the whole space(by 100% width).

The password input is almost the same, but with password input type, not text.

The Submit button

<button id="submit"
    style="clear: both; width: 100%; height: 40; font-size: large; margin: 15 0 0 0; color: #fff; background: #6cf; border-radius: 5;">
    Register
</button>

The Submit button fills the screen horizontally(by 100% width), before it stretch to 100% width, it clear(avoid) any possible controls on its left, and not allow any controls to layout on its right. The text color is white(#fff), and the background color is blue(#6cf). And border-radius makes it rounded ranctangle shape.

Is it EXCITING? Get rid of long nonsense iOS contraint based layout codes now!