Empowering Advanced Users: Extending OutSystems UI Framework with Openness and Extensibility
0 likes134 views
The document discusses the evolution of the OutSystems UI framework, highlighting improvements in extensibility and developer experience from its inception to the present. It emphasizes the importance of openness and scalability, introducing a new JavaScript framework and community-driven resources to enhance low-code development. Key aspects include increased customization options, TypeScript integration, and public GitHub repositories for collaboration.
![Block’s Input Parameters
OutSystems UI Providers Client Actions
OutSystems UI JS API
Custom Code
OutSystems UI Client Actions
“The new AdvancedFormat”
● Set[ProviderName]Configs
● Set[ProviderName]Event
● Unset[ProviderName]Event
#openness #scalability](https://image.slidesharecdn.com/empoweringadvancedusersextendingoutsystemsuiframeworkwithopennessandextensibility-230920200744-0ef3c46c/85/Empowering-Advanced-Users-Extending-OutSystems-UI-Framework-with-Openness-and-Extensibility-29-320.jpg)
Empowering Advanced Users: Extending OutSystems UI Framework with Openness and Extensibility
- 1. Extending OutSystems UI Framework with Openness and Extensibility Bernardo Cardoso Senior Software Engineer @OutSystems Empowering Advanced Users
- 2. What you’ll learn here 1. How we got here 2. Now & Future • The new vision • Why • How 3. Extensibility Vision 4. Demo 5. Public GitHub Repo 6. See you later
- 3. How we got here From Silk to OutSystems UI
- 4. 2015-2016 Silk UI/ Silk UI Mobile ● Great out-of-the-box defaults. ● Completely closed Patterns. Extensibility Developer Experience
- 5. 2018 OutSystems UI Web ● Increased extensibility & customization with ExtendedClass and CSS Variables. ● Atomic Design. ● Less emphasis on defaults, as increased modularity was expected to be used by developers. Extensibility Developer Experience 2015-2016
- 6. 2019 OutSystems UI ● Continuity of OutSystems UI Web CSS improvements. ● Loss on the JavasScript extensibility, as this was a continuation of the old Silk UI Mobile. 2015-2016 2018 Extensibility Developer Experience
- 7. 2019 2022 OutSystems UI (New JS Framework) ● Great increase on extensibility. ● Improvement of the out-of-the-box defaults and developer experience. 2015-2016 2018 Extensibility Developer Experience
- 8. Now & Future The new vision
- 9. Why
- 10. Give more power to customers Why
- 11. Give more power to customers Improve low-code developer experience Why
- 12. Give more power to customers Improve low-code developer experience Why Improve code quality and security
- 13. How
- 14. Scalability How
- 17. The tools A new JavaScript Framework, that holds all Patterns Classes and API’s used on the low-code side. Implementation of TypeScript and SCSS. All done on Visual Studio Code and stored on GitHub.
- 18. #scalability
- 19. #scalability
- 25. For more information about the architecture behind it, check the amazing talk by Ruben Gonçalves: Building Frameworks: from concept to completion. You can also check the public OutSystems UI JS TypeDocs’s Documentation, with UML Diagrams with detailed information about properties, methods, interfaces, inheritance, etc., for each Pattern’s JS Class. #openness
- 27. Block’s Input Parameters OutSystems UI Providers Client Actions OutSystems UI JS API Custom Code OutSystems UI Client Actions Blocks Input Parameters ● Root level ● OptionalConfigs structures #openness #scalability
- 28. Block’s Input Parameters OutSystems UI Providers Client Actions OutSystems UI JS API Custom Code OutSystems UI Client Actions UI Patterns’s Client Actions ● Low-code wrappers for the API calls on OutSystems UI JS. ● Covers basic use-cases like Open/Close/Disabled/etc or it can be used to offer other non-essential use-cases, that wouldn’t fit as Input Parameters. #openness #scalability
- 29. Block’s Input Parameters OutSystems UI Providers Client Actions OutSystems UI JS API Custom Code OutSystems UI Client Actions “The new AdvancedFormat” ● Set[ProviderName]Configs ● Set[ProviderName]Event ● Unset[ProviderName]Event #openness #scalability
- 30. Check a full detailed example on this article: OutSystems UI Extensibility Part I https://medium.com/@bernardocardoso/outsystems-ui-extensibility-part-i-f0d5304896ee Amazing Author
- 31. Block’s Input Parameters OutSystems UI Providers Client Actions OutSystems UI JS API Custom Code OutSystems UI Client Actions Direct usage of API’s from OutSystems UI, that are not covered by Client Actions. Better to use them on the Initialized event of each Pattern. #openness #scalability
- 32. Block’s Input Parameters OutSystems UI Providers Client Actions OutSystems UI JS API Custom Code OutSystems UI Client Actions ● Extend Pattern’s JS Classes ● Install OutSystems UI npm package ● Create new Patterns using our TypeScript architecture ● Generate your own scss theme. #openness #scalability
- 33. Check a full detailed example on this article: OutSystems UI Extensibility Part II https://medium.com/@bernardocardoso/outsystems-ui-extensibility-part-ii-dd35da19de4e Amazing Author
- 34. Approachability C o m p l e x i t y Block’s Input Parameters OutSystems UI Providers Client Actions OutSystems UI JS API Custom Code OutSystems UI Client Actions Configurability (OutSystems Low-Code) More extensibility solutions abstracted to low-code. #openness #scalability
- 35. Approachability C o m p l e x i t y Block’s Input Parameters OutSystems UI Providers Client Actions OutSystems UI JS API Custom Code OutSystems UI Client Actions High Code (JavaScript/TypeScript) More freedom for advanced developers, that know and want to have control of the code behind the UI Patterns. #openness #scalability Configurability (OutSystems Low-Code) More extensibility solutions abstracted to low-code.
- 36. Extensibility Example Install npm package & extend UI Pattern’s JS Class
- 37. Github Repo
- 38. #openness #community-driven OutSystems UI npm package OutSystems UI Git Repository PR’s are very much welcomed! 👍
- 39. OutSystems UI npm package OutSystems UI Git Repository PR’s are very much welcomed! 👍 #openness #community-driven
- 40. https://medium.com/@bernardocardoso https://www.linkedin.com/in/bernardo-cardoso-0a740b95/ Thank You Bernardo Cardoso Senior Software Engineer @OutSystems 40
- 41. RATE THE SESSION Go to the app > agenda > select the session > rate. Extending OutSystems UI Framework with Openness and Extensibility Empowering Advanced Users