Learn to port desktop applications to HTML5 from an experienced web developer. We'll help you minimize the cost of learning new paradigms when you're migrating from MVVM, .NET and XAML to web. You'll leave this 60-minute session understanding how to create nearly-identical XAML and HTML5 applications in a smooth transition!

1. Chris Bannon, Product Manager, Wijmo
Migrating MVVM Applications to HTML5

2. about: me
Chris Bannon
Product Manager of Wijmo
We sell JavaScript UI Controls:
 Grids
 Charts
 Input, etc.

3. about: webinar
 Share our approach on migrating to HTML5
o General guidelines
o Tools
 Show some code!
 Discuss Results

4. Real World Example

5. Why Use HTML5?
“Virtually every computing device supports HTML
and JavaScript.”

6. How Can You Migrate to HTML5?
Use a familiar development pattern: MVVM
o Widely used by Silverlight/WPF/WinRT developers
Use a framework made for MVVM: AngularJS
o Use AngularJS for MVVM in JavaScript
o Use UI controls with MVVM support for quicker development
Use a familiar programming language: TypeScript
o Similar to C#
o Strongly-typed
o Compiles to JavaScript

7. What is MVVM?
 Model
o Data for an application
o Example: Web service or JSON
 ViewModel
o Pure code representation of UI Model
o Example: TypeScript (JS) Class
 View
o Visible and Interactive UI
o Example: HTML

8. AngularJS
 MVVM Framework
 Similar to .NET/XAML in JavaScript
 Two-way binding
 Components

9. TypeScript
 Language from Microsoft
 Created by Anders Hejlsberg, the creator of C#
 Object-oriented with Classes etc.
 Compiles to JavaScript (ES5 or ES6)
 Offers C#-like syntax and features
o Inheritance
o Type safety, design-time error checking
o Based on ECMAScript standards (ES 6)
 Adopted by Google in Angular 2

10. Porting the Model
Use the same Model/Datasource
o Most HTML5 apps can use the same services
o The JSON coming from services can serve as model

11. Porting the ViewModel
 CollectionView objects for Customers, Orders, Details
 Load same data using Ajax
 Similar to the Silverlight version, but simpler
C# (Silverlight)
// create ICollectionView
var customers =
new DataServiceCollection<Customer>();
// load data asynchronously
var context = new NWEntities(serviceUri);
var query = context.Customers;
customers.LoadAsync(query);
JavaScript (Wijmo)
// create ICollectionView
$scope.customers =
new wijmo.collections.CollectionView();
// load data asynchronously
loadData(serviceUri, $scope.customers,
'Customers');

12. HTML5 (Wijmo)
<wj-combo-box
items-source="customers"
display-member-path="CompanyName">
</wj-combo-box>
<wj-flex-grid
items-source="details">
<wj-flex-grid-column
binding="ProductID"
header="ProductID"
width="80*">
</wj-flex-grid-column>
Porting the View
 Built-in directives for all controls
 Similar to the Silverlight version, but simpler
XAML (Silverlight)
<ComboBox
ItemsSource="{Binding Source={StaticResource customers}}"
DisplayMemberPath="CompanyName">
</ComboBox>
<sdk:DataGrid
ItemsSource="{Binding Source={StaticResource details}}">
<sdk:DataGrid.Columns>
<sdk:DataGridTextColumn
Binding="{Binding Path=ProductID}“
Header="Product ID“
Width="80*" />

13. Code

14. The Result
 Porting took about two hours
 Runs on desktop and mobile devices
 About 15% the size of the original sample (160k vs over 1meg)
 Responsive layout renders well on small screens

15. The Benefits of Using MVVM

16. Shorter Development Cycles
 MVVM separates development clearly between Data, Code and UI
 Each layer can be developed in parallel and individually
 Minimizes turnaround time

17. Improved Reliability & Easier Maintenance
 ViewModels are testable
 ViewModels easily integrate with Unit Tests
 Unit Tests become assets to the project during the lifecycle of the application
 Maintenance made easier with automated tests

18. Improved Quality
 Less overlap between developers and designers
 Each can focus on their specialty and deliver higher quality
 Both can work simultaneously

19. Flexibility
 Loose coupling between Views and ViewModels
 Multiple Views can use a single ViewModel
 Easily make Mobile, Desktop or other custom Views against a single ViewModel

20. Thanks!
 White Paper: Migrating from XAML to HTML 5 with Wijmo
http://wijmo.com/migrating-from-xaml-to-html5-with-wijmo/
 Read more about Wijmo’s HTML5/JavaScript controls at http://www.wijmo.com
 Questions?