SlideShare a Scribd company logo
1 of 9
Reusable UI Components
What is a Component?
A component is a reusable object that speeds up application creation
and delivery. It should be easy to use and understand, and the focus
should be main or common use cases.
6 Simple steps
• Purpose
• Logic
• Presentation
• Reusability
• Maintenance
• Non-functional requirements
Using an API
• Keep it small
• Keep it simple
• Focus on the main use cases
• Offer the best defaults
• Limit the number of inputs
Pitfalls to avoid
• Keep in mind the possibility of change
• Avoid the !important CSS tag
• Use style classes where possible
• Avoid setting colors and buttons
• Offer extensibility
Names and descriptions
• meaningful names
• Use PascalCase
• Use event names that start with "On"
Visual presentation
• Use images that identify the component
• Use the same image within the component
• Use false Conditions for Better Previews
• Add sample content to placeholders if useful
Maintenance
• Add comments or notes where needed
• Comment changes to code between versions
• Create a demo module
Let’s give it a try

More Related Content

Similar to Outsystems community meetup 2018 11 reusable ui components

Php Egypt Jan14
Php Egypt Jan14Php Egypt Jan14
Php Egypt Jan14Hani Gamal
 
Survive the Chaos - S4H151 - SAP TechED Barcelona 2017 - Lecture
Survive the Chaos - S4H151 - SAP TechED Barcelona 2017 - LectureSurvive the Chaos - S4H151 - SAP TechED Barcelona 2017 - Lecture
Survive the Chaos - S4H151 - SAP TechED Barcelona 2017 - LectureRainer Winkler
 
Building iOS App Project & Architecture
Building iOS App Project & ArchitectureBuilding iOS App Project & Architecture
Building iOS App Project & ArchitectureMassimo Oliviero
 
How to design good api
How to design good apiHow to design good api
How to design good apiOsama Shakir
 
Sap web dynpro – practices for better functionality
Sap web dynpro – practices for better functionalitySap web dynpro – practices for better functionality
Sap web dynpro – practices for better functionalityanjalirao366
 
Scaling Plugins in Critical Systems - Jon Mort
Scaling Plugins in Critical Systems - Jon MortScaling Plugins in Critical Systems - Jon Mort
Scaling Plugins in Critical Systems - Jon MortAtlassian
 
Effective programming in Java - Kronospan Job Fair 2016
Effective programming in Java - Kronospan Job Fair 2016Effective programming in Java - Kronospan Job Fair 2016
Effective programming in Java - Kronospan Job Fair 2016Łukasz Koniecki
 
Design Patterns In Scala
Design Patterns In ScalaDesign Patterns In Scala
Design Patterns In ScalaKnoldus Inc.
 
Keep Your Code Organized! WordCamp Montreal 2013 Presentation slides
Keep Your Code Organized! WordCamp Montreal 2013 Presentation slidesKeep Your Code Organized! WordCamp Montreal 2013 Presentation slides
Keep Your Code Organized! WordCamp Montreal 2013 Presentation slidesJer Clarke
 
Salesforce Development Best Practices
Salesforce Development Best PracticesSalesforce Development Best Practices
Salesforce Development Best PracticesVivek Chawla
 
Segue to design patterns
Segue to design patternsSegue to design patterns
Segue to design patternsRahul Singh
 
iOS Coding Best Practices
iOS Coding Best PracticesiOS Coding Best Practices
iOS Coding Best PracticesJean-Luc David
 
ASP.NET MVC Best Practices malisa ncube
ASP.NET MVC Best Practices   malisa ncubeASP.NET MVC Best Practices   malisa ncube
ASP.NET MVC Best Practices malisa ncubeMalisa Ncube
 
Let's Write Better Node Modules
Let's Write Better Node ModulesLet's Write Better Node Modules
Let's Write Better Node ModulesKevin Whinnery
 
Java and effective programming. Is it possible? - IAESTE Case Week 2016
Java and effective programming. Is it possible? - IAESTE Case Week 2016Java and effective programming. Is it possible? - IAESTE Case Week 2016
Java and effective programming. Is it possible? - IAESTE Case Week 2016Łukasz Koniecki
 
BEHAVIOR-DRIVEN-DEVELOPMENT.pptx
BEHAVIOR-DRIVEN-DEVELOPMENT.pptxBEHAVIOR-DRIVEN-DEVELOPMENT.pptx
BEHAVIOR-DRIVEN-DEVELOPMENT.pptxCharleneMaedeleon2
 
Meetup - Building by Composition - Samuel Jesus
Meetup - Building by Composition - Samuel JesusMeetup - Building by Composition - Samuel Jesus
Meetup - Building by Composition - Samuel JesusSamuel Jesus
 

Similar to Outsystems community meetup 2018 11 reusable ui components (20)

Php Egypt Jan14
Php Egypt Jan14Php Egypt Jan14
Php Egypt Jan14
 
Survive the Chaos - S4H151 - SAP TechED Barcelona 2017 - Lecture
Survive the Chaos - S4H151 - SAP TechED Barcelona 2017 - LectureSurvive the Chaos - S4H151 - SAP TechED Barcelona 2017 - Lecture
Survive the Chaos - S4H151 - SAP TechED Barcelona 2017 - Lecture
 
Building iOS App Project & Architecture
Building iOS App Project & ArchitectureBuilding iOS App Project & Architecture
Building iOS App Project & Architecture
 
How to design good api
How to design good apiHow to design good api
How to design good api
 
Sap web dynpro – practices for better functionality
Sap web dynpro – practices for better functionalitySap web dynpro – practices for better functionality
Sap web dynpro – practices for better functionality
 
Scaling Plugins in Critical Systems - Jon Mort
Scaling Plugins in Critical Systems - Jon MortScaling Plugins in Critical Systems - Jon Mort
Scaling Plugins in Critical Systems - Jon Mort
 
Aem best practices
Aem best practicesAem best practices
Aem best practices
 
Effective programming in Java - Kronospan Job Fair 2016
Effective programming in Java - Kronospan Job Fair 2016Effective programming in Java - Kronospan Job Fair 2016
Effective programming in Java - Kronospan Job Fair 2016
 
Design Patterns In Scala
Design Patterns In ScalaDesign Patterns In Scala
Design Patterns In Scala
 
Keep Your Code Organized! WordCamp Montreal 2013 Presentation slides
Keep Your Code Organized! WordCamp Montreal 2013 Presentation slidesKeep Your Code Organized! WordCamp Montreal 2013 Presentation slides
Keep Your Code Organized! WordCamp Montreal 2013 Presentation slides
 
Salesforce Development Best Practices
Salesforce Development Best PracticesSalesforce Development Best Practices
Salesforce Development Best Practices
 
Javascript best practices
Javascript best practicesJavascript best practices
Javascript best practices
 
Using ansible to manage cloud stack
Using ansible to manage cloud stackUsing ansible to manage cloud stack
Using ansible to manage cloud stack
 
Segue to design patterns
Segue to design patternsSegue to design patterns
Segue to design patterns
 
iOS Coding Best Practices
iOS Coding Best PracticesiOS Coding Best Practices
iOS Coding Best Practices
 
ASP.NET MVC Best Practices malisa ncube
ASP.NET MVC Best Practices   malisa ncubeASP.NET MVC Best Practices   malisa ncube
ASP.NET MVC Best Practices malisa ncube
 
Let's Write Better Node Modules
Let's Write Better Node ModulesLet's Write Better Node Modules
Let's Write Better Node Modules
 
Java and effective programming. Is it possible? - IAESTE Case Week 2016
Java and effective programming. Is it possible? - IAESTE Case Week 2016Java and effective programming. Is it possible? - IAESTE Case Week 2016
Java and effective programming. Is it possible? - IAESTE Case Week 2016
 
BEHAVIOR-DRIVEN-DEVELOPMENT.pptx
BEHAVIOR-DRIVEN-DEVELOPMENT.pptxBEHAVIOR-DRIVEN-DEVELOPMENT.pptx
BEHAVIOR-DRIVEN-DEVELOPMENT.pptx
 
Meetup - Building by Composition - Samuel Jesus
Meetup - Building by Composition - Samuel JesusMeetup - Building by Composition - Samuel Jesus
Meetup - Building by Composition - Samuel Jesus
 

More from Providit

Outsystems user group 2021 03 04 - cm app
Outsystems user group 2021 03 04 - cm appOutsystems user group 2021 03 04 - cm app
Outsystems user group 2021 03 04 - cm appProvidit
 
Belgium Outsystems user group speech recognition ocr
Belgium Outsystems user group speech recognition   ocrBelgium Outsystems user group speech recognition   ocr
Belgium Outsystems user group speech recognition ocrProvidit
 
OutSystems User Group 24 september 2019 - Intro
OutSystems User Group 24 september 2019 - IntroOutSystems User Group 24 september 2019 - Intro
OutSystems User Group 24 september 2019 - IntroProvidit
 
OutSystems User Group 24 september 2019 - Data Grid
OutSystems User Group 24 september 2019 - Data GridOutSystems User Group 24 september 2019 - Data Grid
OutSystems User Group 24 september 2019 - Data GridProvidit
 
OutSystems community meetup 2019 03_how to handle exceptions like a pro
OutSystems community meetup 2019 03_how to handle exceptions like a proOutSystems community meetup 2019 03_how to handle exceptions like a pro
OutSystems community meetup 2019 03_how to handle exceptions like a proProvidit
 
Outsystems community meetup 2018 11 service modules
Outsystems community meetup 2018 11 service modulesOutsystems community meetup 2018 11 service modules
Outsystems community meetup 2018 11 service modulesProvidit
 
Outsystems community meetup 2018 11 screen templates
Outsystems community meetup 2018 11 screen templatesOutsystems community meetup 2018 11 screen templates
Outsystems community meetup 2018 11 screen templatesProvidit
 

More from Providit (7)

Outsystems user group 2021 03 04 - cm app
Outsystems user group 2021 03 04 - cm appOutsystems user group 2021 03 04 - cm app
Outsystems user group 2021 03 04 - cm app
 
Belgium Outsystems user group speech recognition ocr
Belgium Outsystems user group speech recognition   ocrBelgium Outsystems user group speech recognition   ocr
Belgium Outsystems user group speech recognition ocr
 
OutSystems User Group 24 september 2019 - Intro
OutSystems User Group 24 september 2019 - IntroOutSystems User Group 24 september 2019 - Intro
OutSystems User Group 24 september 2019 - Intro
 
OutSystems User Group 24 september 2019 - Data Grid
OutSystems User Group 24 september 2019 - Data GridOutSystems User Group 24 september 2019 - Data Grid
OutSystems User Group 24 september 2019 - Data Grid
 
OutSystems community meetup 2019 03_how to handle exceptions like a pro
OutSystems community meetup 2019 03_how to handle exceptions like a proOutSystems community meetup 2019 03_how to handle exceptions like a pro
OutSystems community meetup 2019 03_how to handle exceptions like a pro
 
Outsystems community meetup 2018 11 service modules
Outsystems community meetup 2018 11 service modulesOutsystems community meetup 2018 11 service modules
Outsystems community meetup 2018 11 service modules
 
Outsystems community meetup 2018 11 screen templates
Outsystems community meetup 2018 11 screen templatesOutsystems community meetup 2018 11 screen templates
Outsystems community meetup 2018 11 screen templates
 

Recently uploaded

"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024The Digital Insurer
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024Scott Keck-Warren
 
Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksBenefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksSoftradix Technologies
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024BookNet Canada
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Wonjun Hwang
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsMemoori
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitecturePixlogix Infotech
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions
 
Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024Neo4j
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge
 

Recently uploaded (20)

"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
 
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort ServiceHot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
 
Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksBenefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other Frameworks
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 

Outsystems community meetup 2018 11 reusable ui components

  • 2. What is a Component? A component is a reusable object that speeds up application creation and delivery. It should be easy to use and understand, and the focus should be main or common use cases.
  • 3. 6 Simple steps • Purpose • Logic • Presentation • Reusability • Maintenance • Non-functional requirements
  • 4. Using an API • Keep it small • Keep it simple • Focus on the main use cases • Offer the best defaults • Limit the number of inputs
  • 5. Pitfalls to avoid • Keep in mind the possibility of change • Avoid the !important CSS tag • Use style classes where possible • Avoid setting colors and buttons • Offer extensibility
  • 6. Names and descriptions • meaningful names • Use PascalCase • Use event names that start with "On"
  • 7. Visual presentation • Use images that identify the component • Use the same image within the component • Use false Conditions for Better Previews • Add sample content to placeholders if useful
  • 8. Maintenance • Add comments or notes where needed • Comment changes to code between versions • Create a demo module