Design Systems and Component Based Frontend

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