![Page 1: Arquitectura e técnicas para uma app portável](https://reader035.vdocument.in/reader035/viewer/2022062711/55ced137bb61eb232c8b4751/html5/thumbnails/1.jpg)
PTXug - Xamarin Talks #2Lisbon, June 27th 2015
Architecture and techniques for a
portable app
![Page 2: Arquitectura e técnicas para uma app portável](https://reader035.vdocument.in/reader035/viewer/2022062711/55ced137bb61eb232c8b4751/html5/thumbnails/2.jpg)
Speaker
• Indie App developer (ImaginationOverflow)
• Freelancer
• Masters Student in Instituto Superior de Engenharia de Lisboa (ISEL)
C:\> ping me @dvd_pt http://blog.imaginationoverflow.com
![Page 3: Arquitectura e técnicas para uma app portável](https://reader035.vdocument.in/reader035/viewer/2022062711/55ced137bb61eb232c8b4751/html5/thumbnails/3.jpg)
Architecture
Project Management
Programming Techniques
ImaginationOverflow Apps
Agenda
![Page 4: Arquitectura e técnicas para uma app portável](https://reader035.vdocument.in/reader035/viewer/2022062711/55ced137bb61eb232c8b4751/html5/thumbnails/4.jpg)
Architecture
Model View Controller
(MVC)
Model View ViewModel
(MVVM)
![Page 5: Arquitectura e técnicas para uma app portável](https://reader035.vdocument.in/reader035/viewer/2022062711/55ced137bb61eb232c8b4751/html5/thumbnails/5.jpg)
MVC• Views call controller operations
• Controllers update the model or call its operations
• Controller notifies view• Android – callbacks, async tasks, etc• iOS – callbacks, delegates, etc
![Page 6: Arquitectura e técnicas para uma app portável](https://reader035.vdocument.in/reader035/viewer/2022062711/55ced137bb61eb232c8b4751/html5/thumbnails/6.jpg)
MVC
class View : Activity{
private SomeController _controller = ...;
public void OnButtonClicked(...){
_controller.BeginAction(()=>{
someLabel.Text = ...;});
}}
class SomeController {
private SomeModel _model = ...;
public async void BeginAction(Action callback){
await _model.DoStuff();callback();
}
}
![Page 7: Arquitectura e técnicas para uma app portável](https://reader035.vdocument.in/reader035/viewer/2022062711/55ced137bb61eb232c8b4751/html5/thumbnails/7.jpg)
MVVM• Views binds to ViewModels
• Views invoke ViewModel commands
• ViewModels update the model or invoke its operations
• ViewModels update its properties
• Views reacts to the change in binded properties and update itself
![Page 8: Arquitectura e técnicas para uma app portável](https://reader035.vdocument.in/reader035/viewer/2022062711/55ced137bb61eb232c8b4751/html5/thumbnails/8.jpg)
DemoMVVM in Action
Let’s code
![Page 9: Arquitectura e técnicas para uma app portável](https://reader035.vdocument.in/reader035/viewer/2022062711/55ced137bb61eb232c8b4751/html5/thumbnails/9.jpg)
MVC vs MVVMMVC• Controllers know their views• Ctor passage new Controller(this)• Direct parametrization controller.DoStuff(this)• Callbacks
• Is not data oriented
• Its goal is to separate concerns
![Page 10: Arquitectura e técnicas para uma app portável](https://reader035.vdocument.in/reader035/viewer/2022062711/55ced137bb61eb232c8b4751/html5/thumbnails/10.jpg)
MVC vs MVVM
MVVM• Data binding
• ViewModels don’t know the View
• ViewModels work as a View Contract• Abstracting the UI Framework
• Async by design
![Page 11: Arquitectura e técnicas para uma app portável](https://reader035.vdocument.in/reader035/viewer/2022062711/55ced137bb61eb232c8b4751/html5/thumbnails/11.jpg)
Project Management
• Shared projects
• Portable Class Libraries (PCL)
![Page 12: Arquitectura e técnicas para uma app portável](https://reader035.vdocument.in/reader035/viewer/2022062711/55ced137bb61eb232c8b4751/html5/thumbnails/12.jpg)
Shared Projects
![Page 13: Arquitectura e técnicas para uma app portável](https://reader035.vdocument.in/reader035/viewer/2022062711/55ced137bb61eb232c8b4751/html5/thumbnails/13.jpg)
Shared Projects
• Compiles inside the application project• All platform API’s are available
• Good to implement app specific functionality/contracts• Navigation• Register dependencies on DI
• Limited usage• Doesn’t generate any deliverable
• #IF madness
![Page 14: Arquitectura e técnicas para uma app portável](https://reader035.vdocument.in/reader035/viewer/2022062711/55ced137bb61eb232c8b4751/html5/thumbnails/14.jpg)
Portable Class Libraries (PCL)
Windows Phone
Android
iOS
Windows
![Page 15: Arquitectura e técnicas para uma app portável](https://reader035.vdocument.in/reader035/viewer/2022062711/55ced137bb61eb232c8b4751/html5/thumbnails/15.jpg)
Portable Class Libraries (PCL)
• “Platform independent”
• Subset of target platforms framework
• Reusable
• Available APIs can be very limited
• Almost mandatory:• Interface based programming• Dependency Injection
![Page 16: Arquitectura e técnicas para uma app portável](https://reader035.vdocument.in/reader035/viewer/2022062711/55ced137bb61eb232c8b4751/html5/thumbnails/16.jpg)
Programming Techniques
• Interface based programming
• Inversion of control (IOC)
• Dependency Injection (DI)
• Localisation
![Page 17: Arquitectura e técnicas para uma app portável](https://reader035.vdocument.in/reader035/viewer/2022062711/55ced137bb61eb232c8b4751/html5/thumbnails/17.jpg)
Interface based programming
• A contract of related operations
• Contracts can be reused
• Modular
• Loosely coupled
• Microservices
![Page 18: Arquitectura e técnicas para uma app portável](https://reader035.vdocument.in/reader035/viewer/2022062711/55ced137bb61eb232c8b4751/html5/thumbnails/18.jpg)
Interface based programming
Windows
iOS
Android
IToastNotificationService
PCL
PCL
PCL
SomeViewModel
SomeModel
uses
![Page 19: Arquitectura e técnicas para uma app portável](https://reader035.vdocument.in/reader035/viewer/2022062711/55ced137bb61eb232c8b4751/html5/thumbnails/19.jpg)
Inversion of Control
• Clearly stating the component dependencies• Via ctor, properties, etc
• Dependencies lifecycle is no longer an issue
• Using interface based programming is a plus
• Focus only on the behavior
![Page 20: Arquitectura e técnicas para uma app portável](https://reader035.vdocument.in/reader035/viewer/2022062711/55ced137bb61eb232c8b4751/html5/thumbnails/20.jpg)
Inversion of Controlpublic class SomeViewModel{
private IToastNotificationService _toastNotficationServicepublic SomeViewModel(IToastNotificationService toastNotficationService){
_toastNotficationService = toastNotficationService;}
private ICommand _showToastCommandpublic ICommand ShowToastCommand{
get{
return _showToastCommand??_showToastCommand =new RelayCommand(()=>{
_toastNotficationService.ShowToast("Toasttext");})
}}
}
public interface IToastNotificationService{
string ShowToast(string toast);}
![Page 21: Arquitectura e técnicas para uma app portável](https://reader035.vdocument.in/reader035/viewer/2022062711/55ced137bb61eb232c8b4751/html5/thumbnails/21.jpg)
Dependency Injection
• Container of initializers
• Inject to target components its dependencies.
• Manage injected objects lifecycle• Creation • Disposal
![Page 22: Arquitectura e técnicas para uma app portável](https://reader035.vdocument.in/reader035/viewer/2022062711/55ced137bb61eb232c8b4751/html5/thumbnails/22.jpg)
DemoProgramming techniques on
Android and Windows
Let’s code
![Page 23: Arquitectura e técnicas para uma app portável](https://reader035.vdocument.in/reader035/viewer/2022062711/55ced137bb61eb232c8b4751/html5/thumbnails/23.jpg)
LocalisationResx Files• Centralized string resource manager
• Static access AppResources.SomeString
• Can be on PCLs
• Fully supported by Xamarin
• Not compatible with Android and iOS string resources• Use t4 templates
![Page 24: Arquitectura e técnicas para uma app portável](https://reader035.vdocument.in/reader035/viewer/2022062711/55ced137bb61eb232c8b4751/html5/thumbnails/24.jpg)
ImaginationOverflow Apps
![Page 25: Arquitectura e técnicas para uma app portável](https://reader035.vdocument.in/reader035/viewer/2022062711/55ced137bb61eb232c8b4751/html5/thumbnails/25.jpg)
ImaginationOverflow Apps
![Page 26: Arquitectura e técnicas para uma app portável](https://reader035.vdocument.in/reader035/viewer/2022062711/55ced137bb61eb232c8b4751/html5/thumbnails/26.jpg)
Wrap Up• MVVM is the pattern for Portable apps
• Shared projects for app related
• PCLs for generic
• Interface based programming, IOC and DI always
• Make your code as much portable as it can be
• Be aware of the Return of Investment (ROI)
![Page 27: Arquitectura e técnicas para uma app portável](https://reader035.vdocument.in/reader035/viewer/2022062711/55ced137bb61eb232c8b4751/html5/thumbnails/27.jpg)
Q & A
![Page 28: Arquitectura e técnicas para uma app portável](https://reader035.vdocument.in/reader035/viewer/2022062711/55ced137bb61eb232c8b4751/html5/thumbnails/28.jpg)
Sponsors
![Page 29: Arquitectura e técnicas para uma app portável](https://reader035.vdocument.in/reader035/viewer/2022062711/55ced137bb61eb232c8b4751/html5/thumbnails/29.jpg)
THANK YOU !C:\> ping me @dvd_pt