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
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
 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

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
Gauge
wijmo.gauge.js
Input
wijmo.input.js
More to come...
Interop
wijmo.angular.js
Event
CollectionView
Control
Globalize
Styles
Directives
<wj-flex-grid>
<wj-flex-grid-column>
…
FlexGrid Filter
wijmo.grid.filter.js
FlexGrid GroupPanel
wijmo.grid.groupanel.js
FlexGrid DetailRow
wijmo.grid.detail.js
Extensions
FlexChart Analytics
wijmo.chart.analytics.js
FlexChart Annotation
wijmo.chart.annotation.js
FlexChart Interaction
wijmo.chart.interaction.js

7. Wijmo Demo

8. Our Tools
 Visual Studio
 TypeScript
 AngularJS
 Bootstrap
 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. 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

11. Debugging Source Code in Visual Studio

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

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. AngularJS
 MVVM Framework
 Similar to .NET/XAML in JavaScript
 Two-way binding
 Components

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

18. AngularJS Demo

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

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

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

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

23. Browser Testing Demo

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