Rethinking Reactive Architectures

by Frontend NE

Slide 1

Slide 1 text

Rethinking Reactive Architectures Dojo 2, a Modern, Reac/ve TypeScript framework

Slide 2

Slide 2 text

Nice to Meet You! @dylans github.com/dylans

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

What problems should we solve today? Te ref rea mi Ty the ste

Slide 5

Slide 5 text

2004 Web app development is way too frustrating!

Slide 6

Slide 6 text

• Browser compa/bility • Language features • UI components • Architecture and apps 2004 Pain Points

Slide 7

Slide 7 text

2011 Web app development is a lot easier, except….

Slide 8

Slide 8 text

• jQuery monolith • Code conﬂicts • Lack of choices 2011 Pain Points

Slide 9

Slide 9 text

Today I don’t even know where to begin!

Slide 10

Slide 10 text

Complexity. Choice. Fatigue. Today’s Pain Points

Slide 11

Slide 11 text

Solving Modern Problems Te ref rea mi Ty the ste

Slide 12

Slide 12 text

Eﬃciency Modern Framework Needs

Slide 13

Slide 13 text

Eﬃciency Modern Framework Needs Longevity

Slide 14

Slide 14 text

Modern Framework Needs Eﬃciency Longevity Interop

Slide 15

Slide 15 text

Modern Framework Needs Eﬃciency Longevity Focus Interop

Slide 16

Slide 16 text

Developer ergonomics Efﬁciency

Slide 17

Slide 17 text

• Consistent Architecture • Intelligent Defaults • Facilitate better code Efﬁciency

Slide 18

Slide 18 text

Keeping pace incrementally Longevity

Slide 19

Slide 19 text

Longevity • Build for today • and tomorrow

Slide 20

Slide 20 text

Avoid Fatigue End of life New / promising Established Legacy or stale

Slide 21

Slide 21 text

Interoperability Coherent stack, not lock-in

Slide 22

Slide 22 text

Interoperability • Web Components • Modules • Flexible Architecture

Slide 23

Slide 23 text

Focus Enterprise-Scale Development

Slide 24

Slide 24 text

• a11y/i18n • Structured development • Big data Focus

Slide 25

Slide 25 text

• Data visualizations (interop) • High performance data grids • Universal apps Focus

Slide 26

Slide 26 text

Tenets of Dojo 2

Slide 27

Slide 27 text

• Efﬁciency through common patterns and standards Patterns & Standards

Slide 28

Slide 28 text

Quality • Robust tests, comprehensive coverage • Careful and deliberate effort to ﬁnd the right combination of tools, tech, approach and patterns

Slide 29

Slide 29 text

• Annual release cycle • Strong ofﬁcial support • Great base feature set ES6+

Slide 30

Slide 30 text

TypeScript • Superset of ES6+ • Semi-monthly release cycle • Types • Interfaces • Code intent, easier to reason about code • First class IDE support

Slide 31

Slide 31 text

Reactivity • Uni-directional data ﬂow • React to/observe changes to data • Easier to test UI components • Very efﬁcient when used with VDOM • Virtual DOM, ES.Next Observables, Task/Scheduler

Slide 32

Slide 32 text

• Intersection Observers • Web Animations • Focus • blockingElements • inert • Progressive Web Apps HTML5/WICG

Slide 33

Slide 33 text

• Everything in TS • No templates/parsing! • Raw CSS (and css-next)! • Suite of OOTB widgets • Easily extensible Widgets

Slide 34

Slide 34 text

• dojo create -name MyApp && dojo build -w • Up and running in seconds… • Modifying and deploying real apps in minutes… Simple OOTB

Slide 35

Slide 35 text

• Currently ~ 25 packages • @dojo npm scoped package • github.com/dojo/meta Modular Packages

Slide 36

Slide 36 text

• JS Foundation • Extensive help, tutorials, active community • Commercial support from SitePen Community

Slide 37

Slide 37 text

dojo/widgets Single class Form widgets Layout widgets Grids Custom Elements

Slide 38

Slide 38 text

Foundational packages widgets dgrid i18n core shim has interfaces routing cli app create build test stores interop widget-core Tooling Applica7on Widgets Component Core

Slide 39

Slide 39 text

dojo/widget-core dojo/widgets

Slide 40

Slide 40 text

Extensible and reactive

Slide 41

Slide 41 text

Cleaner code • Declarative and easier to understand, test, & debug • More efﬁcient with asynchronous operations • Standard mechanism for error recovery • More maintainable • Consistent API Reactivity beneﬁts:

Slide 42

Slide 42 text

Simpler UI • Simple handing of UI interactions/events • Easier management of the UI thread Reactivity beneﬁts:

Slide 43

Slide 43 text

Properties in, changes out

Slide 44

Slide 44 text

Small public API for simplicity

Slide 45

Slide 45 text

render

Slide 46

Slide 46 text

Web Components

Slide 47

Slide 47 text

ProjectorMixin

Slide 48

Slide 48 text

Base theme CSS and TS source maps Mobile ready Theming (scoped classes, css-next, CSS modules) Themes

Slide 49

Slide 49 text

i18n and a11y

Slide 50

Slide 50 text

Flexible and reactive data stores (successor to dstore) Easy to connect to widgets Manage client-side data Data Stores

Slide 51

Slide 51 text

Examples

Slide 52

Slide 52 text

Getting involved

Slide 53

Slide 53 text

Path to Dojo 2

Slide 54

Slide 54 text

• 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

Slide 55

Slide 55 text

A Modern Framework Eﬃciency Longevity Focus Interop

Slide 56

Slide 56 text

We modernize enterprise apps, tools, and teams. sitepen.com @SitePen github.com/SitePen

Slide 57

Slide 57 text

Thanks. @dylans github.com/dylans sitepen.com @SitePen github.com/SitePen