Inside Wijmo 5A Large-scale JavaScript Product

Chris BannonGlobal Product 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, Korea

Over 100,000 lines of code (just in Wijmo 5, millions company-wide) Over 25 years of experience (first control written for 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

OLAPwijmo.olap.js

Gaugewijmo.gauge.j

sInput

wijmo.input.js

Interopwijmo.angular

.js

EventCollectionView

ControlGlobalizeStyles

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

FlexSheetwijmo.grid.sheet.js

MultiRowwijmo.grid.multirow

.js

More…

Extensions

FlexChart Analytics

wijmo.chart.analytics.js

Financial Chartwijmo.chart.afinance.

js

More…

Wijmo Demo

Our ToolsCode

Visual Studio (and TFS) TypeScript

Design Less Bootstrap

Automated Testing QUnit Selenium

Manual Testing 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

Application Setup Each sample app 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

Build Process

TFS Server

Devs

Build Server

Automated QA QA Testers

UnitTests

Selenium

Tests

Failed(Bugs Filed)

Release

SlnCSProjTypeScriptLess CSS MSBuild

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

QUnit JavaScript Unit Testing Framework Created and used by the jQuery Team Performance: QUnit is not only easy, but fast. Opinionated and lean API, but extensible. Compatible: It works on many different environments.

Wijmo Uses QUnit We have tests for key features of controls Tests are run with release candidate and nightly

builds We create tests when bugs are found to prevent

regression issues Allow us to have some confidence in each build

before it goes through QA

Selenium Browser Automation Tool Create robust, browser-based regression automation tests Scale and distribute scripts across many environments Tests can be scripted or recorded Can be run from Visual Studio

Wijmo Uses Selenium We have tests for key features of controls Tests are run with release candidate and nightly builds We create tests when bugs are found to prevent

regression issues QA and Developers can create tests to add to our

collection Saves countless hours of manual testing time across

many browsers

LessCSS CSS pre-processor Supports variables, mixins, etc. Functions (math, etc.) Wijmo has a core CSS and themes are

lightweight extensions that only change some shared variables using Less.

Customers can easily make themes by using our Less files

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

Wijmo also integrates with other theme frameworks like Material Design

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/ http://lesscss.org/ http://getbootstrap.com/ https://qunitjs.com/ http://www.seleniumhq.org/ https://developer.mozilla.org/en-US/Learn/Discover_browser_developer_tools https://www.browserstack.com/