Download - Inside Wijmo 5 - GrapeCity Echo 2016
![Page 1: Inside Wijmo 5 - GrapeCity Echo 2016](https://reader035.vdocument.in/reader035/viewer/2022081502/58819d661a28ab1a398b4807/html5/thumbnails/1.jpg)
Inside Wijmo 5A Large-scale JavaScript Product
![Page 2: Inside Wijmo 5 - GrapeCity Echo 2016](https://reader035.vdocument.in/reader035/viewer/2022081502/58819d661a28ab1a398b4807/html5/thumbnails/2.jpg)
Chris BannonGlobal Product Manager, Wijmo
![Page 3: Inside Wijmo 5 - GrapeCity Echo 2016](https://reader035.vdocument.in/reader035/viewer/2022081502/58819d661a28ab1a398b4807/html5/thumbnails/3.jpg)
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
![Page 4: Inside Wijmo 5 - GrapeCity Echo 2016](https://reader035.vdocument.in/reader035/viewer/2022081502/58819d661a28ab1a398b4807/html5/thumbnails/4.jpg)
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
![Page 5: Inside Wijmo 5 - GrapeCity Echo 2016](https://reader035.vdocument.in/reader035/viewer/2022081502/58819d661a28ab1a398b4807/html5/thumbnails/5.jpg)
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);
![Page 6: Inside Wijmo 5 - GrapeCity Echo 2016](https://reader035.vdocument.in/reader035/viewer/2022081502/58819d661a28ab1a398b4807/html5/thumbnails/6.jpg)
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…
![Page 7: Inside Wijmo 5 - GrapeCity Echo 2016](https://reader035.vdocument.in/reader035/viewer/2022081502/58819d661a28ab1a398b4807/html5/thumbnails/7.jpg)
Wijmo Demo
![Page 8: Inside Wijmo 5 - GrapeCity Echo 2016](https://reader035.vdocument.in/reader035/viewer/2022081502/58819d661a28ab1a398b4807/html5/thumbnails/8.jpg)
Our ToolsCode
Visual Studio (and TFS) TypeScript
Design Less Bootstrap
Automated Testing QUnit Selenium
Manual Testing Browser Dev Tools BrowserStack
![Page 9: Inside Wijmo 5 - GrapeCity Echo 2016](https://reader035.vdocument.in/reader035/viewer/2022081502/58819d661a28ab1a398b4807/html5/thumbnails/9.jpg)
Visual Studio Project Setup Visual Studio Project for Control Library Folders for Namespaces TypeScript files for Classes Builds like a standard VS PRoject
![Page 10: Inside Wijmo 5 - GrapeCity Echo 2016](https://reader035.vdocument.in/reader035/viewer/2022081502/58819d661a28ab1a398b4807/html5/thumbnails/10.jpg)
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
![Page 11: Inside Wijmo 5 - GrapeCity Echo 2016](https://reader035.vdocument.in/reader035/viewer/2022081502/58819d661a28ab1a398b4807/html5/thumbnails/11.jpg)
Debugging Source Code in Visual Studio
![Page 12: Inside Wijmo 5 - GrapeCity Echo 2016](https://reader035.vdocument.in/reader035/viewer/2022081502/58819d661a28ab1a398b4807/html5/thumbnails/12.jpg)
Build Process
TFS Server
Devs
Build Server
Automated QA QA Testers
UnitTests
Selenium
Tests
Failed(Bugs Filed)
Release
SlnCSProjTypeScriptLess CSS MSBuild
![Page 13: Inside Wijmo 5 - GrapeCity Echo 2016](https://reader035.vdocument.in/reader035/viewer/2022081502/58819d661a28ab1a398b4807/html5/thumbnails/13.jpg)
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
![Page 14: Inside Wijmo 5 - GrapeCity Echo 2016](https://reader035.vdocument.in/reader035/viewer/2022081502/58819d661a28ab1a398b4807/html5/thumbnails/14.jpg)
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)
![Page 15: Inside Wijmo 5 - GrapeCity Echo 2016](https://reader035.vdocument.in/reader035/viewer/2022081502/58819d661a28ab1a398b4807/html5/thumbnails/15.jpg)
TypeScript Demo
![Page 16: Inside Wijmo 5 - GrapeCity Echo 2016](https://reader035.vdocument.in/reader035/viewer/2022081502/58819d661a28ab1a398b4807/html5/thumbnails/16.jpg)
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.
![Page 17: Inside Wijmo 5 - GrapeCity Echo 2016](https://reader035.vdocument.in/reader035/viewer/2022081502/58819d661a28ab1a398b4807/html5/thumbnails/17.jpg)
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
![Page 18: Inside Wijmo 5 - GrapeCity Echo 2016](https://reader035.vdocument.in/reader035/viewer/2022081502/58819d661a28ab1a398b4807/html5/thumbnails/18.jpg)
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
![Page 19: Inside Wijmo 5 - GrapeCity Echo 2016](https://reader035.vdocument.in/reader035/viewer/2022081502/58819d661a28ab1a398b4807/html5/thumbnails/19.jpg)
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
![Page 20: Inside Wijmo 5 - GrapeCity Echo 2016](https://reader035.vdocument.in/reader035/viewer/2022081502/58819d661a28ab1a398b4807/html5/thumbnails/20.jpg)
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
![Page 21: Inside Wijmo 5 - GrapeCity Echo 2016](https://reader035.vdocument.in/reader035/viewer/2022081502/58819d661a28ab1a398b4807/html5/thumbnails/21.jpg)
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
![Page 22: Inside Wijmo 5 - GrapeCity Echo 2016](https://reader035.vdocument.in/reader035/viewer/2022081502/58819d661a28ab1a398b4807/html5/thumbnails/22.jpg)
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
![Page 23: Inside Wijmo 5 - GrapeCity Echo 2016](https://reader035.vdocument.in/reader035/viewer/2022081502/58819d661a28ab1a398b4807/html5/thumbnails/23.jpg)
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
![Page 24: Inside Wijmo 5 - GrapeCity Echo 2016](https://reader035.vdocument.in/reader035/viewer/2022081502/58819d661a28ab1a398b4807/html5/thumbnails/24.jpg)
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
![Page 25: Inside Wijmo 5 - GrapeCity Echo 2016](https://reader035.vdocument.in/reader035/viewer/2022081502/58819d661a28ab1a398b4807/html5/thumbnails/25.jpg)
Browser Testing Demo
![Page 26: Inside Wijmo 5 - GrapeCity Echo 2016](https://reader035.vdocument.in/reader035/viewer/2022081502/58819d661a28ab1a398b4807/html5/thumbnails/26.jpg)
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/