I recently wrote and published a book on cross-platform mobile development called “Build Native Cross-Platform Apps with Appcelerator: A Beginner's Guide for Web Developers.” The post that follows is an excerpt from that book, with modifications for clarity and length. It is composed of a list of the most important points I make in the book -- a cheat sheet, if you like.
While these tips center on the Appcelerator Platform, all of the principles apply for any developer writing apps for more than one mobile operating system. If you keep these tips handy, they’ll help you stay focused on building best-in-class, cross-platform native apps.
Tip No. 1: Beauty is relative to the platform
The image below shows the Evernote mobile app running on iOS 8, Android 4.4.4, and Windows Phone 8.1. These screenshots show the main screen of the app, logged in as the same user at the same time, so the data is exactly the same.
Evernote three ways
However, as you can see, the user interface is completely different across the platforms. They are each beautiful and well designed, but the concept of a “beautiful Android app” is very different from that of a “beautiful iOS app.” That’s because beauty is relative to the platform.
Before you design your apps, take a step back, learn how your target platforms work, and implement your branding around their specific parameters. And remember that even if your app renders differently across platforms, with Appcelerator, you’ll still be able to use a single code base and have a very high percentage of code reusability.
Tip No. 2: Code reuse is for your app’s logic -- not necessarily for UI
There are many misconceptions about code reuse with Appcelerator or any cross-platform tool, for that matter. Expecting 100 percent code reuse isn’t reasonable because it not only means you’d have very little control over your app’s UI/UX, but also your app would look the same across all target platforms.
Of course, some people think this is the ultimate goal of a cross-platform tool, but that’s misguided. That’s the goal of a Web browser. High reusability, however, is desirable with your app’s logic (which I explain in more detail in Chapter 7 of the book if you’re interested).
Tip No. 3: Always think “Web service”
Because we’re developing cross-platform apps, I recommend you build your code to be completely abstracted, as if it was a Web service (a local Web service, if you like). Make all of your programming logic completely independent from the screens or even the platform in which it will run, so all of your programming modules are platform-agnostic and, most important, reusable across platforms. Then build the native user interfaces, which will consume these “local Web services.” Using this architecture, you can make sure all the user interface code is completely decoupled from the logic, and both can flow independently.
It took me a while, as a former Web developer, to recognize and accept that, when it comes to building mobile apps, I always need to think “Web service.” However, making that mental shift is worth the effort, and your apps will be better for it.
What’s more, with this approach it does not make any difference if you’re using a TabbedBar on iOS or a ViewPager on Android. After all, the user interface code is simply a consumer of your app logic.
To help you on this journey, I created an app template you can use every time you create a new app (see below). This template is written using Alloy, Appcelerator’s MVC framework. The template provides the MVC architecture needed to maintain platform-specific user interfaces, with content and logic reusability. You can download the app template from GitHub.
Tip No. 4: Remember that tabs can be deep or shallow
iOS tabs have a built-in NavigationController, which allows multiple levels of navigation inside each tab. Android tabs, however, are shallow and should have no in-tab navigation.
To illustrate this, I’ll show you how the Facebook app for Android had approached this incorrectly (it has since been fixed). The image below shows the former Notifications tab of the Facebook app for Android.
Facebook for Android
Per Android design guidelines, tapping on the Back button in the main screen with tabs should kill the app. Now, if you click on any of the notifications on the Facebook app, you’ll see what’s illustrated in the image below.
Facebook for Android navigation
Here Facebook tries to implement iOS-like functionality that provides in-tab navigation. There are two problems with this. First, you’re in the Notifications tab, but the ActionBar title says “Comments.” This is confusing and counterintuitive. Second, and most important, the Back button now is redefined: Instead of closing the app, it takes you back to the previous screen.
As a rule of thumb, don’t try to force navigation inside your Android tabs. Doing so will break the operation of the Back button and make your app feel awkward.
Tip No. 5: Know your target platforms
The tab example above is one reason it’s important to know your target platforms. And the best way of knowing what’s available to your app, and what you should and shouldn’t do, is by reading each platform’s user interface guidelines.
Unless you use the operating systems you’re targeting on a daily basis, and you feel like you thoroughly know their behavioral and visual similarities and differences, I suggest you take time to read the guidelines in full.
Check out the iOS guidelines and the Android guidelines. After reading through these documents, you’ll have a wealth of information that will help you understand each platform, design better user interfaces, and know what to look for in the Titanium API or, alternatively, in a third-party module.
Tip No. 6: Work with your design team
If you’re a graphic artist, make sure you learn about each platform, their navigation paradigms, and their visual language. You will find subtle differences that make a great difference in usability.
If you’re a programmer with a graphic artist in your team, or you’re working as a contractor/freelancer for an agency that is giving you mockups of the app to be built, learn to work with the designers and educate them. Help them understand that each platform has a native way of displaying information, laying out screens, and implementing navigation, and these differences go far beyond Android having a Back button and an ActionBar. Mobile platforms are different, so by definition, your cross-platform apps will look slightly different across platforms.
Tip No. 7: Don’t fear modules
The goal of Appcelerator has never been to expose 100 percent of each native SDK supported, but rather, to provide a comprehensive, top-level, cross-platform API. To cover the features not officially exposed, it offers a Native Module Development Framework, which Objective-C and Java developers can use to expose additional features and functionality. These modules can dramatically enhance the overall quality of the app and therefore the user experience. Learn to find modules, use them, and embrace them.
Tip No. 8: Love your target platforms
Don’t let your personal preference influence the design, functionality, and quality of your cross-platform apps. If you love iOS, that’s no reason to show more commitment to your iOS app, leaving behind your Android users. Learn to love each platform with its strengths and limitations. Learn to compare the platforms, but not to criticize them. They are all good in their own right and in their own contexts. Always try to build the best possible app for the platform you’re targeting.
Tip No. 9: Test often
Since your cross-platform app will have both cross-platform and platform-specific code and components, make sure you test often. Don’t spend days working on the Android version, then finally run it on iOS and discover the object positions are off, the fonts need adjusting, or the app simply crashes on load. My recommendation is to test often; if something breaks on one platform, you can immediately identify the problem.
Tip No. 10: Be your user
Your user is the most important consideration when it comes to building your app. Be a user of the target platform and know how the platform works. Be a user of your app so that you can experience it for yourself. Look around, examine other apps, compare and analyze as honestly as you can.
When you’re testing your app, ask yourself: Would I use this app? Does this app feel right? Make sure it conforms to your own standards. If you love your app, most likely your users will love it too.
We live in an age when no company can afford to ignore the transformative power of mobile or the expectations and demands of mobile users. Learning how to correctly develop across platforms is an important skill that will help you (and your company) get ahead in this climate. With these 10 tips, you should be well on your way to achieving mobile success.
Note: I’ve also made these tips available as an infographic, readily accessible. It’s designed in poster size, so feel free to print it out if you’d like. I’m sure it will look awesome on your wall! If you’d like to read the whole book, you can get it on Amazon.
Tags :
mobile application development,
mobile app development,
mobile apps developer malaysia
Credits : http://www.infoworld.com
