JS in
QuickBooks
Joe Wells, Intuit
Doug Crossley, Intuit
Takeaways
1. JavaScript can be developed at scale
2. Legacy applications can evolve
3. Coding QuickBooks Online is fun
QBO 2010 Architecture

Server-Side
Presentation

Single Data
Center

JSP / Custom
Java UI
QBO 2013
Client Rendering
●
HTML5
●
iOS
●
Android

Data-Only
Transport

Developer
API Services
Global
Accounting
Engine
Wo...
QBO Technologies
Client
Rendering

Data-Only
Transport
WAA
Developer
API Services
Global
Accounting
Engine

(FY’14)

(FY’1...
QuickBooks now has ~100K lines of
JavaScript
● Need to plan up-front to develop a code base
of this size.
● We chose Dojo ...
Key Technologies for Scale
●
●
●
●
●
●

AMD - module loading and dependencies
Client-side templating & 2-way binding
MVC+S...
Complexity

Functionality vs Complexity - Typical

$(‘#typical’)

Functionality over Time
Complexity

Functionality vs Complexity - Goal

Upfront investment yields
dividends as functionality
grows
Functionality o...
QuickBooks Client Architecture
Domain (Accounting)
Components
Widgets
MVC-S

COTS
AMD
AMD
define([
"dojo/_base/declare",
"libs/jquery",
"libs/highcharts",
"libs/underscore",
"libs/backbone"
], function(declar...
Two-Way Binding
<div data-qbo-bind="visible: showDate">
<div>${nls.date}</div>
<input class="dateInput" type="text"
data-q...
MVC + Services
● Many MVC frameworks to choose from
● AMD to load HTML client-side templates
● Isolate XHR calls from your...
Write your first unit test on your first day
Leverage intern for tests, integrated with Sauce Labs
beforeEach: function ()...
CSS Requires Engineering Design
● Proper CSS scoping
● Apply top-level scoped styles to enable progressive layout
● Use a ...
We’re hiring great JavaScript
engineers!
Thanks.
joe_wells@intuit.com
douglas_crossley@intuit.com
Upcoming SlideShare
Loading in …5
×

Js in quick books

838 views

Published on

Overview of the new technology stack in the

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
838
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Js in quick books

  1. 1. JS in QuickBooks Joe Wells, Intuit Doug Crossley, Intuit
  2. 2. Takeaways 1. JavaScript can be developed at scale 2. Legacy applications can evolve 3. Coding QuickBooks Online is fun
  3. 3. QBO 2010 Architecture Server-Side Presentation Single Data Center JSP / Custom Java UI
  4. 4. QBO 2013 Client Rendering ● HTML5 ● iOS ● Android Data-Only Transport Developer API Services Global Accounting Engine World-Wide Data Centers Intuit Partner Platform Accounting Standards JMS Messaging Configurable Tax Model eInvoicing & Payments Global & AppStore Billing
  5. 5. QBO Technologies Client Rendering Data-Only Transport WAA Developer API Services Global Accounting Engine (FY’14) (FY’14) World-Wide Data Centers (FY’14) logging
  6. 6. QuickBooks now has ~100K lines of JavaScript ● Need to plan up-front to develop a code base of this size. ● We chose Dojo as a turnkey/complete solution. Countless alternatives available.
  7. 7. Key Technologies for Scale ● ● ● ● ● ● AMD - module loading and dependencies Client-side templating & 2-way binding MVC+S Intern async unit tests JSHint / JSLint (Sublime Text) Compass / SASS
  8. 8. Complexity Functionality vs Complexity - Typical $(‘#typical’) Functionality over Time
  9. 9. Complexity Functionality vs Complexity - Goal Upfront investment yields dividends as functionality grows Functionality over Time
  10. 10. QuickBooks Client Architecture Domain (Accounting) Components Widgets MVC-S COTS AMD
  11. 11. AMD define([ "dojo/_base/declare", "libs/jquery", "libs/highcharts", "libs/underscore", "libs/backbone" ], function(declare, $, Highcharts, _, Backbone) { … }); Provides a no-build (F5) dev experience. Also builds minified, optimized layers.
  12. 12. Two-Way Binding <div data-qbo-bind="visible: showDate"> <div>${nls.date}</div> <input class="dateInput" type="text" data-qbo-bind="value: date" data-dojo-type="qbo/widgets/DateTextBox”/> </div> visible: showDate Hide/Show bound to this.model properties ${nls.date} Externalization of strings value: date 2-way value binding
  13. 13. MVC + Services ● Many MVC frameworks to choose from ● AMD to load HTML client-side templates ● Isolate XHR calls from your model using a services interface define([ ... "dojo/text!./templates/View.html", ... ], function(..., View, ... ) { constructor: function(args) { // Services this.txnService = args.TxnService || new TxnService( );
  14. 14. Write your first unit test on your first day Leverage intern for tests, integrated with Sauce Labs beforeEach: function () { model = new Model(new TxnMockService()); }, afterEach: function () { model = null; }, "Test Is Connected Bank Account (Positive)": function () { var failureHint = "Should return true if fiName is present.", res = model.isConnectedBankAccount({ fiName: "Test" }); assert.isTrue(res, failureHint); } Services isolation will allow you to mock XHR calls
  15. 15. CSS Requires Engineering Design ● Proper CSS scoping ● Apply top-level scoped styles to enable progressive layout ● Use a pre-processor .qbo { .invoice { background: $formBackground; height: $formHeight - $marginHeight; } .menuVisible { .forms { margin-left: 0px; } } }
  16. 16. We’re hiring great JavaScript engineers! Thanks. joe_wells@intuit.com douglas_crossley@intuit.com

×