Accelerate Your User Experience With Client-side JavaScriptLessons Learned From QuickBooks Online (QBO)


The Presentation inside:

Slide 0

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


Slide 1

Intuit’s Mission: To improve our customers’ financial lives so profoundly… they can’t imagine going back to the old way


Slide 2

A Premiere Innovative Growth Company


Slide 3

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


Slide 4

QBO Transformation


Slide 5

Under the Hood: Everything as a Service


Slide 6

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


Slide 7

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


Slide 8

QBO Technologies Client Rendering HTML5 iOS Android Developer API Services Global Accounting Engine World-Wide Data Centers Data-Only Transport


Slide 9

Client-side Frameworks


Slide 10

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


Slide 11

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


Slide 12

UI-first Services


Slide 13

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.


Slide 14

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?


Slide 15

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


Slide 16

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


Slide 17

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, …


Slide 18

Accelerated Workflow


Slide 19

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


Slide 20

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


Slide 21

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


Slide 22

Plugin Framework to Unlock Innovation


Slide 23


Slide 24

Replaceable Plugin


Slide 25

Payroll in the US


Slide 26

Payroll in Australia


Slide 27

Let’s Code One


Slide 28

Putting It All Together: Working With Your Designers


Slide 29

Launch, August 2013


Slide 30

August 2012


Slide 31

October 2012


Slide 32

September 2012


Slide 33

November 2012


Slide 34

December 2012


Slide 35

February 2012


Slide 36

April 2013


Slide 37

June 2013


Slide 38

Launch, August 2013


Slide 39


Slide 40

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


Slide 41

Thanks! [email protected]


×

HTML:





Ссылка: