Download to read offline
Uploaded byChris Bannon
Wijmo 5 - GrapeCity Echo Tokyo
Wijmo 5 is a next-generation suite of HTML5/JavaScript controls designed for touch-first applications with a focus on performance, simplicity, and type safety using TypeScript. It offers various components such as grids and charts, with no external dependencies, and is optimized for modern web development frameworks like Angular. The roadmap aims to expand its offerings based on user feedback, including support for Angular 2.0 and more controls and samples.
More Related Content
Wijmo 5 - GrapeCity Echo Tokyo
- 2. Wijmo 5 The NextGeneration of HTML5/JavaScript Controls
- 3. History/Context ComponentOne iPad, Wijmo1Google Wijmo 5 1995 2000 2005 2010 20151990 Internet JavaScript Ecma Script jQuery jQueryUI EcmaScript5 VB 1/VBX ActiveX .NET WPF Silverlight IE9 TS, HTML5, ngAJAX
- 4. What is Wijmo5? 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 Wijmo5 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? • Morecontrols, 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 Learnmore about Wijmo 5.0: • http://wijmo.c1.grapecity.com/ • http://demo.grapecity.com/wijmo/5/Angular/Explore r/Explorer/#/
Editor's Notes
- #3 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.
- #4 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.”
- #5 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
- #6 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.
- #7 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)
- #8 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)
- #9 Configure the controls using directives and attributes Done in the view, not in the ViewModel (just like in XAML)
- #10 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)
- #11 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
- #12 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
- #14 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)
- #15 Q & A