Frontend developer's cross-platform mobile application development policies and tools

ArticleDirectory

• Web applications and native applications)
• Native app and hybrid app)
• Cross-platform front-end development tools
• Javascript UI framework dedicated for creating mobile clients
• Cross-platform local application development tools
• Enterprise-level mobile application development platform (meaps)
• Summary

Web applications and native applications)

There have been a lot of debates about the two mobile solutions, which are both superior and inferior.

I believe that if you can create mobile products using web applications, you should do so. Otherwise, you should not... the other scenario is between the two, that is, using HTML, CSS, JavaScript and other front-end technologies, combined with native development of mobile devices, to create a so-called hybrid application.

It seems nonsense, but the focus is "yes" or "no ". Here we mainly refer to specific project requirements, rather than non-technical development capabilities. Most of my team's cases come from enterprise-level customers. Large companies, as the name suggests, have a considerable scale in terms of personnel, products, and services. The mobile solutions they need have high requirements on cross-platform platforms.

When I take over a new enterprise-level mobile project, I will use the web app as the default preferred method and further evaluate it based on the following three questions:

1. In terms of functions, does it involve hardware resources of devices that can only be used by local applications?

   For example, an application with the barcode scanning function must work with the camera of the device, and the camera is a hardware resource that the browser cannot obtain, therefore, this application cannot exist in the form of a web app. Similar functions include recording and transmission of image and audio, running in the background, and pushing messages. If the product must be used properly only based on these features, the native client application is the best choice.

2. Who are the users of this product?

   If the product has a large-scale public user group, the native or web application methods are optional. The former can be promoted through the official app store or application market of the platform, and the latter is more cross-platform. If a product belongs to a company or organization's internal management information system, a third-party app store or web app such as ad hoc or apperian is optional.

3. How sensitive is the application in terms of system resource consumption?

   Many factors may cause mobile browsers to occupy too much memory resources, thus affecting the execution efficiency and user experience of Web apps. These factors include translucent visual and animated effects, a large amount of content data, file encryption and decoding, and complex map-based interaction.

After answering these three questions, it is much easier to choose a solution. For example, the requirement I receive is to design a b2e application for enterprise employees to manage their personal information and income, you do not need to use the advanced hardware features provided by mobile devices. Therefore, the web app method is the most appropriate choice. On the other hand, if you need to develop a public-oriented virtual map application and work with the mobile phone's gyroscope function, You must select a local client for development.

However, as we mentioned earlier, there is another mixed-race solution between the two, that is, hybrid client applications.

Native app and hybrid app)

The so-called hybrid application is to embed a page view built based on the front-end technology in the native client. This method is very common. Essentially, a page view is an HTML page, but it does not need to call a browser on a mobile device to view and operate it.

Typical examples of hybrid applications are actually familiar to us: the local app store or iTunes of iOS devices such as iPhone and iPad, as well as Twitter and Facebook clients.

In hybrid applications, the native part is actually only equivalent to a shelf or container. The core of an application is a page view based on HTML, CSS, javascrit, or a front-end framework. Static Page file resources can be stored on the server, and dynamic data is transmitted in the page view and mobile app through Ajax.

Therefore, although technically speaking, hybrid applications are device-specific, they obviously have two different ways of working. The following are two common problems that are frequently encountered during demand evaluation.

Q: If I have technologies and resources to develop a set of pure native client applications, what is the need to use HTML and other Web Front-end development methods to create hybrid applications?

A: The main purpose of hybrid application solutions is to solve cross-platform problems. For each platform, you only need to develop and maintain local applications of the "Container" nature, the actual content function can be assumed by a set of page views.

Q: Why do I need to use a native client as a container if I only use a set of web apps?

A: The answer to this question includes:

1. Business Needs: For many customer cases, it is a commercial requirement to promote applications through app store or market. For example, customers may want their products to be paid applications, or user research before development shows that most of their users install local clients through the App Store.
2. Hardware functional requirements: One advantage of hybrid applications is that, although the localized framework is only used as a page view container, it is localized after all. When necessary, access to hardware devices and related functions is still available; this is not what a single web app can do. Technically, you can use JavaScript to communicate with hardware functions through a local application framework, such as controlling cameras.

I am sure that most people tend to adopt hybrid applications based on such requirements. In fact, this is also the main line of this article-let's take a look at the front-end development tools that can help us develop hybrid applications. I will divide them into four categories. Next I will introduce them separately and briefly compare their applicability.

Cross-platform front-end development tools

This is the first type, mainly including JS frameworks that are common in traditional Web Front-end development. They can play an equally important role in the page view of hybrid applications.

Jquery

Jquery is obviously one of the most popular JS libraries, providing unified APIs for various common JS functional requirements, including Dom operations, Ajax, and event binding. It has passed rigorous tests on all three browsers (including the desktop and mobile versions), including A, B, and C, and has a large number of developers.CommunityAnd high-quality documentation resources, which are fully open-source.

There are some advantages and disadvantages in everything. jquery's excellent performance in the browser depends to some extent on the fact that it contains a large number of problems used to fix desktop browser compatibility.CodeFor mobile application development, this code is meaningless. This makes jquery seem a little heavy.

For me, if I need to develop a traditional website that is mainly used for desktop browsing, jquery will be my main choice. However, I will not select it for the development of mobile projects or hybrid applications on the website.

Zepto

Zepto is a good alternative to jquery as a lightweight framework for mobile development. Zepto is not declared to be compatible with old browsers, including IE6, but it is almost comparable to jquery in terms of functionality. If you are used to jquery, you can use zepto to develop mobile websites or hybrid applications.

Xui

As a lightweight JavaScript framework, xui is especially designed for mobile browsers. Xui focuses on the most common functional requirements of mobile browsers, and implements the most basic functions with the least amount of code. The syntax is also very simple, but it is different from jquery's style and needs to be used to it.

Lawnchair

Lawnchair is also a lightweight JS library. Its biggest feature is that it can abstract the client into a persistent "SQL-free" data storage space. It adopts the adapter mode and supports multiple callback mechanisms. The syntax style is simple and straightforward, and supports simple query queries.

When developing hybrid applications or traditional websites, I will choose lawnchair as the framework for client persistence storage or performance considerations.

Others

There are still many JS frameworks that can assist mobile application development, and some new ones will emerge from time to time. It is worth mentioning that now. JS, backbone. JS, and underscore. js.

Jquery mobile, a javascript UI framework dedicated for creating mobile clients

To some extent, jquery mobile is equivalent to the jquery UI of the mobile app version; it is a pendant library, it is used to convert the semantic HTML markup language into a mode that is closer to the native style of mobile devices regardless of the UI style or interactive behavior.

Following the advantages of jquery, jquery mobile maintains full compatibility with A, B, and C Mobile browsers. It has not been launched for a long time, but has a clear goal-creating the best mobile app for user experience for as many mobile browsers as possible. Jquery mobile is definitely one of the best frameworks for building mobile apps.

Jqtouch

Similar to jquery mobile, jqtouch is a pendant library that converts semantic HTML tags into the native page view of mobile devices. The difference between the two is that jqtouch is specially designed for A-class WebKit kernel mobile browsers. This means that jqtouch can use the proprietary function of the WebKit kernel browser to render pages, which requires less code than JM. Therefore, when most of the target users of my project are WebKit kernel browser users, I will choose jqtouch for development.

Soon jqtouch will support zepto, and jquery will no longer be the only option to create the page view function. This change will effectively reduce the file size and reduce the system resource overhead during operation.

Sencha touch

Sencha touch is a full-featured pendant Library Based on extjs. Like jqtouch, sencha touch is also oriented to A-class WebKit kernel mobile browsers. Mobile applications created based on St are highly robust and have excellent UI adaptability. For example, in a tablet, the page view switches to the large screen specification, including structure and element layout.

Unlike jquery mobile or jqtouch, sencha touch is not based on HTML markup language. Developers must use the client MVC style to directly write js code, so the learning curve is slightly steep.

Sencha touch is suitable for developing medium to large Web applications that mainly run in WebKit kernel mobile browsers.

Sproutcore

Sproutcore is also an open source JS framework, initially designed to help Web developers create Web applications running in a desktop browser. In fact, it is so powerful that Apple uses it to build the original version of mobileme.

However, due to the initial needs of its desktop applications, the size of sproutcore is a little larger for the real mobile solution, at least the last time I used it.

 

Cross-platform local application development tool phonegap

Phonegap can encapsulate page views based on standard HTML, CSS, and JS as local client applications. Currently, it supports 10 mobile platforms. In terms of data resource transmission, Ajax and other methods can be used by common web apps. Phonegap provides a bridge between the page view and local applications, allowing developers to access and use hardware functions of mobile devices through JavaScript, such as cameras, contact information, and microphones; this cannot be achieved simply by web app applications running on mobile browsers.

Phonegap does not belong to the pendant library and does not compile HTML into Native client code. Mobile applications encapsulated by phonegap can only execute Javascript in real time during the running process. Therefore, it cannot provide a complete set of Mobile UI solutions like the previous js ui frameworks. However, the focus of phonegap is obviously on local encapsulation. Every hybrid application I have developed will use phonegap.

Titanium mobile

Titanium mobile can directly compile Javascript into the local application code of iOS or Android platform. Developers often compare it with phonegap. In fact, their mechanisms are completely different. In titanium, developers need to write application code according to its prescribed syntax and cannot use native Js. From this perspective, titanium is similar to the sencha touch mentioned earlier. For senior JavaScript developers, this method will not bring great difficulties, but new users need to learn and adapt.

Corona

Corona is a commercial SDK built using Lua. Developers can use corona to develop mobile apps with full native UI effects for iOS and Android platforms. It has a complete graphics and animation library, and the rendering engine can take full advantage of GPU functions. This makes corana very suitable for mobile game development, but it is equally good in the development of common mobile applications.

Enterprise-level mobile application development platform (meaps)

Meap is an integrated development platform that manages cross-platform mobile application development projects throughout the entire cycle through a background. The details involved are beyond the scope of this article. The reason why this type of data is put in is that, in which, FIG was once regarded as a competitor of phonegap, they are actually not the same thing. Typical meaps platforms include:

• Antenna softwware
• Pyxis mobile
• Fig
• Sybase unwired platform (SUP)

Summary

I personally would never regard web applications and LOCAL NATIVE applications as two independent propositions. They are more like two extreme values in a single range. Most of the time, you need to consider not the choice of the method, but evaluate the ratio of the web app page view Part Based on HTML, CSS, and js to the native application based on your needs.

Use the methods mentioned above to evaluate the requirements and confirm that you can use the hybrid application mode to develop product projects. Next, I suggest you set the goal to proportional control of the page view. Based on the specific requirements and design conditions of the product, you can use HTML-based front-end page views as much as possible to avoid negative impact on user experience, to increase the proportion of cross-platform functions. The less cross-platform issues you need to worry about, the more energy and resources you need to create excellent products.

 

Source: http://www.20ju.com/content/V185296.htm