Downloaded 92 times
Uploaded byOutSystems
Reactive Web Best Practices
The document discusses best practices for developing reactive web applications, focusing on accessibility, performance, and security challenges. Key topics include the importance of parallel data fetching, client variables, and maintaining a good user experience with effective animations. It also provides tips for using OutSystems UI and emphasizes a single development experience for both mobile and web applications.
More Related Content
Similar to Reactive Web Best Practices
More from OutSystems
![Lect 1 Number systems and base conversions. [Autosaved].pptx](https://cdn.slidesharecdn.com/ss_thumbnails/lect1numbersystemsandbaseconversions-260111134109-67c2d865-thumbnail.jpg?width=640&height=640&fit=bounds)
Reactive Web Best Practices
- 1. | Reactive WebBest Practices REACTIVE Web Best Practices
- 2. | Reactive WebBest Practices| Reactive Web Best Practices Miguel Vicente Front-End & Mobile Expert Team Lead @ in miguel.vicente@outsystems.com /workmiguelvicente
- 3. | Accessibility inLow-Code: Applications with no Limits Developing Mobile Apps?
- 4. | Reactive WebBest Practices How many years working with OutSystems?
- 5. | Reactive WebBest Practices Once upon a time in 2011... A. Version 5 B. Version 6 C. Version 8 B. Version 6
- 6. | Reactive WebBest Practices Suddenly Reactive Web appear in 2019... A. Parallel Data Fetching B. Preparation C. Client Variables B. Preparation
- 7. | Change sessionname in master slide| Reactive Web Best Practices TRADITIONAL WEB REACTIVE WEB
- 8. | Reactive WebBest Practices| Reactive Web Best Practices REACTIVE Web Challenges ?
- 9. | Reactive WebBest Practices Security challenges ● Http connections ● Unprotected end-points ● Architecture security bridges
- 10. | Reactive WebBest Practices 1. Mandatory HTTPS vs HTTP connections Security
- 11. | Reactive WebBest Practices 2. Server side and client side logic Security
- 12. | Reactive WebBest Practices 3. Follow the traditional architecture best practices Security
- 13. | Reactive WebBest Practices User Experience challenges ● Parallel Data Fetching ● Animations ● Transitions
- 14. | Reactive WebBest Practices| Reactive Web Best Practices Parallel Data Fetching
- 15. | Reactive WebBest Practices Performance
- 16. | Reactive WebBest Practices| Reactive Web Best Practices Screen Transitions
- 17. | Reactive WebBest Practices User Experience
- 18. | Reactive WebBest Practices| Reactive Web Best Practices REACTIVE Web Best Practices
- 19. | Reactive WebBest Practices Parallel Data Fetching ● Fetching data faster ● Dependencies between aggregates ● Empty state to avoid UI flickering ● Animations to a better user experience
- 20. | Reactive WebBest Practices| Reactive Web Best Practices Fetching Data Faster
- 21. | Reactive WebBest Practices How does it work on Traditional Web ? PREPARATION Loading... Parallel Data Fetching BROWSERDOWNLOAD Elements run in sequence
- 22. | Reactive WebBest Practices Traditional Parallel Data Fetching
- 23. | Reactive WebBest Practices #2 GetChartData How does it work on Reactive Web ? Loading... #1 GetRequests DOM LOADING
- 24. | Reactive WebBest Practices Reactive Parallel Data Fetching
- 25. | Reactive WebBest Practices| Reactive Web Best Practices Dependencies between Aggregates
- 26. | Reactive WebBest Practices Aggregate Dependencies Final Result
- 27. | Reactive WebBest Practices Reactive WebTraditional Web Aggregate Dependencies
- 28. | Reactive WebBest Practices Reactive WebTraditional Web Aggregate Dependencies
- 29. | Reactive WebBest Practices Reactive WebTraditional Web Aggregate Dependencies
- 30. | Reactive WebBest Practices| Reactive Web Best Practices Empty State to avoid UI flickering
- 31. | Reactive WebBest Practices Challenge Empty States
- 32. | Reactive WebBest Practices Solution Empty States
- 33. | Reactive WebBest Practices Empty States Final Result
- 34. | Reactive WebBest Practices| Reactive Web Best Practices Great user experience? Use animate!
- 35. | Reactive WebBest Practices Be able to animate page elements with little or no customization Challenge Animations
- 36. | Reactive WebBest Practices Solution Animations
- 37. | Reactive WebBest Practices Animations Final Result
- 38. | Reactive WebBest Practices| Reactive Web Best Practices Client Variables
- 39. | Reactive WebBest Practices Client Variables ● Session Vs client variables ● JavaScript Vs low code ● Save aggregate filters
- 40. | Reactive WebBest Practices Session VS Client Variables Session Variables (Traditional) Client Variables (Reactive) Available / Stored server-side Available / Stored client-side Cleared on logout or by closing all browser windows Cleared on logout Stores values of any type (Although not recommended for complex values) Stores values of basic types only Client Variables
- 41. | Reactive WebBest Practices Challenge Client Variables
- 42. | Reactive WebBest Practices Solution Client Variables
- 43. | Reactive WebBest Practices Client Variables Final Result
- 44. | Reactive WebBest Practices| Reactive Web Best Practices OutSystems UI
- 45. | Reactive WebBest Practices OutSystems UI
- 46. | Reactive WebBest Practices Challenge OutSystems UI
- 47. | Reactive WebBest Practices OutSystems UI Solution
- 48. | Reactive WebBest Practices OutSystems UI Final Result
- 49. | Reactive WebBest Practices| Reactive Web Best Practices REACTIVE Web Tips & Tricks
- 50. | Reactive WebBest Practices| Reactive Web Best Practices Warning Lists inside lists...
- 51. | Reactive WebBest Practices Lists inside lists... Tips & Tricks
- 52. | Reactive WebBest Practices Tips & Tricks
- 53. | Reactive WebBest Practices| Reactive Web Best Practices Warning jQuery...
- 54. | Reactive WebBest Practices Tips & Tricks Avoid DOM manipulation
- 55. | Reactive WebBest Practices ● Initiative to help our community to upgrade forge components ● Before using jquery use plain javascript or search on forge jQuery Tips & Tricks
- 56. | Reactive WebBest Practices Library Module Tips & Tricks ● Consume connectors ● Module like OutSystems UI
- 57. | Reactive WebBest Practices Convert to Reactive & Reuse Tips & Tricks
- 58. | Reactive WebBest Practices Forge ● More than 20 components Tips & Tricks
- 59. | Reactive WebBest Practices| Reactive Web Best Practices REACTIVE Web Wrap-Up
- 60. | Reactive WebBest Practices 1. A single Development Experience (Mobile & Web) 2. Simplify Development (screen events) 3. Better performance (client actions and Parallel data fetching) 4. Most functionalities are available on Mobile (client variables) 5. No Jquery (client actions, client variables, Low code) Wrap-up
- 61. | Reactive WebBest Practices| Reactive Web Best Practices BEFORE The end ?
- 62. | Reactive WebBest Practices Big Thank You!
- 63. | Reactive WebBest Practices Thank You! @ inmiguel.vicente@outsystems.co m /workmiguelvicente
Editor's Notes
- #2 Welcome everyone to the trick or treat Nova forma de fazer web applications focados na performance e user experience
- #3 In the past 3 years I have been working with our customers on building great mobile apps and now I will start to guide them with reactive web
- #4 How many of you already create mobile applications with OutSystems?
- #8 Now is time for Reactive show!
- #11 Not supported at all http connections We are now using http2
- #12 Validate all rest End-points Client code is more exposed More round trips to the server
- #13 4 layer canvas, architecture framework
- #14 mindset
- #16 Ability to have client and Server code Sequence vs parallel data fetching No more Ajax Refresh Kill view state
- #18 Fast & Smooth transitions between pages Better User Experience Prepare the UI for lazy API’s
- #19 Let’s Open the door to sweets with reactive web Best Practices
- #23 Synchronous Sequence
- #29 Dependências entre os aggregates
- #34 IsDataFetch & Blank slates
- #38 IsDataFetch & Blank slates
- #40 Session Vars (configuration de app ou user) or filters São persistentes mesmo fechado pagina, só quando fazemos logout resolver problemas de performance lado cliente Não usar javascript e potenciar o Low code
- #42 Mobile Javascript window
- #46 A single Development Experience (Mobile & Web) Melhoria dos componentes mobile + alguns de web
- #53 Multiple server calls at the same time question how many of you already tried to implement a parallel data fetching in traditional web?
- #55 Dificuldade em adaptar Ajudar a malta a fazer upgrade dos componentes do forge usando apenas low code ou raw javascript Sim mas antes tentava Questions: tens de incluir os script do React DOM
- #57 Library de JavaScript
- #63 Feedback