'

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

Понравилась презентация – покажи это...





Слайд 0

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


Слайд 1

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


Слайд 2

A Premiere Innovative Growth Company


Слайд 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


Слайд 4

QBO Transformation


Слайд 5

Under the Hood: Everything as a Service


Слайд 6

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


Слайд 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


Слайд 8

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


Слайд 9

Client-side Frameworks


Слайд 10

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


Слайд 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


Слайд 12

UI-first Services


Слайд 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.


Слайд 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?


Слайд 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!


Слайд 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


Слайд 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, …


Слайд 18

Accelerated Workflow


Слайд 19

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


Слайд 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


Слайд 21

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


Слайд 22

Plugin Framework to Unlock Innovation


Слайд 23


Слайд 24

Replaceable Plugin


Слайд 25

Payroll in the US


Слайд 26

Payroll in Australia


Слайд 27

Let’s Code One


Слайд 28

Putting It All Together: Working With Your Designers


Слайд 29

Launch, August 2013


Слайд 30

August 2012


Слайд 31

October 2012


Слайд 32

September 2012


Слайд 33

November 2012


Слайд 34

December 2012


Слайд 35

February 2012


Слайд 36

April 2013


Слайд 37

June 2013


Слайд 38

Launch, August 2013


Слайд 39


Слайд 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


Слайд 41

Thanks! Joe_Wells@Intuit.com


×

HTML:





Ссылка: