Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Reliving the ‘80s with Borland Turbo-C: A test case for Atomic Design

220 views

Published on

Anyone who got to write C in the 90's on MS-DOS knows this blue screen - not the blue screen of death, the blue screen of Borland Turbo C/C++/Pascal. 30 years after its birth, we are going to implement it using React, MobX and Node.js.

I will show you how to implement a design language and think in atomic design, as well as best practices for managing state and componentization. By the end of this talk you’ll have the tools to create and maintain a scalable UI codebase, spiced with the sweet taste of nostalgia.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Reliving the ‘80s with Borland Turbo-C: A test case for Atomic Design

  1. 1. Borland Turbo C A test case for Atomic Design
  2. 2. 1987
  3. 3. @amitzur
  4. 4. Atomic design
  5. 5. Atomic design Atoms Font Text Lines SpacingColor Molecules Button Paragraph DropdownInput Organism Notifications Search bar
  6. 6. Bootstrap
  7. 7. Bootstrap
  8. 8. Bootstrap bg-cyan text-yellow border-red
  9. 9. Bootstrap
  10. 10. Bootstrap
  11. 11. Spacing
  12. 12. Spacing
  13. 13. Spacing
  14. 14. Spacing
  15. 15. Spacing p-2 py-2
  16. 16. Why is this important? Accumulative errors Positive communication Power to developers Fixed (usually) out of context
  17. 17. API Isomorphism Designers Developers
  18. 18. Shortcut
  19. 19. Shortcut
  20. 20. Shortcut
  21. 21. Shortcut
  22. 22. Atomic design Atoms Font Text Lines SpacingColor Molecules Button Paragraph DropdownInput Organism Notifications Search bar
  23. 23. Atomic design
 (interpreted) Atoms Font Text Lines SpacingColor Organism Search bar Business Logic Organism Notifications Pure UI Molecule Shortcut Molecule Case Sensitive
  24. 24. render props
  25. 25. Menu
  26. 26. Popup Opener Popover
  27. 27. Popup
  28. 28. Navbar
  29. 29. Navbar
  30. 30. Inconsistency Designers Developers
  31. 31. Design systems
  32. 32. Design systems Mozilla Photon Salesforce Lightning Trello Nachos Airbnb Design Language System IBM Carbon 18F U.S. Web design system
  33. 33. Design systems
  34. 34. design ops
  35. 35. html-sketchapp-cli
  36. 36. html-sketchapp-cli
  37. 37. Storybook
  38. 38. Links Atomic design http://bradfrost.com/blog/post/atomic-web-design/ Design ops https://medium.com/designer-hangout/what-is-design-operations-and-why-should-you-care- b72f02b47761 https://airbnb.design/designops-airbnb/ HTML-Sketchapp-cli https://medium.com/seek-blog/sketching-in-the-browser-33a7b7aa0526 Source code https://github.com/amitzur/turbo-c
  39. 39. ευχαριστώ !

×