Downloaded 15 times
![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);](https://image.slidesharecdn.com/welcometowijmo5-141008091052-conversion-gate02/85/Welcome-to-Wijmo-5-7-320.jpg)
Uploaded byChris Bannon
Welcome to Wijmo 5
The document discusses the evolution of JavaScript and introduces Wijmo 5, a new generation of JavaScript controls optimized for modern browsers and mobile devices. It outlines the migration process from Silverlight to HTML5 using Wijmo 5 controls, emphasizing ease of use and integration with various frameworks. The document concludes with the advantages of Wijmo 5, highlighting its performance, lightweight design, and extensive control library.
More Related Content
Similar to Welcome to Wijmo 5
Welcome to Wijmo 5
- 1. A New Generationof JavaScript Controls
- 2. Agenda • TheEvolution of JavaScript • Introduction to Wijmo 5 • Porting Silverlight to HTML5 • Walk through Wijmo Samples • Q & A
- 3. History/Context EcmaScript5 AJAX Internet JavaScript EcmaScript jQuery jQueryUI IE9 TS, HTML5, ng 1990 1995 2000 2005 2010 2015 VB 1/VBX ActiveX .NET WPF Silverlight jQuery 2, ng 1.3 ComponentOne iPad, Wijmo 1 SpreadJS Wijmo 5
- 4. 1990: The Webis born <p> Learn about <a href="http://en.wikipedia.org/wiki/Hypertext"> Hypertext </a> </p>
- 5. 1995: Netscape introducesJavaScript var d = document.getElementById('myElement'); d.innerHTML = 'Some text'; d.style.color = 'red';
- 6. 2005: jQuery addsbrowser compatibility $('#myElement') .text('Some text') .css('color', 'red');
- 7. 2008: jQueryUI addsjQuery '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);
- 8. 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)
- 9. Wijmo 5: Anew 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
- 10.
- 11. Touch First, MobileFirst • Touch & Mobile from the start • Controls optimized for all devices • Samples optimized for all devices • Hybrid capable
- 12. True JavaScript Controls • Utilize ECMAScript 5 • Properties, Methods & Events • Similar to .NET Controls • Not jQuery UI Widgets
- 13. Fast and Lightweight • Target modern browsers • No compromises for legacy • No dependencies • Sizes Grid: 75K Chart: 100K Gauge: 20K Input: 40K
- 14. Flexible API •Famous FlexGrid now in JS • Mature (first created in 1991) • Compatible with XAML version • Built-in basic features • Very extensible
- 15. First Class AngularSupport • AngularJS support from the start • Hand written Angular Directives • Each Directive optimized • Samples provided in Angular
- 16. Wijmo 5: Architecture Core wijmo.js/css FlexGrid wijmo.grid.js FlexChart wijmo.chart.js Gauge wijmo.gauge.js Input wijmo.input.js More to come... Interop wijmo.angular.js Event CollectionView Control Globalize Styles Directives <wj-flex-grid> <wj-flex-grid-column> …
- 17. Porting Apps fromSilverlight • 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) =>
- 18. 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
- 19. Porting the ViewModel • CollectionView objects for Customers, Orders, Details • Load same data using Ajax • Similar to the Silverlight version, but simpler Silverlight // create ICollectionView var customers = new DataServiceCollection<Customer>(); // load data asynchronously var context = new NWEntities(serviceUri); var query = context.Customers; customers.LoadAsync(query); HTML5 (Wijmo) // create ICollectionView $scope.customers = new wijmo.collections.CollectionView(); // load data asynchronously loadData(serviceUri, $scope.customers, 'Customers');
- 20. Porting the View • Built-in directives for all controls • Similar to the Silverlight version, but simpler 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*" /> 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>
- 21. 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
- 22. 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
- 23. Conclusion • Notjust 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
- 24. Thank You! Learnmore about Wijmo 5 at http://wijmo.com/5 Q & A
Editor's Notes
- #4 This is a time-line showing what happened over the last 25 years. Events above the line are related to the evolution of JavaScript and the Web. Events below the line are related to the parallel evolution of Microsoft development tools. As you can see, things started recently, and relatively slowly, with one major event every 3/5 years. The pace has accelerated, and we saw seven events in the last two years. 1990 was the ‘big bang’. Maybe someday it will be known as year 1 A.I… 1990 Internet 1991 Visual Basic: custom controls (VBX) 1995 Netscape 2.0: JavaScript (programmability), cookies (state) 1996 ActiveX: Custom controls for desktop 1997 EcmaScript1: JavaScript becomes a standard 1998 Google 2000 AJAX (async requests, no post-backs) 2002 .NET 2005 jQuery (cross-browser) 2006 WPF/MVVM 2008 jQueryUI (extend jQuery to visual components) 2008 Silverlight: C#/MVVM on the web 2009 EcmaScript 5: Properties (getters/setters), JSON, SVG, etc (but still no classes...) 2010 iPad: no plug-ins (MS follows suit, offers no migration for Silverlight users) 2010 Wijmo 1.0: based on jQueryUI 2011 IE9: supports EcmaScript 5 (“modern browsers” = IE9+) 2012 TypeScript: compiles EcmaSript6 to 5, with classes, type-checking, etc 2012 HTML5 becomes a standard 2012 AngularJS 1.0: MVVM, custom controls in markup! 2013 AngularJS 1.3: IE9+ 2013 jQuery 2.0: IE9+ 2013 SpreadJS: Excel-like component in JavaScript (canvas, modern browsers) 2014 Wijmo 5.0: targets modern browsers (much more on this later)
- #5 When the Web was created, it allowed people to publish documents with hyperlinks. That was revolutionary and incredibly powerful. But it was mostly for publishing, not for writing applications. Documents we linked but static.
- #6 Netscape 2.0 changed that by introducing JavaScript, a language that could interact with the document. Now people could create documents that contained some logic and interactivity. This was the first step toward making HTML/JS a platform for web applications. It was so successful that it started a browser war, with a lot of innovation and no standards.
- #7 jQuery provides a single API used to modify the DOM regardless of browser. This allowed developers to focus on the applications knowing that they would run on any browser. This was a huge step towards a platform for apps that could run everywhere, and jQuery became incredibly popular very quickly.
- #8 jQueryUI extended jQuery to add ‘widgets’. Widgets are similar to controls, re-usable visual components with properties, methods, and events. The main problem with jQueryUI was the syntax. Verbose and all string-based, with a single complex property called “options”. In this sense, it was not on par with traditional .NET-style controls
- #9 If 1990 was the big bang, the last three years have been the beginning of life. HTML5 finally became a standard (less than two years ago!). EcmaScript5 added crucial elements to the language (like properties with getters and setters). TypeScript (EcmaScript6) added modules, classes, and OOP. AngularJS and other frameworks added MVVM and components. HTML/JS have finally become a practival platform for modern application development.
- #10 Like jQuery and AngularJS, we decided to release a new library of controls targeting modern browsers (and like them, we kept the previous versions for legacy browser compatibility). We wanted controls as powerful and easy-to-use as our .NET controls, no compromises. We wanted to provide an upgrade path to Silverlight developers, so we used .NET as the blueprint for missing elements.
- #17 Wijmo 5 is modular. The core is required, everything else is optional. Modules are small (less than 100k minified). The only dependency is jQuery (so it can be used with any frameworks without conflicts). The core contains general-purpose classes such as Event and CollectionView. FlexGrid is our data grid, with the same object model as the XAML version. FlexChart is our chart component, with support for multiple data types. Input contains controls such as ComboBox, InputDate, InputTime, InputNumber, etc. All controls are MVVM-compatible with object modes similar to their XAML counterparts. All this makes creating HTML5 applications as easy as creating Silverlight applications. And it also makes porting Silverlight applications much easier.
- #18 Porting applications from Silverlight is important to our customers, so it’s important to us. Microsoft provides no help at all (which is surprising and disappointing). Wijmo is MVVM-oriented and has a compatible object model where possible. This makes migration from Silverlight fairly easy. Let’s demonstrate.
- #19 We decided to show migration using an existing Silverlight demo written by Microsoft. This ensures the sample was not created with the purpose of being easily ported. The app is very simple, but it does include most common elements present in Silverlight LOB applications. Let’s see what it does.
- #20 The first step in porting the application was porting the ViewModel (logic). In this case, we created three CollectionViews (cust > orders > details). We loaded them with data from the same source as the original app. We synchronized using the currentChanged event to load orders for the selected customer and details for the selected order. The new ViewModel is about 100 lines of code, much simpler than the original.
- #21 The second step was porting the View. This was easy because we used AngularJS and Wijmo 5 includes directives for all the controls. The slide compares pieces of markup in the original app to the ported app. Notice how the syntax is similar, down to property names. Again the HTML5 version is similar but simpler than the original.
- #22 The port was done in about hours, and the HTML5 version of the app has significant advantages over the original. Let’s see it in action.
- #23 It’s important to realize that Wijmo 5 is not just for porting Silverlight applications. It can be used to create great new applications that fully leverage the power offered by the platform. It is simple, ‘non-opinionated’, and integrates well with other libraries. The AngularJS/Bootstrap/Wijmo 5 combination provides a development experience similar to the one offered by Silverlight. Let’s take a quick look at some samples.