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

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