Joe Wells, VP, Engineering Fellow at Intuit, talked about how to accelerate your user experience with client-side JavaScript at Velocity 2014. Great takeaways for designers, developers and product managers.

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

2. 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 1993
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. Under the Hood:
Everything as a Service

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

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

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

10. Client-side Frameworks

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

12. 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

13. UI-first Services

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

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

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

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

18. 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" : "2014-06-26",
”amount" : 100.00,
”customer" : ”John”,
"txnProps" : {
"hasShipping" : true,
"hasDiscount" : true,
"hasLocation" : true,
"hasCharges" : true,
"hasReimbExpense" : true,
"taxReimbExpense" : false,
…

19. Accelerated Workflow

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

21. Workflow – Node.js localhost
Serve json
requests,
images, js,
css, fonts, …
Serve json
requests,
images, js,
css, fonts, …
Chrome browser QA ServerNode.js localhost
Resource RequestResource Request
Local
Content?
Local
Content? NoNo
Response from QA ServerResponse from QA Server
Response from Node.jsResponse from Node.js

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

23. Plugin Framework
to Unlock Innovation

25. Replaceable Plugin

26. Payroll in the US

27. Payroll in Australia

28. Let’s Code One

29. Putting It All Together:
Working With Your Designers

30. Launch, August 2013

31. August 2012

32. October 2012

33. September 2012

34. November 2012

35. December 2012

36. February 2012

37. April 2013

38. June 2013

39. 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!
Joe_Wells@Intuit.com