Delivering Flexible Cross Platform Design Systems

Delivering Flexible Cross Platform Design Systems

(Presented at Design Systems London 2018)

The affordances & aesthetics of a design system are only the tip of the iceberg for engineering teams operating at scale. The implementation of colors, typography, individual component interactions, and other aspects of the design language must be flexible enough to enable teams that may use multiple platforms (such as React & React native), multiple CSS approaches (such as class-based or inline-based CSS styling), or even multiple brands (i.e. white labeling).

This talk will explore delivery & implementation approaches for these aspects of design systems with a focus on developer experience. It will provide battle-hardened techniques and strategies that answer some of the most important engineering questions on how to deliver a flexible system into production Web & Native applications consistently across a large organization with several independent product teams.

D43e8ea63b61e7669ded5b9d3c2e980f?s=128

Charlie Robbins

November 16, 2018
Tweet

Transcript

  1. 2.
  2. 4.
  3. 7.
  4. 8.
  5. 9.
  6. 10.

    UXCore2 Our design system ABOUT 50 COMPONENTS REACT BASED OVER

    100 CONTRIBUTORS STARTED IN LATE 2015 SUPPORTS REACT NATIVE ~40% OF FRONT END ENGINEERS
  7. 15.
  8. 18.
  9. 20.
  10. 26.
  11. 27.
  12. 31.
  13. 32.
  14. 34.
  15. 36.
  16. 39.
  17. 41.

    NO

  18. 47.
  19. 49.
  20. 50.
  21. 51.
  22. 52.
  23. 53.
  24. 58.

    λ-CALCULUS OF COLOR SELECTION WHAT IF A BRAND WANTS TO

    USE “SECONDARY” FOR “PRIMARY” BUTTON? MORE BUTTON-SPECIFIC VARIABLES FOR REBINDING In λ-calculus this is an “α-conversion”
  25. 60.
  26. 63.
  27. 65.
  28. 67.
  29. 69.
  30. 71.
  31. 75.
  32. 76.
  33. 78.
  34. 80.
  35. 82.
  36. 83.
  37. 85.

    AS SIMPLE possible with as CLEAR REQUIRE / IMPORT USAGE

    DESIGN DOCUMENTATION PLATFORM SPECIFIC EXAMPLES ZERO CONFIG, SANE DEFAULTS
  38. 86.
  39. 88.
  40. 90.
  41. 92.
  42. 93.

    can break publishing NPM INSTALL & UNIT TESTS UPSTREAM BUILD

    TOOLCHAINS REACT NATIVE APPS MISCONFIGURED CONSUMERS
  43. 94.
  44. 95.
  45. 97.
  46. 99.
  47. 101.

    WARNING: CONSUMER BUNDLES SHOULD NOT INCLUDE YOUR DESIGN SYSTEM OR

    DEPENDENCIES THAT CHANGE INFREQUENTLY PLEASE BE ADVISED.
  48. 102.
  49. 106.
  50. 108.
  51. 113.
  52. 114.

    ANY ORDINARY WEBPACK BUNDLE MODULE LOADER – THE “FACTORY” MODULE

    0 module.exports = /* module 0’s code */ MODULE 1 module.exports = /* module 1’s code */ MODULE 2 module.exports = /* module 2’s code */ MODULE 3 module.exports = /* module 3’s code */
  53. 115.

    ANY ORDINARY WEBPACK BUNDLE MODULE LOADER – THE “FACTORY” MODULE

    0 module.exports = /* module 0’s code */ MODULE 1 module.exports = /* module 1’s code */ MODULE 2 module.exports = /* module 2’s code */ MODULE 3 module.exports = /* module 3’s code */ module.exports = window.path.to.module2;
  54. 116.
  55. 117.
  56. 118.
  57. 122.
  58. 124.
  59. 126.
  60. 128.
  61. 130.
  62. 132.

    warehouse.ai Using npm dist-tag add @your/package@1.2.3 prod makes this trivial

    ... TRY IT OUT! HTTPS://GITHUB.COM/GODADDY/WAREHOUSE.AI
  63. 133.
  64. 136.

    ... YOU CAN’T AVOID IT WARNING: ON A LONG ENOUGH

    TIMELINE, IF LEFT UNCHECKED ALL SOFTWARE WILL CRUMBLE FROM TECHNICAL DEBT PLEASE BE ADVISED.
  65. 137.

    UPGRADING TO NEW VERSIONS: REACT, BABEL, WEBPACK, ETC. REMOVING DEPRECATED

    APIS E.G. componentWillReceiveProps, etc. USING LATEST APIS – E.G. PORTALS, REACT@16 CONTEXT, etc.
  66. 138.

    IT ADDS UP QUICKLY UPGRADING TO NEW VERSIONS: REACT, BABEL,

    WEBPACK, ETC. REMOVING DEPRECATED APIS E.G. componentWillReceiveProps, etc. USING LATEST APIS – E.G. PORTALS, REACT@16 CONTEXT, etc.
  67. 139.

    MAY THE SOURCE BE WITH YOU SLIDES WILL BE POSTED

    ON TWITTER SHORTLY – FOLLOW ME @INDEXZERO THANKS FOR LISTENING!