Presented at "Building New Forge Components" Meetup, organized by the "Lisbon OutSystems Community Meetup", on 8 March 2018 in Lisbon

1. Building by Composition
Samuel Jesus
Senior Software Engineer
samueljesus@samueljesusOS

2. 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

3. 3

4. You
You
Scott
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
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

5. 5
Faster Development Consistency Simpler Maintainability

6. How To Build

7. Scalable Architecture
● Organize your code in a way that allows you to scale
○ Database and API’s should be in a separate
module
○ Mobile / Web
In-App Chat
Core
In-App Chat
Mobile
In-App Chat
Web

8. Simple and contained CSS
● Reuse styleguide classes
● Keep your CSS organized, simple and
readable (use comments when necessary)
● Create a wrapper around your UI
● Place CSS inside your block
● Use “-servicestudio-” tag to improve
preview inside Service Studio

9. ● Beware of selectors: use the wrapper Id to
select elements
● Use OnDestroy event handlers to clear:
○ Timeouts
○ Event Listeners
○ Global Variables / Functions
Javascript

10. Component Configurations
● Pick the most common options and make them
available as input parameters
● Provide meaningful names and descriptions
● Have defaults in non mandatory parameters

11. Component Configurations
● Show available options with static entities
● Have a representative icon for each record

12. Extended Component Configurations
● Allow extensibility by having an Advanced
Format Input Parameter
○ Receive more configurations (e.g. via
JSON)
○ Document the options

13. Names, Icons and Descriptions
● Make your component easy to find and
understand:
○ Meaningful names and descriptions
○ Icons

14. Always provide a Sample
● Starting point for developers
● Showcases different available options
● Test bench

15. Documentation
● Provide documentation explaining how to
use the component
● Promote use case based documentation

16. Demo
Build a component

17. Demo
Pre-requirements:
● Already investigated Giphy API
○ REST endpoint
○ API Key
Exceptions:
● For demo purpose only: 1 module

18. Share
● Share with your team
● If possible, share with the community

19. References
● The Complete Guide to Creating Components
● 3 Reasons Why You Should Invest in a Component-based Architecture
● How to Build the Ultimate Reusable Web Chat Component
● Silk Website
● OutSystems Forge

20. Thank you