SlideShare a Scribd company logo
Building Xamarin.Forms
apps with Prism and MVVM
MICHAEL MELUSKY - @MRJAVASCRIPT
CENTRAL PENN .NET – APRIL 17 2018
About Speaker
 Michael Melusky –
 Software Developer for Audacious Inquiry in Baltimore, MD
 Instructor at Penn State Harrisburg / Franklin and Marshall College
Why Xamarin.Forms?
Why this topic?
 I spoke here on React Native back in January…
 Also manage a Xamarin.Forms app on the side
 Was developed w/o best practices and wanted to rewrite it using approaches
recommended by Microsoft
Topics
 Intro to Xamarin.Forms
 Create a Xamarin.Forms app using Visual Studio
 Discussion on .NET Standard
 Go over core concepts:
 XAML
 Navigation
 MVVM (Model-View-ViewModel)
 Introduce Prism (with Unity for the DI container)
Additional Topics (Time Permitting)
 Pick and choose! (demo the app built for Philly.NET)
 SQLite integration (a “preferences” screen)
 Android widgets
 Facebook Connect
 Splash Screens and animation
 Jenkins and CI
 Xamarin UI.Test
What is Xamarin.Forms?
Xamarin.Forms
 A cross platform framework for building native iOS/Android/UWP apps
 Acquired by Microsoft in February 2016
 Product made “free” thereafter
Building Android and iOS apps
 Android:
 Built using Java/Kotlin
 iOS:
 Built using Swift/Objective-C
 Xamarin.Forms lets you build one code base (C#/XAML) to target both iOS and
Android
Who is using
Xamarin.Forms?
Who is using Xamarin.Forms?
 Many are!
 https://www.xamarin.com/customers
 Microsoft built their new MSN News app:
 https://channel9.msdn.com/Shows/XamarinShow/Building-the-New-MSN-News-App-
with-Xamarin
So how do we build a Xamarin.Forms app?
 Let’s build one ourselves!
 ** DEMO **
.NET Standard
.NET Standard (vs .NET Core)
 .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)
.NET
Standard
.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 “bird”
XAML
Xamarin.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
Xamarin.Forms Controls
 Broken down into four components:
 Pages
 Layouts
 Views
 Cells
Pages
Layouts
Views
Views
Views
Views
Views that
Initiate
Commands
Views for
Setting
Values
Views for
Setting
Values
Views for Setting Values
Views for
Editing
Text
Views for
Editing
Text
Views for
Displaying
Collections
Views that Display Collections
Cells
Cells
Cells
MVVM
Model-View-ViewModel
 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
MVVM
MVVM
 ** Demo **
 Integrate INotifyPropertyChanged
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
ICommand
MVVM 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
Button Click Event
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
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.
Data Binding
 ** DEMO **
Dependency Injection
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
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
Open Topics
Pick and Choose!
 Xamarin.Auth and Authentication
 Facebook Authentication
 SQLite integration (user preferences)
 Xamarin UI.Test
 Jenkins and CI
 Android Splash Page
 Android Widgets
Thanks for coming
 Code on github
 Slides on slideshare
 @mrjavascript

More Related Content

What's hot

Design Pattern - MVC, MVP and MVVM
Design Pattern - MVC, MVP and MVVMDesign Pattern - MVC, MVP and MVVM
Design Pattern - MVC, MVP and MVVM
Mudasir Qazi
 
MVC Seminar Presantation
MVC Seminar PresantationMVC Seminar Presantation
MVC Seminar Presantation
Abhishek Yadav
 
Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS
Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOSSoftware architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS
Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS
Jinkyu Kim
 
Model viewviewmodel2
Model viewviewmodel2Model viewviewmodel2
Model viewviewmodel2
Suraj Kulkarni
 
ASP .NET MVC Introduction & Guidelines
ASP .NET MVC Introduction & Guidelines  ASP .NET MVC Introduction & Guidelines
ASP .NET MVC Introduction & Guidelines
Dev Raj Gautam
 
MVVM with WPF
MVVM with WPFMVVM with WPF
MVVM with WPF
S V
 
MVC(Model View Controller),Web,Enterprise,Mobile
MVC(Model View Controller),Web,Enterprise,MobileMVC(Model View Controller),Web,Enterprise,Mobile
MVC(Model View Controller),Web,Enterprise,Mobile
naral
 
ASP.NET MVC Presentation
ASP.NET MVC PresentationASP.NET MVC Presentation
ASP.NET MVC Presentation
Volkan Uzun
 
ASP.NET MVC.
ASP.NET MVC.ASP.NET MVC.
ASP.NET MVC.
Ni
 
Introduction to mvc architecture
Introduction to mvc architectureIntroduction to mvc architecture
Introduction to mvc architecture
ravindraquicsolv
 
Mvc 130330091359-phpapp01
Mvc 130330091359-phpapp01Mvc 130330091359-phpapp01
Mvc 130330091359-phpapp01
Jennie Gajjar
 
A report on mvc using the information
A report on mvc using the informationA report on mvc using the information
A report on mvc using the information
Toushik Paul
 
What is MVC?
What is MVC?What is MVC?
What is MVC?
Dominique Cimafranca
 
MSDN - ASP.NET MVC
MSDN - ASP.NET MVCMSDN - ASP.NET MVC
MSDN - ASP.NET MVC
Maarten Balliauw
 
MVC
MVCMVC
MVC
akshin
 
Introduction To Model View Presenter
Introduction To Model View PresenterIntroduction To Model View Presenter
Introduction To Model View Presenter
saeed shargi ghazani
 
MVC
MVCMVC
Mvc pattern and implementation in java fair
Mvc   pattern   and implementation   in   java fairMvc   pattern   and implementation   in   java fair
Mvc pattern and implementation in java fair
Tech_MX
 
ASP.NET MVC 3
ASP.NET MVC 3ASP.NET MVC 3
ASP.NET MVC 3
Buu Nguyen
 
Model view view model
Model view view modelModel view view model
Model view view model
Binu Bhasuran
 

What's hot (20)

Design Pattern - MVC, MVP and MVVM
Design Pattern - MVC, MVP and MVVMDesign Pattern - MVC, MVP and MVVM
Design Pattern - MVC, MVP and MVVM
 
MVC Seminar Presantation
MVC Seminar PresantationMVC Seminar Presantation
MVC Seminar Presantation
 
Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS
Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOSSoftware architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS
Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS
 
Model viewviewmodel2
Model viewviewmodel2Model viewviewmodel2
Model viewviewmodel2
 
ASP .NET MVC Introduction & Guidelines
ASP .NET MVC Introduction & Guidelines  ASP .NET MVC Introduction & Guidelines
ASP .NET MVC Introduction & Guidelines
 
MVVM with WPF
MVVM with WPFMVVM with WPF
MVVM with WPF
 
MVC(Model View Controller),Web,Enterprise,Mobile
MVC(Model View Controller),Web,Enterprise,MobileMVC(Model View Controller),Web,Enterprise,Mobile
MVC(Model View Controller),Web,Enterprise,Mobile
 
ASP.NET MVC Presentation
ASP.NET MVC PresentationASP.NET MVC Presentation
ASP.NET MVC Presentation
 
ASP.NET MVC.
ASP.NET MVC.ASP.NET MVC.
ASP.NET MVC.
 
Introduction to mvc architecture
Introduction to mvc architectureIntroduction to mvc architecture
Introduction to mvc architecture
 
Mvc 130330091359-phpapp01
Mvc 130330091359-phpapp01Mvc 130330091359-phpapp01
Mvc 130330091359-phpapp01
 
A report on mvc using the information
A report on mvc using the informationA report on mvc using the information
A report on mvc using the information
 
What is MVC?
What is MVC?What is MVC?
What is MVC?
 
MSDN - ASP.NET MVC
MSDN - ASP.NET MVCMSDN - ASP.NET MVC
MSDN - ASP.NET MVC
 
MVC
MVCMVC
MVC
 
Introduction To Model View Presenter
Introduction To Model View PresenterIntroduction To Model View Presenter
Introduction To Model View Presenter
 
MVC
MVCMVC
MVC
 
Mvc pattern and implementation in java fair
Mvc   pattern   and implementation   in   java fairMvc   pattern   and implementation   in   java fair
Mvc pattern and implementation in java fair
 
ASP.NET MVC 3
ASP.NET MVC 3ASP.NET MVC 3
ASP.NET MVC 3
 
Model view view model
Model view view modelModel view view model
Model view view model
 

Similar to Building xamarin.forms apps with prism and mvvm

.NET,ASP .NET, Angular Js,LinQ
.NET,ASP .NET, Angular Js,LinQ.NET,ASP .NET, Angular Js,LinQ
.NET,ASP .NET, Angular Js,LinQ
Avijit Shaw
 
Code Camp 06 Model View Presenter Architecture
Code Camp 06   Model View Presenter ArchitectureCode Camp 06   Model View Presenter Architecture
Code Camp 06 Model View Presenter Architecture
bitburner93
 
Stephen Kennedy Silverlight 3 Deep Dive
Stephen Kennedy Silverlight 3 Deep DiveStephen Kennedy Silverlight 3 Deep Dive
Stephen Kennedy Silverlight 3 Deep Dive
MicrosoftFeed
 
Overview of CSharp MVC3 and EF4
Overview of CSharp MVC3 and EF4Overview of CSharp MVC3 and EF4
Overview of CSharp MVC3 and EF4
Rich Helton
 
No brainer
No brainerNo brainer
No brainer
Tanzim Saqib
 
Metamorphosis from Forms to Java: A technical lead's perspective, part II
Metamorphosis from Forms to Java:  A technical lead's perspective, part IIMetamorphosis from Forms to Java:  A technical lead's perspective, part II
Metamorphosis from Forms to Java: A technical lead's perspective, part II
Michael Fons
 
Spring (1)
Spring (1)Spring (1)
Spring (1)
Aneega
 
Diving Into Xamarin.Forms
Diving Into Xamarin.Forms Diving Into Xamarin.Forms
Diving Into Xamarin.Forms
Catapult New Business
 
Xamarin Development
Xamarin DevelopmentXamarin Development
Xamarin Development
Alper Ebicoglu
 
Modern ASP.NET Webskills
Modern ASP.NET WebskillsModern ASP.NET Webskills
Modern ASP.NET Webskills
Caleb Jenkins
 
Building richwebapplicationsusingasp
Building richwebapplicationsusingaspBuilding richwebapplicationsusingasp
Building richwebapplicationsusingasp
Giovanni Javier Jimenez Cadena
 
Real world apps with Xamarin and MVVM
Real world apps with Xamarin and MVVMReal world apps with Xamarin and MVVM
Real world apps with Xamarin and MVVM
Gill Cleeren
 
Javascript from beginning to modern
Javascript from beginning to modernJavascript from beginning to modern
Javascript from beginning to modern
Prem Narain
 
Learning MVC Part 3 Creating MVC Application with EntityFramework
Learning MVC Part 3 Creating MVC Application with EntityFrameworkLearning MVC Part 3 Creating MVC Application with EntityFramework
Learning MVC Part 3 Creating MVC Application with EntityFramework
Akhil Mittal
 
ios basics
ios basicsios basics
ios basics
Muthu Sabarinathan
 
Automated Unit Testing in Silverlight for Windows Phone 7
Automated Unit Testing in Silverlight for Windows Phone 7Automated Unit Testing in Silverlight for Windows Phone 7
Automated Unit Testing in Silverlight for Windows Phone 7
Jacinto Limjap
 
Jinal desai .net
Jinal desai .netJinal desai .net
Jinal desai .net
rohitkumar1987in
 
Cross platform Xamarin Apps With MVVM
Cross platform Xamarin Apps With MVVMCross platform Xamarin Apps With MVVM
Cross platform Xamarin Apps With MVVM
Jim Bennett
 
MVC Architecture: A Detailed Insight to the Modern Web Applications Developme...
MVC Architecture: A Detailed Insight to the Modern Web Applications Developme...MVC Architecture: A Detailed Insight to the Modern Web Applications Developme...
MVC Architecture: A Detailed Insight to the Modern Web Applications Developme...
CrimsonpublishersPRSP
 
Sybase sup hybrid_web_container_article_wp
Sybase sup hybrid_web_container_article_wpSybase sup hybrid_web_container_article_wp
Sybase sup hybrid_web_container_article_wp
Prabhakar Manthena
 

Similar to Building xamarin.forms apps with prism and mvvm (20)

.NET,ASP .NET, Angular Js,LinQ
.NET,ASP .NET, Angular Js,LinQ.NET,ASP .NET, Angular Js,LinQ
.NET,ASP .NET, Angular Js,LinQ
 
Code Camp 06 Model View Presenter Architecture
Code Camp 06   Model View Presenter ArchitectureCode Camp 06   Model View Presenter Architecture
Code Camp 06 Model View Presenter Architecture
 
Stephen Kennedy Silverlight 3 Deep Dive
Stephen Kennedy Silverlight 3 Deep DiveStephen Kennedy Silverlight 3 Deep Dive
Stephen Kennedy Silverlight 3 Deep Dive
 
Overview of CSharp MVC3 and EF4
Overview of CSharp MVC3 and EF4Overview of CSharp MVC3 and EF4
Overview of CSharp MVC3 and EF4
 
No brainer
No brainerNo brainer
No brainer
 
Metamorphosis from Forms to Java: A technical lead's perspective, part II
Metamorphosis from Forms to Java:  A technical lead's perspective, part IIMetamorphosis from Forms to Java:  A technical lead's perspective, part II
Metamorphosis from Forms to Java: A technical lead's perspective, part II
 
Spring (1)
Spring (1)Spring (1)
Spring (1)
 
Diving Into Xamarin.Forms
Diving Into Xamarin.Forms Diving Into Xamarin.Forms
Diving Into Xamarin.Forms
 
Xamarin Development
Xamarin DevelopmentXamarin Development
Xamarin Development
 
Modern ASP.NET Webskills
Modern ASP.NET WebskillsModern ASP.NET Webskills
Modern ASP.NET Webskills
 
Building richwebapplicationsusingasp
Building richwebapplicationsusingaspBuilding richwebapplicationsusingasp
Building richwebapplicationsusingasp
 
Real world apps with Xamarin and MVVM
Real world apps with Xamarin and MVVMReal world apps with Xamarin and MVVM
Real world apps with Xamarin and MVVM
 
Javascript from beginning to modern
Javascript from beginning to modernJavascript from beginning to modern
Javascript from beginning to modern
 
Learning MVC Part 3 Creating MVC Application with EntityFramework
Learning MVC Part 3 Creating MVC Application with EntityFrameworkLearning MVC Part 3 Creating MVC Application with EntityFramework
Learning MVC Part 3 Creating MVC Application with EntityFramework
 
ios basics
ios basicsios basics
ios basics
 
Automated Unit Testing in Silverlight for Windows Phone 7
Automated Unit Testing in Silverlight for Windows Phone 7Automated Unit Testing in Silverlight for Windows Phone 7
Automated Unit Testing in Silverlight for Windows Phone 7
 
Jinal desai .net
Jinal desai .netJinal desai .net
Jinal desai .net
 
Cross platform Xamarin Apps With MVVM
Cross platform Xamarin Apps With MVVMCross platform Xamarin Apps With MVVM
Cross platform Xamarin Apps With MVVM
 
MVC Architecture: A Detailed Insight to the Modern Web Applications Developme...
MVC Architecture: A Detailed Insight to the Modern Web Applications Developme...MVC Architecture: A Detailed Insight to the Modern Web Applications Developme...
MVC Architecture: A Detailed Insight to the Modern Web Applications Developme...
 
Sybase sup hybrid_web_container_article_wp
Sybase sup hybrid_web_container_article_wpSybase sup hybrid_web_container_article_wp
Sybase sup hybrid_web_container_article_wp
 

More from Mike Melusky

Container Orchestration for .NET Developers
Container Orchestration for .NET DevelopersContainer Orchestration for .NET Developers
Container Orchestration for .NET Developers
Mike Melusky
 
Containerize all the things!
Containerize all the things!Containerize all the things!
Containerize all the things!
Mike Melusky
 
Building a Google Cloud Firestore API with dotnet core
Building a Google Cloud Firestore API with dotnet coreBuilding a Google Cloud Firestore API with dotnet core
Building a Google Cloud Firestore API with dotnet core
Mike Melusky
 
Effective .NET Core Unit Testing with SQLite and Dapper
Effective .NET Core Unit Testing with SQLite and DapperEffective .NET Core Unit Testing with SQLite and Dapper
Effective .NET Core Unit Testing with SQLite and Dapper
Mike Melusky
 
Effective .NET Core Unit Testing with SQLite and Dapper
Effective .NET Core Unit Testing with SQLite and DapperEffective .NET Core Unit Testing with SQLite and Dapper
Effective .NET Core Unit Testing with SQLite and Dapper
Mike Melusky
 
Reactive Web Development with Spring Boot 2
Reactive Web Development with Spring Boot 2Reactive Web Development with Spring Boot 2
Reactive Web Development with Spring Boot 2
Mike Melusky
 
Introduction to react native with redux
Introduction to react native with reduxIntroduction to react native with redux
Introduction to react native with redux
Mike Melusky
 
Xamarin.Forms Bootcamp
Xamarin.Forms BootcampXamarin.Forms Bootcamp
Xamarin.Forms Bootcamp
Mike Melusky
 
An evening with React Native
An evening with React NativeAn evening with React Native
An evening with React Native
Mike Melusky
 
Progressive Web Apps and React
Progressive Web Apps and ReactProgressive Web Apps and React
Progressive Web Apps and React
Mike Melusky
 
Into to Docker (Central PA Java User Group - 8/14/2017)
Into to Docker (Central PA Java User Group - 8/14/2017)Into to Docker (Central PA Java User Group - 8/14/2017)
Into to Docker (Central PA Java User Group - 8/14/2017)
Mike Melusky
 
An afternoon with angular 2
An afternoon with angular 2An afternoon with angular 2
An afternoon with angular 2
Mike Melusky
 
An evening with Angular 2
An evening with Angular 2An evening with Angular 2
An evening with Angular 2
Mike Melusky
 
Securing your azure web app with asp.net core data protection
Securing your azure web app with asp.net core data protectionSecuring your azure web app with asp.net core data protection
Securing your azure web app with asp.net core data protection
Mike Melusky
 
Ember.js and .NET Integration
Ember.js and .NET IntegrationEmber.js and .NET Integration
Ember.js and .NET Integration
Mike Melusky
 
Building Native “apps” with Visual Studio 2015
Building Native “apps” with Visual Studio 2015Building Native “apps” with Visual Studio 2015
Building Native “apps” with Visual Studio 2015
Mike Melusky
 
Emberjs and ASP.NET
Emberjs and ASP.NETEmberjs and ASP.NET
Emberjs and ASP.NET
Mike Melusky
 
Fun with lambda expressions
Fun with lambda expressionsFun with lambda expressions
Fun with lambda expressions
Mike Melusky
 
An evening with querydsl
An evening with querydslAn evening with querydsl
An evening with querydsl
Mike Melusky
 
Fun with lambda expressions
Fun with lambda expressionsFun with lambda expressions
Fun with lambda expressions
Mike Melusky
 

More from Mike Melusky (20)

Container Orchestration for .NET Developers
Container Orchestration for .NET DevelopersContainer Orchestration for .NET Developers
Container Orchestration for .NET Developers
 
Containerize all the things!
Containerize all the things!Containerize all the things!
Containerize all the things!
 
Building a Google Cloud Firestore API with dotnet core
Building a Google Cloud Firestore API with dotnet coreBuilding a Google Cloud Firestore API with dotnet core
Building a Google Cloud Firestore API with dotnet core
 
Effective .NET Core Unit Testing with SQLite and Dapper
Effective .NET Core Unit Testing with SQLite and DapperEffective .NET Core Unit Testing with SQLite and Dapper
Effective .NET Core Unit Testing with SQLite and Dapper
 
Effective .NET Core Unit Testing with SQLite and Dapper
Effective .NET Core Unit Testing with SQLite and DapperEffective .NET Core Unit Testing with SQLite and Dapper
Effective .NET Core Unit Testing with SQLite and Dapper
 
Reactive Web Development with Spring Boot 2
Reactive Web Development with Spring Boot 2Reactive Web Development with Spring Boot 2
Reactive Web Development with Spring Boot 2
 
Introduction to react native with redux
Introduction to react native with reduxIntroduction to react native with redux
Introduction to react native with redux
 
Xamarin.Forms Bootcamp
Xamarin.Forms BootcampXamarin.Forms Bootcamp
Xamarin.Forms Bootcamp
 
An evening with React Native
An evening with React NativeAn evening with React Native
An evening with React Native
 
Progressive Web Apps and React
Progressive Web Apps and ReactProgressive Web Apps and React
Progressive Web Apps and React
 
Into to Docker (Central PA Java User Group - 8/14/2017)
Into to Docker (Central PA Java User Group - 8/14/2017)Into to Docker (Central PA Java User Group - 8/14/2017)
Into to Docker (Central PA Java User Group - 8/14/2017)
 
An afternoon with angular 2
An afternoon with angular 2An afternoon with angular 2
An afternoon with angular 2
 
An evening with Angular 2
An evening with Angular 2An evening with Angular 2
An evening with Angular 2
 
Securing your azure web app with asp.net core data protection
Securing your azure web app with asp.net core data protectionSecuring your azure web app with asp.net core data protection
Securing your azure web app with asp.net core data protection
 
Ember.js and .NET Integration
Ember.js and .NET IntegrationEmber.js and .NET Integration
Ember.js and .NET Integration
 
Building Native “apps” with Visual Studio 2015
Building Native “apps” with Visual Studio 2015Building Native “apps” with Visual Studio 2015
Building Native “apps” with Visual Studio 2015
 
Emberjs and ASP.NET
Emberjs and ASP.NETEmberjs and ASP.NET
Emberjs and ASP.NET
 
Fun with lambda expressions
Fun with lambda expressionsFun with lambda expressions
Fun with lambda expressions
 
An evening with querydsl
An evening with querydslAn evening with querydsl
An evening with querydsl
 
Fun with lambda expressions
Fun with lambda expressionsFun with lambda expressions
Fun with lambda expressions
 

Recently uploaded

Infrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI modelsInfrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI models
Zilliz
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Speck&Tech
 
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
DianaGray10
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
SOFTTECHHUB
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
Neo4j
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
Uni Systems S.M.S.A.
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
kumardaparthi1024
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
tolgahangng
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
Aftab Hussain
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
KAMESHS29
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems S.M.S.A.
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
Neo4j
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
Safe Software
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
Mariano Tinti
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
Zilliz
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
Claudio Di Ciccio
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
Neo4j
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
Adtran
 

Recently uploaded (20)

Infrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI modelsInfrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI models
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
 
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
 

Building xamarin.forms apps with prism and mvvm

  • 1. Building Xamarin.Forms apps with Prism and MVVM MICHAEL MELUSKY - @MRJAVASCRIPT CENTRAL PENN .NET – APRIL 17 2018
  • 2. About Speaker  Michael Melusky –  Software Developer for Audacious Inquiry in Baltimore, MD  Instructor at Penn State Harrisburg / Franklin and Marshall College
  • 4. Why this topic?  I spoke here on React Native back in January…  Also manage a Xamarin.Forms app on the side  Was developed w/o best practices and wanted to rewrite it using approaches recommended by Microsoft
  • 5. Topics  Intro to Xamarin.Forms  Create a Xamarin.Forms app using Visual Studio  Discussion on .NET Standard  Go over core concepts:  XAML  Navigation  MVVM (Model-View-ViewModel)  Introduce Prism (with Unity for the DI container)
  • 6. Additional Topics (Time Permitting)  Pick and choose! (demo the app built for Philly.NET)  SQLite integration (a “preferences” screen)  Android widgets  Facebook Connect  Splash Screens and animation  Jenkins and CI  Xamarin UI.Test
  • 8. Xamarin.Forms  A cross platform framework for building native iOS/Android/UWP apps  Acquired by Microsoft in February 2016  Product made “free” thereafter
  • 9. Building Android and iOS apps  Android:  Built using Java/Kotlin  iOS:  Built using Swift/Objective-C  Xamarin.Forms lets you build one code base (C#/XAML) to target both iOS and Android
  • 11. Who is using Xamarin.Forms?  Many are!  https://www.xamarin.com/customers  Microsoft built their new MSN News app:  https://channel9.msdn.com/Shows/XamarinShow/Building-the-New-MSN-News-App- with-Xamarin
  • 12. So how do we build a Xamarin.Forms app?  Let’s build one ourselves!  ** DEMO **
  • 14. .NET Standard (vs .NET Core)  .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)
  • 16. .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 “bird”
  • 17. XAML
  • 18. Xamarin.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
  • 20. Xamarin.Forms Controls  Broken down into four components:  Pages  Layouts  Views  Cells
  • 21. Pages
  • 23. Views
  • 24. Views
  • 25. Views
  • 26. Views
  • 34. Views that Display Collections
  • 35. Cells
  • 36. Cells
  • 37. Cells
  • 38. MVVM
  • 39. Model-View-ViewModel  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
  • 40. MVVM
  • 41. MVVM  ** Demo **  Integrate INotifyPropertyChanged
  • 42. 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
  • 44. MVVM 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
  • 46. Data Binding  Consists of two components:  A source object that provides the data  A target object which will consume and display the data
  • 48. 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.
  • 51. 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!
  • 53. 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 **
  • 54. 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
  • 56. Pick and Choose!  Xamarin.Auth and Authentication  Facebook Authentication  SQLite integration (user preferences)  Xamarin UI.Test  Jenkins and CI  Android Splash Page  Android Widgets
  • 57. Thanks for coming  Code on github  Slides on slideshare  @mrjavascript