I recently gave a talk at TiConnect named “Advanced Cross-platform development“. After writing the slides, I realized that the talk could have been called “Cross-platform development fundamentals“, or even “What you need to know before you build your first app“.
During the talk, which you can find here, I showed examples of how big companies are building the UI and UX of their mobile apps, and how these apps were designed around the user interface guidelines of each platform. Granted that these companies are not using a native framework like Appcelerator, but my point was, could we achieve real native UI and UX from a single code-base using Appcelerator. Naturally the answer is yes, as you saw in my previous post about the Conference app. Still, the big question remains: how do I structure my code in order to take advantage of the cross-platform capabilities of Appcelerator, and at the same time take advantage of the platform-specific UI/UX of each platform?
Code wins arguments, so instead of theorizing about ways of achieving this, I built a project template you can use as a starting point for your apps.
In this project, I used Alloy’s platform-specific folders to store the home of the app, which is the main app’s navigation. More often than not, your main app navigation will be platform-specific, because after all, iOS and Android offer different navigation structures, which are essentially what make your app feel native. See the image below for more details.
The contents of the main screen of the app are “included” using the Require tag, so they can be shared across platforms, effectively achieving native containers with total reuse of your app’s content and logic.
Additionally, this project template includes native buttons and a second screen which opens inside a Navigation Controller on iOS and as a new Window on Android, giving you the ideal template app to build on top of.
You can download this App template from https://github.com/ricardoalcocer/AlloyAppTemplate. If you’re using Titanium Studio or Appcelerator Studio, you can add this as a Ruble, created by our friends from CodexLabs, and have it available as an option from your “New Mobile App” menu.