Video and slides synchronized, mp3 and slide download available at URL http://bit.ly/2eHXtMf. Julia Nguyen talks about accounting for technical debt in feature work and best practices in refactoring front-end APIs based on her recent work adding Apple Pay support to perk itemization at Indiegogo. She delves into serializer design, decorator pattern, and architecting client-side services. Technical debt is accrued when we lack the responsibility to keep codebases as clean as possible. Filmed at qconnewyork.com. Julia Nguyen is a Software Engineer at Indiegogo. She is the founder of if me, an open source mental health communication app. She organized mentorship initiatives at the University of Waterloo Women in Computer Science Undergraduate Committee. She is the lead organizer of Southeast Asian Ladies in Tech, and organizes meetups for the San Francisco chapter of Write/Speak/Code.

1. Two Households,
Both Alike In Dignity
A Not-So-Tragedy of Refactoring
Front-end APIs
Julia Nguyen - @fleurchild

2. InfoQ.com: News & Community Site
• 750,000 unique visitors/month
• Published in 4 languages (English, Chinese, Japanese and Brazilian
Portuguese)
• Post content from our QCon conferences
• News 15-20 / week
• Articles 3-4 / week
• Presentations (videos) 12-15 / week
• Interviews 2-3 / week
• Books 1 / month
Watch the video with slide
synchronization on InfoQ.com!
https://www.infoq.com/presentations/
front-end-api-technical-debt

3. Presented at QCon New York
www.qconnewyork.com
Purpose of QCon
- to empower software development by facilitating the spread of
knowledge and innovation
Strategy
- practitioner-driven conference designed for YOU: influencers of
change and innovation in your teams
- speakers and topics driving the evolution and innovation
- connecting and catalyzing the influencers and innovators
Highlights
- attended by more than 12,000 delegates since 2007
- held in 9 cities worldwide

4. Julia Nguyen
@fleurchild
Founder @ifmeorg
Storyteller @mhprompt
Organizer @wscsf
Developer @indiegogo

6. Prologue
● Backer Experience and Trust Team
● Tech stack
○ Back-end: Ruby on Rails
○ Front-end: Angular 1, TypeScript (recent)

7. Indiegogo is more
than crowdfunding

8. Perk = Product?

10. Act I
C.R.E.A.M.

13. Capulets: Items and Options

14. Montagues: Apple Pay

17. Act II
An Apple. A Pay.

19. Too many modals!

20. Act III
Starcrossed Perks

21. All of the perks!

23. Act IV
A Wedding

24. Primary Goal

26. Server-side Cleanup

27. Serializer
Picks certain attributes from model
Serializers can be exposed from the
controller

28. Resource (???)
Contains logic for dealing with
attributes, so you don’t have duplicate
logic between serializers

29. SimpleDelegator
A Ruby class that implements the
decorator pattern.
Decorator Pattern
A design pattern that allows behaviour
to be added to a single object without
affecting other objects of the same class
Is an example of separation of
concerns!

30. Two Perk Serializers
private_api/perk_serializer.rb
- Regular perk
- Querying methods found in the
serializer
- Exposed in
campaign_perks_controller.rb
private_api/commerce/perk_serializer.rb
- Perk with items and options
- Querying methods found in
/lib/commerce/resources/perk.rb
- Exposed in
perk_items_controller.rb
Example of duplication: shipping_fees method

31. - Create BasePerkSerializer to be the parent serializer for perks
- Place shared attributes
- Initialize resource (SimpleDelegator) in that serializer, don’t need a
separate controller
Base Perk Serializer

33. Client-side Cleanup

34. Angular Architecture

35. js/client
A place for services
that make API calls

37. One Type to Rule Them All
- Create Perk typing and related typings like PerkItem in
js/client/perks/types.ts
- Get rid of PerkJSON and PerkFactoryPerk, replace with Perk

38. Settle on Attributes, Remove Duplication
- PerkFactory is sort of misleading, only calculated shipping fees
- Converted between shipping.fees and shipping_fees
- Refactor PerkFactory, eliminate shipping.fees and use shipping_fees
- Convert PerkFactory to TypeScript
- perk-factory.js was 342 lines
- Perk-factory.ts is 182 lines

39. A Good Fake Death!

41. Refactoring Front-end APIs in Summary
- Start from the server-side and move to the client-side, you will uncover more
- Use serializers! You don’t usually need all of the data!
- Consolidate serializers and remove duplication through the decorator pattern
- Model attribute names should be consistent between the server-side and client-side
- Consolidate services that make the same API calls, make them importable modules!

42. Act V
Postmortem

44. Technical Debt
Extra development work that arises
when code that is easy to implement in
the short run is used instead of
applying the best overall solution
Tackling debt “as you go” reduces debt
and prevents debt from accruing

45. Can’t Refactor Everything, But You Can Document It

46. Tackling Technical Debt in Summary
- Better to investigate technical debt at the beginning of a project than discover it later
- Account for technical debt in sprint planning, integrate it in the pull request process
(it’s not just a backlog issue)
- Get your PM involved in the process, even if they are non-technical
- Ask lots of questions from developers who have worked with the codebase for longer
(people skills people!)
- Tackle your refactoring in bite-sized chunks, easier to undo if you mess up

47. Useful Resources
Sandi Metz' Rules for Developers
Refactoring.com by Martin Fowler
"Don't reset --hard: Strategies for Tackling Large Refactors" by Siena Aguayo
"7 Design Patterns to Refactor MVC Components in Rails" by Viktoria
Kotsurenko
"JavaScript Factory Functions vs Constructor Functions vs Classes" by Eric
Elliott

48. Could tackling technical debt
have saved Romeo + Juliet?
If the Capulets and Montagues got their shit
together, quite possibly
But maybe the ~*drama*~ made their
relationship?

49. Let’s tackle technical debt like
we’re Mercutio and it’s 1996
@fleurchild

50. Watch the video with slide synchronization on
InfoQ.com!
https://www.infoq.com/presentations/front-
end-api-technical-debt