Chris Bannon, Product Manager, Wijmo

Migrating MVVM Applications to HTML5

about: meChris Bannon

Product Manager of Wijmo

We sell JavaScript UI Controls: Grids Charts Input, etc.

about: webinar Share our approach on migrating to HTML5

o General guidelineso Tools

Show some code! Discuss Results

Real World Example

Why Use HTML5?

“Virtually every computing device supports HTML and JavaScript.”

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: AngularJSo Use AngularJS for MVVM in JavaScripto Use UI controls with MVVM support for quicker development

Use a familiar programming language: TypeScripto Similar to C#o Strongly-typedo Compiles to JavaScript

What is MVVM? Model

o Data for an applicationo Example: Web service or JSON

ViewModelo Pure code representation of UI Modelo Example: TypeScript (JS) Class

Viewo Visible and Interactive UIo Example: HTML

AngularJS

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

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 Inheritanceo Type safety, design-time error checkingo Based on ECMAScript standards (ES 6)

Adopted by Google in Angular 2

Porting the ModelUse the same Model/Datasource

o Most HTML5 apps can use the same serviceso The JSON coming from services can serve as model

Porting the ViewModel CollectionView objects for Customers, Orders, Details Load same data using Ajax Similar to the Silverlight version, but simpler

C# (Silverlight)// create ICollectionViewvar customers = new DataServiceCollection<Customer>();

// load data asynchronouslyvar context = new NWEntities(serviceUri);var query = context.Customers;customers.LoadAsync(query);

JavaScript (Wijmo)// create ICollectionView$scope.customers = new wijmo.collections.CollectionView();

// load data asynchronouslyloadData(serviceUri, $scope.customers, 'Customers');

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*" />

Code

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

The Benefits of Using MVVM

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

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

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

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

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?