migrating mvvm applications to html5
TRANSCRIPT
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?