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
A New Generation of JavaScript Controls
Agenda
• The Evolution of JavaScript
• Introduction to Wijmo 5
• Porting Silverlight to HTML5
• Walk through Wijmo Samples
• Q & A
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
1990: The Web is born
<p>
Learn about
<a href="http://en.wikipedia.org/wiki/Hypertext">
Hypertext
</a>
</p>
1995: Netscape introduces JavaScript
var d = document.getElementById('myElement');
d.innerHTML = 'Some text';
d.style.color = 'red';
2005: jQuery adds browser compatibility
$('#myElement')
.text('Some text')
.css('color', 'red');
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);
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)
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
Welcome to
Touch First, Mobile First
• Touch & Mobile from the start
• Controls optimized for all devices
• Samples optimized for all devices
• Hybrid capable
True JavaScript Controls
• Utilize ECMAScript 5
• Properties, Methods & Events
• Similar to .NET Controls
• Not jQuery UI Widgets
Fast and Lightweight
• Target modern browsers
• No compromises for legacy
• No dependencies
• SizesGrid: 75K
Chart: 100K
Gauge: 20K
Input: 40K
Flexible API
• Famous FlexGrid now in JS
• Mature (first created in 1991)
• Compatible with XAML version
• Built-in basic features
• Very extensible
First Class Angular Support
• AngularJS support from the start
• Hand written Angular Directives
• Each Directive optimized
• Samples provided in Angular
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>
…
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)
=>
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
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');
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>
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
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
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