Splitting up 8Ball and building/sharing components

Transcript

1. Splitting up 8ball &
   Building &
   Sharing Components:
   Our Plan for 2015
   

   View Slide

2. go/8ballcomponents
   

   View Slide

3. Part 1: App Split
   

   View Slide

4. What’s the plan?
   

   View Slide

5. Split up the app.
   Create more server-side modules.
   Package up flows, dynamic and static
   components.
   

   View Slide

6. Building
   

   View Slide

7. Why split up the app?
   

   View Slide

8. Faster/easier releases
   Benefit #1 !
   !
   !
   

   View Slide

9. Independent releases.
   Can’t block each other.
   Less cross-team merge conflicts.
   

   View Slide

10. Improved focus
    Benefit #2 !
    !
    !
    

    View Slide

11. Remove the noise.
    Write small, focused modules.
    Better code, better docs, better tests.
    Easier ramp up time for new devs.
    

    View Slide

12. More stable
    Benefit #3 !
    !
    !
    

    View Slide

13. Errors and crashes are more contained.
    Kinda sad, but this is a nice feature. =)
    

    View Slide

14. Able to move forward
    Benefit #4 !
    !
    !
    

    View Slide

15. It’s hard to change a monolith.
    It’s easy to change a small app.
    Easier to experiment.
    

    View Slide

16. Push Schedule
    2/24 - settingsnodeweb LTS
    March - Credit App LTS
    April - Transfer App LTS
    

    View Slide

17. Okay, so how do components
    fit into this?
    

    View Slide

18. Part 2: Components
    

    View Slide

19. Modularize the common parts.
    Reason #1 !
    !
    !
    

    View Slide

20. Modularize the common parts.
    

    View Slide

21. consumerweb-* modules
    

    View Slide

22. consumerweb-* TODOs
    Some failing unit tests.
    No ESLint.
    Need to add CI ASAP. Any takers? =)
    

    View Slide

23. Create value ($$$)
    Reason #2 !
    !
    !
    

    View Slide

24. P2P and Add Bank everywhere.
    Drive more people to Consumer Web.
    

    View Slide

25. Unified Login… Unified Add Bank?
    

    View Slide

26. Components are really tough.
    

    View Slide

27. Highly recommended!
    

    View Slide

28. No consistent UI platform.
    Difficult to share code with teams.
    No Kraken for the UI.
    No consistent component APIs.
    

    View Slide

29. Delivering UI components
    

    View Slide

30. Web Components
    Option #1 !
    !
    !
    

    View Slide

31. End all be all?
    !
    Encapsulation.
    Shadow DOM.
    Natural components.
    

    View Slide

32. View Slide

33. iframes
    Option #2 !
    !
    !
    

    View Slide

34. The Good Parts (tm)
    Super old and works everywhere.
    Easy to implement.
    Server-side or Client-side rendered.
    Encapsulated.
    UI platform agnostic.
    Communication via postMessage.
    

    View Slide

35. The Bad Parts
    You can’t pick what you want, you get it all.
    Multiple versions of jQuery, etc.
    Could have performance implications.
    

    View Slide

36. Example:
    P2P 1-line iframe integration
    

    View Slide

37. 
    1. Fetches and loads loader.js
    2. loader.js scrapes off “path” from itself
    3. Creates an iframe
    4. Sets the iframe’s URL to the “path”
    

    View Slide

38. Great part is this is super re-usable.
    
    
    
    …
    

    View Slide

39. redirectUrl
    Option #3 !
    !
    !
    

    View Slide

40. Common pattern.
    Useful for flows (P2P, Add Bank, etc.)
    Least amount of risk.
    Crappiest UX.
    

    View Slide

41. paypal.com/myaccount/transfer?redirectUrl=/merchant/home
    1. Store redirectUrl in session.
    2. /myaccount/transfer is rendered.
    3. If the user exits, redirect to redirectUrl.
    4. If the user completes, redirect to redirectUrl.
    

    View Slide

42. Next steps
    Split out as many apps as possible.
    Keep building server-side modules.
    Build UI components for dust/Backbone.
    Hopefully within 2-3 months =)
    

    View Slide

43. Packaging components
    

    View Slide

44. Bower out.
    npm in.
    

    View Slide

45. component-creditmodule
    npm postinstall script
    Copies files into public/
    !
    dependencies, peerDependencies
    

    View Slide

46. If you’d like to help out,
    let me know!
    

    View Slide