Migrating MVVM Applications to HTML5

Migrating MVVM Applications to HTML5

• 1.
  Chris Bannon, ProductManager, Wijmo Migrating MVVM Applications to HTML5
• 2.
  about: me Chris Bannon ProductManager of Wijmo We sell JavaScript UI Controls:  Grids  Charts  Input, etc.
• 3.
  about: webinar  Shareour approach on migrating to HTML5 o General guidelines o Tools  Show some code!  Discuss Results
• 4.
  Real World Example
• 5.
  Why Use HTML5? “Virtuallyevery computing device supports HTML and JavaScript.”
• 6.
  How Can YouMigrate 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 fromMicrosoft  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 Usethe 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 theView  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  Portingtook 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 ofUsing 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  Lessoverlap between developers and designers  Each can focus on their specialty and deliver higher quality  Both can work simultaneously
• 19.
  Flexibility  Loose couplingbetween 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?