Front-End developer strategies and tools for Cross-platform mobile application development

Happy Friday, come home early, take a shower to care for the cat housework has finished more than nine points of appearance. Login blog backstage, into the editing page, just feel a little relaxed and comfortable. Not bad, in a day can have such a will immersed in this feeling, enough.

In a previous article, we discussed the issues that need learning and attention for practitioners of interactive and visual design-related functions, from the traditional web industry to the mobile application domain. This article refers to the concept of "hybrid application", as well as two development guidance books related to it. The original English version of today's article is the author of the two books, the mobile application developer Jonathan Stark.

In this article, he will stand in front of the traditional Web front-end developers, for us to introduce some of the actual project in the case of mobile application development strategy, as well as several types of representative to build Cross-platform mobile applications of front-end development tools.

Members of the front-end development related functions of peers, expand the vision, improve skills, with the "machine" the time is ripe for the strain; I hope this article can become a catalyst for the progress of the cause of our development. No more, let's look at the text.

Regardless of the point of view to measure, the mobile Internet and the development of client applications is very rapid. Average daily usage, smartphone penetration, subscriptions from mobile devices, search engine traffic, advertising presentation, application sales ... All of this is in a rapidly rising state. It can be expected that in the near future, mobile devices will have enough maturity and penetration, and among the traditional desktop computers, notebooks, such as the ranks of hardware platforms, as our daily life, the main equipment.

The huge mobile market has brought new opportunities and challenges for traditional web design developers. All kinds of mobile devices in the explosion of growth, but also bring unprecedented fragmentation and chaos of the situation. If it is necessary to develop, test and maintain the client application for multi-platform devices at the same time, it will consume a lot of resources and cost.

In this article, we'll start with a comparison and analysis of several mobile solutions, then focus on some common front-end framework tools for Cross-platform mobile application development; But I'm not going to end up with a so-called optimal solution--the choice of development mode will ultimately depend on your project itself, including business models, requirements, Target market, development resources and many other factors. The main goal of this article is to provide some useful information to help readers choose the most appropriate methods and tools in the actual project.

Web applications (web app) and native Client applications (Native app)

There has been a lot of debate about the pros and cons of these two kinds of mobility schemes.

I believe that if you can create a mobile product in a Web application, you really should do it; Another situation is between the two, that is, through HTML, CSS, JavaScript and other front-end technology, combined with the original development of mobile devices, to create a so-called hybrid application.

Seemingly nonsense, but the emphasis is "can" or "can't". Here we mainly refer to specific project requirements, not technical development capabilities. Most of the cases I've worked with in my team come from enterprise-class customers. Large companies, as the name suggests, have considerable scale in terms of people, products and services, and they need a high level of mobility solutions across platforms.

When I take over a new enterprise-class mobility project, I use the Web app as the default preferred method, combining the following three issues for further evaluation:

In terms of functionality, are there any device hardware resources that are available only to local applications?

For example, a barcode scanning function of the application, must cooperate with the device's camera to work, and the camera is the browser can not obtain the hardware resources, so this application can not be in the form of web app, similar functions include video audio recording transmission, background running, message push and so on. If the product does have to be based on these features to be used properly, the native client application is the right choice.

Who is the user of the product?

If the product has a large public user base, the original or Web application is optional, the former can be promoted through the platform of the official App Store or the application market, the latter is better across the platform. If the product belongs to the type of management information system used within the company or organization, then ad hoc, like Apperian, a Third-party App Store or web app is optional.

How sensitive is the application to the resource consumption of the system?

Many factors can cause the mobile device browser to occupy too much memory resources, thereby affecting the Web app's execution efficiency and user experience. These factors include translucent visual effects and animation effects, a large amount of content data, file encryption and decoding, complex interactive methods based on maps, and so on.

After answering these three questions, the choice of the solution is much easier. For example, the requirement I received was to design a B2E application for enterprise employees to manage their personal information and earnings and not to use the advanced hardware features provided by mobile devices, so the web app approach is the most appropriate choice. On the other hand, if the demand is to develop a public-oriented virtual map applications, and need to match the phone's gyroscope function to work, then we have to select the way local clients to develop.

However, as we mentioned before, there is another kind of hybrid scheme that can be considered, that is, mixed-client applications.

Native Client applications (Native app) and hybrid client applications (Hybrid app)

The hybrid application is to embed a page view built on the front-end technology in the native Client, which is already very common. In essence, the page view is an HTML page, but it does not need to invoke the browser in the mobile device to view and manipulate it separately.

Typical examples of hybrid applications are the local App store or itunes for iOS devices like the IPhone, ipad, and Twitter and Facebook clients.

In a hybrid application, the native part is actually just a shelf or container, and the core of the application is a page view based on HTML, CSS, Javascrit, or a front-end frame. The static file resources of the page can be stored on the server side, and dynamic data is transmitted in the page view and mobile application through Ajax.

So, while hybrid applications are technically localized, they clearly have two different modes of operation. Here are two common issues that are frequently encountered during a requirements assessment.

Q: If I have the technology and resources to develop a pure Native client application, then what is the need to use HTML and other Web front-end development methods to create a hybrid application?

A: The main purpose of a hybrid application solution is to address cross-platform issues, and for each platform, you need to develop and maintain the local application part of the container nature, while the actual content functionality can be unified by a set of page views.

Q: Then simply do a set of Web apps Well, why use the native Client as a container?

A: The answer to this question includes two aspects:

Business requirements: For many customer cases, it is a business requirement to promote applications through the App Store or market. For example, customers may want their products to be paid for, or research-and-development user studies show that most of their users install local clients through the App Store.

Hardware functional Requirements: One advantage of hybrid applications is that although the localized framework is only a container for page views, it is localized and provides access to hardware devices and related features when needed; This is not possible with a single web App. Technically, you can communicate with hardware functions via JavaScript via a local application framework, such as a control camera.

I'm sure that through this sort of demand, most people tend to be mixed-mode. In fact, this is the next line of the article--let's see what front-end development tools can help us develop hybrid applications. I divide them into four categories and then introduce them separately and make a simple comparison of their application.

Cross-platform front-end development tools

This is the first major category, including some of the traditional Web front-end development of the more common JS framework. They can play an equally important role in the page view of a hybrid application.

Jquery

jquery is clearly one of the most popular JS libraries, providing a unified API for a variety of common JS functional requirements, including DOM operations, Ajax, event bindings, and so on. It passed rigorous testing of all three levels of browsers (including desktops and mobile versions) in a, B, and C, with a large developer community and high-quality documentation resources, and was fully open source.

The advantages of everything are bad, and jquery's excellent browser performance depends partly on its inclusion of code to fix desktop browser compatibility issues, and the Code for mobile applications is meaningless. This makes jquery look a bit heavy.

For me personally, jquery would be my main choice if I needed to develop a traditional Web site that was primarily for desktop browsing. But I will not choose a project for website mobility or the development of a hybrid application.