Girl Geek Dinner

  • 1,780 views
Uploaded on

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 …

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"

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,780
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
7
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • NOTES:
  • NOTES:
  • NOTES:
  • NOTES:
  • NOTES:
  • NOTES:
  • NOTES:
  • NOTES:
  • NOTES:
  • NOTES:
  • NOTES:
  • NOTES:
  • NOTES:

Transcript

  • 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