Welcome to Wijmo 5

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.