Empirical Observations on the The Future of Scalable UI Architecture

Over the past twenty years, I have observed a handful of shifts in the UI paradigms driven by various architectural patterns and advancements. This session delves into these observations to offer a comprehensive overview of the trends and innovations that can be derived from the past. The session will highlight popular UI architecture patterns and the common problems that the community finds in these approaches and provide a concise course of action regarding the patterns we can introduce into our UI systems today and use these observations to exercise what UI architectures we can build today to scale the UI systems and guard ourselves against future system rewrites.

Transcript

1. Willian Martins - Summer 2024 Empirical Observations on the The Future of Scalable UI Architecture
2. Hi!
3. Why I think you are here
4. • History • Scalability • Tips and tricks Agenda
7. The History As I perceived
8. Where all started MPA - Multi page application
9. Example flow
10. MPA - Flow example
11. MPA - Flow example
12. MPA - Flow example
13. MPA - Flow example
14. MPA + Vanilla JS
15. MPA + JS example
16. MPA + JS example
17. That wasn’t enough
19. in 2005 • Browse api were not standard • Data flow everywhere • No stablished pattern in the ecosystem. The web app issue
20. Code organization
22. / / get elements by class $$('.foo'); / / or even: document.getElements('.foo'); / / selector with different elements $$('div.foo, div.bar, div.bar a'); / / get a single element document.getElement('div.foo'); / / attach a click event o a element myElement.addEvent('click', function(){ alert('clicked!'); });
23. / / get elements by class $('.foo'); / / selector with different elements $('div.foo, div.bar, div.bar a'); / / get a single element $('div.foo'); / / attach a click event o a element $('div.foo').click(function(){ alert('clicked!'); });
24. • Heavily relying on server side rendering • Js loaded per page • Browser api mismatch • 1st era of libs/framework • Lack of code organization MPA era
25. Rich web app era And the death of Flash
26. • Custom Route handling with #!/ • Event delegation • Mediator Pattern • Require.js • NodeJs • MVC UI Framework Rich web app
27. Custom Route approach mysite.com
28. Custom Route approach mysite.com/#!/registration
29. Memory leaks
30. Event Delegation
31. Image source: https://www.javascripttutorial.net/javascript-dom/javascript-events/
32. Mediator Pattern
33. Mediator pattern
34. Mediator pattern const mediator = { events: {}, subscribe(event, callback) { if (!this.events[event]) { this.events[event] = []; } this.events[event].push(callback); }, publish(event, data) { if (this.events[event]) { this.events[event].forEach(callback = > callback(data)); } } };
35. Mediator pattern input.addEventListener("input", function handleInput(event) { mediator.publish("inputChanged", event.target.value); });
36. Mediator pattern mediator.subscribe("inputChanged", filterItems); function filterItems(query) { const items = document.querySelectorAll(“.item"); items.forEach((item) = > { if (item.textContent.toLowerCase().includes(query.toLowerCase())) { item.classList.add("visible"); } else { item.classList.remove("visible"); } }); }
37. Require.js
38. Require.js define([], function() { const mediator = { events: {}, subscribe(event, callback) { if (!this.events[event]) { this.events[event] = []; } this.events[event].push(callback); }, publish(event, data) { if (this.events[event]) { this.events[event].forEach(callback = > callback(data)); } } }; return mediator; });
39. Require.js define(['mediator'], function(mediator) { function handleInput(event) { mediator.publish('inputChanged', event.target.value); } function init() { const input = document.getElementById('filterInput'); input.addEventListener('input', handleInput); } return { init: init }; });
40. Require.js define([], function() { function filterItems(query) { const items = document.querySelectorAll('.item'); items.forEach(item = > { if (item.textContent.toLowerCase().includes(query.toLowerCase())) { item.classList.add('visible'); } else { item.classList.remove('visible'); } }); } return filterItems; });
41. Require.js require(['mediator', 'filter', 'inputHandler'], function(mediator, filterItems, inputHandler) { mediator.subscribe('inputChanged', filterItems); inputHandler.init(); } );
42. • Better code organization • Less prone for memory leaks • Data flow improved • Lack of opinionated framework • Hard to transfer knowledge Rich web app
43. The MVW era
45. Backbone.js example import { Model, Collection } from 'backbone'; const Item = Model.extend({ defaults: { name: '', visible: true } }); const ItemList = Collection.extend({ model: Item }); export { Item, ItemList };
46. Backbone.js example import { View, Events } from 'backbone'; const InputView = View.extend({ el: '#filterInput', events: { 'input': 'handleInput' }, handleInput: function(event) { Events.trigger('inputChanged', event.target.value); } }); export default InputView;
47. Backbone.js example const ItemView = View.extend({ tagName: 'li', className: 'item', initialize: function() { this.listenTo(this.model, 'change:visible', this.toggleVisible); }, render: function() { this.$el.text(this.model.get('name')); this.toggleVisible(); return this; }, toggleVisible: function() { this.$el.toggleClass('visible', this.model.get('visible')); } });
48. Backbone.js example const FilterView = View.extend({ el: '#itemList', initialize: function() { this.listenTo(Events, 'inputChanged', this.filterItems); this.collection = new ItemList([ { name: 'item 1' }, { name: 'item 2' }, ]); this.render(); }, render: function() { this.$el.empty(); this.collection.each(item = > { const itemView = new ItemView({ model: item }); this.$el.append(itemView.render().el); }); }, filterItems: function(query) { this.collection.each(item = > { const isVisible = item.get(‘name’).toLowerCase() .includes(query.toLowerCase()); item.set('visible', isVisible); }); this.render(); } });
49. The reactive ui
51. The good parts • JSX • Pure function as UI representation • Rich ecosystem (redux, router, sagas, mobx, react query) • Improvements over time (hooks, context API, SSR, compiler) React.js
52. The challenging parts • Trend driven development • Changes hard to follow on a mature system • Reactive is the new foundation • How to evolve the system without be lost on trends? React.js
53. Scalability and Resilience.
54. Scalability definition The capacity to be changed in size or scale.
55. Scalability definition The ability of a computing process to be used or produced in a range of capabilities.
56. Scalability Of the team
57. Scalability That enable changes
58. Resiliency As byproduct of scalability
59. Tips and tricks
60. Design system As ui foundation
61. Atomic design
63. Actionable items • Start small • Go from Botton-up approach • Hire a good CSS engineer • Make rule agreement with the design team • Avoid Solution w/ runtime penalty • Create code generation plugins Design system
64. Feature based Architecture
65. Foundation
66. Foundation Core
67. Foundation Core Feat A Feat B Feat C Feat D Feat E
68. Foundation Core Feat A Feat B Feat C Feat D Feat E Feat F
69. In practice • Foundation as a generic layer • Core as application specific layer • Features as detachable building block Feature Based Architecture
70. Guidelines • Heuristics towards ease for deletion • No logic other than presentation logic • Aim for co-location • Feature registration should be simple Detachable Feature
71. Detached App State machine
72. App state machine
74. Adding all Together
75. Conclusion
76. Thanks!
77. Questions?