In this session we will talk about the Wijmo 5 control suite. What is it, what makes it unique, how does it help developers, how can you start using it today, how will it evolve?
Introduction
- what is Wijmo 5? (next-generation of HTML/JS Controls)
- modern browsers: EcmaScript 5/IE9
- no jQuery, no jQueryUI
- TypeScript: object-orientation, type-safety, productivity
- Interop (Angular 1.x, Knockout, more to come...)
Wijmo Infrastructure
- Events
- Control
- CollectionView (easier porting from Silverlight)
- Others (Globalization, HttpRequest, Animations, etc: no jQuery)
FlexGrid
- XAML vs Angular (easier porting from Silverlight)
- features, size, performance
- extensibility: extend class, add functionality
examples: filter, grouping, row details, etc
FlexChart
- multiple types
- features, size, performance
- extensibility: extend class, add functionality
examples: financial, ranges, analytics, etc
Others (time permitting...)
- Input, Gauges
- features, size, performance
4. What is Wijmo 5?
The Next Generation of HTML5/JS Controls
Core (65k)
wijmo.js
Grid (97k)
wijmo.grid.js
Chart (145k)
wijmo.chart.js
Input (75k)
wijmo.input.js
Gauge (22k)
wijmo.gauge.js
Interop (90k)
wijmo.angular.js
Grid Extensions Chart Extensions
5. Why is Wijmo 5 Different?
• Touch First!
• Small and Fast Controls (~400k vs 2 to 6m)
• Clean/Simple Syntax (like JS)
• Type-Safe/OOP (TypeScript)
• Leverage experience
(.NET, MVVM, XAML Controls)
• Designed for apps, not just pages
• No Dependencies (no jQuery/jQueryUI)
• First-class support for AngularJS
6. A Simple Example (1/5)
• Connect to an OData source
(ODataCollectionView)
- load data (r/w)
- handle currency/filter (MVVM)
- show me
• Add some controls
(ComboBox, FlexGrid, FlexChart)
• Configure the controls (markup)
• Add layout (Bootstrap)
• Add styling (CSS)
7. A Simple Example (2/5)
• Connect to an OData source
(ODataCollectionView)
• Add some controls
- ComboBox (select category)
- FlexGrid, FlexChart (products)
- show me
• Configure the controls (markup)
• Add layout (Bootstrap)
• Add styling (CSS)
8. A Simple Example (3/5)
• Connect to an OData source
(ODataCollectionView)
• Add some controls
(ComboBox, FlexGrid, FlexChart)
• Configure the controls (markup)
- FlexGrid (columns, star-sizing)
- FlexChart (legend, axes)
- show me
• Add layout (Bootstrap)
• Add styling (CSS)
9. A Simple Example (4/5)
• Connect to an OData source
(ODataCollectionView)
• Add some controls (ComboBox, FlexGrid,
FlexChart)
• Configure the controls (markup)
• Add layout (Bootstrap)
- not part of Wijmo (can use anything)
- responsive layout (mobile)
- show me
• Add styling (CSS)
10. A Simple Example (5/5)
• Connect to an OData source
(ODataCollectionView)
• Add some controls (ComboBox, FlexGrid,
FlexChart)
• Configure the controls (markup)
• Add layout (Bootstrap)
• Add styling (CSS)
- include CSS theme file (cleanlight)
- add your own CSS rules
- show me
11. Globalization (6/5 ;-)
• Include Culture File
(wijmo.culture.ja.min.js, 40+)
• Edit the View (HTML)
• No changes to the Controller (JS)
• show me
12. What’s Next?
• More controls, samples, whitepapers
• Angular Material support
• Angular 2.0 support
• Our roadmap is User-Driven:
Let us know what you would like to see!
13. Thank You!
To Learn more about Wijmo 5.0:
• http://wijmo.c1.grapecity.com/
• http://demo.grapecity.com/wijmo/5/Angular/Explore
r/Explorer/#/
Editor's Notes
Good morning, thanks for coming.
My name is Bernardo de Castilho.
I am a co-founder and CTO of ComponentOne (a division of GrapeCity).
We have been developing commercial components for 25 years, and today we will talk about AngularJS, Google’s JavaScript application framework.
The internet as we know it was born in 1990, initially as a way to distribute hyperlinked documents.
Five years later, Netscape introduced a browser with an interpreter which could change documents dynamically. This had a huge impact, and a few years later the interpreter became a standard called EcmaScript (AKA JavaScript).
Five years after that, Microsoft realized that in order to write applications with HTML/JavaScript, they needed to be able to make asynchronous requests to the server. The Microsoft implementation of Ajax quickly became a standard.
At this point, developing applications for the Web using JavaScript and HTML was becoming mainstream, but there was a lot of incompatibility between browsers. There were many JavaScript libraries available to address this problem, but in 2005 jQuery appeared and quickly became the standard way to write JavaScript code that would run well on any browser.
A few years after that, it became clear that HTML5 developers needed something that desktop developers had since the 1990s: components. jQueryUI was created to fill that gap. jQueryUI aimed to follow the success and popularity of jQuery and provide a framework for creating re-usable components in JavaScript. It was moderately popular, but not nearly as much as jQuery.
In 2010, several important things happened almost at once:
IE9 was released with support for EcmaScript5 and most of HTML5, re-defining ‘modern browser’. EcmaScript5 brought many real enhancements to the JavaScript language, and so did HTML5. This meant anyone targeting only modern browsers could do away with a lot of workarounds, libraries, and ‘polyfills’.
Microsoft released TypeScript, an object-oriented language based on the EcmaScript 6 standard that generates EcmaScript 5 output. TypeScript provides true object-oriented programming, IntelliSense, and static type-checking. It increases programmer productivity and improves code quality, especially when working with large applications.
The popularity of jQuery started to diminish. Modern browsers are standards-compliant, and EcmaScript6/HTML5 offers many of the benefits that jQuery had but with more efficiency and no overhead.
Now all the main pieces were in place for HMTL/JS to become a viable application development platform, except a standard application framework to unify all these elements. There were many candidates, but no clear winner.
Then Google released AngularJS, their “Heroic Application Framework”. AngularJS was an overnight success that has been gaining popularity ever since it was released.
One of the nicest things about AngularJS is its support for the MVVM programming model, which was introduced by MS with WPF.
** July 2015: MS announces the end of WebForms (server controls). ASP.NET 5 will include MVC only.
More power to MVVM, client controls
http://weblogs.asp.net/ricardoperes/farewell-asp-net-web-forms-we-hardly-knew-ye
“what I really like about Web Forms is the reuse capacity that server-side controls offer: just add a reference to an assembly containing controls, register them in Web.config or in the page, and you’re done.”
Core:
Control
CollectionView
Globalize
Utilities (httpRequest, animation, point, rect, etc)
Interop
Angular 1.x, KnockoutJS, more to come
Control-specific modules and extensions
grid, chart, input, gauge, odata, etc
Small is important
Clean syntax makes you more productive, code easier to read/maintain/debug(jQueryUI uses jQuery selectors and strings; W5 uses a regular object model)
Type-safety/OOP/compiler support reduces bugs, improves productivity and code quality (TypeScript used in Angular 2.x)
HTML5/JS just became a viable platform, but there are others with many great, time-tested features
Angular is a fantastic framework, easy to use and to extend
Dependencies can be a problem, jQuery is slow and no longer needed
Above all, support: difference between free and paid software.
OData is a great way to expose data, supports CRUD operations
ODataCollectionView extends CollectionView and supports OData
Very little code required to create a nice ViewModel (currency, filtering all built-in)
OData is a great way to expose data, supports CRUD operations
ODataCollectionView extends CollectionView and supports OData
Very little code required to create a nice ViewModel (currency, filtering all built-in)
Configure the controls using directives and attributes
Done in the view, not in the ViewModel (just like in XAML)
Wijmo doesn’t do layout
But it supports layout frameworks like Bootstrap
Add some containers and classes
Get a responsive layout (great for mobile devices)
iewModel (just like in XAML)
Wijmo controls have no style-related properties
It’s all CSS
We ship several professionally-designed themes
You can tweak/customize with a few additional CSS rules
Wijmo controls have no style-related properties
It’s all CSS
We ship several professionally-designed themes
You can tweak/customize with a few additional CSS rules
TypeScript: classes, properties. Works today, will work with ng 2.0
ES6/TS1.5: classes, annotations => basis for ng 2.0 directives
Angular 1.4: has some 2.0 features (routing)