Reactive Web Best Practices
•Als PPTX, PDF herunterladen•
3 gefällt mir•2,330 views
Excited about the new reactive web features? Come to this session to learn some of the best practices to make sure that you get started on the right foot.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Reactive Web Best Practices
Ähnlich wie Reactive Web Best Practices (20)
Mehr von OutSystems
Mehr von OutSystems (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Reactive Web Best Practices
- 1. | Reactive Web Best Practices REACTIVE Web Best Practices
- 2. | Reactive Web Best Practices| Reactive Web Best Practices Miguel Vicente Front-End & Mobile Expert Team Lead @ in miguel.vicente@outsystems.com /workmiguelvicente
- 3. | Accessibility in Low-Code: Applications with no Limits Developing Mobile Apps?
- 4. | Reactive Web Best Practices How many years working with OutSystems?
- 5. | Reactive Web Best Practices Once upon a time in 2011... A. Version 5 B. Version 6 C. Version 8 B. Version 6
- 6. | Reactive Web Best Practices Suddenly Reactive Web appear in 2019... A. Parallel Data Fetching B. Preparation C. Client Variables B. Preparation
- 7. | Change session name in master slide| Reactive Web Best Practices TRADITIONAL WEB REACTIVE WEB
- 8. | Reactive Web Best Practices| Reactive Web Best Practices REACTIVE Web Challenges ?
- 9. | Reactive Web Best Practices Security challenges ● Http connections ● Unprotected end-points ● Architecture security bridges
- 10. | Reactive Web Best Practices 1. Mandatory HTTPS vs HTTP connections Security
- 11. | Reactive Web Best Practices 2. Server side and client side logic Security
- 12. | Reactive Web Best Practices 3. Follow the traditional architecture best practices Security
- 13. | Reactive Web Best Practices User Experience challenges ● Parallel Data Fetching ● Animations ● Transitions
- 14. | Reactive Web Best Practices| Reactive Web Best Practices Parallel Data Fetching
- 15. | Reactive Web Best Practices Performance
- 16. | Reactive Web Best Practices| Reactive Web Best Practices Screen Transitions
- 17. | Reactive Web Best Practices User Experience
- 18. | Reactive Web Best Practices| Reactive Web Best Practices REACTIVE Web Best Practices
- 19. | Reactive Web Best Practices Parallel Data Fetching ● Fetching data faster ● Dependencies between aggregates ● Empty state to avoid UI flickering ● Animations to a better user experience
- 20. | Reactive Web Best Practices| Reactive Web Best Practices Fetching Data Faster
- 21. | Reactive Web Best Practices How does it work on Traditional Web ? PREPARATION Loading... Parallel Data Fetching BROWSERDOWNLOAD Elements run in sequence
- 22. | Reactive Web Best Practices Traditional Parallel Data Fetching
- 23. | Reactive Web Best Practices #2 GetChartData How does it work on Reactive Web ? Loading... #1 GetRequests DOM LOADING
- 24. | Reactive Web Best Practices Reactive Parallel Data Fetching
- 25. | Reactive Web Best Practices| Reactive Web Best Practices Dependencies between Aggregates
- 26. | Reactive Web Best Practices Aggregate Dependencies Final Result
- 27. | Reactive Web Best Practices Reactive WebTraditional Web Aggregate Dependencies
- 28. | Reactive Web Best Practices Reactive WebTraditional Web Aggregate Dependencies
- 29. | Reactive Web Best Practices Reactive WebTraditional Web Aggregate Dependencies
- 30. | Reactive Web Best Practices| Reactive Web Best Practices Empty State to avoid UI flickering
- 31. | Reactive Web Best Practices Challenge Empty States
- 32. | Reactive Web Best Practices Solution Empty States
- 33. | Reactive Web Best Practices Empty States Final Result
- 34. | Reactive Web Best Practices| Reactive Web Best Practices Great user experience? Use animate!
- 35. | Reactive Web Best Practices Be able to animate page elements with little or no customization Challenge Animations
- 36. | Reactive Web Best Practices Solution Animations
- 37. | Reactive Web Best Practices Animations Final Result
- 38. | Reactive Web Best Practices| Reactive Web Best Practices Client Variables
- 39. | Reactive Web Best Practices Client Variables ● Session Vs client variables ● JavaScript Vs low code ● Save aggregate filters
- 40. | Reactive Web Best 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 Web Best Practices Challenge Client Variables
- 42. | Reactive Web Best Practices Solution Client Variables
- 43. | Reactive Web Best Practices Client Variables Final Result
- 44. | Reactive Web Best Practices| Reactive Web Best Practices OutSystems UI
- 45. | Reactive Web Best Practices OutSystems UI
- 46. | Reactive Web Best Practices Challenge OutSystems UI
- 47. | Reactive Web Best Practices OutSystems UI Solution
- 48. | Reactive Web Best Practices OutSystems UI Final Result
- 49. | Reactive Web Best Practices| Reactive Web Best Practices REACTIVE Web Tips & Tricks
- 50. | Reactive Web Best Practices| Reactive Web Best Practices Warning Lists inside lists...
- 51. | Reactive Web Best Practices Lists inside lists... Tips & Tricks
- 52. | Reactive Web Best Practices Tips & Tricks
- 53. | Reactive Web Best Practices| Reactive Web Best Practices Warning jQuery...
- 54. | Reactive Web Best Practices Tips & Tricks Avoid DOM manipulation
- 55. | Reactive Web Best 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 Web Best Practices Library Module Tips & Tricks ● Consume connectors ● Module like OutSystems UI
- 57. | Reactive Web Best Practices Convert to Reactive & Reuse Tips & Tricks
- 58. | Reactive Web Best Practices Forge ● More than 20 components Tips & Tricks
- 59. | Reactive Web Best Practices| Reactive Web Best Practices REACTIVE Web Wrap-Up
- 60. | Reactive Web Best 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 Web Best Practices| Reactive Web Best Practices BEFORE The end ?
- 62. | Reactive Web Best Practices Big Thank You!
- 63. | Reactive Web Best Practices Thank You! @ inmiguel.vicente@outsystems.co m /workmiguelvicente
Hinweis der Redaktion
- Welcome everyone to the trick or treat Nova forma de fazer web applications focados na performance e user experience
- 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
- How many of you already create mobile applications with OutSystems?
- Now is time for Reactive show!
- Not supported at all http connections We are now using http2
- Validate all rest End-points Client code is more exposed More round trips to the server
- 4 layer canvas, architecture framework
- mindset
- Ability to have client and Server code Sequence vs parallel data fetching No more Ajax Refresh Kill view state
- Fast & Smooth transitions between pages Better User Experience Prepare the UI for lazy API’s
- Let’s Open the door to sweets with reactive web Best Practices
- Synchronous Sequence
- Dependências entre os aggregates
- IsDataFetch & Blank slates
- IsDataFetch & Blank slates
- 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
- Mobile Javascript window
- A single Development Experience (Mobile & Web) Melhoria dos componentes mobile + alguns de web
- Multiple server calls at the same time question how many of you already tried to implement a parallel data fetching in traditional web?
- 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
- Library de JavaScript
- Feedback