Js in quick books
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
563
On Slideshare
563
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
3
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. JS in QuickBooks Joe Wells, Intuit Doug Crossley, Intuit
  • 2. Takeaways 1. JavaScript can be developed at scale 2. Legacy applications can evolve 3. Coding QuickBooks Online is fun
  • 3. QBO 2010 Architecture Server-Side Presentation Single Data Center JSP / Custom Java UI
  • 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. 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. 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. 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. Complexity Functionality vs Complexity - Typical $(‘#typical’) Functionality over Time
  • 9. Complexity Functionality vs Complexity - Goal Upfront investment yields dividends as functionality grows Functionality over Time
  • 10. QuickBooks Client Architecture Domain (Accounting) Components Widgets MVC-S COTS AMD
  • 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. 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. 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. 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. 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. We’re hiring great JavaScript engineers! Thanks. joe_wells@intuit.com douglas_crossley@intuit.com