Solving Real-World Problems with Xamarin.Forms

So you are building your next native cross-platform mobile app using Xamarin.Forms? Good for you! You get the benefits of a single C#/XAML codebase that targets all mobile platforms and customize the user experience on each. You get to share not just business logic among platforms, but an abstracted UI layer as well – plus, you get to dip into native-land any time you want.

As you start building your app out though, there are some very real roadblocks to overcome before your app gets functional. You need to organize your app content for optimal usage and preserve the continuity of user experience. You need to have a consistent coding strategy on a couple of fronts, manage data judiciously and minimize resource usage.

If you're looking for some answers on how to do this, we've released a whitepaper covering some common Xamarin.Forms developer problems and their solutions. Along the way, we'll sprinkle in some love for Telerik UI for Xamarin – smart UI cuts development time and gets developers around some roadblocks. The whitepaper is just a PDF – so you can take it around on the electronic device on your choice. You know, for the times, when the promised WiFi fails you on your Trans-Atlantic flight! This will be time well spent – I promise.

Here's a sneak peek at what we cover in this whitepaper for Xamarin.Forms developers.

Mobile Strategy

It’s 2017. Developers have been making mobile apps for almost a decade and have some choice in how they build those apps. Whatever the approach, a mobile strategy is imperative — it’s how you achieve consistency in building and supporting mobile solutions. The choice of technology for mobile depends on various factors, including the skills of the team involved, app specifics, customer demographics and maintainability of code base. The broad choices are – Mobile Web, Native, Hybrid, JS Native and Cross-Compiled. Know your options and choose wisely.

Why Xamarin

If you're leaning towards the cross-compiled route, let's ask the next question: what can Xamarin do for you? Think target platforms, skills reuse, development experience, tooling and developer community – yes, it is a great story all across the board.

Get your Ammunition

Once you have chosen your technology stack, the next step is to get all the tools of the trade in place – you'll want to be well equipped. First, based on whether you are on Windows or Mac, get the right IDEs – you have rich choices.

Beyond the basics, every serious Xamarin.Forms developer needs a bunch of supporting tooling – how would you work with APIs, Components and Frameworks? Also, does Xamarin being fully open source do anything for you – how would you leverage, collaborate and contribute back in this OSS world? Does you app need polished performant UI?

Begin Smart

You'll want to jumpstart your Xamarin project – are you beginning smart with the right templates? The right wizards will allow you to choose target platforms, API levels and even bundle in Telerik UI controls, all scaffolded in your Xamarin project to get you a nice starting point.

Have a Consistent Cloud Strategy

Data is central to any mobile app — it’s the crux of what your app is all about. So it’s no surprise that you have to strategize about how you manage, interact and present your data. In this day and age, most mobile users utilize a variety of mobile platforms and roam between various devices throughout the day. You want your app to follow the user and provide continuity of experiences.

Enter the cloud. Putting your app data in the cloud is a great way to have it be accessible from any app — mobile, web or desktop. Almost any cloud provider will give you the same benefits with data hosting, including a RESTful service that you can easily invoke from your Xamarin.Forms app.

But maybe moving your data to the cloud isn’t an option for you, and that is totally fine. You could host your data in a SQL Server running under your desk. The important part is to expose the data as a service so that it can be consumed easily from any platform.

Also, leveraging the cloud has other benefits for your mobile apps – think Push Notifications, User Authentication, code running in the cloud and elastic scalability. Will you let your mobile app run in a silo or utilize the modern hybrid cloud?

Use Wrappers and Patterns

Once you have your cloud data strategy figured out, the next task is how to use the data in your Xamarin app. Sure you have a RESTful endpoint and all you need is HTTP to communicate with our cloud service. But managing HTTP requests/responses by hand is no fun. What you need is wrappers over the RESTful service. Thankfully, most cloud providers will happily oblige.

Also, as your app grows in functionality, you'll want some sanity in your code base. Some know software development patterns work really well for Xamarin apps, like the popular MVVM pattern. Build separation of concern in your app project – use Models, Views and ViewModels. Use observables for one-way or two-way data binding. Xamarin.Forms supports multiple MVVM concepts out of the box. You can bring in popular frameworks to do the rest.

Focus on App Features

As is the case, most apps need to display a list of things. And most often, the developer’s choice of user interface control is the ubiquitous ListView. Sure you can start with the vanilla ones and build features of your own, but wouldn’t you rather focus on your app’s functionality, than sweating over perfecting the ListView’s interactivity?

Developers will likely be better served using well-engineered polished and performant UI controls out-of-the-box, like the cross-platform Xamarin.Forms ListView that comes with Telerik UI for Xamarin. You handle app functionality, while modern ListViews can take care of themselves with rich features like data virtualization, pull to refresh, swipe gestures, sorting, filtering, custom styling and reorder.

Decide on Data Persistence

As soon as you start building out your Xamarin.Forms app, you’ll have to figure out a consistent data persistence strategy- how do you actually store data on the device from your app? Sure you could pull down data from the cloud every time, but then your app will completely stop working when there is no connectivity

Ideally you want to cache data once it has been pulled down, so your app keeps working graciously without connectivity. Additionally, most apps require some user and app specific data to be persisted between multiple uses of the app.

There are various data persistence strategies when it comes to Xamarin.Forms apps. What you want is a cross-platform model that works everywhere and allows you data management from your shared code. Sure there are SQLLitePCL solutions and Settings Plugins, but the easiest option may be a built-in dictionary for cross-platform data persistence.

Ease up on Navigation

Almost every mobile app is a collection of pages and navigation through the pages is what makes up the user experience. Xamarin.Forms apps are no exception. Thankfully, an easy navigation model is built in. Developers stitch together a stack of pages that follows a Last-in-First-out (LIFO) pattern. Navigation from one page to another pushes a page into the stack and returning to the previous page pops it out of the stack. Simple.

You may also feel that View-to-View navigation isn't as testable – you're right, you are binding navigation code very close to UI. Feel free to bring in an MVVM framework and do page navigation the more sophisticated way. Your call on balancing testability and complexity.

Organize Content

One of the keys to a successful mobile app is content organization. Pages that make up the app should be easily discoverable and a snap to navigate in between. One common technique is to tuck away content that the user can discover with a gesture and allow navigation to other parts of the app.

The SideDrawer in Telerik UI for Xamarin is a master at this trick — it hides away an entire view behind a swipe gesture that the user can discover easily. The SideDrawer is simply a placeholder commonly used to house navigation, app/ user settings or other appropriate UI. A little flick gesture from any configured edge of the screen allows the user to visualize the SideDrawer content, often accompanied by open/close transition animations.

Decide on How to Present Content

While there are many ways to present content in your apps, one of the most common paradigms is Tabs because the user intuitively knows how to use them. With Xamarin.Forms, you have a built-in way to present app content as tabs through the TabbedPages class. The user interface presents a list of tabs customized to each platform and a large detail area.

Manage App LifeCycle

Every mobile app goes through several lifecycle phases as intermittent usage continues through the day. These change of states offer a great opportunity for the app developer to take appropriate action to ensure the best possible user experience.

Xamarin.Forms makes this quite easy with events that are raised as the app changes state and the developer gets to respond in the appropriate event handler. Think of the times when the apps starts up, goes to sleep and wakes up from hibernation, developers get to define custom actions as each event happens.

Be Smart with Images

Imagery delights users and carefully used visuals often lead to a great user experience. For Xamarin.Forms app developers, handling images is quite easy, offering the perfect opportunity to brand your app correctly and keep inviting users back with rich imagery. You may display local images that you ship with your app package or pull them down over the wire.

The Image control in Xamarin.Forms displays images with full customization, often rendered as a part of a page or inside a container. One important property of the Image control is the Aspect — this determines how the image is scaled to occupy the display area. Downloading imagery is great way to keep your app content fresh, but you’ll want to ensure that you are not misusing the user’s data bandwidth. The solution is to cache images once downloaded – and reuse on subsequent views.

Use Data Visualizations

Data is often beautiful when visualized – it entices the user to use your app more. However, a data visualization UI is also the hardest to create from scratch – performance, cross platform compatibility and the sheer complexity of the UI are daunting. This is also where Telerik UI for Xamarin can help with its rich suite of data visualization UI out-of-the-box.

Want fancy charts and graphs for data visualization? You got it. Telerik UI for Xamarin has about a dozen different types of charts built in. These are feature-rich, intuitive and interactive complex UI controls that are also easy for the developer to implement. Bar charts, Cartesian graghs, Pie charts, Line charts, you get them all with touch-friendly interactions, customizable axes and sharp performance/rendering, all on top of consistent API for developers.

Save on Data Bandwidth

Mobile users are often data capped and your app users will love it if you do more with less – the answer is data compression. Your app is expected to perform fast, secure transactions and feel responsive while doing heavy lifting. Enter a non-UI component in Telerik UI for Xamarin — the useful ZipLibrary. You can load and create Zipped archived easily, with a consistent .NET API and encryption support.

Conclusion

Hope your interest is piqued – now go read the whitepaper at your leisure. There will be numerous roadblocks as you build your next cross-platform mobile app, even though Xamarin.Forms helps you out in many ways. Just make sure to have a consistent strategy on the big ticket items — data management, navigation and app organization.

Your goal is to ensure a smooth user experience that keeps inviting the user back to your app, over and over again. And stop reinventing the wheel on complex UI wherever possible. Telerik UI for Xamarin is here to help with rich and performant controls for all your app needs. Keep coding and good luck!

Comments