0
Accelerate Your User
Experience With Client-side
JavaScript
Lessons Learned From
QuickBooks Online (QBO)
Joe Wells
Enginee...
Intuit’s Mission:
To improve our customers’ financial lives so profoundly…
they can’t imagine going back to the old way
CO...
A Premiere Innovative Growth Company
Employees
8,000+
Customers
45M
Global Offices
US, UK, India,
Canada, Australia
Revenu...
Key Concepts
 Everything as a service
 Client-side frameworks to accelerate coding
 Designing services from the UI-firs...
QBO Transformation
Under the Hood:
Everything as a Service
QBO 2001-2010 Architecture
Server-Side Presentation
Single Data Center
JSP / Custom Java UI
QBO 2014 Architecture
Configurable
Tax Model
Accounting
Standards
eInvoicing &
Payments
Global &
AppStore Billing
Intuit P...
QBO Technologies
Client Rendering
•HTML5
•iOS
•Android
Developer
API Services
Global Accounting
Engine
World-Wide
Data Cen...
Client-side Frameworks
Frameworks
 You’re using require.js, right?
 And SASS/LESS please?
 What about two-way binding?
Example: Two-way Binding
<div data-qbo-bind="visible: showDate">
<div>${nls.date}</div>
<input class="dateInput" type="tex...
UI-first Services
A common mistake is to design your services and
then adapt your UI to those services.
This is backwards!
And it results in...
What Not to Do: Services First
{
phoneNumber: “650-944-1111”,
defaultTerms: “30 Days”,
reportingMethod: “cash”,
payrollPer...
if (invoice.isNew && prefs.hasShipping) {
$(‘#shippingAddress’).show();
$(‘#shippingAmount’).show();
} else if (invoice.is...
Alternative: UI First
<input data-qbo-bind=
”value: shippingAddress,
visible: hasShipping”
/>
<input data-qbo-bind=
”value...
Our JSON
{
"txnId" : -1,
"txnTypeId" : 4,
"date" : "2014-06-26",
"txnProps" : {
"hasShipping" : true,
"hasDiscount" : true...
Accelerated Workflow
Workflow – QA
Resource RequestResource Request
Serve json
requests,
images, js,
css, fonts, …
Serve json
requests,
images,...
Workflow – Node.js localhost
Serve json
requests,
images, js,
css, fonts, …
Serve json
requests,
images, js,
css, fonts, …...
Node.js localhost
var express = require("express");
var httpProxy = require("http-proxy");
var https = require("https");
v...
Plugin Framework
to Unlock Innovation
Replaceable Plugin
Payroll in the US
Payroll in Australia
Let’s Code One
Putting It All Together:
Working With Your Designers
Launch, August 2013
August 2012
October 2012
September 2012
November 2012
December 2012
February 2012
April 2013
June 2013
Launch, August 2013
Key Concepts
 Everything as a service
 Client-side frameworks to accelerate coding
 Designing services from the UI-firs...
Thanks!
Joe_Wells@Intuit.com
Velocity 2014: Accelerate Your User Experience With Client-side JavaScript
Velocity 2014: Accelerate Your User Experience With Client-side JavaScript
Upcoming SlideShare
Loading in...5
×

Velocity 2014: Accelerate Your User Experience With Client-side JavaScript

2,081

Published on

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.

Published in: Software, Technology, Business

Transcript of "Velocity 2014: Accelerate Your User Experience With Client-side JavaScript"

  1. 1. Accelerate Your User Experience With Client-side JavaScript Lessons Learned From QuickBooks Online (QBO) Joe Wells Engineering Fellow, Intuit
  2. 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. 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. 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. 5. QBO Transformation
  6. 6. Under the Hood: Everything as a Service
  7. 7. QBO 2001-2010 Architecture Server-Side Presentation Single Data Center JSP / Custom Java UI
  8. 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. 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. 10. Client-side Frameworks
  11. 11. Frameworks  You’re using require.js, right?  And SASS/LESS please?  What about two-way binding?
  12. 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. 13. UI-first Services
  14. 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. 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. 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. 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. 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. 19. Accelerated Workflow
  20. 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. 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. 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. 23. Plugin Framework to Unlock Innovation
  24. 24. Replaceable Plugin
  25. 25. Payroll in the US
  26. 26. Payroll in Australia
  27. 27. Let’s Code One
  28. 28. Putting It All Together: Working With Your Designers
  29. 29. Launch, August 2013
  30. 30. August 2012
  31. 31. October 2012
  32. 32. September 2012
  33. 33. November 2012
  34. 34. December 2012
  35. 35. February 2012
  36. 36. April 2013
  37. 37. June 2013
  38. 38. Launch, August 2013
  39. 39. 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
  40. 40. Thanks! Joe_Wells@Intuit.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×