welcome to wijmo 5
DESCRIPTION
Please join our live launch event for Wijmo 5, our brand new generation of JavaScript Controls! With the launch of Wijmo 5 we’ll introduce a new HTML5/JavaScript product that takes full advantage of all the latest and greatest web technologies without making compromises to support legacy browsers. This webcast will focus on the evolution of JavaScript controls, from jQueryUI-based widgets to Wijmo 5.TRANSCRIPT
![Page 1: Welcome to Wijmo 5](https://reader031.vdocument.in/reader031/viewer/2022020207/5598e6151a28abb3448b459c/html5/thumbnails/1.jpg)
A New Generation of JavaScript Controls
![Page 2: Welcome to Wijmo 5](https://reader031.vdocument.in/reader031/viewer/2022020207/5598e6151a28abb3448b459c/html5/thumbnails/2.jpg)
Agenda
• The Evolution of JavaScript
• Introduction to Wijmo 5
• Porting Silverlight to HTML5
• Walk through Wijmo Samples
• Q & A
![Page 3: Welcome to Wijmo 5](https://reader031.vdocument.in/reader031/viewer/2022020207/5598e6151a28abb3448b459c/html5/thumbnails/3.jpg)
ComponentOne iPad, Wijmo 1 SpreadJS Wijmo 5
History/Context
1995 2000 2005 2010 20151990
Internet JavaScript EcmaScript jQuery jQueryUI
EcmaScript5
VB 1/VBX ActiveX .NET WPF Silverlight
IE9 TS, HTML5, ng
jQuery 2, ng 1.3
AJAX
![Page 4: Welcome to Wijmo 5](https://reader031.vdocument.in/reader031/viewer/2022020207/5598e6151a28abb3448b459c/html5/thumbnails/4.jpg)
1990: The Web is born
<p>
Learn about
<a href="http://en.wikipedia.org/wiki/Hypertext">
Hypertext
</a>
</p>
![Page 5: Welcome to Wijmo 5](https://reader031.vdocument.in/reader031/viewer/2022020207/5598e6151a28abb3448b459c/html5/thumbnails/5.jpg)
1995: Netscape introduces JavaScript
var d = document.getElementById('myElement');
d.innerHTML = 'Some text';
d.style.color = 'red';
![Page 6: Welcome to Wijmo 5](https://reader031.vdocument.in/reader031/viewer/2022020207/5598e6151a28abb3448b459c/html5/thumbnails/6.jpg)
2005: jQuery adds browser compatibility
$('#myElement')
.text('Some text')
.css('color', 'red');
![Page 7: Welcome to Wijmo 5](https://reader031.vdocument.in/reader031/viewer/2022020207/5598e6151a28abb3448b459c/html5/thumbnails/7.jpg)
2008: jQueryUI adds jQuery 'widgets'
// Turn element into a widget (nice!)
$('#myWidget').autocomplete({
source: ['option1', 'option2', 'option3']
});
// Toggle 'allowEditing' property (not nice!)
var ae = $('#theGrid').wijgrid('option', 'allowEditing');
$('#theGrid').wijgrid('option', 'allowEditing', !ae);
![Page 8: Welcome to Wijmo 5](https://reader031.vdocument.in/reader031/viewer/2022020207/5598e6151a28abb3448b459c/html5/thumbnails/8.jpg)
2012/4: HTML5, EcmaScript5, TypeScript, AngularJS
• Real standard (browser compatibility at last!)
• Capable language (properties with getters/setters)
• OOP (TypeScript turns EcmaScript6 into EcmaScript 5)
• MVVM (AngularJS and other frameworks)
• Components (AngularJS and other frameworks)
![Page 9: Welcome to Wijmo 5](https://reader031.vdocument.in/reader031/viewer/2022020207/5598e6151a28abb3448b459c/html5/thumbnails/9.jpg)
Wijmo 5: A new generation of JS Controls
• Focus on modern browsers, mobile devices, and touch
• Single library for desktop and mobile
• Controls with properties, methods, and events
• Written in TypeScript, with modules, classes, OOP concepts
• Ported missing elements from .NET (Events, CollectionView)
Evolution Icon derived from Jakob Vogel of the Noun Project
![Page 10: Welcome to Wijmo 5](https://reader031.vdocument.in/reader031/viewer/2022020207/5598e6151a28abb3448b459c/html5/thumbnails/10.jpg)
Welcome to
![Page 11: Welcome to Wijmo 5](https://reader031.vdocument.in/reader031/viewer/2022020207/5598e6151a28abb3448b459c/html5/thumbnails/11.jpg)
Touch First, Mobile First
• Touch & Mobile from the start
• Controls optimized for all devices
• Samples optimized for all devices
• Hybrid capable
![Page 12: Welcome to Wijmo 5](https://reader031.vdocument.in/reader031/viewer/2022020207/5598e6151a28abb3448b459c/html5/thumbnails/12.jpg)
True JavaScript Controls
• Utilize ECMAScript 5
• Properties, Methods & Events
• Similar to .NET Controls
• Not jQuery UI Widgets
![Page 13: Welcome to Wijmo 5](https://reader031.vdocument.in/reader031/viewer/2022020207/5598e6151a28abb3448b459c/html5/thumbnails/13.jpg)
Fast and Lightweight
• Target modern browsers
• No compromises for legacy
• No dependencies
• SizesGrid: 75K
Chart: 100K
Gauge: 20K
Input: 40K
![Page 14: Welcome to Wijmo 5](https://reader031.vdocument.in/reader031/viewer/2022020207/5598e6151a28abb3448b459c/html5/thumbnails/14.jpg)
Flexible API
• Famous FlexGrid now in JS
• Mature (first created in 1991)
• Compatible with XAML version
• Built-in basic features
• Very extensible
![Page 15: Welcome to Wijmo 5](https://reader031.vdocument.in/reader031/viewer/2022020207/5598e6151a28abb3448b459c/html5/thumbnails/15.jpg)
First Class Angular Support
• AngularJS support from the start
• Hand written Angular Directives
• Each Directive optimized
• Samples provided in Angular
![Page 16: Welcome to Wijmo 5](https://reader031.vdocument.in/reader031/viewer/2022020207/5598e6151a28abb3448b459c/html5/thumbnails/16.jpg)
Wijmo 5: Architecture
Corewijmo.js/css
FlexGridwijmo.grid.js
FlexChartwijmo.chart.js
Gaugewijmo.gauge.js
Inputwijmo.input.js
More to come...
Interopwijmo.angular.js
Event
CollectionView
Control
Globalize
Styles
Directives
<wj-flex-grid>
<wj-flex-grid-column>
…
![Page 17: Welcome to Wijmo 5](https://reader031.vdocument.in/reader031/viewer/2022020207/5598e6151a28abb3448b459c/html5/thumbnails/17.jpg)
Porting Apps from Silverlight
• Migration is important for our Silverlight customers
• Microsoft dropped Silverlight, offered no options
• Wijmo 5 makes migration of MVVM apps relatively easy:1. Port the ViewModel (using CollectionView)
2. Port the View (using Wijmo 5 controls and directives)
=>
![Page 18: Welcome to Wijmo 5](https://reader031.vdocument.in/reader031/viewer/2022020207/5598e6151a28abb3448b459c/html5/thumbnails/18.jpg)
A quick example: DataServicesQuickStart
• A classic Silverlight sample done by Microsoft
• Loads data with Silverlight Data Services
• Populates CollectionView objects
• Handles selection and hierarchical data (cst > ord > det)
• Binds to controls (ComboBox, InputNumber, InputDate, DataGrid)
• Show Silverlight Version
![Page 19: Welcome to Wijmo 5](https://reader031.vdocument.in/reader031/viewer/2022020207/5598e6151a28abb3448b459c/html5/thumbnails/19.jpg)
Porting the ViewModel
• CollectionView objects for Customers, Orders, Details
• Load same data using Ajax
• Similar to the Silverlight version, but simpler
Silverlight
// create ICollectionViewvar customers =new DataServiceCollection<Customer>();
// load data asynchronouslyvar context = new NWEntities(serviceUri);var query = context.Customers;customers.LoadAsync(query);
HTML5 (Wijmo)
// create ICollectionView$scope.customers =new wijmo.collections.CollectionView();
// load data asynchronouslyloadData(serviceUri, $scope.customers,'Customers');
![Page 20: Welcome to Wijmo 5](https://reader031.vdocument.in/reader031/viewer/2022020207/5598e6151a28abb3448b459c/html5/thumbnails/20.jpg)
Porting the View
• Built-in directives for all controls
• Similar to the Silverlight version, but simpler
Silverlight
<ComboBoxItemsSource="{Binding Source={StaticResource customers}}"DisplayMemberPath="CompanyName">
</ComboBox><sdk:DataGridItemsSource="{Binding Source={StaticResource details}}"><sdk:DataGrid.Columns><sdk:DataGridTextColumnBinding="{Binding Path=ProductID}“Header="Product ID“Width="80*" />
HTML5 (Wijmo)
<wj-combo-boxitems-source="customers"display-member-path="CompanyName">
</wj-combo-box><wj-flex-griditems-source="details"><wj-flex-grid-columnbinding="ProductID"header="ProductID"width="80*">
</wj-flex-grid-column>
![Page 21: Welcome to Wijmo 5](https://reader031.vdocument.in/reader031/viewer/2022020207/5598e6151a28abb3448b459c/html5/thumbnails/21.jpg)
The Result
• Porting took about two hours
• Runs on desktop and mobile devices
• Adaptive layout renders well on small screens
• Pure MVVM (the original sample used event handlers)
• About 15% the size of the original sample (160k vs over 1meg)
• Show HTML5 Version
![Page 22: Welcome to Wijmo 5](https://reader031.vdocument.in/reader031/viewer/2022020207/5598e6151a28abb3448b459c/html5/thumbnails/22.jpg)
Some More Samples
• Wijmo 5 is *not* just for porting Silverlight apps
• Integrates naturally with other JavaScript tools/libraries(AngularJS, Bootstrap, Ionic, FireBase, BreezeJS, others)
• Explorer, Expense Tracker, Finance, Benchmark, FlexGrid 101
![Page 23: Welcome to Wijmo 5](https://reader031.vdocument.in/reader031/viewer/2022020207/5598e6151a28abb3448b459c/html5/thumbnails/23.jpg)
Conclusion
• Not just a new set of controls; it's a new generation
• Faster/smaller/less opinionated
• Easier to learn and to use
• Leverages over 20 years of control development experience