3. It’s not a battle to the death.
Reframing the Debate
It’s about using the right tool for the right job.
4. Advantages of HTML
Express high-level design concepts with declarative markup
Tons of control over presentation: gradients, shadows,
transparency, animation, rich text
Vendor-neutral open standards enable widespread support and
broad portability
Easy to learn and use—can tap into existing expertise
Ease of rapid prototyping lets you get great stuff working quickly
•
•
•
•
•
5. Disadvantages of HTML
Lack of consistency between rendering engines
Difficult to get optimal performance and acceptably responsive user
interface
Lack of native controls means that you can’t match the platform’s
native look and feel
No access to platform-specific functionality
HTML rendering engines confine you to a lowest-common-
denominator user experience
•
•
•
•
•
6.
7. 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 a
mobile developer ships a non-native app:
8. Advantages of Native Development
Access the full range of rich device capabilities and
native platform features
Native controls supplied by the platform are tailored
for ideal performance and benefit from platform-level
optimizations and hardware acceleration
Native code gives you a lot more room for optimization
and parallelization
Perfectly conform with the standard user interface
conventions of the underlying platform
•
•
•
•
9. Hybrid Advantages
Decide which parts of your app
should be HTML or native
Expose device capabilities and native
platform features to your HTML
content
Easy to transition to fully native
application if you reach the limits of
HTML
•
•
•
10. Share code across platforms: C#, JavaScript, and HTML.
Use platform-specific APIs and native user interface controls.
Xamarin for Hybrids
11. Displaying HTML Content in Native Apps
An HTML view can be a highly effective tool for displaying
rich content in native applications
Ideal for use in scenarios where you need complex formatting
and want to intersperse graphics
With responsive design techniques, content can be made to
seamlessly adapt to different screen sizes and orientations
Razor templating engine can be used in native applications to
generate HTML content that incorporates relevant data
•
•
•
•
12. A simple Pokédex application built with Xamarin.iOS
DEMO: Razordex
13. Implementing Razordex
public 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>
...
15. There are several ways to enable interaction between the native part
of your application and the HTML view.
Hybrid Communication Techniques
16. 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");
17. 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");
