What are considerations when building a framework/library? How does that apply to OutSystems components? In this session, we’ll do a deep dive into the importance of addressing certain concepts like code granularity, and architecture, in order to create useful, future-proof and coherent frameworks that deliver the best possible developer experience.

1. Building Frameworks
From Concept to Completion
Rúben Gonçalves
Code crafter

2. @ frameworks@rubengoncalves.work
in /rubengoncalves
/techrug
Rúben Gonçalves
curious,
OutSystems MVP,
venturesome, thinker
code crafter,

3. Data Grid Reactive OutSystems Maps
Silk UI web

4. Data Grid Reactive OutSystems Maps
Silk UI web
check out the talk
.Storytelling with Data Visualization.

5. .common ground.
setting
«A gathering of figures before a church», 1 540–1596, Paolo Fiammingo
& expectations

6. .not.
this is
a masterclass
«The School of Athens», Apostolic Palace, Vatican City 1509–1511, Raphael

7. .Framework.
do you mean
or library?
«Cutting the Stone», 1500 - 1520, Hieronymus Bosch

8. Pieces of reliable reusable code, that enables the
developer to focus high-level functionality of the
application.
Frameworks and Libraries

9. Control
Pieces of reliable reusable code, that enables the
developer to focus high-level functionality of the
application.
Frameworks and Libraries
The framework invokes
the custom code
The custom code invokes
the library code
IoC

10. Frameworks Libraries

11. .applies to both.
what we’ll see...

12. .Framework.
how is creating a
anyhow different?
«Israelites making bricks», 15th-century , Flemish Bible History

13. .everyday.
your
project
business goals
features
timelines
performance
maintenance
user experience

14. .Framework.
your
project
features
timelines
performance
maintenance
user experience
.developer experience.
.unknown ends
.Framework goals.

15. .you have hundreds.
you don’t have a client,

16. forging a
«Blacksmith at His Forge», 17th-century , Le Nain brothers
.Framework.

17. .listen.

18. .listen.
first,
all the time
.difficulties.
.pains.
.objectives.
.use cases.
.acknowledge.
.follow up.
Framework
.purpose.
absolutely
crucial

19. .features
.timelines
.performance
.maintenance
.user experience
.Framework.
your
project
.unknown ends.
.developer experience.
.Framework goals.

20. listen
.design.

21. .design.
then,
.core values.
.vision.
.modular.
.granular.
.technology
.tools
Framework
.mindset.
for others
choose
wisely

22. .Framework.
your
project
.features
.timelines
.performance
.maintenance
.user experience
.Framework goals.
.unknown ends.
.developer experience.

23. listen
.design.
.create.

24. .create.
finally,
.maintenance.
.architecture.
.testing.
.samples.
.extensible
.open source
Framework
.code.
future
proof

25. .Framework.
your
project
.features
.timelines
.performance
.maintenance
.user experience
.Framework goals.
.unknown ends.
.developer experience.
.developer experience.

26. «Michal's Dowry, A Bloody Struggle», 16th-century , The Crusader Bible
.people.
developers are
,too

27. .into practice.
putting it
«Cutting the Stone», 1500 - 1520, Hieronymus Bosch

28. OutSystems Maps
Silk UI web Data Grid Reactive

29. .similar components
first, .listen.
.gather information .forge downloads
.users posting in the forums
.pains and wishlists

30. .open, honest conversation
first, .listen.
.gather information
.interview developers
.understand the complains
.insights on usage

31. .gather information
.interview developers
.analyze competitors
Mendix AgGrid
Kony Wijmo
Salesforce Data Tables
QuickBase Kendo UI (telerik)
Appian Smartsheet
Power Apps Webix
Airtable Flexmonster
Handsontable WP data tables
first, .listen.

32. .simple and effective Data visualization in your hands!
then, .design. for others

33. Doing it the right way takes the
same time as doing it wrong
then, .design. for others
.simple and effective Data visualization in your hands!
.values mantra Experience First, Technology After
Experience First, Technology After
The world is our customer,
a customer doesn’t rule the world
Do not reinvent the wheel
No one’s left behind
No 3rd party lock-in
Keep the feedback looping
The world is our customer,
a customer doesn’t rule the world
Do not reinvent the wheel
No one’s left behind
No 3rd party lock-in
Doing it the right way takes the
same time as doing it wrong

34. then, .design. for others
.simple and effective Data visualization in your hands!
.core values
.modular and granular

35. then, .design. for others
.simple and effective Data visualization in your hands!
.core values
.modular and granular
.right. technology
low-code dev experience
dev time compilation

36. then, .design. for others
.simple and effective Data visualization in your hands!
.core values
.modular and granular
.technology
.appropriate. tools
development ide automation &
pipelines
code repo
low-code

37. finally, .create.
.architecture decoupled from provider
wijmo flexgrid
provider specific code
logic & features
static API

38. finally, .create.
.architecture decoupled from provider
wijmo flexgrid
provider specific code
logic & features
static stable API
static
API
where changes
occur
more .often.

39. low-code dev experience
finally, .create.
.architecture decoupled from provider & OutSystems
static API
wijmo flexgrid
provider specific code
logic & features

40. finally, .create.
.architecture decoupled from provider & OutSystems
2
1 3
4

41. finally, .create.
.architecture decoupled from OutSystems
easy to extend (6 levels)
1 2 3

42. 4b
4a
finally, .create.
.architecture decoupled from OutSystems
.38.
granular code
easy to extend (6 levels)

43. finally, .create.
.architecture decoupled from OutSystems
easy to extend (6 levels)
5a 5b
.81.
5c
//your code here

44. finally, .create.
.architecture decoupled from OutSystems
easy to extend (6 levels)
6
wijmo object

45. finally, .create.
.architecture decoupled from OutSystems
easy to extend
easy to understand (low-code)

46. finally, .create.
.architecture decoupled from OutSystems
easy to extend
easy to understand (high-code)
code called by
OutSystems code
logic & features
provider independent
provider specific
code
provider library
added in runtime

47. finally, .create.
.architecture decoupled from OutSystems
easy to extend
easy to understand (high-code)
docs + uml

48. finally, .create.
.architecture
.testing
✓
main
feature a
other
features
.462. tests
55 minutes

49. finally, .create.
.architecture
.testing
.samples
https://bit.ly/3o6jWCp

50. finally, .create.
.architecture
.testing
.samples
.open source.
https://bit.ly/3qgzyWS

51. finally, .create.
.architecture
.testing
.samples
.open source.
https://bit.ly/3qgzyWS

52. finally, .create.
.architecture
.testing
.samples
.open source.
https://bit.ly/3qgzyWS

53. first, .listen.
.acknowledge.
.follow up.
all the time

54. .take away.
thoughts
«Hannah Honors her Vow» , 16th-century, The Crusader Bible

55. .listen.
.design.
«The dark side of the moon», 1973, album cover - Pink Floyd
.create.
«The Blacksmith», 1568 , Jost Amman

56. .people.
developers are
, too
and deserve a
«Absinthe Drinker», 1901, Picasso
.great UX.

57. «Das buch der Cronicken vnd gedechtnus wirdigern geschichte», 1770?
.developers.
you make the blocks
build the castle!

58. https://bit.ly/3oiC38h
just the
iceberg(!?)
.tip.

59. .thank you.
nothing more to see, please move along!
Rúben Gonçalves
Code crafter
«The Conjurer», 1530 - 1540, Hieronymus Bosch
a sincere