"JavaScript" about the choice of hybrid app technology solutions

"Introduction" In recent years, with the mobile device type of more and more operating systems, the increase in user demand, for each project to start, we will take into account the cost, team members, technology maturity, time, project requirements and a bunch of factors. As a result, the development of apps has become more and more. There was a small wave of HTML5, countless people involved or seen a discussion: native development or hybrid development, or web development? In the end the best practice is how, I think only practice of the people will know. Especially in this era of mobile internet, full of variables.

"Abstract" the author will start from the development status of Hybrid app , explain the advantages and disadvantages of Hybrid app , and compare Hybrid app with Native App the characteristics of the individual, and finally discuss Hybrid App direction of new ideas.

Hybrid app Status Analysis Web App

The web app is undoubtedly the cheapest and fastest solution. Especially in the last two years the very popular responsive design, the Web app market provides a very good practice venue. The most recent example of a typical web app is Sun Weather application, and its details are highly praised.

Related Vendor Content

Big Data architecture and industry applications Internet thinking on financial challenges from technology to product non-return

Related Sponsors

In general, the following features are a web app: Run with a browser, a pure web front-end architecture, many important phone features are inaccessible, such as contacts and push notification, single Page app, sales channels are limited to the browser.

Hybrid App

The so-called hybrid app will actually have different branches. And there will be overlap with the native application. Here are the three different solutions.

Scenario One: The use of middleware such as PhoneGap, Appcan, webview as the user interface layer, JavaScript as the basic logic, as well as communication with the middleware, and then by the middleware access to the underlying API, the way the application development. This architecture is generally very dependent on the performance of the WebView layer.

Scenario two: Use Adobe Air, rubymotion, Appcelerator, or a non-official language tool like Xamarin, packaged as a native app. Why do I define them as hybrid apps, mainly because they are not very simple to use the native language to develop, but by providing developers with friendly development tools, and compromise the development of this language into native language, eventually packaged the entire application, so also belong to the hybrid application category.

Scenario Three: In the development of native applications based on embedded WebView but the overall architecture is provided using native applications, typically such development is composed of native developers and web front-end developers. Native developers will write a basic architecture and API for Web developers to develop interfaces and most of the rendering. To ensure that the interaction design, as well as the development of a more eclectic effect, good optimization will also have a great effect. (The program was used by Facebook Three20 that year)

Therefore, the Hybrid app has the following features:

1. Development may not be used or most of the native language is not used, but there are all native application features;
2. The architectural scheme will be inconsistent with the original, the basic tool-based;
3. With cross-platform features;
4. General development is relatively simple in the way of native development.

Native App

The Native app is undoubtedly the most reliable solution. But the study cost, the talent cost, the development efficiency as well as takes care of the different platform's characteristic to consider, all became the developer's mind the hurdle. As for saying this is insurmountable or a way to make you improve, I think it is entirely up to you. Based on a variety of factors, it is estimated that many people will choose a compromise solution to the hybrid app development ranks, including the author himself also came.

More content will be discussed around the hybrid app development.

Advantages and disadvantages of Hybrid app in development

In the hybrid app development process, several different scenarios the author has experienced. Of course, also experienced the development stage of the native app. In such a tangled complex process to give the author a lot of experience, the following I will also on their own experience and everyone to share the advantages and disadvantages of these programs. For the first line of friends, the author is from the Web front-end, after all, the threshold is lower, and can quickly cultivate their confidence and the sense of code. In depth, we begin to touch the mobile development piece. So we'll start with the first option of the hybrid app.

Scenario One (Web schema-oriented)

Advantages:

1. Full web development, to a certain extent, is conducive to web front-end technical staff to quickly build page style;
2. Facilitates the presentation of the same interaction layer on different platforms;
3. Easy to debug, the development of the time can be done through the browser debugging, tools rich.

Disadvantages:

1. Although you can focus on the interface and interactive development, but this page will become a disadvantage, such as to imitate an iOS default settings interface, you need a lot of HTML and CSS code, and the effect is not necessarily as good as the interface above the iphone;
2. Because this is a cross-platform development, it is still the phrase: Compatibility is the front-end pain. Know the pain of web development on the Android machine. For example, in previous years on Android devices to write a fillet, border-radius:10px, on Android devices will appear with raw edges.
3. Ease of debugging is actually in the Web interface layer. But when actually doing hybrid app development, you will meet the demand, enter the phone's bottom request, do some processing. For example, if the application has a push notification service, you need to go to the bottom, get the data when the push notification occurs, and do the corresponding interactive processing. Of course, similar to phonegap such framework, has a good plug-in mechanism to help you solve similar problems, of course, there are Game center plug-ins, specific words can go to GitHub to pay attention to the official account of PHONEGAP, the resources are very rich;

Scenario two (compilation conversion mode)

Advantages:

1. Use your familiar language, for application development, such as rubymotion, is to use the Ruby language to do iOS development, development, the amount of code is the magnitude of decline ah.
2. Some development tools provide cross-platform capabilities that enable your applications to quickly publish to different platforms. For example, Xamarin, the mono community, is a typical example. Using the C # language, you can publish your app to the ios,android and winphone markets;
3. The developed program runs efficiently. Most of the application of this architecture, in fact, is very dependent on the underlying things, and including the interface of things, is the use of native APIs, efficiency is certainly better than the architecture similar to PhoneGap;

Disadvantages:

It relies heavily on the toolkit provided by its tool vendors, and it is necessary to have a full set of tools when debugging. Of course, these vendors will be in charge of the form of the release of their tools, the corresponding customer service to provide technical support. Encounter system upgrade, third-party SDK upgrade, development tools bug, etc., then wait for the tool manufacturers to solve. It's the equivalent of putting the risk on each other, but taking responsibility.

Scenario three (native architecture)

Advantages:

1. This is undoubtedly the most stable hybrid app development way, interactive layer of efficiency by native things solved, and the basic structure is in the app to write Web pages, even the App Store is the use of this kind of program;
2. Development time Division is very clear, the underlying is handled by the iOS developer, the upper layer by the Web front-end developers to deal with;
3. Effective on-line parameter configuration method, in order to replace the interface in time;

Disadvantages:

1. The team needs at least two engineers, one for the web and one for iOS. Of course, if the developer can also be independent of the two technologies;
2. or running efficiency, to weigh how many interfaces to use the Web to render, after all, webview efficiency will be relatively low, before Facebook is because the web rendering inefficient, the entire application to the original solution. Of course, this can be solved by optimization. But there are limits to optimization, as Ruby founder Matz says, optimization is appropriate (including time spent, skills, etc.), and sometimes the optimal rate of return does not necessarily meet your own expectations.

Hybrid app and native app development comparison

Because the idea of program three is basically the development idea of native application. The contrast here should not be large, so the author will not do too much to explain the difference between the two. However, if the web-oriented architecture, or in the scenario two through special tools developed, and native development is compared. This time the author will take the proposal for a discussion. Discussions are mainly discussed in terms of architecture, code management, and, of course, some of the details.

Architecture discussion:

Because this is a web-oriented application, it requires developers to have a strong idea of a large web front-end architecture. Mention the words that may come to your mind right now: angular.js,require.js,sea.js,backbone.js. Yes, these tools can help you quickly sort out your ideas and manage your web apps. The most friendly to developers, the most space to play the non-phonegap mo. Therefore, the author will discuss the application of PhoneGap. (Because similar Sencha also offers a solution, but the Sencha itself is a heavyweight framework and has its own ideas in it, plus he also provides development tools, which are not suitable for discussion here.) For developers to choose a good tool according to their needs)

From the tool, look at:

Angular.js

For two-way binding, network requests, view management, and so on.

Require.js

JavaScript Modular tool, when using more interactive objects, PhoneGap plug-ins, you will find a powerful modular tool in the development of the time to provide excellent help. can help you to manage the overall code in a neat and orderly.

Jade Template Engine

Template engine. I personally compare the recommended use of jade, and I also wrote in the blog several times in the different scenes of Jade in the use of the relevant articles. The main is Jade's syntax is too concise, and for JS developers very friendly. If you haven't started using the template engine, join the queue and you're behind.

Jquery Mobile

If you do not yet have a designer, but are eager to construct an application out. jquery Mobile offers a variety of different styles of templates for you to use, but also contains different interactive animations. And it's also cross-platform. Of course, the actual scene, I think you will spend a lot of time in writing CSS, because the design is always unconstrained. Of course you still have a lot of tools, such as sass, Less.js and so on.

Phonegap.js or Cordova.js

Do phonegap develop the code base that must be used to communicate with the PHONEGAP framework. Now this library has been renamed, is Cordova. Why do you have to ask Adobe for a specific name?

PhoneGap Plugins

PhoneGap plug-ins can help you get to your phone's other APIs quickly, using JavaScript directly to manipulate these underlying APIs. For example, call the corresponding occurrence of the push notification event.

Look at the Web layer in the hybrid app from the code catalog:

/js          mainview.js          settingview.js          networkobject.js          renderobject.js     /lib          /phonegapplugins               push-notification-plugin.js               pickerview.js          phonegap.js          zepto.js          jquerymobile.js          Iscroll.js          angular.js          jade.js     /css          /mainview               listitemtemplate.css               Questionlisttemplate.css          /settingview          /personview          /layout               navigationbar.css               Tabbutton.css          app.css     /template          /mainview               listItemTemplate.txt               QuestionListTemplate.txt          /settingview          /personview          /layout               navigationBarTemplate.txt               TabButtonTemplate.txt     index.html     app.js     require.js

From the directory above the code, it is the classic static Web page file directory, very simple. The following is a word about the entire application of the operation process it:

Open phonegap Application, enter index.html, run require.js, load application resource, App.js control entire application, Angular.js for event binding, and view rendering The data and the Loaded view template (code under the template directory) are rendered to the appropriate location by the Jade template engine.

is so simple.

After reading the simple PhoneGap application, I'll take a look at the code catalog of the simple iOS app at the time of development. The idea is still very similar. In this case, I will not go into the Code section to discuss the specific implementation and the details of things.

 demoapp/resource navigationbar.png [email protected] /demoapp AppDelegate.h                    Appdelegate.m/settingviewcontroller SettingViewController.h Settingviewcontroller.m/mainviewcontroller MainViewController.h Main Viewcontroller.m/supporting Files demoapp-info.plist infoplist.string                    S .../plugin/afnetworking AFHTTPClient.h                    AFHTTPCLIENT.M AFHTTPRequestOperation.h afhttprequestoperation.m               .../frameworks coredata.framework uikit.framework/products Demoapp.app 

Objective-c is a generic, advanced, object-oriented programming language. Objective-c is an information transfer model (message passing) that is self-smalltalk. In Objective-c, it is better to say that objects communicate information to each other more accurately than they call each other. Objective-c emphasizes the face of object programming, and objective-c requires that the class (interface) and implementation (implementation) be divided into two parts. The definition file for a class follows the conventions of the C language with. h as the suffix, and the implementation file with. m as the suffix. So you'll see a lot of class files inside, and the whole project is made up of different classes. (It may not be accurate to describe it, but it's easy for you to understand)

This and rich web front end has very big difference, in the Web front-end development has the HTML,CSS,JS Three Musketeers, must need to use these three things to be able to build out the entire application. But in the native application, it is very single. You just have to hold on to the objective-c. As a result, for native applications, you can quickly get on the ground and understand the code as long as you follow good specifications and even a novice is involved in the development. Because the pattern is set, everyone uses the same set of APIs. Just follow the process and go. Of course, learning objective-c requires a process, but it's very simple for developers with C-language and Java-language experience.

Of course, the disadvantage of native development is also obvious, is not enough to meet your cross-platform requirements.

From the code catalog above, actually also basically see why I use a variety of JS library and framework reasons. The main purpose is to build a maintainable, normative Web application. Because the language itself is very flexible, 100 people can have 100 styles, plus no specific JavaScript courses, in the past are prone to misunderstanding of the language. For various reasons, it is necessary to constrain the code style and architecture of good one application. In addition, JavaScript itself does not have the concept of class, so in JavaScript object-oriented programming: JavaScript data and member encapsulation is simple. There is no class, it is a purely object operation. This is very different from the objective-c. This time there has to be a mindset to handle the entire Web application: to be as abstract as possible, and your job is to communicate between objects and objects.

There are also some points that are worth noting for developers. For native apps, both iOS and Android provide a library of native interfaces. Take Objective-c as an example. If I need to call alert, I just need to write: Uialertview * alertview = [[Uialertviewalloc]init];, just declare the view. Then go to the corresponding method, then you can do it. But for Web applications, you need to write <div id= ' alertview ' ><button> OK </button></div><script>$ (' # Alertview '). Show ();</script>

, a bunch of CSS code and HTML code to implement. Of course you will ask the author, directly write alert () can not it? If it's so simple, it is recommended that you write the alert in iOS WebView: title is a hint, the content is: Alert view, the text that determines the button is: OK. You know where the webview is.

So to complete the JS in the Web App development of best practice, must learn excellent ideas and implementation methods. In this article, I don't want to do this kind of in-depth discussion for the time being. Instead, we will give you an example, and perhaps in the next discussion, go into the following two items in detail.

The first is an example of Stanford's Open class for iOS development, using the OBJECTIVE-C implementation, a simple card game. This is the classic MVC development. The project address is as follows: Https://github.com/lbj96347/Stanford-W2013-CardGame, if you are using a Mac, congratulations, you can compile the game for testing and code browsing right away.

The second is an example written using JavaScript to achieve the same requirements and make a simple card game. But the use of HTML+CSS+JS development. Also learned the idea of inheritance and MVC. The project address is: Https://github.com/lbj96347/JSMatchismo, congratulations again, no matter what computer you use, you can browse the code and run the game at any time.

The new idea of Hybrid app

Over the past two years, because of the different market, there has been a difference in demand, each technology has a new development. For the hybrid app, there are some new solutions. In order to solve the problem in fact, the final thought will be reduced to the following points:

1. According to the requirements, select tools;
2. Do the right thing with the right tools and solve the problem in a targeted way;
3. The world is balanced, for the developer, the more work done, the better the user experience, the worse;
4. Cross-platform is a "pretence", what does not mean that everything is done well

This is also the author of the deepest experience of several points. And you will find that hybrid technology is also basically following these few points to walk.

Depending on the requirements, select Tools

If you've ever used jquery Mobile, you've done a scene animation (that is, from one view to another), the transitions are very common in iOS navigationcontroller, and they're very simple, very good and smooth. Using Ajax,css in jquery Mobile, the core code could be dozens of lines. It may be about the same as in iOS (if it contains animations), but the actual effect is not satisfactory. A similar problem arises: page jitter, feeling incoherent, running slowly under part of the device. If your app does not require a high level of experience, such as some news display applications, more emphasis on typography. Here is a small experience gap, can be ignored. (because that's what the British BBC does), but if your app emphasizes the details of the experience, the solution might not work. Maybe you want to optimize, but the time for optimization may be enough to get you to learn something more. In this case, do you continue to choose to use an immature tool, or choose to learn a new language? So it depends on the demand.

Another example. I've been told that it's really cool to write an application interface using HTML and CSS, but it's not efficient. So why not try to move the app content directly into the canvas? Build a powerful set of tools, a strong enough UI component, to run the entire application in the canvas. This idea is very good, but in fact, the short board page appears, the performance of the canvas is high, but there are more elements in the component you can guarantee high effect? Everything will depend on JavaScript, which is not easy for JavaScript to construct an object-oriented component that is robust enough, discarding CSS and HTML, meaning that the internal design components are highly customizable and loosely coupled. Completely implemented a new set of Xcode and UI libraries. This is not a solution to one or two problems. Since there is such a tool, why do I not choose better, such as Xamarin.

Do the right thing with the right tools

The friend who makes the game is estimated to have a deep experience. In order to solve the problem of canvas performance, more and more people and application vendors (especially browser vendors), provide a solution is to the canvas API and the system's underlying API. This means that you only need to write canvas code, the actual rendering of the use of the system at the bottom of things, overall improve performance. For example ejectahttp://impactjs.com/ejecta this thing.

It is very comfortable for developers to write game logic in JavaScript and to do all kinds of control, and because the API is the same, put it on the PC (let go of the performance issue), and it will work. This is really a cross-platform, but not lack of efficiency. Let the author feel the deepest is @ Big city small fat in Do mix application (do game) of practice, chubby game architecture. JS is responsible for logic, engine. JS binding binds native OpenGL, allowing the native to do complex rendering processing. HTML CSS can handle the UI (for example, some buttons). This is typical: let the tools do what they are good at.

Cross-platform is a "pretence"

Why do you say that? I do not always hope that we can cross the platform? Yes. But to really understand the threshold. From IE compatible, to the current chaos of multiple browsers, to the compatibility of iOS and Android devices on the web, this is not a historical example. Cross-platform is not bad, just in an era, you can achieve what effect, it is really difficult to measure. It is like you travel abroad, if the relationship between the two countries is very good, and many of the customary laws are consistent, it will not cause you too much burden. But if the language is different and the habits of life are not the same, it is difficult for you to adapt. It is also a human being that makes it difficult for you to survive in a different environment. The real cross-platform means everyone is asking for the same. It's definitely not a day or two, it's not a simple thing.

Then why cross-platform. Business needs. It's important to follow the tools of choice, do the right thing with the right tools, and develop according to the actual situation. If possible, I think it is necessary to understand once again, so that the various development ideas will affect you, you will be able to distinguish what is good what is bad, to do a better choice. For example, I just talked about the example of the scene animation. In fact, I can use the mixed application, the program three, to solve the problem. You just want to use Navigationcontroller to make a beautiful cut animation, a few lines of code in iOS is implemented.

Another example, if you are doing a todo-list application, is simply to store data and do some related interface rendering. With native controls, there is a lot of code to write, and you have to deal with memory problems. But in fact, if you use the Web to implement, such as Backbone.js. The overall code may be around 100 lines. The entire application is implemented, including local storage. All you have to do is make the whole interface beautiful. Probably just 1 hours of work. But if you use native development, it's hard to make sure it's done in one hours, because it takes time to debug and compile. Besides, there's the interface.

So to recognize the cross-platform of this "pretence", not all problems are dealt with in the same way. The author wants to integrate through!

Summary and the author's feelings

For the web app to do the pit, in fact, quite a lot. It can't be expressed here. But believe in practice will know how to better bypass these pits (for example, I say the example of the scene animation). Then for the developer to have a strong perseverance, and strive to practice, to meet their own never satisfied curiosity, because the final experience will bring you different feelings, stay hungry. At the same time the author must maintain a learning heart, and constantly absorb the idea of nutrition, learning new knowledge, not too easy to meet, stay foolish. Every language has its own ideas, and each tool has its own methodology for solving problems. Try to give yourself a better architecture, better applications, and provide users with the best experience. Of course, there will be better returns.

About the author

Li Bingjun (@CashLee Li Bingjun), HTML5 technology activist, HTML5 DreamWorks senior member, has been involved in web development for many years. High School began to write independently operated e-commerce sites. In recent years, we have been developing the mobile application front-end, and try to apply the hybrid application development technology in practice.

Http://www.infoq.com/cn/articles/hybrid-app-development-combat