migrating mvvm applications to html5
TRANSCRIPT
![Page 1: Migrating MVVM Applications to HTML5](https://reader033.vdocument.in/reader033/viewer/2022051521/587a94321a28ab09758b4631/html5/thumbnails/1.jpg)
Chris Bannon, Product Manager, Wijmo
Migrating MVVM Applications to HTML5
![Page 2: Migrating MVVM Applications to HTML5](https://reader033.vdocument.in/reader033/viewer/2022051521/587a94321a28ab09758b4631/html5/thumbnails/2.jpg)
about: meChris Bannon
Product Manager of Wijmo
We sell JavaScript UI Controls: Grids Charts Input, etc.
![Page 3: Migrating MVVM Applications to HTML5](https://reader033.vdocument.in/reader033/viewer/2022051521/587a94321a28ab09758b4631/html5/thumbnails/3.jpg)
about: webinar Share our approach on migrating to HTML5
o General guidelineso Tools
Show some code! Discuss Results
![Page 4: Migrating MVVM Applications to HTML5](https://reader033.vdocument.in/reader033/viewer/2022051521/587a94321a28ab09758b4631/html5/thumbnails/4.jpg)
Real World Example
![Page 5: Migrating MVVM Applications to HTML5](https://reader033.vdocument.in/reader033/viewer/2022051521/587a94321a28ab09758b4631/html5/thumbnails/5.jpg)
Why Use HTML5?
“Virtually every computing device supports HTML and JavaScript.”
![Page 6: Migrating MVVM Applications to HTML5](https://reader033.vdocument.in/reader033/viewer/2022051521/587a94321a28ab09758b4631/html5/thumbnails/6.jpg)
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
![Page 7: Migrating MVVM Applications to HTML5](https://reader033.vdocument.in/reader033/viewer/2022051521/587a94321a28ab09758b4631/html5/thumbnails/7.jpg)
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
![Page 8: Migrating MVVM Applications to HTML5](https://reader033.vdocument.in/reader033/viewer/2022051521/587a94321a28ab09758b4631/html5/thumbnails/8.jpg)
AngularJS
MVVM Framework Similar to .NET/XAML in JavaScript Two-way binding Components
![Page 9: Migrating MVVM Applications to HTML5](https://reader033.vdocument.in/reader033/viewer/2022051521/587a94321a28ab09758b4631/html5/thumbnails/9.jpg)
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
![Page 10: Migrating MVVM Applications to HTML5](https://reader033.vdocument.in/reader033/viewer/2022051521/587a94321a28ab09758b4631/html5/thumbnails/10.jpg)
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
![Page 11: Migrating MVVM Applications to HTML5](https://reader033.vdocument.in/reader033/viewer/2022051521/587a94321a28ab09758b4631/html5/thumbnails/11.jpg)
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');
![Page 12: Migrating MVVM Applications to HTML5](https://reader033.vdocument.in/reader033/viewer/2022051521/587a94321a28ab09758b4631/html5/thumbnails/12.jpg)
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*" />
![Page 13: Migrating MVVM Applications to HTML5](https://reader033.vdocument.in/reader033/viewer/2022051521/587a94321a28ab09758b4631/html5/thumbnails/13.jpg)
Code
![Page 14: Migrating MVVM Applications to HTML5](https://reader033.vdocument.in/reader033/viewer/2022051521/587a94321a28ab09758b4631/html5/thumbnails/14.jpg)
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
![Page 15: Migrating MVVM Applications to HTML5](https://reader033.vdocument.in/reader033/viewer/2022051521/587a94321a28ab09758b4631/html5/thumbnails/15.jpg)
The Benefits of Using MVVM
![Page 16: Migrating MVVM Applications to HTML5](https://reader033.vdocument.in/reader033/viewer/2022051521/587a94321a28ab09758b4631/html5/thumbnails/16.jpg)
Shorter Development Cycles MVVM separates development clearly between Data, Code and UI Each layer can be developed in parallel and individually Minimizes turnaround time
![Page 17: Migrating MVVM Applications to HTML5](https://reader033.vdocument.in/reader033/viewer/2022051521/587a94321a28ab09758b4631/html5/thumbnails/17.jpg)
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
![Page 18: Migrating MVVM Applications to HTML5](https://reader033.vdocument.in/reader033/viewer/2022051521/587a94321a28ab09758b4631/html5/thumbnails/18.jpg)
Improved Quality Less overlap between developers and designers Each can focus on their specialty and deliver higher quality Both can work simultaneously
![Page 19: Migrating MVVM Applications to HTML5](https://reader033.vdocument.in/reader033/viewer/2022051521/587a94321a28ab09758b4631/html5/thumbnails/19.jpg)
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
![Page 20: Migrating MVVM Applications to HTML5](https://reader033.vdocument.in/reader033/viewer/2022051521/587a94321a28ab09758b4631/html5/thumbnails/20.jpg)
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?