1 / 42

Joe Wells Engineering Fellow, Intuit

Accelerate Your User Experience With Client-side JavaScript Lessons Learned From QuickBooks Online (QBO). Joe Wells Engineering Fellow, Intuit. Intuit ’ s Mission:. SMALL BUSINESSES. ACCOUNTING PROFESSIONALS.

odetta
Download Presentation

Joe Wells Engineering Fellow, Intuit

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Intuit’s Mission: SMALLBUSINESSES ACCOUNTINGPROFESSIONALS To improve our customers’ financial livesso profoundly…they can’t imagine going back to the old way CONSUMERS

  3. A Premiere Innovative Growth Company Founded1983 Public 1993INTU Employees8,000+ Global OfficesUS, UK, India,Canada, Australia Revenue4.2B Customers45M

  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 • Client Rendering • HTML5 • iOS • Android Data-Only Transport Intuit Partner Platform JMSMessaging Developer API Services Accounting Standards Configurable Tax Model eInvoicing & Payments Global & AppStore Billing Global Accounting Engine World-Wide Data Centers

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

  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: “650-944-1111”, defaultTerms: “30 Days”, reportingMethod: “cash”, payrollPeriod: “weekly”, hasShipping: true } { date: “2014-06-26”, amount: 100.00, customer: “John” } Which ones apply to an Invoice? What is the logic to interpret them?

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

  19. Alternative: UI First <input data-qbo-bind= ”value: shippingAddress, visible: hasShipping” /> <input data-qbo-bind= ”value: shippingAmount, visible: hasShipping” /> /invoice?txnId=45 /invoice?txnId=-1 { 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" : "2014-06-26", ”amount" : 100.00, ”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 Node.jslocalhost 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 Frameworkto Unlock Innovation

  26. Replaceable Plugin

  27. Demo: Payroll in US and AU

  28. Let’s Code One

  29. Putting It All Together:Working With Your Designers

  30. Launch, August 2013

  31. August 2012

  32. September 2012

  33. October 2012

  34. December 2012

  35. December 2012

  36. April 2013

  37. June 2013

  38. Launch, August 2013

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

More Related