Frameworks and tools that hybrid app developers must not miss

I recently started to select technology for the mobile version of the website and found a lot of interesting things. I wrote them down to share with you.

ionicFramework

I am a loyal fan and advocate of hybrid apps. Since Sina Mobile Cloud, I have been looking for a framework that can help Web programmers develop beautiful and easy-to-use UI layers. After trying frameworks such as jqmobile and sencha touch, I have not been able to find a framework that really meets my ideas: it should be designed for hybrid apps, componentized, and have a simple and beautiful UI.

Many students don't understand the difference between designing for a hybrid app and designing for a mobile web. I will only talk about the most typical point: the resources of a hybrid app are all local, and there is no network reading consumption, so the most ideal way is to load multiple interfaces at once, and the application directly switches between multiple interfaces, rather than loading on demand through ajax to save traffic. The latter is exactly what frameworks such as jqm do. I can't accept sencha touch at the conceptual level. It makes me feel that I am not writing an interface, but doing an algorithm homework. I have written about the complaints about these old frameworks before, so I won't say more. Next, let's talk about my recent new discoveries.

Fast forward two years, and many frameworks that are more suitable for hybrid apps have begun to appear. This time, I actually chose chocolatechip-ui first.

[[124697]]

It is very similar to the lazymobile concept I wrote before. It uses div as the App interface. Switching between interfaces is actually sliding the browser on the div. The interface adopts the flat design style of iOS7, which is very pleasing. I was attracted when I saw it. After reading the basic code implementation, I found a small requirement to try it out. It was a tab+side menu app. Then I found that the encapsulation of chocolate-chip components was not enough. When multiple components were repeatedly nested, various interactions would occur. This obviously violated the orthogonality principle. So I reluctantly parted with it.

Then I came across ionicframework. Ionic uses angularjs as its foundation, which has a qualitative improvement in encapsulation. You can use tags like <weibo> to describe a Weibo post. It also uses states in angualar-ui to switch interfaces, thus ensuring a smooth switching process. In addition, it also directly integrates the command line tool of Cordova (which is phonegap), and you can compile the app with just one command after writing it.

The learning cost of ionic is relatively high. Because Angularjs is a real MVC framework, its M and V are two-way bound. I spent some time learning it during the Spring Festival, and I can write some simple applications. When learning, sometimes I still can't change my thinking. For example, I once struggled to figure out how to submit a form and where to submit it. But in fact, the controls of the form are originally bound to the data object, and you just need to call the save method of the data object.

But overall I still recommend this framework, and I also think that AngularJS's approach represents the future. Learning something new can sometimes make life more fun.

Ripple Emulator

When writing code, I usually use node's http-server to start a web service directly in the code directory and debug it with a browser. However, the phonegap extensions in the code often cause page errors. In order to solve this problem, we made a cloud window debugger, but now it is basically not updated for some reason. In addition, the cloud window debugger needs to transfer the code to SAE before debugging, which is not as convenient as local.

What I want to recommend to everyone here is a Chrome extension, Ripple Emulator.

With this extension, you can debug Colrdova functions directly on Chrome. You can choose the simulator to test the screen size, and you can also choose the Cordova version of the simulator. Five-star recommendation, you will come back to like it after using it.

I also use some Angular related tools, which I will not sort out this time. I will sort them out slowly when I have time. Please follow my Weibo to get the latest news.