Slide deck from the March 23 Xamarin.Forms workshop for Philly.Net.

1. Xamarin Bootcamp
March 23 2018
Philly.NET Code Camp 2018.1

2. 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”

3. 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

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

5. 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

6. 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?

7. 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

8. Before we begin

9. Prerequisites
• Need Microsoft Visual Studio 2017
• Need Android Studio

10. 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

11. 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)

12. Creating
an
Android
Emulator

13. Unlock
Android
Device for
Development

14. Android
USB
Debugging

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

16. Microsoft Visual Studio

17. Visual Studio Installer

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

19. Android Studio

20. Additional Tools

21. More
JetBrains
Goodness

22. Prototyping and
Design

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

24. “Book Bash”

25. “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”)

26. Prototyping

27. Application
Architecture

28. Two-tier architecture

29. 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!

30. Three-tier architecture

31. 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!

32. Three-tier RESTful architecture

33. So let’s build this
“API”

34. 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

35. 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!

36. API Technology
Stack?

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

38. API Technology Stack

39. 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

40. Data Model

41. 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

42. Our data model

43. Java API time!

44. Java Demo
• ** DEMO THE JAVA CODE **

45. Document the API
with Swagger

46. 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

47. Swagger

48. 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)

49. 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)

50. JWT
• ** authentication demo using Swagger **

51. Hello Xamarin.Forms

52. 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

53. 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

54. 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

55. Xamarin Classic
• ** DEMO **

56. What about one
Xamarin app for both
iOS and Android?

57. 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

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

59. Allow me to explain…

60. Demystifying .NET
Standard

61. .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)

62. .NET Standard

63. 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

64. .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”

65. 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…

66. 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

67. How to create a
Xamarin.Forms app?

68. Easy

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

70. XAML

71. 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

72. Working With XAML

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

74. Pages

75. Layouts

76. Views

77. Views

78. More
Views

79. Even
More
Views

80. Views that
Initiate
Commands

81. Views for
setting
values

82. Views for
setting
values

83. Views for
Setting
Values

84. Views for
editing
text

85. Views for
indicating
activity

86. Views that
display
collections

87. Views that display collections

88. Cells

89. Cells

90. Cells

91. Xamarin
Live
Player

92. 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

93. 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

94. Another approach:
Gorilla Player

95. 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)

96. Gorilla
Player

97. Gorilla
Player

98. Live
XAML!

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

100. MVVM

101. 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

102. MVVM

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

104. 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

105. ICommand

106. 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

107. Button Click Event

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

109. Data Binding

110. 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.

111. ListView templates

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

113. ListView Templating

114. Dependency Injection

115. 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!

116. Dependency Injection

117. 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 **

118. 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

119. Styling
Xamarin.Forms

120. 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

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

122. Flexbox
(CSS)

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

124. JWT and
Authentication

125. 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

126. 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???

127. Xamarin.Auth

128. 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

129. Xamarin.Forms
DependencyService

130. 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.

131. Xamarin DependencyService

132. 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 **

133. Facebook Auth

134. 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 **

135. “Dark Mode” (SQLite)

136. 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 **

137. Android Widget

138. 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 **

139. Android Splash Page

140. 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

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

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

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

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

145. CI using Jenkins

146. 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

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

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

149. 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

150. 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)

151. Xamarin Mac Agent

152. Jenkins
• ** JENKINS DEMO **

153. Xamarin.UITest

154. 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 **

155. React Native???

156. 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

157. 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

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

159. React Native CLI

160. Create React Native app

161. React Native App

162. React Native Demo
• ** DEMO **

163. Compare and
Contrast!

164. 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

165. 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

166. 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

167. Compare and Contrast

168. 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

169. Any questions?

170. 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/

171. 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

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