Hybrid mobile app: using web technology to provide Native experience

Hybrid mobile app: using web technology to provide Native experience

According to a recent report, HTML is the most widely used language for mobile application developers. Developers consider which web page technology to choose, it is the low cost of code portability and development across platforms. We often hear that hybrid apps are very slow to use, and the design is also very poor. Let's see if there is a possibility of native application shapes and what we are used.

This article will provide a lot of clues, code snippets, and experience on how to build a good hybrid mobile app. I will give a general introduction to the development of hybrid mobile applications, including its advantages and disadvantages. Then, I will share my experience in developing Hojoki and CatchApp over the past two years. Both projects are running on mainstream mobile platforms, it is built by HTML, CSS, and Javascript. Finally, we will introduce some good tools for packaging code to native apps.

　　What is a hybrid mobile app?

Mobile apps can be roughly divided into three types: native, hybrid, and web app. If you use the native app, you can use all the capabilities of the device and the operating system. At the same time, the performance load of the platform is minimal. However, building a web app can make your code cross-platform, greatly reducing development time and costs. The hybrid app combines the advantages of both and uses a set of common code to deploy apps similar to native on many different platforms.

There are two ways to build a hybrid app:

Webview app: Basic HTML, CSS, and Javascript code run in an internal browser (called WebView). This browser is packaged in a native app, some native APIs can be obtained through the Javascript package, such as Adobe PhoneGap and Trigger. io.

Compiled hybrid app: code is written in a language (such as C # or Javascript). For each supported platform, the code is compiled into the native code, the result is that every platform has a native app, but there is less free space in the development process. Let's take a look at these examples: Xamarin, Appcelerator Titanium, and Embarcadero FireMonkey.

These two methods are widely used, which is reasonable if they exist,However, today we only focus on WebView apps.Because WebView apps allow developers to balance their existing web technologies. Let's take a look at the advantages and disadvantages of hybrid app over native apps and web apps.

　　Advantages

Developers can use existing web technologies

Use a set of basic code for multiple platforms

Reduce development time and cost

Using responsive web design, you can easily design a variety of elements (including tablets)

Access to features of some devices and Operating Systems

Advanced offline features

Visibility increases because apps can be released locally (through app store) or to mobile browsers (through search engines)

　　Disadvantages

Performance problems of certain apps (those that depend on complex native functions or heavy transition animations, such as 3D games)

Time and effort added to simulate native app UI and senses

Not all devices and operating systems are supported.

If the app experience is not native enough, there is a risk of being rejected by Apple (for example, a simple website)

These shortcomings are significant and cannot be ignored. They tell us that not all apps are suitable for the hybrid mode, you need to carefully predict your target users, their platform selection and app requirements. For many apps, the advantages are greater than the disadvantages, such as content-driven apps.

Hojoki and CatchApp are both content-driven apps, So we initially thought they were very suitable for mixed-mode development. The first three points of the benefits we mentioned previously have helped us build Hojoki's mobile app a lot, but they only took four weeks. Obviously, the first version of Hojoki lacks many important things. In the following time, we focus on improving performance, making custom UIS for each platform, and using advanced features of different devices. The experience accumulated at that time is very important to make the app look like a native app. I will share my experience as much as possible.

So how can your app look like a native app? For mobile Web developers, it sounds great to be able to use the capabilities of devices and operating systems to package their apps. Then, if you want to believe this is a native app, it must look like and behave like it. How to accomplish this remains one of the greatest challenges for mobile developers in hybrid mode.

　　Make your users feel at home

Although we only write a set of basic code, this does not mean that the senses on different platforms are the same. Your users do not care about any potential cross-platform technology, they only want the app to show what they want, and they want to "Feel at home ". Your first step is to make a design overview for each platform:

"IOS design resources", IOS Developer Library

"Android design", Android Developers

"Design", Windows Development Center

Although these overview cannot perfectly adapt to all apps, they still provide a comprehensive and standard interface and experience, and users of each platform want to have such experience.

　　Diy vs. UI framework

If you implement these components, styles, and animations by yourself, this is a big challenge. Now there are a variety of UI frameworks to help you, from business (Kendo UI) from the shared UI (JQuery Mobile and Onsen UI) to many platform-targeted UIS (Sencha Touch and ChocolateChip-UI ). Some provide accurate pixel la s, while others are relatively rough. These various frameworks allow users to easily define a web app. However, in my opinion, the main drawback of the Framework is performance, because most of the UI frameworks try to be "Haina baichuan ", you need to try the demo on the device based on your own situation before deciding whether to use it.

When creating Hojoki, we try to use CSS3 and a small amount of Javascript to create all the components. The advantage of doing so is to help us control performance and reduce load. Of course, we will also use a small library that someone else has used to solve complicated tasks.

　　Custom UI Components

There are also many examples of using custom UI components. You need to decide whether to use the platform UI or custom UI based on your target users, you need to have a deep understanding of UX design, because the previous overview was made by experts to cater to the needs of their platform users.

No matter whether you decide to stick to the platform UI overview or make custom components by yourself, you must know that some specific design styles are used and loved by users every day. How do we introduce an app to users? Cover with slides or lectures. How do users navigate? If the label bar or sidebar is used. How can users quickly load or refresh data? Pull down and refresh. (In the following article, we will talk about native scrolling)

　　Resources designed by mobile UI

"Mobile UI design style: 10 inspired websites", Jacob Gube, Six Revisions

"Using HTML, CSS, and Javascript to clone IOS 7 UI", C? Me Courteault

"Use HTML5 to point to the mobile UI" (slide), Luke Melia and Yael Sahar, Slideshare

　　Design a native title bar

In the UI, the title bar is a very important part, including its title, navigation elements, especially the forward and backward buttons. For me, many popular frameworks fail to provide HTML and CSS solutions compared to some native apps, it is quite simple to use the smallest DOM and the least-line css code for each platform to imitate this UI part.

1 htmlFeedDetails

In JSFiddle, view the complete code of "the title bar that looks native in iOS, Android, and Windows Phone". The following is my result:

A native title bar made of html5 and css

Using the same DOM on different platforms is more convenient, because the code is neat and easy to maintain, I found that this method is applicable to many UI components on IOS and Android (including the title bar, label bar, custom navigation menu, setting page, floating layer, and many other things ). However, it is more difficult to support Windows Phone because it brings many very different design modules.

　　Supports high-resolution screens

Nowadays, high-resolution smartphones and tablets constitute a huge mobile device market, with more than 80% of iOS devices and more than 70% of Android devices. To make the images on your device clearer, you usually have to enlarge the size to twice the size of the device. Therefore, in responsive website design, it has become a hot topic to learn how to provide images of appropriate sizes for all different resolutions. There are many ways to solve this problem. Each of the advantages and disadvantages is related to bandwidth, code maintainability, and browser compatibility, now let's take a quick look at the most popular methods in no particular order:

Server adjustment and transmission

Check and replace the client with javascript

Picture Element of html5

Srcset attribute of html5

Css image-set attributes

Css media queries

Scalable Vector Graphics (SVG)

For a long time, there has never been a perfect method for responsive images. It mainly depends on the image type and the way they are presented on the app. If it is a static image (such as a logo or tutorial image), I try to use SVG, they can be scaled perfectly without any effort, and as long as you are Android 3 +, you can get good browser support.

When you cannot select SVG, the picture element and srcset attribute of html5. Currently, their biggest disadvantage is that browser support is too limited, so they need some plug-ins.

At the same time, css background images and media queries are relatively reliable solutions:

Css

/* Normal-resolution CSS */

. Logo {

Width: 120px;

Background: url(logo.png) no-repeat 0 0;

}

/* HD and Retina CSS */

@ Media

Only screen and (-webkit-min-device-pixel-ratio: 1.25 ),

Only screen and (min -- moz-device-pixel-ratio: 1.25 ),

Only screen and (-o-min-device-pixel-ratio: 1.25/1 ),

Only screen and (min-device-pixel-ratio: 1.25 ),

Only screen and (min-resolution: 200 dpi ),

Only screen and (min-resolution: 1.25 dppx ){

. Logo {

Background: url(logo@2x.png) no-repeat 0 0;

Background-size: 120px;/* Equal to normal logo width */

}

}

However, your app may already contain a lot of content (such as news articles). Adjusting all image labels or replacing them with css will make us feel exhausted. In this case, the server solution is the best choice.

Since last year, more and more android systems have taken another step away from the XXHDPI (ultra-high resolution) screen. No matter which solution you mentioned above is more suitable for your needs, you need to remember that you need to use images three times the size of the source image to support the latest android devices.

　　Use System Fonts

Using System fonts is a simple but important way to make the user feel at home.

Native fonts for iOS, Android, and Windows

On mainstream platforms, I recommend these font styles:

/* IOS */

Font-family: 'helvetica Neue ', Helvetica, Arial, sans-serif;

/* Android */

Font-family: 'robotoregular ', 'droid Sans', sans-serif;

/* Windows Phone */

Font-family: 'segoe UIS ', Segoe, Tahoma, Geneva, sans-serif;

In addition, iOS7 provides some interesting preprocessing that can automatically set the correct font, text size, and line height, and apply font:-apple-system-body to common text, using font:-apple-system-headline in the title not only simplifies the declaration of text, but also increases the dynamic type (this is the font size setting for the Apple system range) you can learn about the accessibility in Thomas Fuchs's article.