Inside Wijmo 5 - GrapeCity Echo 2016

Inside Wijmo 5
A Large-scale JavaScript Product

Chris Bannon
Global 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
//Initialize
var myFlexGrid = new wijmo.grid.FlexGrid('#myFlexGrid');
//Show Row Headers
myFlexGrid.headersVisibility = wijmo.grid.HeadersVisibility.All;
Widget
//Initialize
$('#mywijgrid').wijgrid();
//Show Row Headers
$('#mywijgrid').wijgrid('option', 'showRowHeader', true);

Wijmo 5: Architecture
Core
wijmo.js/css
FlexGrid
wijmo.grid.js
FlexChart
wijmo.chart.js
OLAP
wijmo.olap.js
Gauge
wijmo.gauge.js
Input
wijmo.input.js
Interop
wijmo.angular.js
Event
CollectionView
Control
Globalize
Styles
Directives
<wj-flex-grid>
<wj-flex-grid-column>
…
FlexSheet
wijmo.grid.sheet.js
MultiRow
wijmo.grid.multirow.js
More…
Extensions
FlexChart Analytics
wijmo.chart.analytics.js
Financial Chart
wijmo.chart.afinance.js
More…

Our Tools
Code
 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
Unit
Tests
Selenium
Tests
Failed
(Bugs Filed)
Release
Sln
CSProj
TypeScript
Less 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)

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

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/

Inside Wijmo 5 - GrapeCity Echo 2016

More Related Content

What's hot (20)

Viewers also liked (11)

Similar to Inside Wijmo 5 - GrapeCity Echo 2016 (20)

Recently uploaded (20)

Inside Wijmo 5 - GrapeCity Echo 2016

Editor's Notes