- 10 Steps to Better Hybrid Apps
- The Nuggets translation Project
- Translator: Yves X
- Proofreader: Malcolm, Circlelove
As Hybrid apps grow in popularity, more and more tools are being created to help developers create cross-platform apps efficiently. James Miller offers 10 tips to help you get the best results.
Luke O ‘neill
Developing apps for phones and tablets isn’t just for mobile developers. Web developers can now build their applications using HTML, CSS, and JavaScript without knowing any device-specific code through native application encapsulation tools. This approach uses the Web view of the device as a browser to present the Web-based code in Hybrid applications. With these 10 tips, you’ll make your Hybrid app the best it can be.
1. Planning
Planning your application before you start development can avoid many pitfalls and lead to more successful results. There are many situations during development that should be considered during the planning phase.
The Web view used by Hybrid apps is actually a scaled-down browser, and you need to anticipate that the same problems that exist in traditional browsers also exist here. Understanding your target audience and their expectations will help you identify your app’s technical weaknesses. This, along with device analysis, helps you discover potential performance and achieve higher performance metrics.
Once you know what your target audience wants, you need to think about distribution channels. Google Play and Apple’s App Store are the two largest ecosystems. In order to list your app on these stores, you need to make sure that your app follows their guidelines.
Google Play provides more backtracking for app review, and distribution is relatively easy. However, reporting can get your app removed. Following this guideline will give your app a better chance of being featured.
Apple’s stricter guidelines are a challenge. Instead of building a Web application, you need to integrate the phone’s native features. The features that need to be integrated include cameras, positioning, and other functions that can be invoked through JavaScript plug-ins in the appropriate framework. Don’t add features just to fit the store code, make sure they’re really what people want.
2. Market considerations
Applications are a global product, but unlike the Web, they are primarily available in country-specific app stores. Each country has its own different culture and laws. It’s important not to assume your app is universal — launching in the wrong country can do more harm than good to your brand.
It is also important to be aware of the network limitations of the country of distribution. Lightning-fast mobile Internet access or Wi-Fi hotspots are not everywhere. Even if your app isn’t for emerging markets, connectivity is still a problem. Keep your application’s network requests light and try to keep them to a minimum.
3. Scalability
Whether logging in or updating data, most applications require a network component. This requires some form of server and API. As your app captures more users, the stress will be on your back end, with timeouts and errors getting worse. To avoid this problem, it’s important to plan how your back end will be upgraded. Your API should follow a RESTFUL interface pattern to establish a working standard. Also consider validation, because an open API can be abused. Terminals must also be managed correctly, because once an application is released, it can take weeks to get the updated version running due to the review process.
Maybe one day your API will get too many requests and hang. Don’t rush to invest in more servers, there are plenty of back-end as a Service (BaaS) options, including Parse and Firebase, that can help you out. They store your data and often provide standard apis based on your data structure and authentication methods. There are also many free plans based on usage. With global reach, good technology, and a strong network, you know your application’s network components will perform well.
Performance of 4.
In a Hybrid application rendered in a Web view, the old problem of multiple browsers and multiple operating systems with varying levels of support arises again. This is addressed with progressive enhancement on the Web, and the same strategy can be used with Hybrid to provide a smooth cross-platform experience.
Having too many background processes can drain battery power and drag down performance. Consider building your app as a single-page application using a framework like AngularJS or ember.js. This will allow you to structure your code and make your application more maintainable. This common practice ensures better performance and reduces the possibility of memory leaks. A framework like Ionic that includes Cordova, AngularJS, and its own UI components is good for building rapid prototypes and final products.
On mobile devices, CSS animations perform better than JavaScript. Try to aim for 60 frames per second, give the app a native feel, and use hardware acceleration where you can make the animation feel more exciting.
5. Interaction design
Almost all mobile devices are operated primarily by touch. With that in mind, try to think outside the Web and use simple gesture-based interactions to make your app experience as intuitive as possible. Touch-screen devices do not have hover state, so visual cues such as active and Visited state should be considered instead.
Think outside the Web and use simple gesture-based interactions to make your app experience as intuitive as possible
On touch-screen devices, there is a 300-millisecond delay between the user touching the screen and the event being triggered. This is because the Web view is waiting to confirm whether it is a click or a double click. Although it doesn’t sound long, the delay is noticeable. To overcome this, add the FastClick script library to your project and instantiate it in the body.
6. Responsive design
Today’s devices come in a wide variety of screen sizes, covering a wide range of resolutions. Fortunately, responsive design principles still apply to Hybrid apps and tablets. Within your chosen device range, focus on the smallest screen size, then select the breakpoint you want to stretch to cover. Consider both horizontal and vertical attempts. They can all be locked at application building time, which helps reduce complexity and guide user behavior.
Think about how you would use the app design specification: pop-up menus, fixed headers, and list design. The limited screen size is good for using ICONS rather than text for narration, but proper labels can still help improve accessibility. Although users expect certain elements, don’t let that limit your design.
Picture 7.
Hd screens are a priority for mobile device manufacturers. But don’t forget that many users still use older devices with lower screen resolutions. Choose the right images for your target market and make sure each image looks as good as possible. Store images on the device when they are frequently reused. File sizes can be larger than what you would normally use on a mobile site, but device memory size must also be considered. Use SVG for Retina screens to maximize visual output, but be careful with device support.
Network 8.
Take an offline first approach. With mobile devices, users will always have no Internet connection and should not end up with a compromised user experience. Handle network requests by caching them locally to optimize the experience of poor or no signal at all.
Take an offline first approach. Cache network requests locally to optimize the experience of poor or even no signal.
Save the script locally. In Web development, external linked scripts improve performance because they are more likely to be cached. This doesn’t work in applications — applications work without a network. Scripts tend to be less of a drag on file size and connection speed, but they tend to load faster and feel native. If your user path is very preset, try preloading data in advance for a seamless experience.
9. The plugin
As mentioned earlier, extending your Web-based application by adding native features using cameras, location, or social sharing can significantly improve the user experience. Normally you can’t invoke native functionality from a mobile Web browser, but this can be done using plug-ins in Hybrid applications.
Cordova is a Hybrid application wrapper with a large number of plugins that can be used to call JavaScript. See Plugreg for their table of contents.
Be wary of third-party plug-ins. Mobile operating systems evolve rapidly, and the lack of support for third-party plugins can cause problems, reduce battery life, and potentially make your apps unstable. Look for projects that have positive reviews and active development on Github.
Test 10.
The core of Hybrid applications is built with Web technology. This means that non-device functionality can be tested in the browser. Start a tool like LiveReload with a task runner like gulp or Grunt to create an efficient parallel development and test process.
The next step is simulation. Google Chrome provides a mobile emulator, so you can test a variety of screen resolutions across the most popular devices, which is helpful in designing breakpoints. Apple provides an iOS emulator as part of Xcode, while Google provides an Android emulator as part of its developer tools.
This gives you the opportunity to test your application on a mock device, which is faster than building on a physical device, and means you can test the functionality of native devices. While emulator performance depends on your machine, Android emulators are particularly slow. This has led Genymotion to create a rival product that emulates Android much faster.
You shouldn’t ship an app that has never been fully tested on at least one real phone. The real environment is just as useful as the simulator in highlighting performance issues and pain points about user interaction.
conclusion
These 10 tips give you a good start in turning your vision into a full-featured mobile app. However, in all aspects of Web development, Hybrid applications are growing so fast. As communities grow, new tools and technologies emerge almost every day.
If you do decide to dig deep into the Hybrid world, the community will be one of your most valuable resources. It’s valuable to come to conferences and gatherings to keep up with the latest developments and share your creations. We look forward to seeing your insights!
Popular Hybrid application framework
CORDOVA is the original and most popular open source Hybrid framework. JS APIs call native functions of mobile phones. It facilitates CLI development for cross-platform applications.
PHONEGAP PHONEGAP is an Adobe product built on top of Cordova. The two are basically the same, but PhoneGap offers additional services, including app building on the cloud and cross-channel distribution.
The IONIC adds AngularJS and its own UI framework to Cordova for business logic and design guidelines. It is based on Cordova’s CLI and adds services like LiveReload to it to deploy devices. Ionic Creator allows you to create apps using its Web interface.
APPCELERATOR provides a unified platform for building native and Web applications, complemented by automated testing tools, real-time analytics, and BaaS. It’s designed to give you everything you need to deploy and extend your app, and it’s free until your app hits the shelves.
COCOONJS provides an application packaging tool with built-in and modified Canvas and WebGL engines. This makes it an ideal environment for writing iOS and Android games using Web technologies.