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

Design Systems and Component Based Frontend

Design Systems and Component Based Frontend

Bilal Çınarlı

June 27, 2019
Tweet

More Decks by Bilal Çınarlı

Other Decks in Programming

Transcript

  1. Design Systems & Component
    Based Frontend

    View Slide

  2. Bilal Çınarlı
    Frontend Architect
    Software Engineer @Adidas
    @bcinarli
    github.com/bcinarli
    bcinarli.com

    View Slide

  3. View Slide

  4. Harmony from Intuit, GEL – Global Experience Language
    from BBC, Material from Google, Lightning from Salesforce,
    AirBNB’s Visual Language, Joystick from EA, Fluent from
    Microsoft, Plasma from WeWork, Polaris from Shopify,
    Lonely Planet, Swarm from Meetup, Canvas from Hubspot
    …and aDL from Adidas

    View Slide

  5. What is a design system?

    View Slide

  6. A collection of reusable components,
    guided by clear standards,
    that can be assembled together
    to build any number of applications.

    View Slide

  7. View Slide

  8. A design system is a combination of
    style, components, and voice.

    View Slide

  9. It is scalable at any level

    View Slide

  10. Provides consistency
    between different pages and applications

    View Slide

  11. With the set of rules and guides,
    increases the efficiency

    View Slide

  12. Enhances the teamwork and
    eases the on-boarding of new members

    View Slide

  13. http://bit.do/yarnds

    View Slide

  14. http://bit.do/adl_

    View Slide

  15. Components

    View Slide

  16. Components support levels of abstraction
    in an application. It is layered and feature-based.

    View Slide

  17. Individual components provide decoupling which
    leads to better unit testings and stability.

    View Slide

  18. Design system and Components
    combine mostly in UI layer where your
    presentation occurs

    View Slide

  19. Besides, components can also communicate
    with the data layer while rendering our content.

    View Slide

  20. …and with the standardisation, it improves quality.

    View Slide

  21. View Slide

  22. How Popular Libraries Think?

    View Slide

  23. Build encapsulated components
    that manage their own state,
    then compose them to make complex UIs.

    View Slide

  24. Components define areas of responsibility
    in your UI that let you reuse
    these sets of UI functionality.

    View Slide

  25. It’s an abstraction that allows us to build large-scale
    applications composed of small,
    self-contained, and often reusable components.

    View Slide

  26. But the mainly, they should have a responsibility
    over a single part.

    View Slide

  27. View Slide

  28. How to Organise?

    View Slide

  29. Define your folder structure
    based on their functionalities

    View Slide

  30. Think of everything is sort-of a
    pluggable component.
    In most cases, when you remove it,
    you should expect no traces left.

    View Slide

  31. // DON’T
    .
    !"" controllers
    | !"" cart.js
    | #"" checkout.js
    !"" models
    | !"" cart.js
    | #"" checkout.js
    #"" views
    !"" cart.pug
    #"" checkout.pug
    // DO
    .
    !"" cart
    | !"" index.js
    | #"" template.pug
    #"" checkout
    !"" index.js
    #"" template.pug

    View Slide

  32. …and tests are a part of your components.

    View Slide

  33. // add test specs
    .
    !"" cart
    | !"" index.js
    | !"" test.spec.js
    | #"" template.pug
    #"" checkout
    !"" index.js
    !"" test.spec.js
    #"" template.pug

    View Slide

  34. Separate config and scripts
    away from your components.

    View Slide

  35. .
    !"" config
    | !"" index.js
    | #"" server.js
    !"" scripts
    | !"" build.sh
    | #"" post-install.sh
    !"" test
    | !"" index.js
    | #"" setup.spec.js
    !"" cart
    | !"" index.js
    | !"" test.spec.js
    | #"" template.pug
    #"" checkout
    !"" index.js
    !"" test.spec.js
    #"" template.pug

    View Slide

  36. Keep HTML and CSS separate
    in your source code
    and never inline manually

    View Slide

  37. // DON’T
    Hello World!

    // DO
    .content-text {
    margin: 10px 0;
    padding: 0;
    }
    Hello World!

    View Slide

  38. Always think about specificity in CSS,
    try to avoid creating specific selectors

    View Slide

  39. // DON’T
    #main .article .title
    span {
    font-size: 32px;
    font-weight: bold;
    }
    // DO
    .main-article-title {
    font-size: 32px;
    font-weight: bold;
    }

    View Slide

  40. Do not write the code
    you are going to overwrite

    View Slide

  41. // DON’T
    .content {
    display: flex;
    max-width: 1280px;
    margin: 0 auto;
    }
    .article {
    width: 900px;
    }
    .supplementary {
    width: 380px;
    }
    @media screen and (min-width: 48.0625em)
    and (max-width: 64em) {
    .article {
    width: 644px;
    }
    }
    @media screen and (max-width: 48em) {
    .content {
    flex-direction: column;
    }
    .article,
    .supplementary {
    width: 100%;
    }
    }
    // DO
    .content {
    max-width: 1280px;
    margin: 0 auto;
    }
    @media screen and (min-width: 48.0625em) {
    .content {
    display: flex;
    }
    .article {
    flex: 1;
    }
    .supplementary {
    width: 380px;
    }
    }

    View Slide

  42. A way to unify different frameworks?

    View Slide

  43. Web components are a set of web platform APIs that allow
    you to create new custom, reusable, encapsulated HTML
    tags to use in web pages and web apps.

    View Slide

  44. Custom components and widgets build on the Web
    Component standards, will work across modern browsers,
    and can be used with any JavaScript library or framework
    that works with HTML.

    View Slide

  45. drawer“>
    raised

    View Slide

  46. <br/>class AppDrawer extends HTMLElement {...}<br/>window.customElements.define('app-drawer',<br/>AppDrawer);<br/>

    View Slide

  47. Good part, all JS frameworks outputs to HTML.
    Theoretically, we can use any popular
    JS library to create Web Components

    View Slide

  48. What is more?

    View Slide

  49. Having self-contained, reusable components
    helps to turn you app to micro frontends

    View Slide

  50. … that can have independent deployment, build, coding

    View Slide

  51. … leads to autonomous teams

    View Slide

  52. … and you can have a shell that orchestrates which micro
    frontend to load

    View Slide

  53. … with the “Best Friend of Frontend"

    View Slide

  54. Your components should not know
    what the dependencies are
    in behind the curtains you are using.

    View Slide

  55. It should only aware of which
    functions are available for a particular action.

    View Slide

  56. Every dependency comes with
    a technical debt for the future.

    View Slide

  57. Thank you
    @bcinarli

    View Slide