JS Zagreb June 21, 2018

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