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

[Ng-keralam] Style Guide Driven Development

Azizi Yazit
January 27, 2022

[Ng-keralam] Style Guide Driven Development

Style Guide Driven Development using Angular-Storybook

Azizi Yazit

January 27, 2022
Tweet

More Decks by Azizi Yazit

Other Decks in Education

Transcript

  1. Style-Guide
    Driven
    Development
    @aziziyazit

    View full-size slide

  2. Test Driven
    Development
    Test
    Failed
    Dev
    Passed
    Codes &
    Unit Tests

    View full-size slide

  3. Architects
    Software divided using
    domain as a boundaries
    Event
    Storming
    Dev
    Design
    Business
    Sales Context
    Support Context
    1
    1 Image is taken from https://martinfowler.com/tags/domaindrivendesign.html
    Domain Driven
    Development

    View full-size slide

  4. Component & the guide
    to used it
    Component
    Dev
    Design
    2
    2 Image is taken from storybook.js.org
    Application
    Dev
    Style-Guide Driven
    Development
    Living Style Guide (LSG)

    View full-size slide

  5. Style-Guide Driven Development
    If we look at the high level, SGDD is a practice many are already doing:
    developing components and documenting them in a style guide

    View full-size slide

  6. Style-Guide Driven
    Development
    Discover
    1
    Component
    Abstraction
    2
    Implement &
    Documentation
    3 4
    Placeholder Button
    Header
    A Placeholder
    A
    Button
    Header
    Header
    A
    Placeholder Button
    Button
    Button Primary

    Button

    Button
    Button Secondary
    Button
    Button
    Button
    Integrated
    in Apps
    What’s interesting about SGDD is that it both provides
    a playground and a framework for development,
    isolated from the application’s implementation.
    This isolation encourages creating components in an
    abstract way, making them more reusable.

    View full-size slide

  7. 3
    Button
    Button Primary

    Button

    Button
    Button Secondary
    Implement &
    Documentation
    Component
    Abstraction
    2 4
    Placeholder
    A
    Button
    Header
    Header
    A
    Placeholder Button
    Button
    Button
    Button
    Integrated
    in Apps
    Discover
    1
    Placeholder Button
    Header
    A
    Requirements
    Designs
    Designer
    Design Audit
    Requirement
    Grooming
    Produce
    LSG

    View full-size slide

  8. Discover
    1
    Placeholder Button
    Header
    A
    3
    Button
    Button Primary

    Button

    Button
    Button Secondary
    Implement &
    Documentation
    4
    Button
    Button
    Button
    Integrated
    in Apps
    LSG
    Component Audit
    Component
    Abstraction
    2
    Placeholder
    A
    Button
    Header
    Header
    A
    Placeholder Button
    Audit results
    New Component?
    New Variant?
    develop based on
    audtit results
    Component Dev

    View full-size slide

  9. Discover
    1
    Component
    Abstraction
    2 4
    Placeholder Button
    Header
    A Placeholder
    A
    Button
    Header
    Header
    A
    Placeholder Button
    Button
    Button
    Button
    Integrated
    in Apps
    3
    Button
    Button Primary

    Button

    Button
    Button Secondary
    At this stage,
    you got Components
    & the Style-Guide
    Implement &
    Documentation
    LSG

    View full-size slide

  10. Component
    Abstraction
    2
    Placeholder
    A
    Button
    Header
    Header
    A
    Placeholder Button
    Discover
    1
    Placeholder Button
    Header
    A
    3
    Button
    Button Primary

    Button

    Button
    Button Secondary
    Implement &
    Documentation
    4
    Button
    Button
    Button
    Integrated
    in Apps
    App Dev
    LSG
    component
    integration
    API integration
    API
    develop

    View full-size slide

  11. Why SGDD matter
    App
    60%
    40%?

    View full-size slide

  12. Any organization that designs a
    system will produce a design
    whose structure is a copy of the
    organization's communication
    structure.
    Conway Law

    View full-size slide

  13. This is making sense by looking
    at the collaboration gap between
    designer and developer
    App
    60%
    40%?

    View full-size slide

  14. The 'Inverse Conway Maneuver'
    recommends evolving your team
    and organizational structure to
    promote your desired
    architecture
    Designer Component
    Dev
    Application
    Dev
    Dev team
    Components &
    Living StyleGuide
    Layout & integrations

    View full-size slide

  15. Bridging the gap between
    designer and developer
    empathy towards others
    all specs can be
    inspected
    App
    100%
    LSG
    pixel
    perfect
    Component
    Dev
    Application
    Dev
    Designer
    Single source
    of truth

    View full-size slide

  16. Benefits of adapting SGDD
    all specs can be
    inspected
    App
    100%
    pixel
    perfect
    Cognitive load LSG
    Component
    Dev
    Designer
    Application
    Dev
    Separating responsibilities
    between Component Dev
    and App Dev

    View full-size slide

  17. Button
    Button
    Header
    ID
    Password
    Header
    Header
    ID
    Password
    Header
    Button
    Button
    App 1
    Living
    Button
    Button Primary

    Button

    Button
    Button Secondary
    Button
    Button Primary

    Button

    Button
    Button Secondary
    v1
    v2
    App 2
    App 1 App 2
    Benefits of adapting SGDD

    View full-size slide

  18. Benefits of adapting SGDD
    all specs can be
    inspected
    App
    100%
    pixel
    perfect
    Application
    Dev
    Component
    Dev
    Designer
    LSG
    DevOps mindset & culture
    component
    button
    login page
    textfield
    base code
    & layout
    implement
    button
    & textfield
    API
    integration
    mainline
    branch by
    abstraction
    Continuous integration
    Continous feedback

    View full-size slide

  19. Benefits of adapting SGDD
    Agile Scrum Ceremonies
    LSG
    Sprint
    2 weeks
    Planning
    Development
    Daily Scrum
    Review
    LSG
    LSG
    Story point
    Story estimation
    Component Dev to update
    about component progress
    App
    LSG
    Component lib
    consumers
    DoD App
    LSG
    Product
    Owner

    View full-size slide

  20. Benefits of adapting SGDD
    Stakeholders
    Product
    Owner
    LSG
    Designer
    LSG
    design
    develop
    publish
    testing &
    verify
    Testing
    platform
    Prototyping
    platform
    can be assembled
    together to build any
    number of applications

    View full-size slide

  21. Discover
    1
    Placeholder Button
    Header
    A
    3
    Button
    Button Primary

    Button

    Button
    Button Secondary
    Implement &
    Documentation
    4
    Button
    Button
    Button
    Integrated
    in Apps
    Component
    Abstraction
    2
    Placeholder
    A
    Button
    Header
    Header
    A
    Placeholder Button
    Benefits of adapting SGDD
    Component abstraction
    making code reusable,
    reusability makes scale
    possible

    View full-size slide

  22. SGDD And
    Angular Workspace
    Projects
    component-lib
    style-guide
    application1
    application2
    dist
    component-lib
    use component source
    code in dev env
    use component compiled &
    optimized code in prod env
    Angular Monorepo

    View full-size slide

  23. SGDD And
    Component-based framework
    Components are portions of reusable code within
    your system and they serve as the building blocks
    of your application’s interface. Components range
    in complexity. Reducing components to a single
    function like a button or dropdown increases
    flexibility, making them more reusable.
    Image is taken from https://www.bitovi.com/blog/style-guide-driven-development

    View full-size slide

  24. SGDD And
    Angular Schematics
    Customising Angular projects to suit the
    particular needs of your own organisation
    Example organisation requirements:
    • All components must have Style Guide
    • All components must have adapt Atomic Design methodology
    • Component name is based on Atomic Type
    org
    schematics generate

    View full-size slide

  25. Atomic Design
    3 Image is taken from https://atomicdesign.bradfrost.com/
    3

    View full-size slide

  26. SGDD And
    Angular Schematics
    $ ng generate sgdd:component
    ? what is the component name
    ? what is the component atomic type
    button
    > Atom
    Molecules
    Organism
    CREATED a-button.component.ts (1335 bytes)
    CREATED a-button.component.css (535 bytes)
    CREATED a-button.component.html (95 bytes)
    CREATED a-button.stories.ts (2390 bytes)

    View full-size slide

  27. SGDD And
    Angular Builder
    Customise the Angular CLI by adding or modifying
    commands. For example, you could supply a builder
    to perform an entirely new task, or to change which
    third-party tool is used by an existing command.
    builder deploy

    View full-size slide

  28. SGDD And
    Angular Builder
    $ ng deploy
    Build complete
    User verified
    Site ID confirmed
    deploying project from location ./storybook-static

    View full-size slide

  29. Discover
    1
    Component
    Abstraction
    2
    Implement &
    Documentation
    3 4
    Placeholder Button
    Header
    A Placeholder
    A
    Button
    Header
    Header
    A
    Placeholder Button
    Button
    Button Primary

    Button

    Button
    Button Secondary
    Button
    Button
    Button
    Integrated
    in Apps
    SGDD And
    builder
    schematics monorepo

    View full-size slide

  30. Evolution of a Style Guide
    LSG
    Style-Guide
    Driven
    Development

    View full-size slide