Inside Wijmo 5A Large-scale JavaScript Product

Chris BannonProduct Manager, Wijmo

What is Wijmo 5? JavaScript UI Controls Zero dependencies Specialize in data grids and charts Includes the famous FlexGrid control Focus on performance Small core controls and extensible Offer additional features as optional extensions

Wijmo Stats Distributed Team

US, Brazil, Canada, Russia, China, India, Myanmar, Japan

Over 100,000 lines of code (just in Wijmo 5, millions company-wide) Over 25 years of experience (first control written in VB) Our FlexGrid control can data-bind 1,000,000 records in under 1 second

What Makes Wijmo 5 Special? True Controls (Control Classes like in .NET) Not Widgets

Control//Initializevar myFlexGrid = new wijmo.grid.FlexGrid('#myFlexGrid');//Show Row HeadersmyFlexGrid.headersVisibility = wijmo.grid.HeadersVisibility.All;

Widget//Initialize$('#mywijgrid').wijgrid();//Show Row Headers$('#mywijgrid').wijgrid('option', 'showRowHeader', true);

Wijmo 5: ArchitectureCore

wijmo.js/css

FlexGridwijmo.grid.js

FlexChartwijmo.chart.js

Gaugewijmo.gauge.j

sInput

wijmo.input.jsMore to come...

Interopwijmo.angular

.js

EventCollectionView

ControlGlobalizeStyles

Directives<wj-flex-grid><wj-flex-grid-column>…

FlexGrid Filterwijmo.grid.filter.js

FlexGrid GroupPanel

wijmo.grid.groupanel.js

FlexGrid DetailRow

wijmo.grid.detail.js

Extensions

FlexChart Analytics

wijmo.chart.analytics.jsFlexChart

Annotationwijmo.chart.annotati

on.jsFlexChart Interaction

wijmo.chart.interaction.js

Wijmo Demo

Our Tools Visual Studio TypeScript AngularJS Bootstrap Browser Dev Tools BrowserStack

Visual Studio Project Setup Visual Studio Project for Control Library Folders for Namespaces TypeScript files for Classes Builds like a standard VS PRoject

Sample Setup Each Sample has a VS Solution and

Project Solution contains

Sample Project Wijmo 5 Project

Wijmo 5 source is compiled when sample is run

Wijmo 5 source can be debugged when running samples

Debugging Source Code in Visual Studio

Builds TFS used for Source Control Nightly Builds Use MSBuild tasks

Compile TypeScript Add headers/license/copyright to files Run Unit Tests Build passes/fails based on Unit Tests

TypeScript Language from Microsoft Created by Anders Hejlsberg, the creator of C# Object-oriented with Classes etc. Compiles to JavaScript (ES5 or ES6) Offers C#-like syntax and features

Inheritance Type safety, design-time error checking Based on ECMAScript standards (ES 6)

Adopted by Google in Angular 2

Wijmo Uses TypeScript Our Source Code is all written in TypeScript Our developers can apply their C# experience and skill to JS We can structure our control library like we would in C#

Base Control Class UI Controls that inherit Base Control Class

We get C# features when developing IntelliSense (autocomplete) in Visual Studio Error warnings while programming (no need to wait until runtime to see errors)

Our controls are extensible We can extend our controls easily to add features as extension Classes (like

FlexGridFilter)

TypeScript Demo

AngularJS MVVM Framework Similar to .NET/XAML in JavaScript Two-way binding Components

Wijmo Supports AngularJS We create AngularJS directives for each of our JavaScript Controls Our directives support two-way bindings for properties that benefit from it We offer templates to make declaring controls even richer (like Cell

Templates in FlexGrid) Many of our samples are created with AngularJS It is really nice to declare Controls using markup

AngularJS Demo

Bootstrap Mobile-first UI framework Building blocks for UI

Forms (Input, Buttons, etc.) Navigation Layout (Responsive) Icons

Easy way to jump-start UI for an application

Wijmo Likes Bootstrap Our default theme matches Bootstrap We use Bootstrap in our Samples

Layout Navigation Simple UI (buttons, tabs, etc.)

Using Bootstrap for simple stuff allows us to focus on the complicated UI controls like Grids/Charts

Browser Dev Tools Spend a lot of our time in Dev Tools Inspecting Elements Stepping through code Profiling for performance

Memory profiling (for leaks) FPS monitoring (preventing jank)

Emulating devices

Browser Stack Web-based Cross-device testing Test any browser, on any device, running

any OS Ideal to quickly confirm issues/fixes in

environments you don’t have setup Can also easily connect to localhost (with

perf cost) Covers most needs for testing Not ideal for debugging Not ideal for testing performance issues

since it is an emulation across web

Browser Testing Demo

Thanks http://wijmo.com https://www.visualstudio.com/en-us/visual-studio-homepage-vs.aspx http://www.typescriptlang.org/ https://angularjs.org/ http://getbootstrap.com/ https://

developer.mozilla.org/en-US/Learn/Discover_browser_developer_tools https://www.browserstack.com/