Accelerate Your User Experience With Client-side JavaScriptLessons Learned From QuickBooks Online (QBO) презентация

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

Intuit’s Mission:

A Premiere Innovative Growth Company

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

QBO Transformation

Under the Hood: Everything as a Service

QBO 2001-2010 Architecture

QBO 2014 Architecture

QBO Technologies

Client-side Frameworks

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

Example: Two-way Binding

UI-first Services

A common mistake is to design your services and then adapt your UI to those services. 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.

What Not to Do: Services First

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

Alternative: UI First

Our JSON

Accelerated Workflow

Workflow – QA

Workflow – Node.js localhost

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

Plugin Framework to Unlock Innovation

Payroll in the US

Payroll in Australia

Let’s Code One

Putting It All Together: Working With Your Designers

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

Thanks! [email protected]