Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Decoupling Packages From Your Framework

Adam Wathan
November 08, 2014

Decoupling Packages From Your Framework

It's really fun to build a package that adds some awesome functionality to your favourite framework. If you're not careful however, you can end up releasing something that nobody could use outside of Framework-X no matter how hard they try.

In this talk, I'll walkthrough building a framework agnostic package. You'll learn about important OO design principles like dependency injection, interfaces, and encapsulation, and see how we can integrate our package with a modern framework like Laravel, or the messiest legacy codebase you've ever seen.

Adam Wathan

November 08, 2014
Tweet

More Decks by Adam Wathan

Other Decks in Programming

Transcript

  1. DECOUPLING PACKAGES
    FROM YOUR FRAMEWORK
    @ADAMWATHAN

    View full-size slide

  2. @ADAMWATHAN
    ▸ Software developer
    ▸ Host of Full Stack Radio
    ▸ Former Audio engineer
    ▸ Competitive powerlifter

    View full-size slide

  3. @ADAMWATHAN
    ▸ Software developer
    ▸ Host of Full Stack Radio
    ▸ Former Audio engineer
    ▸ Competitive powerlifter
    ▸ ...Batman?

    View full-size slide

  4. 42,288
    PACKAGES

    View full-size slide

  5. 413,057,365
    PACKAGES INSTALLED

    View full-size slide

  6. An example...

    View full-size slide

  7. FLUENT FORM BUILDER

    View full-size slide

  8. 1. REPOPULATE FORM WITH OLD INPUT IF SUBMISSION FAILS

    View full-size slide

  9. Ditch this...

    View full-size slide

  10. ...for just this:

    View full-size slide

  11. 2. ABLE TO RETRIEVE ERROR MESSAGES FOR EACH ELEMENT

    View full-size slide

  12. Something like this...

    View full-size slide

  13. #1: RETRIEVING OLD INPUT

    View full-size slide

  14. Probably this sort of thing...

    View full-size slide

  15. In Laravel...

    View full-size slide

  16. In Laravel...

    View full-size slide

  17. Composer.json...

    View full-size slide

  18. The whole truth...

    View full-size slide

  19. What about...

    View full-size slide

  20. No dependencies
    !==
    NO COUPLING

    View full-size slide

  21. So what's the
    answer?

    View full-size slide

  22. Dependency
    INJECTION

    View full-size slide

  23. Dependency injection is a software design pattern that
    implements inversion of control and allows a program
    design to follow the dependency inversion principle. 1
    1 http://en.wikipedia.org/wiki/Dependency_injection

    View full-size slide

  24. ...Come again?

    View full-size slide

  25. INSTEAD OF AN OBJECT GETTING
    IT'S OWN DEPENDENCIES,
    WE SHOULD GIVE THEM TO THE
    OBJECT OURSELVES.

    View full-size slide

  26. Becomes this...

    View full-size slide

  27. THIS IS BETTER BUT...

    View full-size slide

  28. We're still coupled...

    View full-size slide

  29. DEPEND ON INTERFACES
    not implementations

    View full-size slide

  30. Something like...

    View full-size slide

  31. INTERFACES 101

    View full-size slide

  32. INTERFACES 101
    ▸ Like a contract

    View full-size slide

  33. INTERFACES 101
    ▸ Like a contract
    ▸ Describes public API of a role

    View full-size slide

  34. INTERFACES 101
    ▸ Like a contract
    ▸ Describes public API of a role
    ▸ Does not provide any implementation

    View full-size slide

  35. INTERFACES 101
    ▸ Like a contract
    ▸ Describes public API of a role
    ▸ Does not provide any implementation
    ▸ Great as documentation in a package

    View full-size slide

  36. An implementation...

    View full-size slide

  37. Now instead of this...

    View full-size slide

  38. ...we can do this:

    View full-size slide

  39. What about
    OTHER
    frameworks?

    View full-size slide

  40. What about
    NON-FRAMEWORK
    applications?

    View full-size slide

  41. #2: ERROR MESSAGES

    View full-size slide

  42. Something like this would be cool...

    View full-size slide

  43. So we need these badboys...

    View full-size slide

  44. Could do this...

    View full-size slide

  45. Let's add it to the interface...

    View full-size slide

  46. ...and the implementation:

    View full-size slide

  47. Looks good right?

    View full-size slide

  48. Why a
    SESSION?

    View full-size slide

  49. Identify the right
    ABSTRACTIONS

    View full-size slide

  50. 1.
    Somewhere to get
    OLD INPUT

    View full-size slide

  51. 2.
    Somewhere to get
    ERRORS

    View full-size slide

  52. Somewhere to get old input...

    View full-size slide

  53. Somewhere to get errors...

    View full-size slide

  54. Somewhere to get old input...

    View full-size slide

  55. Somewhere to get errors...

    View full-size slide

  56. Updated Form Builder...

    View full-size slide

  57. Laravel Old Input...

    View full-size slide

  58. Laravel Error Store...

    View full-size slide

  59. Legacy Old Input...

    View full-size slide

  60. Legacy Error Store...

    View full-size slide

  61. Symfony Old Input...

    View full-size slide

  62. Focus on
    ONE JOB

    View full-size slide

  63. Bootstrap prototype...

    View full-size slide

  64. Bootstrap prototype...

    View full-size slide

  65. Bootstrap boilerplate...

    View full-size slide

  66. ...reduced to this:

    View full-size slide

  67. Optimize for
    COMPOSABILITY

    View full-size slide

  68. BootForms dependencies...

    View full-size slide

  69. Composabilitize!

    View full-size slide

  70. YOU DON'T HAVE TO SUPPORT EVERY FRAMEWORK OUT OF THE BOX...
    JUST DON'T GET IN THE WAY.

    View full-size slide

  71. ENCOURAGES COMMUNITY COLLABORATION

    View full-size slide

  72. IT'S JUST GOOD CODE.

    View full-size slide

  73. @ADAMWATHAN
    ADAMWATHAN.ME
    FULLSTACKRADIO.COM
    JOIND.IN/12711

    View full-size slide