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

Thank You!Learn more about Wijmo 5 at http://wijmo.com/5

Q & A