$30 off During Our Annual Pro Sale. View Details »

Splitting up 8Ball and building/sharing components

Splitting up 8Ball and building/sharing components

Mark Stuart

February 19, 2015
Tweet

More Decks by Mark Stuart

Other Decks in Programming

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