Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Creating a reusable ui component
Ähnlich wie Creating a reusable ui component (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Creating a reusable ui component
- 1. Creating a Reusable UI Component
- 2. | Change session name in master slide Rui Mendes Full Stack Developer | OutSystems @ in ruip.mendes@outsystem.com /ruirijomendes @SkullBizarre @ruip.mendes
- 3. | Creating a reusable UI component Project specific This is the wrong way
- 4. | Creating a reusable UI component Requirements ❏ Must ❏ Must ❏ Should ❏ Should ❏ Could ❏ Could ❏ Extra Mile Use Cases Code
- 5. | Creating a reusable UI component
- 6. | Creating a reusable UI component Creating a reusable UI component
- 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. | Creating a reusable UI component
- 9. | Creating a reusable UI component VS Meh Awesome
- 10. | Creating a reusable UI component
- 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. | 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. | Creating a reusable UI component Identify a component ● 80/20 ● Frequency vs. Complexity
- 14. | Creating a reusable UI component Cover the Basics ● Simple ● Easy ● Understandable
- 15. | Creating a reusable UI component Keep it Simple, Stupid! (KISS) https://www.highcharts.com/demo
- 16. | Creating a reusable UI component Make it easy vs
- 17. | Creating a reusable UI component Self-explanatory
- 18. | Creating a reusable UI component Self-explanatory
- 19. | Creating a reusable UI component Covered the basics 1. Simple 2. Easy 3. Self-explanatory
- 20. | Creating a reusable UI component Small pause for water
- 21. | Creating a reusable UI component Story time Requirements ❏ Must ❏ Must ❏ Should Use Cases Code
- 22. | Creating a reusable UI component Scalable Architecture In-App Chat Core In-App Chat Web In-App Chat Mobile
- 23. | Creating a reusable UI component Main use cases
- 24. | Creating a reusable UI component Best defaults
- 25. | Creating a reusable UI component
- 26. | Creating a reusable UI component Customization
- 27. | Creating a reusable UI component Extensibility
- 28. | Creating a reusable UI component Security
- 29. | Creating a reusable UI component Performance
- 30. | Creating a reusable UI component Reusability
- 31. | Creating a reusable UI component Reusability 1 2 3
- 32. | Creating a reusable UI component Readability & Maintainability
- 33. | Creating a reusable UI component Readability & Maintainability
- 34. | Creating a reusable UI component Readability & Maintainability
- 35. | Creating a reusable UI component
- 36. | Creating a reusable UI component Small pause for water
- 37. | Creating a reusable UI component Let’s talk mobile In-App Chat Core In-App Chat Web In-App Chat Mobile
- 38. | Creating a reusable UI component Navigating between screens Screen Livecycle Events
- 39. | Creating a reusable UI component Set control variables that are required by other screen elements or logic. OnInitialize
- 40. | Creating a reusable UI component Initialize a third-party component that needs the DOM; Add listeners to a DOM element; OnReady
- 41. | Creating a reusable UI component Manipulate DOM elements when they are ready. OnRender
- 42. | Creating a reusable UI component Testing to get feedback
- 43. | Creating a reusable UI component Ensure that everything that is initialized (variables and event listeners) is removed. OnDestroy
- 44. | Creating a reusable UI component Working Mobile Component ❏ Best Practices ❏ Guidelines In-App Chat Web In-App Chat Mobile
- 45. | Creating a reusable UI component
- 46. | Creating a reusable UI component
- 47. | Creating a reusable UI component
- 48. | Creating a reusable UI component
- 49. | Creating a reusable UI component
- 50. | Creating a reusable UI component Share ● Share with your team ● If possible, share with the community
- 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. Thank You! @ inruip.mendes@outsystems.com /ruirijomendes @SkullBizarre @ruip.mendes