Inside Wijmo 5 A Large-scale JavaScript Product
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/