1. TAO (Type-Action-Observable) is an alternative to MVC for managing state in JavaScript applications, where types represent data, actions represent function calls, and observables represent a stream of all actions. 2. TAO is well-suited for API development, where API calls can be modeled as actions, data validation can be defined in types, and middleware can handle cross-cutting concerns for all actions. 3. The speaker's company Booster uses TAO in practice with their open-source Archetype and TAO.js libraries, where types validate data, actions validate and trigger data changes, and middleware and triggers handle side effects.

1. TAO and the Essence of Modern
JavaScript
Valeri Karpov
June 21, 2018
JavaScript Zagreb #42

2. About Me
● Maintainer of Mongoose (#72 on npm-rank)
● Lead Backend Engineer @ Booster
● Blogger, thecodebarbarian.com

3. What This Talk is About
● Redux, MobX, ngrx, etc. are the same thing
● They’re fundamentally different from MVC
● What does “one-way data flow” mean for API devs?
● How we use TAO at Booster

4. Principles of Modern State Management
● Type: data is represented by plain objects (POJO)
● Actions: function calls are represented by POJOs
● Observables: stream of all actions in the system
● TAO: Type-action-observable, as opposed to MVC

5. Part 1: TAO vs MVC
● Model: data notifies controller of changes
● Controller: changes model, listens to changes
● View: DOM state

6. The Problem with MVC in JS
● When did something change and how?

7. With Immutable POJOs, Diffing is Easy
● Assume all changes went through `=` operator
● Objects are serializable and diffing is easy

8. T is for “Type”
● Data is a POJO (or Immutable.js)
● Data is serializable
● Data is not “hydrated”: Mongoose, Ember, Vue 1.x
● Think “store” in Redux, ngrx, or MobX

9. Notifying of Changes is Hard
● Proxies, Object.defineProperty() are not POJOs
● Need to “hydrate” object to get change tracking
● RIP Object.observe(), 2011-2015

10. A is for “Action”
● All changes are represented by an object
● A Redux action is an object representing a fn call

11. But How Do You Watch for Changes?
● Object representation of function call is useful:
○ Debugging
○ Logging
○ “Time Travelling Debugger”
● But how does this help with change tracking?

12. O is for “Observable”
● Doesn’t necessarily need to be an observable
● Anything that lets you see all actions:
○ Node.js stream or event emitter
○ Redux middleware
○ ngrx effects

13. Redux from the TAO Perspective
● Type: State, store.getState()
● Action: Redux actions, store.dispatch()
● Observable: middleware, reducer, React view

14. ngrx from the TAO Perspective
● Type: State from @ngrx/store
● Action: Actions, store.dispatch()
● Observable: Observables, Effects @ngrx/effects

15. Vuex from the TAO Perspective
● Type: State
● Action: Actions
● Observable: Mutations, views

16. Part 2: Server Dev
● Do APIs really need change tracking?
● MVC is painful for REST APIs
● V in MVC = JSON object?

17. Change Tracking for APIs
● API calls are short-lived
● Browser app lives for a long time, lot of actions
● The “store” is the database

18. Change Tracking for APIs
● Mongoose, SQL ORMs track changes on objects
● Convert language operations to DB operations

19. TAO for API Devs
● Type: data coming into the system
● Action: object representation of fn call
● Observable: see all actions in the system

20. TAO for API Devs
● Can’t validate entire “state”, databases are huge
● Can validate data coming in
● Each action can define what data is valid
● Archetype: data validation lib

21. TAO for API Devs
● One API call is usually one action
● Object representation for logging
● Pro tip: request ids
● Convert curl =>

22. TAO for API Devs
● Actions read/write from db, but don’t do everything
● Logging, error handling, slack notifications, etc.
● “Cross-cutting concerns”
● Aspect oriented programming

23. Part 3: TAO at Booster
● We’ve open-sourced archetype and tao-js on npm
Archetype TAO.js

24. Part 3: TAO at Booster
● A type is a constructor that throws if casting fails

25. Part 3: TAO at Booster
● An action is a function, it validates data using types

26. Part 3: TAO at Booster
● Middleware (locking, error handling)

27. Part 3: TAO at Booster
● Homebaked observable lib, because of RxJS issues
● Triggers: like middleware, but reactive

28. What’s Wrong with RxJS?
● Observable = multi-value, single error
● Uncaught error in map() => dead, silent failures

29. Further Reading
● TAO examples: github.com/vkarpov15/tao
● TAO API docs: bit.ly/tao-api-docs
● Archetype: github.com/boosterfuels/archetype
● Archetype on Twitter: twitter.com/archetype_js

30. Thanks For Listening!
Slides on Twitter,
@code_barbarian