The Year of Xamarin.Forms

Aleksander Piotrowski @pelotasplus Agenda

1. What platform needs … to be a rockstar platform 2. And then ... Microsoft happened 3. What’s the difference between Xamarin and Xamarin.Forms 4. What Xamarin.Forms … cannot do (easily) 5. What Xamarin.Forms … can do 6. Apps using Xamarin(.Forms) What platform needs … to be a rockstar platform Programing Language IDE Blogs/podcasts Jake Wharton Visionary Documentation Testing tools/services Emulator

Events Third-party components Library Programing Language

C# F# XAML IDE IDE Jake Wharton

● Paul C Betts ○ ModernHttpClient ○ refit ○ OkHttp for Xamarin ● James Montemagno ○ MeetupManager ○ Connectivity Plugin for Xamarin ■ ~340k downloads ○ podcasts, blog posts, youtube videos Blogs/podcasts

● Fragmented Merge Conflict ● Android Developers Backstage Xamarin Podcast ● Channel 9 ● .NET rocks! ● Xamarin University paid ● blog.xamarin.com ● hardcore .Net fans also blogging about Xamarin Visionary

● never received a degree ● free software developer since 1992 ● Midnight Commander ● early Wine contributor ● worked on Linux Sun SPARC ● later on Linux for SGI Indy ● almost ported Internet Explorer to SPARC ● started GNOME project and created Gnumeric ● started Mono project to implement .NET on Linux ● Xamarin so Mono on mobile* ● Microsoft, Visual Studio for Mac, reboot mobile for Microsoft Documentation

● for all targeted platforms ● Xamarin.Android, Xamarin.iOS, Xamarin.Forms, Xamarin.everything ● Android developer could learn iOS app architecture ● explains not only C# or Xamarin-related aspects but also basics of all the platforms ● https://developer.xamarin.com/guides/android/user_interface/ ● https://developer.xamarin.com/guides/ios/user_interface/introduction_to_storyboards/ ○ 27 pages long PDF ○ detailed description of what Storyboards really are Emulator

● Xamarin Android Player ● Visual Studio Emulator for Android ○ more or less Genymotion equivalent ● Remoted iOS Simulator ○ for Windows ○ for Visual Studio ○ enterprise edition ○ a Mac is needed for that Testing tools/services

● JUnit NUnit ● Calabash ● UITest for Xamarin ○ Xamarin Test Recorder ● run on thousands of real devices w/ Xamarin Test Cloud ● with Visual Studio Mobile Center also available for !Xamarin apps ○ Espresso ○ Appium ○ coming soon UWP source: https://xamarin.com/test-cloud Events

● Google I/O Xamarin Evolve ○ and yes, it’s expensive ● Microsoft Connect ○ all things Microsoft ○ with Xamarin on a prominent place ● lot’s of local meetups all the time ○ Xamarin Dev Days ○ .NET (junior) meetups Third-party components Library

● Json.NET - GSON for all platforms ○ 54,831,282 total downloads ○ 23,902 avg downloads / day Third-party components Library RESTful API ● Json.NET - GSON for all platforms ● refit - retrofit for all platforms ○ Xamarin.Android AFNetworking OkHttp ○ Xamarin.Mac ○ Xamarin.iOS 64-bit (Unified API) network service ○ Desktop .NET 4.5 in our app ○ Windows Store 8.1+

○ Windows Phone 8.1 Universal Apps manually Gson as a dict ○ .NET Core

data model Third-party components Library

● Json.NET - GSON for all platforms ● refit - retrofit for all platforms ● SVProgressHUD ○ 9,564 stars ○ 2,079 forks Third-party components Library

● Json.NET - GSON for all platforms ● refit - retrofit for all platforms ● SVProgressHUD ● everything is available from Android or iOS worlds Third-party components Library

● Json.NET - GSON for all platforms ● refit - retrofit for all platforms ● SVProgressHUD ● everything is available from Android or iOS worlds ● Components for Xamarin ○ Android Support Libraries ○ Facebook SDK ● Plugins for Xamarin ○ Battery Status ○ Connectivity - 369,811 downloads ● 6 different parse.com bindings Programing Language IDE Blogs/podcasts Jake Wharton Visionary Documentation Testing tools/services Emulator

Events Third-party components Library And then … Microsoft happend

And then … Microsoft happend

1. not making it Windows-only! ○ Windows ■ IDEs ■ all .NET ■ Xamarin ○ Mac ■ IDEs ■ .NET core ■ Xamarin ○ Linux ■ some IDEs ■ .NET core ■ Xamarin And then … Microsoft happend

1. not making it Windows-only! 2. Visual Studio Code for Mac ○ premier developer product ○ based on Xamarin Studio, so… ○ … 100% mac look and feel ○ not all “workloads” supported though And then … Microsoft happend

1. not making it Windows-only! 2. Visual Studio Code for Mac 3. making it free* ○ for small companies, or ○ devs working for small companies ○ not only Xamarin but also Visual Studio community edition And then … Microsoft happend

1. not making it Windows-only! 2. Visual Studio Code for Mac 3. making it free* 4. going open-source ○ all code on GitHub ○ not dumped there from time to time, but ○ developed in public ○ feature branches, PRs, issues ○ soon nightly builds from feature branches or PRs And then … Microsoft happend

1. not making it Windows-only! 2. Visual Studio Code for Mac 3. making it free* 4. going open-source 5. clear vision ○ public roadmap ■ macOS supported in Xamarin.Forms 2.5.0 to be released Q3 2017 ○ Xamarin.Forms Evolution ■ a forum ■ discuss new features ■ ends up with rejection, or … ■ … someone from Microsoft or community implements particular feature! https://github.com/xamarin/Xamarin.Forms/pull/746 What’s the difference between Xamarin and Xamarin.Forms Application layer (platform specific) User interface layer

Service access layer Service access layer (REST) (JSON)

Business Logic Business Logic (data model) (itself)

Data layer (SQLite) Data access layer (CRUD) “With language advantages of C# and run-time advantages one can even create applications that are faster than apps created in native languages” - Chris Van Wyk, Xamarin University mobile expert

“Xamarin leverages JIT compilation, just Java Android application, to create optimized executable on executing device” - Judy McNeil, Xamarin University mobile expert

Fat binary vs slim debug build ● Hello world + Base Class Library: 15.8MB

● Hello world + BCL after Linking: 2.9MB

● Linking results in a package that is 30% the size of the original source: used to be here http://developer.xamarin.com/guides/android/advanced_topics/linking/ Application layer (platform specific) User interface layer

Service access layer Service access layer (REST) (JSON)

Business Logic Business Logic (data model) (itself)

Data layer (SQLite) Data access layer (CRUD) Application layer (platform specific) User interface layer (platform specific)

Xamarin.Forms Xamarin.Forms

Service access layer Service access layer (REST) (JSON)

Business Logic Business Logic (data model) (itself)

Data layer (SQLite) Data access layer (CRUD) What Xamarin.Forms … can do

1. Multiplatform

● iOS ● Android ● Windows ○ Windows Phone 8.X ○ UWP (Windows 10) ● Tizen ○ Samsung phones ○ and TVs ● Mac ○ Q3 2017, now in beta 2. Rich set of predefined UI elements

● Pages ● Layouts ● Controls ● … all mapped at run-time to platform-specific native UI elements source: https://xamarin.com/forms source: https://xamarin.com/forms 3. Create UI in XAML

… or in C# code

using Xamarin.Forms;

var profilePage = new ContentPage { Title = "Profile", Icon = "Profile.png", Content = new StackLayout { Spacing = 20, Padding = 50, VerticalOptions = LayoutOptions.Center, Children = { new Entry { Placeholder = "Username" }, new Entry { Placeholder = "Password", IsPassword = true }, new Button { Text = "Login", TextColor = Color.White, BackgroundColor = Color.FromHex("77D065") }}} };

var settingsPage = new ContentPage { Title = "Settings", Icon = "Settings.png", (...) };

var mainPage = new TabbedPage { Children = { profilePage, settingsPage } }; 4. Built-in dependency injection

● use platform-specific code from shared code ● in four easy steps ○ provide an interface ○ provide platform-specific implementations ○ register, and ○ … use public interface ITextToSpeech { void Speak (string text); } public class TextToSpeechImplementation : Java.Lang.Object, ITextToSpeech, TextToSpeech.IOnInitListener { TextToSpeech speaker; string toSpeak;

public TextToSpeechImplementation () {}

public void Speak (string text) { toSpeak = text; if (speaker == null) { speaker = new TextToSpeech (Forms.Context, this); } else { var p = new Dictionary (); speaker.Speak (toSpeak, QueueMode.Flush, p); } }

#region IOnInitListener implementation public void OnInit (OperationResult status) { if (status.Equals (OperationResult.Success)) { var p = new Dictionary (); speaker.Speak (toSpeak, QueueMode.Flush, p); } } #endregion } using Android.Speech.Tts; [...] using MyNamespace.Droid;

[assembly: Xamarin.Forms.Dependency (typeof (TextToSpeechImplementation))] namespace MyNamespace.Droid {

public class TextToSpeechImplementation : Java.Lang.Object, ITextToSpeech, TextToSpeech.IOnInitListener { TextToSpeech speaker; string toSpeak;

[...]

public void Speak (string text) { [...] }

[...]

} }

[...] button.Clicked += (sender, e) => {

DependencyService.Get().Speak("Hello from Xamarin Forms");

};

[...] 5. Data binding

Data binding

namespace XamlSamples { public partial class XamlPlusCodePage { public XamlPlusCodePage() { InitializeComponent(); }

void OnButtonClicked(object sender, EventArgs args) { Button button = (Button)sender;

await DisplayAlert("Clicked!", "Label is: '" + valueLabel.Text + "'”, "OK");

} } } Data binding > MVVM (model)

public class Weather { public string Title { get; set; } public string Temperature { get; set; } public string Wind { get; set; } public string Humidity { get; set; } public string Visibility { get; set; } public string Sunrise { get; set; } public string Sunset { get; set; }

[...] } Data binding > MVVM (layout)

Data binding > MVVM (joining together)

public partial class WeatherPage : ContentPage { public WeatherPage() { InitializeComponent(); [...] this.BindingContext = new Weather(); }

private async void GetWeatherBtn_Clicked(object sender, EventArgs e) { Weather weather = await Core.GetWeather(zipCodeEntry.Text); if (weather != null) { this.BindingContext = weather; } } } } 6. Built-in event bus aka MessagingCenter public class MainPage : ContentPage { public MainPage () { BindingContext = new MainPageViewModel ();

var button = new Button { Text = "Say Hi to John" }; button.Clicked += (sender, e) => { MessagingCenter.Send (this, "Hi", "John"); };

Content = new StackLayout { Padding = new Thickness (0, 20, 0, 0), Children = {button} }; } Built-in event bus aka MessagingCenter public class MainPageViewModel { public ObservableCollection Greetings { get; set; }

public MainPageViewModel () { Greetings = new ObservableCollection ();

MessagingCenter.Subscribe (this, "Hi", (sender, arg) => { Greetings.Add("Hi " + arg); }); } } 7. Navigation support 7. Navigation support - MasterDetailPage

public class RootPage : MasterDetailPage { public RootPage () { Master = new MenuItemsPage (); Detail = new NavigationPage (new NewsFeedPage ());

[...] }

[...] } 7. Navigation support - Stack navigation

new NavigationPage (new Page1Xaml ());

await Navigation.PushAsync (new Page2Xaml ());

await Navigation.PushAsync (new Page3Xaml ()); 7. Navigation support - Stack navigation

await Navigation.PopAsync ();

await Navigation.PopAsync (); 8. Native Views

8. Native Views

9. Device Class

... 9. Device Class

... 9. Device Class

double top; switch (Device.RuntimePlatform) { case Device.iOS: top = 20; break; case Device.Android: case Device.WinPhone: case Device.Windows: default: top = 0; break; } layout.Margin = new Thickness(0, top, 0, 0); 9. Device Class

Device.OpenUri(new Uri("https://mobiusconf.com/"));

Device.StartTimer (new TimeSpan (0, 0, 60), () => { // do something every 60 seconds return true; // runs again, or false to stop });

Device.BeginInvokeOnMainThread ( () => { // interact with UI elements }); Xamarin.Forms can help Android or iOS native devs

to develop for the other platform (and desktops too)

Q&A

Aleksander Piotrowski @pelotasplus