Rethinking Reactive Architectures

Regardless of your JavaScript framework of choice, this talk should be interesting as it goes into detail about how and why the Dojo team implemented things the way they have in Dojo 2. ES6+, TypeScript, reactive programming, web components – it's all in there!

Transcript

1. Rethinking Reactive Architectures Dojo 2, a Modern, Reac/ve TypeScript framework
2. Nice to Meet You! @dylans github.com/dylans
4. What problems should we solve today? Te ref rea mi Ty the ste
5. 2004 Web app development is way too frustrating!
6. • Browser compa/bility • Language features • UI components • Architecture and apps 2004 Pain Points
7. 2011 Web app development is a lot easier, except….
8. • jQuery monolith • Code conflicts • Lack of choices 2011 Pain Points
9. Today I don’t even know where to begin!
10. Complexity. Choice. Fatigue. Today’s Pain Points
11. Solving Modern Problems Te ref rea mi Ty the ste
12. Efficiency Modern Framework Needs
13. Efficiency Modern Framework Needs Longevity
14. Modern Framework Needs Efficiency Longevity Interop
15. Modern Framework Needs Efficiency Longevity Focus Interop
16. Developer ergonomics Efficiency
17. • Consistent Architecture • Intelligent Defaults • Facilitate better code Efficiency
18. Keeping pace incrementally Longevity
19. Longevity • Build for today • and tomorrow
20. Avoid Fatigue End of life New / promising Established Legacy or stale
21. Interoperability Coherent stack, not lock-in
22. Interoperability • Web Components • Modules • Flexible Architecture
23. Focus Enterprise-Scale Development
24. • a11y/i18n • Structured development • Big data Focus
25. • Data visualizations (interop) • High performance data grids • Universal apps Focus
26. Tenets of Dojo 2
27. • Efficiency through common patterns and standards Patterns & Standards
28. Quality • Robust tests, comprehensive coverage • Careful and deliberate effort to find the right combination of tools, tech, approach and patterns
29. • Annual release cycle • Strong official support • Great base feature set ES6+
30. TypeScript • Superset of ES6+ • Semi-monthly release cycle • Types • Interfaces • Code intent, easier to reason about code • First class IDE support
31. Reactivity • Uni-directional data flow • React to/observe changes to data • Easier to test UI components • Very efficient when used with VDOM • Virtual DOM, ES.Next Observables, Task/Scheduler
32. • Intersection Observers • Web Animations • Focus • blockingElements • inert • Progressive Web Apps HTML5/WICG
33. • Everything in TS • No templates/parsing! • Raw CSS (and css-next)! • Suite of OOTB widgets • Easily extensible Widgets
34. • dojo create -name MyApp && dojo build -w • Up and running in seconds… • Modifying and deploying real apps in minutes… Simple OOTB
35. • Currently ~ 25 packages • @dojo npm scoped package • github.com/dojo/meta Modular Packages
36. • JS Foundation • Extensive help, tutorials, active community • Commercial support from SitePen Community
37. dojo/widgets Single class Form widgets Layout widgets Grids Custom Elements
38. Foundational packages widgets dgrid i18n core shim has interfaces routing cli app create build test stores interop widget-core Tooling Applica7on Widgets Component Core
39. dojo/widget-core dojo/widgets
40. Extensible and reactive
41. Cleaner code • Declarative and easier to understand, test, & debug • More efficient with asynchronous operations • Standard mechanism for error recovery • More maintainable • Consistent API Reactivity benefits:
42. Simpler UI • Simple handing of UI interactions/events • Easier management of the UI thread Reactivity benefits:
43. Properties in, changes out
44. Small public API for simplicity
45. render
46. Web Components
47. ProjectorMixin
48. Base theme CSS and TS source maps Mobile ready Theming (scoped classes, css-next, CSS modules) Themes
49. i18n and a11y
50. Flexible and reactive data stores (successor to dstore) Easy to connect to widgets Manage client-side data Data Stores
51. Examples
52. Getting involved
53. Path to Dojo 2
54. • Beta 1: March 28th • Beta 2: August 26th • Beta 3: September 21st • Beta 4: ~ November 9th • Beta 5: ~ December 7th • RC 1: Late December or early January • 2.0: January or February, 2018 Roadmap
55. A Modern Framework Efficiency Longevity Focus Interop
56. We modernize enterprise apps, tools, and teams. sitepen.com @SitePen github.com/SitePen
57. Thanks. @dylans github.com/dylans sitepen.com @SitePen github.com/SitePen