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.

Creating a reusable ui component

69 views

Published on

Slide deck from the 'Creating a Reusable UI Component' talk, presented at the OWDC Front-End track.

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Creating a reusable ui component

  1. 1. Creating a Reusable UI Component
  2. 2. | Change session name in master slide Rui Mendes Full Stack Developer | OutSystems @ in ruip.mendes@outsystem.com /ruirijomendes @SkullBizarre @ruip.mendes
  3. 3. | Creating a reusable UI component Project specific This is the wrong way
  4. 4. | Creating a reusable UI component Requirements ❏ Must ❏ Must ❏ Should ❏ Should ❏ Could ❏ Could ❏ Extra Mile Use Cases Code
  5. 5. | Creating a reusable UI component
  6. 6. | Creating a reusable UI component Creating a reusable UI component
  7. 7. | Creating a reusable UI component What is a Component? A component is a reusable object that speeds up application creation and delivery, by providing features in an simple, easy and understandable way. ConnectorsScreen Flow LibrariesBlock
  8. 8. | Creating a reusable UI component
  9. 9. | Creating a reusable UI component VS Meh Awesome
  10. 10. | Creating a reusable UI component
  11. 11. | Creating a reusable UI component Why Build a Component? You Scott Dev Time Day 1 Day 2 Day 3 Day 4 Day 5 Day 6 Day 7 Day 8 Day 9 Day 10 Day 11 Day 12 Day 13 Day 14 Building from scratch
  12. 12. | Creating a reusable UI component Why Build a Component? You Scott Building vs using Day 3Day 1 Day 4 Day 5 Dev Time Day 7Day 6 Day 8 Day 9 Day 10 Day 11 Day 12 Day 13 Day 14Day 2
  13. 13. | Creating a reusable UI component Identify a component ● 80/20 ● Frequency vs. Complexity
  14. 14. | Creating a reusable UI component Cover the Basics ● Simple ● Easy ● Understandable
  15. 15. | Creating a reusable UI component Keep it Simple, Stupid! (KISS) https://www.highcharts.com/demo
  16. 16. | Creating a reusable UI component Make it easy vs
  17. 17. | Creating a reusable UI component Self-explanatory
  18. 18. | Creating a reusable UI component Self-explanatory
  19. 19. | Creating a reusable UI component Covered the basics 1. Simple 2. Easy 3. Self-explanatory
  20. 20. | Creating a reusable UI component Small pause for water
  21. 21. | Creating a reusable UI component Story time Requirements ❏ Must ❏ Must ❏ Should Use Cases Code
  22. 22. | Creating a reusable UI component Scalable Architecture In-App Chat Core In-App Chat Web In-App Chat Mobile
  23. 23. | Creating a reusable UI component Main use cases
  24. 24. | Creating a reusable UI component Best defaults
  25. 25. | Creating a reusable UI component
  26. 26. | Creating a reusable UI component Customization
  27. 27. | Creating a reusable UI component Extensibility
  28. 28. | Creating a reusable UI component Security
  29. 29. | Creating a reusable UI component Performance
  30. 30. | Creating a reusable UI component Reusability
  31. 31. | Creating a reusable UI component Reusability 1 2 3
  32. 32. | Creating a reusable UI component Readability & Maintainability
  33. 33. | Creating a reusable UI component Readability & Maintainability
  34. 34. | Creating a reusable UI component Readability & Maintainability
  35. 35. | Creating a reusable UI component
  36. 36. | Creating a reusable UI component Small pause for water
  37. 37. | Creating a reusable UI component Let’s talk mobile In-App Chat Core In-App Chat Web In-App Chat Mobile
  38. 38. | Creating a reusable UI component Navigating between screens Screen Livecycle Events
  39. 39. | Creating a reusable UI component Set control variables that are required by other screen elements or logic. OnInitialize
  40. 40. | Creating a reusable UI component Initialize a third-party component that needs the DOM; Add listeners to a DOM element; OnReady
  41. 41. | Creating a reusable UI component Manipulate DOM elements when they are ready. OnRender
  42. 42. | Creating a reusable UI component Testing to get feedback
  43. 43. | Creating a reusable UI component Ensure that everything that is initialized (variables and event listeners) is removed. OnDestroy
  44. 44. | Creating a reusable UI component Working Mobile Component ❏ Best Practices ❏ Guidelines In-App Chat Web In-App Chat Mobile
  45. 45. | Creating a reusable UI component
  46. 46. | Creating a reusable UI component
  47. 47. | Creating a reusable UI component
  48. 48. | Creating a reusable UI component
  49. 49. | Creating a reusable UI component
  50. 50. | Creating a reusable UI component Share ● Share with your team ● If possible, share with the community
  51. 51. | Creating a reusable UI component Recap 1. Basics a. Simple b. Easy c. Understandable 1. Reusability a. Extensible b. Customizable c. Recognizable 3. NFRs a. Scalable b. Secure c. Performant 3. Community a. How-to b. Sample 5. SHARE
  52. 52. Thank You! @ inruip.mendes@outsystems.com /ruirijomendes @SkullBizarre @ruip.mendes

×