Inside Wijmo 5, a large-scale JavaScript product. GrapeCity has been developing JavaScript products for over six years. The browser landscape has changed greatly since we started and we have learned a lot along the way. Today, we manage Wijmo 5, a suite of JavaScript UI controls, specializing in a high-performance datagrid and powerful charts. In this session, we will give you a look inside our project. We will go over the collections of tools, frameworks, languages and patterns that we have refined over the years. You walk away from this session with useful tips for managing large-scale JavaScript applications.

1. Inside Wijmo 5
A Large-scale JavaScript Product

2. Chris Bannon
Global Product Manager, Wijmo

3. 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

4. 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

5. 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);

6. 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…

7. Wijmo Demo

8. Our Tools
Code
 Visual Studio (and TFS)
 TypeScript
Design
 Less
 Bootstrap
Automated Testing
 QUnit
 Selenium
Manual Testing
 Browser Dev Tools
 BrowserStack

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

10. 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

11. Debugging Source Code in Visual Studio

12. 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

13. 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

14. 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)

15. TypeScript Demo

16. 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.

17. 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

18. 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

19. 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

20. 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

21. 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

22. 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

23. 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

24. 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

25. Browser Testing Demo

26. 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/