Ryan PaulDeveloper EvangelistXamarinMail: ryan@xamarin.comTwitter: @segphaultBuilding Hybrid Appswith Xamarin
NATIVEVERSUSHTML5?
It’s not a battle to the death.Reframing the DebateIt’s about using the right tool for the right job.
Advantages of HTMLExpress high-level design concepts with declarative markupTons of control over presentation: gradients, ...
Disadvantages of HTMLLack of consistency between rendering enginesDifficult to get optimal performance and acceptably resp...
Give them the high-quality native app that they deserve!Your users expect better.This is kind of what it’s like for users ...
Advantages of Native DevelopmentAccess the full range of rich device capabilities andnative platform featuresNative contro...
Hybrid AdvantagesDecide which parts of your appshould be HTML or nativeExpose device capabilities and nativeplatform featu...
Share code across platforms: C#, JavaScript, and HTML.Use platform-specific APIs and native user interface controls.Xamari...
Displaying HTML Content in Native AppsAn HTML view can be a highly effective tool for displayingrich content in native app...
A simple Pokédex application built with Xamarin.iOSDEMO: Razordex
Implementing Razordexpublic class Pokemon{public int number { get; set; }public string name { get; set; }public string pri...
No ferrets were harmed in the makingof this app.
There are several ways to enable interaction between the native partof your application and the HTML view.Hybrid Communica...
Expose a C# function to JavaScript<div onclick="Foo.bar(This is a test!)" class="button">Test</div>class Foo : Java.Lang.O...
Intercept a Link Handler<a href="message:This is a test!">Test</a>private class CustomWebViewClient : WebViewClient{public...
Call JavaScript from C#WebView web = FindViewById<WebView> (Resource.Id.myWeb);web.Settings.JavaScriptEnabled = true;web.L...
Q&A
THANK YOU
Building hybrid apps with Xamarin, Ryan Paul
Upcoming SlideShare
Loading in …5
×

Building hybrid apps with Xamarin, Ryan Paul

5,767 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,767
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
93
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Building hybrid apps with Xamarin, Ryan Paul

  1. 1. Ryan PaulDeveloper EvangelistXamarinMail: ryan@xamarin.comTwitter: @segphaultBuilding Hybrid Appswith Xamarin
  2. 2. NATIVEVERSUSHTML5?
  3. 3. It’s not a battle to the death.Reframing the DebateIt’s about using the right tool for the right job.
  4. 4. Advantages of HTMLExpress high-level design concepts with declarative markupTons of control over presentation: gradients, shadows,transparency, animation, rich textVendor-neutral open standards enable widespread support andbroad portabilityEasy to learn and use—can tap into existing expertiseEase of rapid prototyping lets you get great stuff working quickly•••••
  5. 5. Disadvantages of HTMLLack of consistency between rendering enginesDifficult to get optimal performance and acceptably responsive userinterfaceLack of native controls means that you can’t match the platform’snative look and feelNo access to platform-specific functionalityHTML rendering engines confine you to a lowest-common-denominator user experience•••••
  6. 6. Give them the high-quality native app that they deserve!Your users expect better.This is kind of what it’s like for users when amobile developer ships a non-native app:
  7. 7. Advantages of Native DevelopmentAccess the full range of rich device capabilities andnative platform featuresNative controls supplied by the platform are tailoredfor ideal performance and benefit from platform-leveloptimizations and hardware accelerationNative code gives you a lot more room for optimizationand parallelizationPerfectly conform with the standard user interfaceconventions of the underlying platform••••
  8. 8. Hybrid AdvantagesDecide which parts of your appshould be HTML or nativeExpose device capabilities and nativeplatform features to your HTMLcontentEasy to transition to fully nativeapplication if you reach the limits ofHTML•••
  9. 9. Share code across platforms: C#, JavaScript, and HTML.Use platform-specific APIs and native user interface controls.Xamarin for Hybrids
  10. 10. Displaying HTML Content in Native AppsAn HTML view can be a highly effective tool for displayingrich content in native applicationsIdeal for use in scenarios where you need complex formattingand want to intersperse graphicsWith responsive design techniques, content can be made toseamlessly adapt to different screen sizes and orientationsRazor templating engine can be used in native applications togenerate HTML content that incorporates relevant data••••
  11. 11. A simple Pokédex application built with Xamarin.iOSDEMO: Razordex
  12. 12. Implementing Razordexpublic class Pokemon{public int number { get; set; }public string name { get; set; }public string primary_type { get; set; }public string secondary_type { get; set; }public string biography { get; set; }public string primary_ability { get; set; }public string secondary_ability { get; set; }}...var template = new PokemonHTMLView () { Model = detailItem };webDetailView.LoadHtmlString (template.GenerateString (),NSBundle.MainBundle.BundleUrl);@model Pokemon<html><head><link type="text/css" rel="stylesheet" href="style.css" /></head><body><div class="container"><div class="header">Type</div><table class="data"><tr><td><b>Primary:</b></td><td>@Model.primary_type</td></tr><tr><td><b>Secondary:</b></td><td>@Model.secondary_type</td></tr></table></div>...
  13. 13. No ferrets were harmed in the makingof this app.
  14. 14. There are several ways to enable interaction between the native partof your application and the HTML view.Hybrid Communication Techniques
  15. 15. Expose a C# function to JavaScript<div onclick="Foo.bar(This is a test!)" class="button">Test</div>class Foo : Java.Lang.Object{...[Export ("bar")]public void Bar (Java.Lang.String message){Toast.MakeText (context,"Message called from JavaScript: " + message, ToastLength.Short).Show ();}}...WebView web = FindViewById<WebView> (Resource.Id.myWeb);web.Settings.JavaScriptEnabled = true;web.AddJavascriptInterface (new Foo (this), "Foo");web.LoadUrl("file:///android_asset/main.html");
  16. 16. Intercept a Link Handler<a href="message:This is a test!">Test</a>private class CustomWebViewClient : WebViewClient{public override bool ShouldOverrideUrlLoading (WebView view, string url){if (url.StartsWith ("message:")) {var message = Uri.UnescapeDataString(url.Split(new char[] { : }, 2)[1]);Toast.MakeText (view.Context,"Message called from JavaScript: " + message, ToastLength.Short).Show ();return true;} else return false;}}...WebView web = FindViewById<WebView> (Resource.Id.myWeb);web.SetWebViewClient (new CustomWebViewClient ());web.Settings.JavaScriptEnabled = true;web.LoadUrl("file:///android_asset/main.html");
  17. 17. Call JavaScript from C#WebView web = FindViewById<WebView> (Resource.Id.myWeb);web.Settings.JavaScriptEnabled = true;web.LoadUrl("file:///android_asset/main.html");Button button = FindViewById<Button> (Resource.Id.button1);button.Click += (object sender, EventArgs e) => {web.LoadUrl("javascript:document.getElementById(button).innerHTML = Hello!");};
  18. 18. Q&A
  19. 19. THANK YOU

×