SlideShare a Scribd company logo
1 of 16
Download to read offline
JS in
QuickBooks
Joe Wells, Intuit
Doug Crossley, Intuit
Takeaways
1. JavaScript can be developed at scale
2. Legacy applications can evolve
3. Coding QuickBooks Online is fun
QBO 2010 Architecture

Server-Side
Presentation

Single Data
Center

JSP / Custom
Java UI
QBO 2013
Client Rendering
●
HTML5
●
iOS
●
Android

Data-Only
Transport

Developer
API Services
Global
Accounting
Engine
World-Wide
Data Centers

Intuit Partner
Platform
Accounting
Standards

JMS
Messaging

Configurable
Tax Model

eInvoicing &
Payments

Global &
AppStore Billing
QBO Technologies
Client
Rendering

Data-Only
Transport
WAA
Developer
API Services
Global
Accounting
Engine

(FY’14)

(FY’14)

World-Wide
Data Centers

(FY’14)
logging
QuickBooks now has ~100K lines of
JavaScript
● Need to plan up-front to develop a code base
of this size.
● We chose Dojo as a turnkey/complete
solution. Countless alternatives available.
Key Technologies for Scale
●
●
●
●
●
●

AMD - module loading and dependencies
Client-side templating & 2-way binding
MVC+S
Intern async unit tests
JSHint / JSLint (Sublime Text)
Compass / SASS
Complexity

Functionality vs Complexity - Typical

$(‘#typical’)

Functionality over Time
Complexity

Functionality vs Complexity - Goal

Upfront investment yields
dividends as functionality
grows
Functionality over Time
QuickBooks Client Architecture
Domain (Accounting)
Components
Widgets
MVC-S

COTS
AMD
AMD
define([
"dojo/_base/declare",
"libs/jquery",
"libs/highcharts",
"libs/underscore",
"libs/backbone"
], function(declare, $, Highcharts, _, Backbone) {
…
});
Provides a no-build (F5) dev experience. Also builds
minified, optimized layers.
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
MVC + Services
● Many MVC frameworks to choose from
● AMD to load HTML client-side templates
● Isolate XHR calls from your model using a services interface
define([
...
"dojo/text!./templates/View.html",
...
], function(..., View, ... ) {
constructor: function(args) {
// Services
this.txnService = args.TxnService || new TxnService( );
Write your first unit test on your first day
Leverage intern for tests, integrated with Sauce Labs
beforeEach: function () { model = new Model(new TxnMockService()); },
afterEach: function () { model = null; },
"Test Is Connected Bank Account (Positive)": function () {
var failureHint = "Should return true if fiName is present.",
res = model.isConnectedBankAccount({
fiName: "Test"
});
assert.isTrue(res, failureHint);
}

Services isolation will allow you to mock XHR calls
CSS Requires Engineering Design
● Proper CSS scoping
● Apply top-level scoped styles to enable progressive layout
● Use a pre-processor
.qbo {
.invoice {
background: $formBackground;
height: $formHeight - $marginHeight;
}
.menuVisible {
.forms {
margin-left: 0px;
}
}
}
We’re hiring great JavaScript
engineers!
Thanks.
joe_wells@intuit.com
douglas_crossley@intuit.com

More Related Content

Similar to Js in quick books

Resume__DotNet_Koushik_Deb
Resume__DotNet_Koushik_DebResume__DotNet_Koushik_Deb
Resume__DotNet_Koushik_Deb
Koushik Deb
 
Client Object Model - SharePoint Extreme 2012
Client Object Model - SharePoint Extreme 2012Client Object Model - SharePoint Extreme 2012
Client Object Model - SharePoint Extreme 2012
daniel plocker
 
Sanjeev_Kumar_Paul- Resume-Latest
Sanjeev_Kumar_Paul- Resume-LatestSanjeev_Kumar_Paul- Resume-Latest
Sanjeev_Kumar_Paul- Resume-Latest
Sanjeev Kumar Paul
 
RAHUL_Updated( (2)
RAHUL_Updated( (2)RAHUL_Updated( (2)
RAHUL_Updated( (2)
Rahul Singh
 
Resume Tushar Kadam
Resume Tushar Kadam Resume Tushar Kadam
Resume Tushar Kadam
tushar kadam
 
SoCal Code Camp 2011 - ASP.NET MVC 4
SoCal Code Camp 2011 - ASP.NET MVC 4SoCal Code Camp 2011 - ASP.NET MVC 4
SoCal Code Camp 2011 - ASP.NET MVC 4
Jon Galloway
 

Similar to Js in quick books (20)

Developing Next-Gen Enterprise Web Application
Developing Next-Gen Enterprise Web ApplicationDeveloping Next-Gen Enterprise Web Application
Developing Next-Gen Enterprise Web Application
 
Resume__DotNet_Koushik_Deb
Resume__DotNet_Koushik_DebResume__DotNet_Koushik_Deb
Resume__DotNet_Koushik_Deb
 
Client Object Model - SharePoint Extreme 2012
Client Object Model - SharePoint Extreme 2012Client Object Model - SharePoint Extreme 2012
Client Object Model - SharePoint Extreme 2012
 
Sanjeev_Kumar_Paul- Resume-Latest
Sanjeev_Kumar_Paul- Resume-LatestSanjeev_Kumar_Paul- Resume-Latest
Sanjeev_Kumar_Paul- Resume-Latest
 
James Turner (Caplin) - Enterprise HTML5 Patterns
James Turner (Caplin) - Enterprise HTML5 PatternsJames Turner (Caplin) - Enterprise HTML5 Patterns
James Turner (Caplin) - Enterprise HTML5 Patterns
 
Angular Js Basics
Angular Js BasicsAngular Js Basics
Angular Js Basics
 
using Mithril.js + postgREST to build and consume API's
using Mithril.js + postgREST to build and consume API'susing Mithril.js + postgREST to build and consume API's
using Mithril.js + postgREST to build and consume API's
 
Cloud APIs Overview Tucker
Cloud APIs Overview   TuckerCloud APIs Overview   Tucker
Cloud APIs Overview Tucker
 
I Know It Was MEAN, But I Cut the Cord to LAMP Anyway
I Know It Was MEAN, But I Cut the Cord to LAMP AnywayI Know It Was MEAN, But I Cut the Cord to LAMP Anyway
I Know It Was MEAN, But I Cut the Cord to LAMP Anyway
 
The Basics Angular JS
The Basics Angular JS The Basics Angular JS
The Basics Angular JS
 
성공적인 서비스로의 플랫폼 선택
성공적인 서비스로의 플랫폼 선택성공적인 서비스로의 플랫폼 선택
성공적인 서비스로의 플랫폼 선택
 
ServerLess by usama Azure fuctions.pptx
ServerLess by usama Azure fuctions.pptxServerLess by usama Azure fuctions.pptx
ServerLess by usama Azure fuctions.pptx
 
Top 10 Techniques For React Performance Optimization in 2022.pptx
Top 10 Techniques For React Performance Optimization in 2022.pptxTop 10 Techniques For React Performance Optimization in 2022.pptx
Top 10 Techniques For React Performance Optimization in 2022.pptx
 
I Know It Was MEAN, But I Cut the Cord to LAMP Anyway
I Know It Was MEAN, But I Cut the Cord to LAMP AnywayI Know It Was MEAN, But I Cut the Cord to LAMP Anyway
I Know It Was MEAN, But I Cut the Cord to LAMP Anyway
 
RAHUL_Updated( (2)
RAHUL_Updated( (2)RAHUL_Updated( (2)
RAHUL_Updated( (2)
 
MCA-202-W4-L1.pptx
MCA-202-W4-L1.pptxMCA-202-W4-L1.pptx
MCA-202-W4-L1.pptx
 
Resume Tushar Kadam
Resume Tushar Kadam Resume Tushar Kadam
Resume Tushar Kadam
 
Bn1001 demo ppt advance dot net
Bn1001 demo ppt advance dot netBn1001 demo ppt advance dot net
Bn1001 demo ppt advance dot net
 
Client vs Server Templating: Speed up initial load for SPA with Angular as an...
Client vs Server Templating: Speed up initial load for SPA with Angular as an...Client vs Server Templating: Speed up initial load for SPA with Angular as an...
Client vs Server Templating: Speed up initial load for SPA with Angular as an...
 
SoCal Code Camp 2011 - ASP.NET MVC 4
SoCal Code Camp 2011 - ASP.NET MVC 4SoCal Code Camp 2011 - ASP.NET MVC 4
SoCal Code Camp 2011 - ASP.NET MVC 4
 

Recently uploaded

IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
 

Recently uploaded (20)

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 

Js in quick books