Intuit hosted a Girl Geek Dinner at its Mountain View campus, featuring Intuit speakers Cheryl Ainoa, Amanda Linden, Manasa Murthy and Anu Tewary. The Girl Geek Dinner events are hosted in locations around the world and are designed to encourage women to be involved in technology, along with provide networking and recruiting opportunities. Presentations include: "Harmony: Design innovation in QuickBooks Online (QBO)" "JavaScript at Scale in QuickBooks Online (QBO)" "Why we need more girl geeks"

1. Welcome!

2. Harmony: Design innovation in QuickBooks Online (QBO)
Amanda Linden, Design Leader, QuickBooks Web & Mobile
Girl Geek Dinner | Feb. 6, 2014

3. We used to work like this …
Requirements
3
Design
Build

4. We delivered …

5. … Complexity
Variances in interaction design across our products and within a product
5

6. … Confusion
Variances in tone and voice across our products and within a product
6

7. … Inconsistency
Visual design disparity across the ecosystem and within the products
7

8. … Loose connections
Showing our org structure in our designs
8

9. For the QuickBooks redesign, we worked differently
Design
Build
User
Experience
Requirements
9

10. We broke down the
application into components

11. Application components
11

12. Application components
12

13. We designed to enable two
core actions: create & find

14. Global create
14

15. Create and search
15

16. With these pieces in
place, developers could
create pages on their own

17. 17

18. How elements appear on the screen
Transaction browser
(trowser)
Drawer
18

19. 19

20. We had more time to focus
on innovation

21. One-click expense capture
21

22. Invoice customization
22

23. 23

24. Thank you

25. JavaScript at Scale in QuickBooks Online (QBO)
Manasa Murthy, Senior Development Manager
Girl Geek Dinner | Feb. 6, 2014

26. What scale means for QBO
1.5M active users
Up to 150 workflows
Released in 174 countries
26

27. Technologies used in QBO
Client
Rendering
Data-Only
Transport
Developer
API Services
Global
Accounting
Engine
World-Wide
Data Centers
WAA

28. What matters most
Happy engineers – latest technology, Agility
Maintainability
Faster loading pages
Better quality
28

29. Functionality vs. complexity: what’s typical
Complexity
$(‘#typical’)
Functionality over time
29

30. Functionality vs. complexity: our goal
Complexity
Upfront investment yields
dividends as functionality
grows
Functionality over time
30

31. Scaled to 100+ engineers with
~100K lines of client code.
Complexity is still manageable.
31

32. Use OO JavaScript
return declare([Stateful, Evented], {
constructor: function (args) {
this.dirty = false;
},
isDirty: function () {
return this.dirty || this.inherited();
}
…
});
32

33. Two-way binding
Definition: The ability to bind changes to an object’s properties to changes in the UI, and vice versa.
<div data-qbo-bind="visible: showDate">
<div>${nls.date}</div>
<input class="dateInput” data-qbobind="value: date"
data-dojo-type="qbo/widgets/DateTextBox”/>
</div>
Our homegrown two-way binding framework is inspired by
33

34. 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;
}
}
}
34

35. Single-page application
• Entire page loaded only once
• Refresh only parts of the application
• Responsive UI
35

36. Asynchronous module definition
Definition: AMD is a JavaScript API that lets you define and manage modules and their dependencies.
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.
36

37. Unit test
define([
"intern!object”
], function (registerSuite) {
registerSuite({
Name: "sampleSuite",
Setup: function () {},
beforeEach: function () {},
afterEach: function () {},
teardown: function () {},
"test1”: function () {}
… //More tests
});
});
37
Services isolation allows you
to mock XHR calls.
intern

38. End results
Happy engineers
• Went from 2 months to 2 weeks to write a new form
• Build times went from 2 min to 0 min on client side
Maintainability
• ~100K lines of JavaScript
• Separation of concerns – JavaScript, Java, CSS, HTML
• Onboarding down to 1 week
Faster loading pages
• < 2 sec for top workflows
• Better performance across the globe
Better quality
• ~400 unit tests just on the client side
38

39. Thank you

40. Why we need more girl geeks
Anu Tewary, Director of Data Products and Founder of Technovation Challenge
Girl Geek Dinner | Feb. 6, 2014

41. My path to a career in technology
41

42. The Level Up team
42

43. The challenges
CHALLENGE 1:
Not enough girls enter the field
of technology. Girls see
themselves as users, not
innovators, of technology.
CHALLENGE 2:
Once in the field, not enough
women stay. 56% of women
leave the field mid-career.
43

44. The Technovation Challenge
• Girls program mobile apps to
solve problems in their
community.
• Girls pitch business plans for
funding.
• Mentors use their deep technical
expertise while gaining
experience launching a new
venture.
44

45. Girls as innovators
• When girls participate in the
innovation process, the outcome
is diverse.
• We get ideas for apps such as
Uber and Pinterest ahead of their
time!
• AND we get apps such as
Arrive, StudiCafe, IOU, and
MASH
45

46. Why is it great to be a woman in tech?
• Sometimes it isn’t ... it’s lonely. 
- There aren’t enough of us here ... but there should be. 
• It’s changing and what we’re doing here is making it better. 
- It’s fun to be part of the solution. 
46

47. Trending in the right direction
Varsha R.
Level Up Analytics interns
47

48. Inspire and be inspired!
Sign up to be a mentor! Email Judy@Iridescentlearning.org
48

49. Questions? Comments?
Meet for coffee?
anutewary@gmail.com

50. Q&A