Sessions is temporarily moving to YouTube, check out all our new videos here.

From 0 to Cross Platform Mobile Apps Faster Than You Can Say Xamarin Forms

Laurie Nicholas speaking at dotnetsheff in May, 2017
Great talks, fired to your inbox 👌
No junk, no spam, just great talks. Unsubscribe any time.

About this talk

Xamarin.Forms introduces shared user interface code to your ecosystem. It gives you the control to write your UI code once, and it runs everywhere.


I wanted to start this talk by asking you a question and that question is when was the last time you thought "This is why I love programming"? And by that I mean remembering that first little spark you got, from whenever the first time you got into programming was. For me it was when I got a book on HTML 3.2 when I was 12 and I remember putting something into the title tag and the very feeling of putting something into a title tag in notepad and having it appearing in the title bar of Netscape Navigator gave me an absolute feeling of control that I think I've been chasing ever since. The last time I thought that I got that same feeling was like "Holy shit, so much control, this is amazing" was when I was playing with something called Xamarin.Forms and this is what I was here to talk to you about today. So just to get us started, in order to understand what Xamarin.Forms is, let's first talk about what Xamarin is. And Xamarin is essentially a ported version of a few different SDKs, which are, so you've got the IOS SDK, the Android SDK and the Windows phone SDK all ported into C# and you've got every single API available but you can write using the tools that you already know. Now this is really good for businesses with established .net teams because rather than having to go out and hire a bunch of people that know Java, hire a bunch of people that know IOS, you can repurpose the skills that you've already got. So you can have this either portable class library or a shared project of all your business logic there to be shared between applications. But then once you've done that, you then have to, you do have to do all your user interface stuff separately. You still do it in C# and Xamarin provides amazing tooling for actually constructing that, but you still have to have quite in-depth knowledge about the life cycle of each ecosystem. So what Xamarin.Forms does is it hopes to introduce this extra layer here, which is your shared user interface code. Now from a native mobile app standpoint, this is the absolute holy grail of development really, because you write it once and then it runs everywhere. Now the point where this differs from something like PhoneGap, Cordova or something, is you're talking about actual native controls. Now I come from a web background and the whole Cordova thing when I first got into it was like wow, this is really cool, like I can actually run, you get the icon on your home screen and it's really cool, but as soon as you start pressing the buttons it just feels a bit like a web app in a wrapper, it's just, it's not there. Even there's tools like Ionic, which make it super clean to develop native looking apps and you write it once and you can do conditional compilation in that instance, where you do an Android version. And yeah, it kinda works but it's not like real native. What Xamarin.Forms does is it actually gives you the controls to write your user interface code once and when you write a button in Xamarin.Forms, it is a button on Android and it is a button on IOS. Nobody cares about Windows phone but it can do that as well. So here we've got a Galaxy running. You'll know my pass code by the end of it, it's not particularly complex. So we're gonna try and put something on here and then I've got an iPhone 7 running as well. And we're gonna start literally from scratch, because what I want to do today is just show you how easy it is to do this, write your code once and run anywhere. So we're literally gonna start right at the beginning, which is from the new solution button. Obviously I'm running Xamarin Studio on the Mac here because I want to deploy quite quickly to the IOS devices. Microsoft does provide all the tooling that you need to be able to do this from Visual Studio as well, and you can actually deploy to either a remote simulator or a remote IOS device using the remote build agent tools that Microsoft provides there. So what we're gonna do is in Xamarin Studio, we're gonna go into and do a new Forms App, we'll call it HelloDotNetSheff. We're gonna target Android and IOS in this instance, we're gonna use a portable class library and we're gonna use XAML for our user interface files to start with. Now let's just double check that I've got my internet connexion still so we can get the new get packages to start with and that's fine so let's go ahead and create that. Okay, while Xamarin Studio goes off and adds some of our packages, this is casting at a really, really high DPI. But I'll just talk you through some of the life cycles of the different projects. So in your IOS project it starts, so obviously this would be done either in Swift or Objective-C normally but it's just been literally ported over to C# and you start out with your main.cs file and you nominate this file called your app delegate which anybody who's done IOS before will tell you is your starting point. And as opposed to your traditional Xamarin project, where you might instantiate your app wherever you want to begin there, you actually include Xamarin.Forms from this point, from your app delegates, sorry, and you load it in here in this new app bit, which you would see would come from Xamarin.Forms. Likewise in the Android project, you've got your main activity, where you nominate your main activity, but here we call this forms.init function here. And what that does is, so you'll see down the side here, that's our IOS project and our android project, and then that means that we've then got this hook in to our Xamarin.Forms project up here. Now where this starts is this app.xaml, which has a CodeBehind of app.xaml.cs. Now this nominates our, it's created us a starting page, which is this HelloDotNetSheff. Let's see if we can increase the font size a little bit. So this is our starting point so you can see by default we've got as a label, we've got our content here which is declared like this and then a label with a few different attributes and it just says "Welcome to Xamarin.Forms", so let's start by just customising this a little bit and we'll just say "Hello .Net Sheff". And we'll select our project up here, so we'll go on the IOS device and we'll try and send it to my iPhone over here. So we'll kick that off and wait for it to build. Okay so we can see it's deploying to the device here, so let's squizz over to my iPhone. You can see this has deployed our IOS application to here. So let's just very quickly do the same with our Android project as well, so we'll stop that. Right, now you'll be relieved to hear that Vysor, which is the programme we're using to get the Android video signal, doesn't take audio, so we shouldn't get some horrendous infinite loop like we did just then. So let's just check where we're up to with this. So you can see here in Xamarin Studio we've got our status up here. Just get it deploying onto the device and it should auto-launch for us in a sec just on here. Any moment now. - [Audience Member] Is it 'cause you're not plugged in? - Right, here we go. Again, great, so that's our very basic example. Now just see how we're doing for time, so the next thing we're gonna do is try and introduce some navigation to our app. So we're just gonna try and go from one screen to another and I'll hopefully drop on some native controls there and you can see these controls rendered natively on each device. So we'll start by adding a new XAML page and we'll call this our second page. Now by default, I'll come to this at the end and talk about different ways of architecting your Xamarin apps. But by default, the XAML files work, so you just have a XAML page and then it has this CodeBehind page and you can call different functions based on events in your XAML file, to the CodeBehind. So on this second page here, what we'll begin with is we'll start by creating a stack layout. Xamarin.Forms comes with a few different types of layouts that you can use, a stack layout, if you're experienced in CSS, it's almost like declaring all of the children as display block. It's quite similar to the Flexbox model that a lot of modern layout engines use. We'll give it some vertical options, which tells us where we want it to appear. We're gonna go for centre, so vertical we'll just go for centre and horizontal we want to do as fill and expand, so that it fills the full width here. Now that we've got that stack layout, we can start to put in a few different controls. So and you start by doing a slider, because both operating systems come with a slider. I'm then also gonna use a picker, which I just have in a little snippet over here. And then underneath our picker, let's just add in a date picker as well. And then just for good measure we'll add in a switch. The docks are so well written, it's very, very clear, it's got a full, they call it, confusingly they call these views, every little, What you would consider a view in MVC land is actually a page and then each component is called a view. Which can get confusing, especially when you're doing a Xamarin project and doing a web project and trying to talk about both at once. So that's our second page. So what we need to do then is enable us to get to our second page. So we're gonna come back to our first page, which is our HelloDotNetSheff page, and we'll take this, so this label here, if we're adding another item to it, that also needs to be in a stack layout. So we'll do another stack layout. We'll centre it. And we'll put that label back in and then we'll create a button. We'll give it some text to say "Take me to the second page". And the default way of doing this, this isn't, again, how you would do it in production, but just to show you the ease from getting from zero to cross-platform apps faster than you can say Xamarin.Forms as the title suggests, we're gonna do it using the out of the box method, which is using this clicked event. And then Xamarin Studio handily provides us this little task that says "Handle Clicked". So we're gonna create this handle clicked method, we come down here to our CodeBehind and insert that in there. Then just going to copy over this other snippet, which is just, we're gonna rewrite this as an Async which says we're gonna use the navigational object to push our second page. Now that's all very well but unfortunately at the moment the way Xamarin.Forms architects itself is pages that navigate between each other have to exist within a navigation container. So we need to come into our entry point here, which is our app.xaml.cs and here we're just gonna take this, where we declare our main page, that's our starting point for our app, so that's the route that we declared in our Android and IOS projects, so in our app delegate on IOS and our main activity on Android, that comes through and this main page thing is where it starts. So we're just gonna... Just gonna call a new navigation page and then within the navigatin page we're gonna start it with that HelloDotNetSheff page, which is what it started us with. Now, oo I'm still debugging. Now if we've done everything correctly, somebody tell me if I've missed something. We'll start on our IOS project again. We'll deploy it to my iPhone again, Volume set to zero. Alright. Oh yeah, thank you. Let's try again. I do wish it would give us some more feedback here. Oh right, deploying to device, so hopefully that should be us getting started over here. So you can see we've got our Hello .Net Sheff label at the top, so underneath that in our stack layout is our default button. Ever since IOS 7, they have this background-less thing which to me makes absolutely no sense. Red text and blue text, give it a nice background Apple, come on. And then if I click the second button, you can see we've got our native slider here, which, because I've not put any padding on it, is actually quite difficult to grab. There we go. So we've got a native slider right here. If I use the select thing, that's the select snippet that I put in, I can use the date picker and the buttons. And like I say, compared to Cordova, it's native, it feels native. As soon as you press the button, there's no oh, this is a web wrapper just executing some CSS, it's real. So just to show how it looks on Android. Let's just come round here. Again, if you did want to do anything custom, per platform here as well and if the newer versions of Xamarin.Forms have literal code tags that you can use, you basically define an XML namespace up at the top there. And your extra XML namespace you would then define like an Android name space and an IOS name space and you would basically get, okay on IOS I want this button here but actually on Android I want this special kind of button which I've specifically engineered for that platform. So if we come round here you can see it's exactly the same on Android, except it looks like an Android application. You can see our default button is an actual real Android button. And if I go onto the next page you can see I've got native page transitions, my slider goes up and down, I've still got the same data there, I've got a native date picker here as well and I've got a nice material design little toggle there. So that's literally from new project to a cross-platform app in what's no time at all. So if you were gonna get started with this, what do you want to do next, in terms of moving forward? First thing I'd recommend is getting started with the Xamarin University course on their website. It makes it look like it costs 2,000 pounds a year, which is great if you've got an employer that will sponsor you to go and learn this, it's a really, really valuable skill set. But their basic stuff, they've got at least three or four hours of starter content which will get you up and running really, really quickly and give you quite a deep knowledge. The next thing that I would recommend as well is providing an MVVM framework. My colleagues Nick and Andy did a fantastic job of researching these least year for us when we were starting on a Xamarin.Forms project. We used FreshMvvm in the end. Other frameworks are available. And that enables you to do some really neat stuff with data bindings and just writing it in a really nice maintainable way. And the next thing I would recommend as well is doing the Xamarin traditional approach. Obviously it's brilliant being able to do the shared user interface code, but sooner or later you're gonna have to get a deeper understanding of the app life cycles of each of the different platforms, especially when it comes to what's called custom renderers, which is where you start putting different things on IOS and different things on Android as well. So yeah, that's it, yeah, any questions? Nope, alright, brill, thanks for your time.