1. Engineering Fellow, Intuit
Accelerate Your User Experience With Client-side JavaScript Lessons Learned From QuickBooks Online (QBO)
Joe Wells
Engineering Fellow, Intuit

2. ACCOUNTING PROFESSIONALS
Intuit’s Mission:
To improve our customers’ financial lives so profoundly… they can’t imagine going back to the old way
CONSUMERS
SMALL BUSINESSES
ACCOUNTING PROFESSIONALS

3. A Premiere Innovative Growth Company
Employees 8,000+
Customers 45M
Global Offices US, UK, India, Canada, Australia
Revenue 4.2B
Founded 1983
Public INTU

4. Key Concepts Everything as a service
Client-side frameworks to accelerate coding
Designing services from the UI-first
Plugin framework to unlock innovation
Putting it all together: working with your experience designers

5. QBO Transformation

6. How QBO Used to Look (Demo)

7. How QBO Looks Today (Demo)

8. Under the Hood: Everything as a Service

9. QBO 2001-2010 Architecture Server-Side Presentation
JSP / Custom Java UI
Single Data Center

10. QBO 2014 Architecture Intuit Partner Platform JMS Messaging
Client Rendering
HTML5
iOS
Android
Data-Only Transport
Developer
API Services
Intuit Partner Platform
JMS Messaging
Global Accounting Engine
Accounting Standards
Configurable Tax Model
eInvoicing & Payments
Global & AppStore Billing
World-Wide
Data Centers

11. QBO Technologies Client Rendering HTML5 iOS Android
WAA
Data-Only Transport
Developer
API Services
(FY’14)
Global Accounting Engine
(FY’14)
logging
World-Wide
Data Centers

12. Client-side Frameworks

13. Frameworks You’re using require.js, right? And SASS/LESS please?
What about two-way binding?

14. Example: 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

15. UI-first Services

16. A common mistake is to design your services and then adapt your UI to those services. This is backwards! And it results in extra complexity in your client code.

17. What Not to Do: Services First
/companyPreferences
/invoice {
phoneNumber: “ ”,
defaultTerms: “30 Days”,
reportingMethod: “cash”,
payrollPeriod: “weekly”,
hasShipping: true } {
date: “ ”,
amount: ,
customer: “John” }
Which ones apply to an Invoice? What is the logic to interpret them?

18. Repeated over dozens of preferences!
if (invoice.isNew && prefs.hasShipping) { $(‘#shippingAddress’).show(); $(‘#shippingAmount’).show(); } else if (invoice.isEdit && !!invoice.shippingAddress) { }
Repeated over dozens of preferences!

19. Alternative: UI First <input data-qbo-bind=
”value: shippingAddress,
visible: hasShipping”
/>
”value: shippingAmount,
/invoice?txnId=-1
/invoice?txnId=45 {
hasShipping: true } {
hasShipping: true }

20. Our JSON … … { "txnId" : -1, "txnTypeId" : 4, "date" : "2014-06-26",
"txnProps" : {
"hasShipping" : true,
"hasDiscount" : true,
"hasLocation" : true,
"hasCharges" : true,
"hasReimbExpense" : true,
"taxReimbExpense" : false, … {
"txnId" : 101,
"txnTypeId" : 4,
"date" : " ",
”amount" : ,
”customer" : ”John”,
"txnProps" : {
"hasShipping" : true,
"hasDiscount" : true,
"hasLocation" : true,
"hasCharges" : true,
"hasReimbExpense" : true,
"taxReimbExpense" : false, …

21. Accelerated Workflow

22. Workflow – QA Chrome browser QA Server Resource Request
Serve json requests, images, js, css, fonts, …
Response from QA Server

23. Workflow – Node.js localhost
Chrome browser
QA Server
Local Content?
Serve json requests, images, js, css, fonts, …
Resource Request No
Response from Node.js
Response from QA Server

24. Node.js localhost
var express = require("express"); var httpProxy = require("http-proxy"); var https = require("https"); var fs = require("fs"); //load ssl cert

25. Plugin Framework to Unlock Innovation

27. Replaceable Plugin

28. Demo: Payroll in US and AU

30. Let’s Code One

31. Putting It All Together: Working With Your Designers

32. Launch, August 2013

33. August 2012

34. September 2012

35. October 2012

36. December 2012

37. December 2012

38. April 2013

39. June 2013

40. Launch, August 2013

41. Key Concepts Everything as a service
Client-side frameworks to accelerate coding
Designing services from the UI-first
Plugin framework to unlock innovation
Putting it all together: working with your experience designers

42. Thanks!