Deploying Atomic Design System at scale

Talk given at ReactAlicante Conference 2017 - http://reactalicante.es/

Transcript

1. September 2017
   Deploying
   
   Atomic Design System
   
   at scale
   Nick Balestra - @nickbalestra
   

   View Slide

2. Thanks to our sponsors!
   

   View Slide

3. Atomic
   Design System?
   

   View Slide

4. Atomic
   Design System?
   "A mental model to help us
   think of our user interfaces"
   ~ Brad Frost
   

   View Slide

5. Atomic
   Design System?
   Atoms - Molecules - Organisms - Templates - Pages
   

   View Slide

6. Atomic
   Design System?
   Design Tokens - UI Elements - Features - Systems
   

   View Slide

7. Atomic
   Design System?
   Design Tokens - UI Elements - Features - Systems
   • Colors,
   • Spacings,
   • Typography,
   • ...
   

   View Slide

8. Atomic
   Design System?
   Design Tokens - UI Elements - Features - Systems
   • Colors,
   • Spacings,
   • Typography,
   • ...
   props:
   color-brand:
   value: "#DA3743"
   ...
   

   View Slide

9. Atomic
   Design System?
   Design Tokens - UI Elements - Features - Systems
   • Colors,
   • Spacings,
   • Typography,
   • ...
   props:
   color-brand:
   value: "#DA3743"
   ...
   .css
   hsla
   

   View Slide

10. Atomic
    Design System?
    Design Tokens - UI Elements - Features - Systems
    • Colors,
    • Spacings,
    • Typography,
    • ...
    props:
    color-brand:
    value: "#DA3743"
    ...
    .json
    rgba
    .css
    hsla
    

    View Slide

11. Atomic
    Design System?
    Design Tokens - UI Elements - Features - Systems
    • Colors,
    • Spacings,
    • Typography,
    • ...
    props:
    color-brand:
    value: "#DA3743"
    ...
    .json
    rgba
    .css
    hsla
    .xml
    8 digit
    Hex
    (AARRGGBB)
    

    View Slide

12. Design Tokens - UI Elements - Features - Systems
    Atomic
    Design System?
    Sign up
    

    View Slide

13. Atomic
    Design System?
    Design Tokens - UI Elements - Features - Systems
    Sign up
    

    View Slide

14. Atomic
    Design System?
    Design Tokens - UI Elements - Features - Systems
    Sign up
    

    View Slide

15. Design Tokens - UI Elements - Features - Systems
    Atomic
    Design System?
    Sign up
    

    View Slide

16. Design Tokens - UI Elements - Features - Systems
    Atomic
    Design System?
    Sign up
    

    View Slide

17. Atomic
    Design System?
    Sign up
    

    View Slide

18. Sign up
    Deploying Atomic
    Design System?
    at scale?
    

    View Slide

19. Sign up
    Deploying Atomic
    Design System?
    at scale?
    Sign up
    

    View Slide

20. Deploying Atomic
    Design System?
    at scale?
    

    View Slide

21. Deploying Atomic
    Design System?
    at scale?
    

    View Slide

22. Deploying Atomic
    Design System?
    at scale?
    

    View Slide

23. Deploying Atomic
    Design System?
    at scale?
    

    View Slide

24. Deploying Atomic
    Design System?
    at scale?
    

    View Slide

25. Deploying Atomic
    Design System?
    at scale?
    

    View Slide

26. Deploying Atomic
    Design System?
    at scale?
    A story about refactoring,
    decentralized frontend architectures
    and fast moving teams
    

    View Slide

27. Hola Alicante!
    follow me: @nickbalestra
    Software engineer @OpenTable, DX Team
    Love OSS/JS/Node
    OpenComponents core team
    

    View Slide

28. Firstly, a bit of background
    

    View Slide

29. Firstly, a bit of background
    • OpenTable, founded in 1998 - PCLN (NASDAQ)
    

    View Slide

30. Firstly, a bit of background
    • OpenTable, founded in 1998 - PCLN (NASDAQ)
    • We find a table for 23+ million diners/month
    

    View Slide

31. Firstly, a bit of background
    • OpenTable, founded in 1998 - PCLN (NASDAQ)
    • We find a table for 23+ million diners/month
    • 300+ engineers
    

    View Slide

32. Firstly, a bit of background
    • OpenTable, founded in 1998 - PCLN (NASDAQ)
    • We find a table for 23+ million diners/month
    • 300+ engineers
    • Europe, North and South America, Asia
    

    View Slide

33. Firstly, a bit of background
    • OpenTable, founded in 1998 - PCLN (NASDAQ)
    • We find a table for 23+ million diners/month
    • 300+ engineers
    • Europe, North and South America, Asia
    • Millions requests/minute
    

    View Slide

34. Firstly, a bit of background
    • OpenTable, founded in 1998 - PCLN (NASDAQ)
    • We find a table for 23+ million diners/month
    • 300+ engineers
    • Europe, North and South America, Asia
    • Millions requests/minute
    • Full-stack culture
    

    View Slide

35. Once upon a time...
    

    View Slide

36. Once upon a time...
    

    View Slide

37. Once upon a time...
    product consistency
    

    View Slide

38. Once upon a time...
    product consistency
    velocity at scale
    

    View Slide

39. The monolith Front & Back Micro services
    

    View Slide

40. Once upon a time...
    product consistency
    velocity at scale
    

    View Slide

41. Once upon a time...
    < Start />
    < Restaurant />
    < Search />
    microsite
    microsite
    microsite
    

    View Slide

42. Restaurant Profile Search Results Start
    www.opentable.com/san-francisco-restaurants
    

    View Slide

43. Restaurant Profile Search Results Start
    Front-door routing microsite: "start"
    metro: "San Francisco"
    www.opentable.com/san-francisco-restaurants
    

    View Slide

44. Restaurant Profile Search Results Start
    https://start-123/?domain=com&metro=4
    Front-door routing microsite: "start"
    metro: "San Francisco"
    www.opentable.com/san-francisco-restaurants
    

    View Slide

45. Restaurant Profile Search Results Start
    https://start-123/?domain=com&metro=4
    Front-door routing microsite: "start"
    metro: "San Francisco"
    < Restaurant /> < Search />
    < Start />
    www.opentable.com/san-francisco-restaurants
    

    View Slide

46. Restaurant Profile Search Results Start
    https://start-123/?domain=com&metro=4
    Front-door routing microsite: "start"
    metro: "San Francisco"
    < Restaurant /> < Search />
    < Start />
    www.opentable.com/san-francisco-restaurants
    microsite
    

    View Slide

47. HTML Fragments μservice
    Restaurant Profile Search Results Start
    < Start /> < Restaurant /> < Search />
    

    View Slide

48. HTML Fragments μservice
    Restaurant Profile Search Results Start
    < Start /> < Restaurant /> < Search />
    

    View Slide

49. HTML Fragments μservice
    Restaurant Profile Search Results Start
    

    View Slide

50. v0 architecture
    Restaurant Profile Search Results Start
    www.opentable.com/san-francisco-restaurants
    

    View Slide

51. v0 architecture
    Restaurant Profile Search Results Start
    https://start-123/?domain=com&metro=4
    www.opentable.com/san-francisco-restaurants
    

    View Slide

52. v0 architecture
    Restaurant Profile Search Results Start
    https://start-123/?domain=com&metro=4
    www.opentable.com/san-francisco-restaurants
    

    View Slide

53. v0 architecture
    Restaurant Profile Search Results Start
    https://start-123/?domain=com&metro=4
    https://components-123/header
    {
    "html": "Hello World",
    "type":"html"
    }
    www.opentable.com/san-francisco-restaurants
    

    View Slide

54. v0 architecture
    Restaurant Profile Search Results Start
    https://start-123/?domain=com&metro=4
    https://components-123/header
    {
    "html": "Hello World",
    "type":"html"
    }
    https://components-123/header?userType=admin&...
    www.opentable.com/san-francisco-restaurants
    

    View Slide

55. v0 architecture
    Restaurant Profile Search Results Start
    < Page />
    https://start-123/?domain=com&metro=4
    https://components-123/header
    {
    "html": "Hello World",
    "type":"html"
    }
    https://components-123/header?userType=admin&...
    www.opentable.com/san-francisco-restaurants
    

    View Slide

56. HTML Fragments µservice
    

    View Slide

57. HTML Fragments µservice
    

    View Slide

58. HTML Fragments µservice
    Restaurant Profile Search Results Start
    latest
    minor
    patch
    latest
    patch
    patch
    latest
    major
    minor
    

    View Slide

59. HTML Fragments µservice
    Restaurant Profile Search Results Start
    https://components-123/header/1.0.0
    latest
    minor
    patch
    latest
    patch
    patch
    latest
    major
    minor
    

    View Slide

60. HTML Fragments µservice
    Restaurant Profile Search Results Start
    https://components-123/header/1.0.0
    latest
    minor
    patch
    latest
    patch
    patch
    latest
    major
    minor
    

    View Slide

61. OpenComponents
    Restaurant Profile Search Results Start
    https://components-123/header/1.0.0
    latest
    minor
    patch
    latest
    patch
    patch
    latest
    major
    minor
    

    View Slide

62. v0 architecture
    Search Results Start
    OC Registry
    CDN
    OC
    Library
    CLI
    Templates
    Client libraries
    

    View Slide

63. TLDR;
    

    View Slide

64. TLDR;
    • #1 - Microsites architecture
    

    View Slide

65. TLDR;
    • #1 - Microsites architecture
    • #2 - Sharing the common parts
    

    View Slide

66. TLDR;
    • #1 - Microsites architecture
    • #2 - Sharing the common parts
    • #3 - Serverless architecture for micro frontends
    

    View Slide

67. TLDR;
    • #1 - Microsites architecture
    • #2 - Sharing the common parts
    • #3 - Serverless architecture for micro frontends
    • #4 - Template API, infra is UI framework agnostic
    

    View Slide

68. TLDR;
    • #1 - Microsites architecture
    • #2 - Sharing the common parts
    • #3 - Serverless architecture for micro frontends
    • #4 - Template API, infra is UI framework agnostic
    

    View Slide

69. Demo
    $ npm install -g oc
    

    View Slide

70. Client-side rendering
    

    View Slide

71. Client-side rendering
    
    
    ...
    
    
    ...
    
    
    
    

    View Slide

72. Server-side rendering
    

    View Slide

73. Server-side rendering
    const Client = require('oc-client');
    const client = new Client({
    registries: ['https://registry.com/'],
    components: ['header']
    });
    client.renderComponent('header', (err, componentHTML) => {

    console.log(componentHTML) // rendered html

    });
    

    View Slide

74. View Slide

75. View Slide

76. View Slide

77. View Slide

78. Tools
    

    View Slide

79. Tools
    

    View Slide

80. Who's using OC?
    

    View Slide

81. Muchas gracias!
    @nickbalestra
    github.com/opentable/oc
    

    View Slide