inside wijmo 5, a large-scale javascript product
TRANSCRIPT
Inside Wijmo 5A Large-scale JavaScript Product
Chris BannonProduct 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
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
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
Gaugewijmo.gauge.j
sInput
wijmo.input.jsMore to come...
Interopwijmo.angular
.js
EventCollectionView
ControlGlobalizeStyles
Directives<wj-flex-grid><wj-flex-grid-column>…
FlexGrid Filterwijmo.grid.filter.js
FlexGrid GroupPanel
wijmo.grid.groupanel.js
FlexGrid DetailRow
wijmo.grid.detail.js
Extensions
FlexChart Analytics
wijmo.chart.analytics.jsFlexChart
Annotationwijmo.chart.annotati
on.jsFlexChart Interaction
wijmo.chart.interaction.js
Wijmo Demo
Our Tools Visual Studio TypeScript AngularJS Bootstrap 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
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
Debugging Source Code in Visual Studio
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
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
AngularJS MVVM Framework Similar to .NET/XAML in JavaScript Two-way binding Components
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
AngularJS Demo
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
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/ https://angularjs.org/ http://getbootstrap.com/ https://
developer.mozilla.org/en-US/Learn/Discover_browser_developer_tools https://www.browserstack.com/