/ XAMARIN

Xamarin Tools and Resources

As software developers we often use a scary number of Tools and Utilities to get our jobs done. Whenever you learn a new platform you also need to work out the “tools of the trade”. I recently gave a talk on the tools and resources I use to do Xamarin development, so I thought I would just share these out on a blog post.

Be warned, the list I’m going through here is by no means a complete list of the tools available – just a list of the tools that I use. If you use some other tools that you think are worth sharing with the community then shoot me an email or leave a comment.

Given that much of development is not just writing code, I thought I would go through the tools that I use from concept through to supporting an app.

Okay, let’s go.

Design

The first thing you need to know to effectively design for a platform is the rules of the platform. Here are some handy links:

iOS

Android

Android has come a long way in it’s design guidelines. It used to be all over the shop, but now things are much nicer.

UWP

Let’s not forget Universal Windows apps.

Design is a process

I think one of the most underrated parts of developing an application is the process of going from a sketch through wire-framing to mock-ups and prototyping. The first thing I like to do when starting a design is seek inspiration. There are a bunch of great places you can go to get your brain juices flowing:

  • Dribbble – This is probably my default go-to place for looking at beautiful UI and interaction designs.  So many talented people contribute designs.
  • Behance –  Another location for our hipster designer friends to submit their goods.
  • Inspired UI – A categorised selection of mobile designs. It has sections for iOS, iPad and Android.
  • CollectUI – Another categorised selection of design inspirations.
  • Mobile Patterns – Yet another set of mobile design inspirations. Also has sections for iOS and Android.
  • Pttrns – Mobile designs. This has sections for iPhone, iPad, Watch and Android.
  • Snppts – Xamarin Forms UI Snippets.  This is a great site to look at if you are interested to see how other devs layout their Xamarin Forms pages, it has links to source code and XAML.

Next it’s on to the actual process.

For me, I like to start sketching on paper, I find this a very fast and adaptive way of designing the flow of applications. I personally use stencils for different device types that I print out from Interface Sketch.

Once I have an idea on paper I will move through to formalising the wire-frames and mock-ups, my tools of choice are:

  • Balsamiq – This is an unapologetically simple drawing tool for quick wire-frames an mock-ups. It deliberately tries to avoid representing a finished application. The reason for this is simple: If you want to get feedback on the basic wire-frame of an app and you give someone a colourised “realistic” looking design, they will probably spend a bunch of time telling you about what’s wrong with your font and colour choices as opposed to telling you what you really want to know – does this app flow nicely and represent the information in usable fashion.

Next it’s on to more of the Mockup and prototyping phases:

  • Sketch – Sketch has almost become the default for UI design in mobile and web applications, superseding things like Photoshop. The main reason is that modern app development means that you are going to be working on a variety of different sizes and densities, so it’s super important to be designing in Vector formats that can resize nicely. Sketch also has an amazing community of components available at places like Sketch Resources and SketchRepo.
  • Zeplin – Zeplin is a great way of getting the information about fonts and colors and stuff from those sketch files so you can use them in development.
  • Adobe Experience Designer (XD)  – I’ve been playing around with Adobe XD recently and I’ve really enjoyed using this app. It may become my default designer tool (at least for mock-ups). It pretty blatantly copies the great things from sketch and at the moment it is free to use whilst in Beta. My opinion may change when I have to pay for it via Adobe Cloud.

Image and Font Resources

Lastly for design, here are some resources I use for icons and fonts (because I’m really not great at creating icons).  And let’s face it, good choice of fonts and icons can make or break an application:

  • IconFinder – lots of icons in multiple sizes.  It has a paid section, but it’s also got a lot of free resources.
  • MetroStudio – This is a great Windows app that has thousands of icons that you can search through and also combine together. Free.
  • Icons8 – Thousands of free icons in different styles and sizes.  You can also recolour them as well.
  • Official Material Design Icons – If you are designing for Android you should probably try and stick the the official icons if you can.  Get’em here.
  • Google Fonts – Google has loads of fonts you can download and use in your apps.
  • Font Squirrel – If you are after something a little more wacky, Font Squirrel probably has you covered.
  • iOS Font List – Not really a font archive, but a great resource to see what fonts are available on different versions of iOS.

Develop

Let’s talk IDEs first and foremost. I use VS2017 on PC and on Mac, both are amazing IDEs. I also use Visual Studio Code on Mac and PC, mostly for editing Mark Down files or file previewing. I don’t use a lot of different Extensions in the IDE’s but here are some of my favorites:

VS2017 Mac Extensions

  • mFractor – An amazing set of tools targeted right at Xamarin developers to help them get their job done.  I won’t say this is like ReSharper for VSMac, because it’s actually more useful than that. It’s got cool editor extensions like quick navigation between Views and ViewModels, Android Resource previewing and checking, a nifty Image Resizer, and tons more stuff.  If you live in VSMac then seriously check it out.
  • ObliteratePaths – Redths extension for nuking Bin and Obj folders.  This is super handy for getting rid of those folders before emailing some source code to someone else… Also Clean and Rebuild sometimes doesn’t really clean.  James Montemagno has a good blog post on how to install.

VS2017 PC Extensions

  • XAML Styler – Formats your XAML when you save your XAML files. This just makes working with XAML nicer.  Also if you work with a team then you can have consistent indenting and attributes across your files.
  • Clean Solution – Cleans up the solution for the next time you open it. Closes open documents and collapses folders automatically when a solution is being closed.
  • Productivity Power Tools 2017 – Installs a whole bunch of useful IDE extensions.

Working with Data

Like it or not, a great deal of our time is working with Data.  In a mobile context that mostly means hitting Web Services and local databases (SQLite or Realm). Here are my favorite tools and libraries:

  • Postman – This is an essential tool for hitting web services checking requests and responses. It has amazing capabilities like the ability to share request information with other members of your team, creating tests and also basically just seeing how an API works and what it’s going to give you back. Another tool I use to create my Data Transfer Objects (DTO’s) for services is sites like json2csharp. The workflow looks something like this: Make A Request in Postman, copy the resulting JSON into JSON2CSharp (or in VS2017 PC, you can just use Edit -> Paste Special -> Paste JSON as CSharp). Create DTO classes… too easy!
  • Refit – Simplify calling Rest services.  If you want to simplify your code for calling web services give Refit a shot, you can basically just create an interface which describes your web service, then let it do all the hard work of accessing the service… no need to worry about doing the serializing and deserializing yourself or creating GET and PUT methods… it’ll do it for you.
  • Polly – Automatic retry policies. The reality is that on mobile devices your connection sucks. It’s going to disappear for no apparent reason and sometimes the best thing is to just reissue a request. Polly is going to help you out here by allowing you to define automatic retry policies.
  • JSON.NET – The only library for parsing JSON results.

Rob Gibbens has a really great blog post on putting some of these tools together in his Resilient Network Services with Mobile Xamarin Apps article, you should definitely read this. http://arteksoftware.com/resilient-network-services-with-xamarin/

SQLite

  • Sqlite-Net-PCL – Dead simple SQLite integration – This package from Frank Krueger is the best way (I know of) to integrate SQLite into your Xamarin Apps. It also provides a light weight ORM interface to make it really simple to use.

Sometimes, you need to have a look at those pesky SQLite databases, here are my favorite tools:

  • Datum – SQLite browser (Mac) – Available from the App Store.  There is a free edition and it just seems to work.
  • DB Browser for SQLite –  free cross platform tool which will allow you to create databases, define the schema, and add records to the database.

Cloud Town

It’s a cloud first world… or that’s what they tell me. Azure is my go to cloud provider…

  • Azure Mobile Client SDK – A really nice client library that provides abstraction over the HTTP messaging and all the other hard stuff.
  • App Service Helpers – Some of the Xamarin Dev Evangelist types have also create a helper class that makes it even easier

Talking of Azure services, the Cognitive services stuff in Azure is amazing. Some great speech and vision API’s.. If you ever wanted to write “Not Hotdog” but don’t have the required Machine Learning / AI qualifications, let Cognitive Services do it for you.

Debugging and Profiling

Let’s face it, unless you are super-human you probably spend half your time writing bugs. So debugging and profiling is an important part of #developerlife. Here are the tools I tend to use:

  • JetBrains dotPeek – Because sometimes you just have to decompile some stuff to see how it works.
  • Android Device Monitor – Comes with the Android Studio and is installed with Xamarin. I mainly use this for looking at logs but it’s also useful for looking at process memory usage and accessing the file system on emulators.
  • On-Device Developer Options – Android devices also have some pretty cool tools built right in under the Developer Options. I mainly use this to debug overdraw and to slow down animations, but there is other cool stuff in there as well.
  • Xcode Instruments – Event though it’s part of XCode and targetted at Objective-C and Swift apps, you can also use this to profile your Xamarin.IOS applications. Well technically, it doesn’t really understand anything about Xamarin and managed memory, but still it can be used to track things like allocations and memory usage. Xamarin has some docs on using it too.
  • Network Link Conditioner – Another cool tool which can be used to test how your Xamarin.iOS app handles crappy networks is the Network Link Conditioner. Here is a pretty good reference to get you started.
  • Xamarin Profiler – When all else fails I pull out the big guns… The Xamarin Profiler! Unfortunately this is a Visual Studio Enterprise feature but it’s definitely worth its weight in gold when trying to find memory leaks in your Xamarin applications.
  • Visual Studio 2017 Profiler Tools – Also don’t forget that you can also use the Visual Studio Profiler for profiling quite a bit of stuff. Especially Shared PCLs and libraries that you are using.

Visual Design

I’m not too bad at laying out screens, but I still love to be able to get previews of what I’m doing. In Xamarin.IOS and Xamarin.Android you are fine because you have the Designers built into Visual Studio. For Xamarin.Forms things get a little bit trickier. Here are some tools I use to keep myself going insane whilst laying out screens.

  • Gorilla Player – This is a great tool, which is now free. It allows you to preview your Xamarin.Forms XAML on multiple devices, it requires a little bit of setup but once you are setup anytime you save your XAML file it will be sent out to gorilla player on whatever devices (or simulators) you have connected so you can preview. Pro Tip: run it on multiple different sized devices (and OS’s) at the same time to see how things look.
  • Xamarin Live Player – This is the new kid on the block. This allows you to preview your applications (actually running) on a device as you edit your code (not only your XAML). Also works with Xamarin.IOS and Xamarin.Android. It’s still pretty heavily under development, but you should definitely give this a shot. Also, sign up for the Xamarin Live Player Alpha to get the latest bits.
  • Xamarin WorkBooks – A great way to experimenting with different things and also useful for documentation. There is also the Xamarin Inspector which you can use to interrogate the UI of your application.
  • PaintCode – This one is a little different, but with PaintCode you can draw your images and vectors and then have it spit out source code for your designs. It’s a paid mac app, but if you are going to be doing lots of graphics it may just be worth it. Especially, if you want to use drawing code to provide resolution independence.

Mirroring Devices

You always want to be testing on physical devices, and heaven forbid, sometimes you even have to present your apps to other people. Here are some tools to help:

  • Vysor – This is a sweet little utility for mirroring your Android physical device to your screen. You can even interact with the device through your mouse. Highly recommended!
  • QuickTime Player – For mirroring iOS devices my goto is the inbuilt QuickTime Player. Great for mirroring your iOS devices during demonstrations.
  • AirServer – If you want to mirror your iOS device to windows I have found that this works very well. It also works for Android and Miracast as well. It’s a paid app though.

MVVM Life

I often joke that to be good at MVVM you really just need to have a really strong opinions and tell everyone else they are doing it wrong. But seriously MVVM is a great architecture for building your applications. I tend to stay fairly light weight and don’t use many frameworks, having said that here are some frameworks and l do use:

  • Fody Property Changed – This is an code weaver that can help you out writing your INotifyPropertyChange notifications and keep your code nice and clean.  Clean models FTW.
  • MVVMHelpers – a nice light weight set of MVVM Helpers from James Montemagno that just has the stuff you need.
  • Xamarin University Infrastructure – There are some great bits in here, including abstractions for the Xamarin Forms navigation service, a bunch of converters, behaviors, and services. Dig through and check it out.

And then there are the frameworks. Like I said I don’t use a lot of these, but I would feel like a bad developer if I didn’t mention them 🙂 :

  • Prism – Has an amazing navigation system. There is also an excellent series of blog posts from XamGirl to help get you started.
  • FreshMvvM – Super lightweight and just includes the stuff that vanilla Xamarin.Forms leaves out
  • ExRin – A larger framework for enterprise scale apps
  • MVVMCross – Very popular Framework
  • MVVMLight – yet another popular framework
  • ReactiveUI – Reactive programming is definitely something I should look into more.

Libraries and Components

I’m a lazy developer. If I can find an existing component and library to do what I want, I’ll use it.

But there are some other amazing libraries, like:

  • Lottie – If you are working with designers who are throwing After Effects animations at you, or if you just want to spice up your UI have a look at this bad boy.
  • Iconize – Provides a nice easy way to integrate font libraries like FontAwesome into your applications. Using these will help you keep your file sizes down and provide images that scale nicely.
  • RG.Plugins.Popup – If you want to create popups in your app, this is a really nice approach.
  • Awesome Xamarin – There are a million other libraries you should consider, Marc Bruins has a great list.

And then we have the UI Components from the vendors. I have students quite regularly ask things like “I want to build a grid control with XYZ features, how should I do it”… normally my answer is don’t. Save yourself some time and check out components from vendors who do this stuff for a living. The cost saving in terms of time is normally worth it.

Test

We all unit test, right? Sure. 🙂 If you are using Nunit then you’ll want to use:

  • Nunit Test Adapter – plugs into Visual Studio so you can integrate unit tests into your VS Life.
  • Nunit Templates – a set of templates for creating unit test files… because nobody has time to remember all those attributes. But speaking of attributes, here is a nice cheat sheet for Nunit.
  • Visual Studio 2017 now has a great feature called Live Testing, which I would highly recommend having a look at as well.
  • AutoFixture – because sometimes you can’t be bother creating your own data for unit tests. This library will reflect over your models, so you can just ask it to create a bunch of objects for you.

UI Testing

Mobile applications run on a bunch of different devices, so you’ll want to make sure you test how your UI is going to look on a range of devices. You can find some good stats on iOS and Android usage information here over at Apteligent. Also, you don’t want to be testing UI manually, because it’s really slow and inconsistent.

  • Xamarin.UITest – Write your tests in C# and test on simulators and devices.
  • Xamarin Test Recorder – Record your interactions with your application and output them as UITests. The fastest way to create your tests… then take the code and fine tune as required. Often, the thing to do is to move them across to a page object type of structure so they are more maintainable. Here is a good blog series on it.
  • Test Cloud – When you are ready to test on thousands of physical devices, you should consider having a look at Test Cloud. They’ve got more devices than you can poke a stick at.

Deploy

Continuous Integration and Continuous Deployment practices these days should be considered a “must have”. And with the tools available it’s really very simple to get started. Here are my favorites:

  • Mobile Center – – This is an amazing service from Microsoft. It’s dead simple to setup automated builds. Check it out. It also does crash reporting which is an essential part of any mobile application.
  • RayGun – A great analytics tool.
  • BitRise – I’ve really enjoyed creating builds through BitRise. It’s simple to use and very powerful.
  • Fastlane – A collection of amazing tools to help you with iOS provisioning Profile hell and automated deployments to the app stores

Staying Up To Date

Finally it’s worth mentioning that keeping up to date with all the tools and new stuff happening in the Xamarin (and mobile) world is hard (but necessary). Instead of putting out all the sources here, let me point you to my blog post on Staying up to Date with Xamarin Development.

Conclusion

So there you have it people, a grab bag of tools, libraries and resources I use for Xamarin Development. I hope you find it useful. Maybe you have some tools or resources which you consider essential… please let me know or post some comments below. Remember, sharing is caring.

Take care, and happy coding!

kphillpotts

Kym Phillpotts

Geek, Parent, Human, Senior Content Developer at Microsoft. Co-curator of http://weeklyxamarin.com and twitch streaming live coding at http://twitch.tv/kymphillpotts.

Read More