Xamarin.Forms Bootcamp

Xamarin Bootcamp
March 23 2018
Philly.NET Code Camp 2018.1

About this session
• A whole day workshop to learn cross-platform app development
 Introduce approaches for doing this (Xamarin, React Native)
• Tie in software engineering standards in doing this
 Testing
 Continuous Integration
• Focus on app functionality instead of app “aesthetics”

About Speaker
• Michael Melusky
 Software Engineer at Audacious Inquiry in Baltimore, MD
 College professor (Penn State, Franklin and Marshall College)
• Twitter/GitHub: @mrjavascript
• XBOX: @melusky

Today’s Code
• All code written today will be on my personal GitHub for you to clone and
play with
• Slides on SlideShare

Topics
• Introduction to Xamarin
 Local workspace setup (Visual Studio and Android Studio)
• The app design
 Prototyping and requirements
 Data model
 API and containerization
• Xamarin
 .NET standard
 Create a new project in Visual Studio

More Topics
• Xamarin
 Xamarin.Forms
 RESTful API integration
 Authentication and JWT
 MVVM
 List View Templating
 Dependency Injection with Prism
 Xamarin.Auth and Xamarin Dependency Service
 Facebook Authentication Integration
 Application preferences (SQLite database for a “dark mode”)
 Open Topics?

Even more topics
• Software Engineering:
 Continuous Integration (CI) using Jenkins
 Animated Splash Page (using Lottie)
 Testing (Xamarin.UITest and Selendroid)
 Android Widget
• Competing Cross-Platform Frameworks:
 React Native with Redux
 Compare and contrast the frameworks

Prerequisites
• Need Microsoft Visual Studio 2017
• Need Android Studio

Android Development
• This session will focus on Android and not iOS!
• For iOS development, a Mac running OSX is needed.
 Knowledge of Apple provisioning profiles are needed
 “App ID” created at developer.apple.com

Nice to have?
• A mobile device connected via USB for debugging
• Can use an emulator, considerably slower
• My development machines:
 CyperPowerPC desktop (1060 GTX, 16 GB RAM, i7, Windows 10)
 Lenovo X1 Carbon 3rd Generation (256 GB SSD, i7, Windows 10, 16 GB RAM)
 Apple MacBook Pro 2016 edition (512 GB SSD)

Unlock
Android
Device for
Development

Microsoft Visual Studio
• https://www.visualstudio.com/downloads/

Android Studio
• https://developer.android.com/studio/index.html

What are we building???
• We’re building an app…
• Nothing too crazy or revolutionary
• Nothing innovative either

“Book Bash” requirements
• An app where users can keep track of books they want to read
 Backlog where items have a queued/read/finished status
 Users can assign reviews (stars) to their backlog items
• Authentication
 Users can create accounts using email/password (traditional) or “Login with
Facebook”
 Users can change their passwords upon account creation
 Users can set preferences (“dark mode”)

Approach insufficient
• Mobile apps on Android/iOS don’t connect to the database directly!
• Need to connect to a piece of middleware/application server instead!

Modern web apps today
• Many web apps are “progressive web apps” (PWA)
 React / Angular
 Connect to the data source via JavaScript using a RESTful API
• Mobile apps are built using the same approach!

Three-tier RESTful architecture

So let’s build this
“API”

What is REST?
• REST is short for “Representational State Transfer”
• Uses HTTP requests for exchanging information
 GET
 POST
 PUT
 DELETE
 OPTIONS
• Similar to the use of AJAX calls in JavaScript
 HTTP request is sent to the server
 JSON response is delivered in the payload

How to build this API?
• Any technology stack you want
 .NET Core
 Java with Spring Boot
 JavaScript with NodeJS
 Python
 Et al.
• Think about containerization!!!
 A RESTful API in Java or .NET Core is perfect for Docker!

API Technology Stack
• Given containerization desires, choice came down to:
 .NET Core
 Java
• Need to pick one based on requirements of the API application

Why I chose Java?
• Our backend will connect to Amazon (via Product Advertising API) to
retrieve book data
• Amazon’s API is a SOAP web service
 Archaic
 Last updated in 2013
• Apache CXF is sufficient for connectivity
• Not sure 100% sure if WCF stuff is ported to .NET Core or still in 4.6.1
Framework

Let’s use postgres!
• Since I’m using Java, postgres is a natural fit
• Can use any flavor of “collection based” database
 Mongo, et al.
• Nothing wrong with relational databases!
• The Java application uses JPA and the two go hand in hand
• Postgres is bad ass
• Postgres is free

Java Demo
• ** DEMO THE JAVA CODE **

Swagger
• Industry standard for documenting a RESTful API
• Swagger Documents:
 Each RESTful endpoint available
 The request signature, either:
 Query string parameters
 Form data
 Request payload object
 The response type (either literal or object)
• A way to test each endpoint calls via the web interface

How about Authenticated Requests?
• With sending HTTP requests, HTTP has no concept of “state”
• Authentication needs to be sent in the headers of the request!
• This authentication is performed using a JSON Web Token (JWT)

JWT
• An open industry standard (RFC 7519) for representing claims between two
parties
 For more details visit https://jwt.io
• IDEA:
 The user creates an account or logs into your application from the UI
 The backend creates the JWT and returns it to the UI
 The UI sends the JWT in the “Authorization” section of the HTTP headers
 The backend uses the JWT from the request and determines:
 The user who created the request (authentication)
 Whether the user has access to the request resource (authorization)

JWT
• ** authentication demo using Swagger **

What is Xamarin?
• Xamarin is a framework for building cross-platform iOS/Android apps using
C#
• Acquired by Microsoft in February 2016
• Product made “free” shortly thereafter
• Integrated into Microsoft Visual Studio for Windows
• “Xamarin Studio” for OSX eventually became for Microsoft Visual Studio for
OSX

How do we build iOS/Android apps?
• Android apps are managed by Google.
 Built using Android Studio (JetBrains)
 Developed in Kotlin/Java
• iOS Apps are managed by Apple:
 Built using Xcode
 Developed in Swift/Objective-C

Xamarin Classic
• A framework for building either Android apps or iOS apps in C#
• iOS apps allow storyboarding features
• Android apps allow layout management design tools

Xamarin Classic
• ** DEMO **

What about one
Xamarin app for both
iOS and Android?

Xamarin.Forms
• A framework for building cross-platform apps using one shared library
between both the iOS and Android components!
• This shared library is a .NET Standard library

Ugh .NET Core and .NET Standard?
• I spent time learning what .NET Core is, but what the #*$&^# is .NET
Standard???????

.NET Core and .NET Standard
• .NET Core is a framework from Microsoft for producing applications that
can run on any target (Windows, Linux, OSX)
• Microsoft breaks these down into:
 Console application
 MVC application
• .NET Standard is a specification of “class libraries” between various
Microsoft application frameworks
 Meant to replace PCL (portable class library)

What is the 4.6.1 Framework???
• Old school
• Dependent on Windows platform
• Some libraries in 4.6.1 haven’t fully been ported over to .NET Core yet

.NET Standard analogy
• An analogy:
 If .NET Standard is a bird
 .NET Core is an eagle
 More features than the generic “bird”
 .NET 4.6.1 is a cat
 No features in common with the “cat”

Xamarin.Forms Shared Project
• The shared project will contain all code shared between your iOS and
Android projects
• Includes:
 Models
 Services
 Views (XAML)
 View Models…

Older Xamarin.Forms apps
• What about if I have an older Xamarin.Forms app
• Before .NET Standard was released in August 2017
• Uses PCL
• How to upgrade to .NET Standard???
 Rewrite LOL

How to create a
Xamarin.Forms app?

Xamarin.Forms
• *** App creation WORKSHOP time **

Xamain.Forms Views
• Xamarin.Forms views are built using XAML:
 “eXtensible Application Markup Language”
• If you’ve ever built a Silverlight or a WPF application, you should be at
home
• However some controls in Xamarin.Forms differ from traditional XAML
controls in WPF/Silverlight

Xamarin.Forms Controls
• Broken down into four components:
 Pages
 Layouts
 Views
 Cells

Views that
display
collections

Views that display collections

Xamarin.Forms
• Currently Visual Studio doesn’t have a “Design View” concept with
Xamarin.Forms applications
 The forms need to be compiled against a target runtime
• How do we make design changes quickly and efficiently in code?
 A few approaches exist

Xamarin Live Player
• App you can install on an Android/iOS device
• Connect to your device using Visual Studio
• The XAML is rendered on your device

Another approach:
Gorilla Player

Gorilla Player
• Very similar to Live Player
 An app you can install on either iOS/Android
 Connect to Gorilla player server installed on your Windows/OSX machine
 From the mobile app
 From the visual studio instance
• View design changes instantaneously!
• (My personal recommendation)

Back to the workshop…
• Let’s build our base application

Model-View-View Model (MVVM)
• This is a design pattern that separates the XAML user interface (View) from
the underlying data (Model)
• This intermediary between the two is called the View Model
• The view is a XAML file that references properties defined in the view model
via bindings
• The View Model controls the logic of the presentation tier
• The view’s binding context is an instance of the view model

Base View Model
• A C# class that implements INotifyPropertyChanged
• *** DEMO BUILDING BASE VIEW MODEL ***

ViewModel commanding
• The view needs to contain buttons that trigger various actions in the view
model (e.g. page navigation)
• We don’t want the view models to contain “Clicked” handlers for the buttons
since that would tie the View Model to a particular UI paradigm
• To allow this view model independence, a command interface exists and is
supported by the following:
 Button
 MenuItem
 ToolbarItem
 SearchBar
 TextCell / ImageCell
 ListView
 TapGestureRecognizer

MVVM and Data Binding
• Design pattern to keep logic out of the classes that extend ContentPage.
• You can in theory write everything in the page class.
 Click events for the buttons
 Code that extracts elements from the view
• Let’s use data bindings instead

Data Binding
• Consists of two components:
 A source object that provides the data
 A target object which will consume and display the data

Data Binding
• When using data binding, there are three modes:
• The Mode property is used to specify the direction in which property value
changes will propagate:
 A OneWay binding propagates changes from the source to the target.
 A TwoWay binding propagates changes in both directions, ensuring that the source
and target objects are always synchronized.
 A OneWayToSource binding propagates changes from the target to the source, and is
mainly used for read-only bindable properties.
• In Xamarin.Forms, the Mode property defaults to OneWay, and can be
omitted unless a different BindingMode is required.

ListView Templates
• Define how each row should be displayed on the page
• Can be represented with a stack layout, grid layout, et al.

Dependency Injection
• Typically when a constructor is invoked, any values that the object needs are
passed to the constructor
 .NET Core uses this in particular (Constructor Injection)
 Any dependencies that the object needs are injected into the constructor
• A “service” is a good candidate for dependency injection
• Dependency Injection is a specialized version of the Inversion of Control
Pattern (IoC)
 Another class is responsible for injecting the dependencies at runtime!

Dependency Injection
• There are a number of MVVM frameworks today to make things easier
 Prism, MvvmLight, FreshMvvm, et al.
• Let’s use Prism, but we need to pick a dependency injection container.
 Unity
 Autofac
 Ninject
 Dryloc
• Unity is the most popular container, let’s use this.
• ** DEMO REWRITE USING PRISM **

Prism
• Recommended by Microsoft Patterns and Practices
• A number of key pieces in the framework:
 BindableBase:
 Similar to our ViewModelBase, our view models can extend this
 DelegateCommand:
 Base class that implements ICommand interface
• INavigationService:
 Interface that can be injected in our view models to handle navigation
• IPageDialogService:
 Interface that can be injected in our view models for “modal” alert support

Xamarin.Forms Styles
• You’re able to customize the look and feel of Xamarin.Forms applications
using the following:
 Explicit
 applied to controls using their Style property
 Implicit
 Applied to all elements with the same TargetType property
 Global
 Can be made globally by being added to the application’s ResourceDictionary

Styling XAML and CSS
• What about CSS and web styling?
• E.g. using “Flexbox” for structure

Xamarin.Forms and Flexbox?
• Recently added, including using CSS for styling!
• https://github.com/xamarin/Xamarin.Forms/wiki/Feature-Roadmap

JWT
• JWT is used to access “secure” API calls
 Made with HttpClient in System.Net (or ModernHttpClient???)
• It’s sent in the Authorization header of the request
• Prefixed with the string Bearer

How to secure JWT
• JWT is sensitive and needs to be secured on the devices
• How to store this in:
 iOS keychain
 Android keystore class
• Use Xamarin.Auth Account store objects!
• Different implementations for both Android and iOS???

Xamarin Dependency Service
• We need a way to have different implementations for both iOS and Android
 With the Interface defined in the “Forms” project
• Xamarin.Forms provides a DependencyService

Xamarin.Forms
DependencyService

Xamarin Dependency Service
• DependencyService allows apps to call into platform-specific functionality
from shared code. This functionality enables Xamarin.Forms apps to do
anything that a native app can do.
• DependencyService is a dependency resolver. In practice, an interface is
defined and DependencyService finds the correct implementation of that
interface from the various platform projects.

Dependency Service
• Prism automatically registers instances using DependencyService at
startup!
• We can use this for the Xamarin.Auth piece
• We will use this again for the SQLite piece
• ** CODE TO AUTHENTICATION **

Connect with Facebook
• Most apps today have “Connect with Facebook” as a way to fast track the
account signup process
• How do we do this with Xamarin.Forms?
• Easy. Xamarin.Auth supports this!
• ** DEMO **

App Preferences
• Some apps don’t need to make API calls to store data
• Preferences is a good example
• Some apps offer a “dark mode”, like YouTube and Reddit
• We can store this data in a local database called SQLite
 Using the Xamarin DependencyService for both Android and iOS
• ** DEMO **

Android Widget
• Android has widgets that can be dropped on the “desktop” of your Android
device
• iOS has widgets too called “Today Widgets”
 Can make these in Xamarin using the Unified API
• Can we make the same in Android?
• Yes! Make a class in Android project implementing AppWidgetProvider
• ** DEMO **

Splash Pages
• Android “apps” typically don’t start with a Splash page
• iOS apps do!
 The Xamarin.iOS starter app has a splash page
• Why splash page?
 Show user a page for a few seconds while data behind the scenes loads
 Aesthetics, can animate

Android Splash Page
• Create a new Splash Activity in C#
• Make the activity the launching activity
• ** DEMO STATIC SPLASH PAGE **

Animated Splash Page
• Some apps have animations for splash pages
 Twitter for instance
• Can we add animation to our apps?

Lottie Framework
• Framework by AirBnb for animations
• Relies on vector animations
• Does not use animated GIF!

Lottie and BodyMovin’
• BodyMovin is a script for converting an Adobe After Effects animation to
vector data (JSON file)
• ** LOTTIE DEMO **

Jenkins
• Java-based server for performing build automation
• Originally named Hudson
• Similar to JetBrains Team City
• Can be deployed as a WAR file in Tomcat or a standalone application
• Ideal for the CI Pipeline

Automating Xamarin.Forms Builds
• You can use Jenkins for automatically building each app using the msbuild
command

Building Android
•msbuild
".YourApp.Android.csproj"
/p:Configuration=Release
/t:PackageForAndroid

Building iOS
• msbuild ".YourApp.iOS.csproj"
/t:Clean;Build /p:Configuration=Ad-
Hoc;Platform=iPhone;ServerAddress=<MAC
IP>;ServerUser=<MACUSER>;ServerPasswor
d=<MACPASS>;OutputPath=biniPhoneAd-
Hoc

Notes on Builds
• Need to use “jarsigner” utility to produce an APK file for Google Play
• iOS build for IPA file needs to be done on Mac
• Jenkins can be on Windows connecting to a Mac Xamarin Agent (OSX
machine with Visual Studio for OSX installed)

Jenkins
• ** JENKINS DEMO **

Xamarin UI.Test
• Since we mentioned Jenkins, how to we test Xamarin.Forms apps?
• Can use Selendroid for Android testing (Selenium for Android)
• Also can use Xamarin.UITest:
 Can write tests using Nunit and validate in Android and iOS
• ** DEMO **

Why React? This is a Xamarin talk!
• There are competing “cross platform” development tools on market:
• We have Xamarin.Forms
• We also have Telerik’s “Native Script”
• Google has Ionic
• Facebook has React Native

React Native
• A framework for building mobile apps (iOS/Android) using JavaScript!
• Uses the same component model React web apps use
• Which “apps” are using React Native?
 Facebook
 Instagram
 Airbnb
 Walmart
• Microsoft is using it actively!
 Skype
 Microsoft Teams

Prerequisites
• Knowledge of Javascript and HTML/CSS
• JavaScript IDE:
 JetBrains WebStorm
 Microsoft Visual Studio Code
• NodeJS and NPM

React Native Demo
• ** DEMO **

Compare and Contrast
Xamarin React Native Ionic
Language C# JavaScript TypeScript
Native Widgets yes yes no
General ideas Staying close to
native
Functional
approach: UI is a
function of state
Use web
technologies for
maximum
portability

Measuring Performance
• JIT and AOT
• JIT – Just in Time
 Just-in-time compilation (JIT) is the process of compiling a bytecode or a source code
into the native code at runtime.
 Hence, a piece of code (bytecode or source code) is not interpreted at runtime every
time it gets executed, but it’s only interpreted once at runtime, and every next time
it is executed, a fast native code runs.
• AOT – Ahead of Time
 Ahead-of-time compilation (AOT) is the same process performed before starting the
application, at compile time

AOT or JIT?
• Both C# and JavaScript are not compiled into the native code of the target
CPU. C# is compiled into some bytecode, and JavaScript is interpreted.
Thus, the performance question arises
• You might think AOT is always better than JIT, because you only need
to compile once and not every time you start the program
• But let’s remember that JavaScript is a dynamically typed language, and
this is the reason why JIT can outperform AOT in JavaScript case

To recap
Feature Xamarin React Native Edge
Speed of Local Development Gorilla Player makes it easy,
can deploy to local mobile
device from Visual Studio!
Quick with Node Watcher, but
can’t deploy to local mobile
device directly (without using
Expo, needs Javascript
Server)
Xamarin
Styling interface XAML styling isn’t the best “CSS-like” styling for
components
React Native
Languages All C# Mix of ES6, Java, Objective-C Xamarin
Testing Xunit and UITest, also Test
Cloud
Jest Xamarin
Continuous Integration Can build both iOS/Android
on any build server!
Requires Mac OSX Jenkins
Slave to build iOS
Xamarin
State management MVVM Redux Even
Documentation Excellent, also Xamarin
University
Needs improvement Xamarin
Community Support Lots of Nuget packages Lots of NPM packages Even

Useful References
• Xamarin Documentation
 https://docs.microsoft.com/en-us/xamarin/
• React Native Documentation
 https://facebook.github.io/react-native/docs/getting-started.html
• Jenkins
 https://jenkins.io
• Gorilla Player
 https://grialkit.com/gorilla-player/

References
• Compare and Contrast
 https://cruxlab.com/blog/reactnative-vs-xamarin/
• Facebook “F8” app:
 https://github.com/fbsamples/f8app
• Lottie
 http://airbnb.io/lottie/
• Prism
 http://prismlibrary.github.io/docs/index.html
• Selendroid
 http://selendroid.io

Thank you for coming
• @mrjavascript / @melusky (XBOX)
 Code on GitHub
 Slides on SlideShare
• Message me if you need assistance setting up this code locally

Xamarin.Forms Bootcamp

Recommended

More Related Content

What's hot (20)

Similar to Xamarin.Forms Bootcamp (20)

More from Mike Melusky (20)

Recently uploaded (20)

Xamarin.Forms Bootcamp