2a:null 2b:["$","title",null,{"children":"Reactivity in AppRun | Yiyi Sun | Observable"}] 30:Taac,md`## Introduction Reactivity has been a hot buzz word for modern JavaScript UI frameworks in the past few years. Angular, Vue, and Svelte all have the reactivity builtin. They are famous and popular because of their reactivity features. > Don't be confused about the _reactivity_ with another buzz word, _reactive programming_. Reactive programming is programming with asynchronous data streams. I will have another post to explain _reactive programming_. Reactivity means that the changed application state will automatically reflect in the DOM. Reactivity is related to the _data binding_ concept. _Data binding_ is the process that establishes a connection between the application state and the application UI. There are two major types of _data binding_: _one-way bing_ and _two-binding_. * _One-way binding_ means that changes in the application state cause changes to the application UI. * _Two-way binding_ means that changes of either application state or application UI (for example, with input-elements) automatically update the other. The reactivity also applies to the state object properties. E.g., if there is a person object that has the properties of first-name, last-name, and full-name, we want the full-name property to be reactive to the other two name properties. With the _reactivity_ concept clarified, let's how we can have _reactivity_ in AppRun(https://apprun.js.org). ## One-Way Binding May frameworks use the concept of "variable assignments trigger UI updates." E.g., [Vue](https://v1.vuejs.org/guide/reactivity.html) wires up the application _state_ objects with a change detection mechanism to become a view model or proxy. Then you can modify the view model to trigger the UI update. [Svelte](https://github.com/sveltejs/rfcs/blob/master/text/0001-reactive-assignments.md) has a compiler to inject change detection around your application state object. You can also modify the state to trigger the UI update. Unlike other frameworks, AppRun uses the [events](https://observablehq.com/@yysun/apprun-events-evolved) to trigger UI updates following the event-driven web programming model naturally. During an AppRun _event lifecycle_: * AppRun gives you the current _state_ for you to create a new _state_ * AppRun calls your _view_ function to create a virtual DOM * AppRun renders the virtual DOM if it is not null You can feel the [Hollywood Principle](https://wiki.c2.com/?HollywoodPrinciple)(Don't call us. We call you.) here, which usually means things are loosely coupled. We provide code pieces. The framework calls them when needed. In the example below, the AppRun $onclick directive calls the event handler, then calls the view function, and then renders the virtual DOM. `31:[] 2e:{"id":"3805233d0be4cfbd","slug":"reactivity-in-apprun","title":"Reactivity in AppRun","thumbnail":"2647290389aa7c772e6310c36fbe70fca05a8295ba8990b6a531af1bc15f9871","access_level":"public","create_time":"$D2020-03-19T18:26:10.297Z","update_time":"$D2020-03-20T17:46:27.776Z","view_time":null,"first_public_time":"$D2020-03-20T01:32:35.784Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"406b10a49330fbc3","login":"yysun","name":"Yiyi Sun","avatar_url":"https://avatars-next.observableusercontent.com/631e206b9889c4d1dd75034c7d3ab7bfbfd9d85a263b89e5196099ffde072454","tier":"starter_2024"},"version":166,"publish_version":166,"role":null,"authored":false,"authors":[{"type":"individual","id":"e5e4d0cd07e0245d","login":"yysun","name":"Yiyi Sun","avatar_url":"https://avatars-next.observableusercontent.com/631e206b9889c4d1dd75034c7d3ab7bfbfd9d85a263b89e5196099ffde072454","tier":null}],"members":[{"type":"individual","id":"e5e4d0cd07e0245d","login":"yysun","name":"Yiyi Sun","avatar_url":"https://avatars-next.observableusercontent.com/631e206b9889c4d1dd75034c7d3ab7bfbfd9d85a263b89e5196099ffde072454","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"7ad33983a7603b5e","slug":"apprun-notes","title":"AppRun Notes","owner":{"id":"406b10a49330fbc3","login":"yysun","name":"Yiyi Sun"}},"type":"notebook","body":{"titling":"auto","title":"Reactivity in AppRun","cells":[{"id":161,"value":"md`# Reactivity in AppRun`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"import {app, jsx} from '@yysun/apprun'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"view = jsx`state => `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"app.start(document.createElement('div'), 0, view).element","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"md`## Two-Way Binding\n\nAppRun $bind directive can update the _state_ properties automatically when used with the _input_ elements and the _textarea_ element. It looks similar to Angular's *ngModel*, Vue' *v-model*, and Svelte's *bind:value*. However, Angular, Vue, and Svelte have invented their own proprietary template language/syntax that you need to learn. AppRun uses the JSX that React also uses. \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"view2 = jsx`state => <>\n

{state.text}

\n \n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"app.start(document.createElement('div'), {}, view2).element","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"md `## Reactive State\n\nThe state properties' reactivity is not a problem that the UI frameworks are to solve. But if the UI frameworks wrap or change the original _state_ objects, they have to solve the reactivity problems. E.g., Vue uses the [_computed object_](https://vuejs.org/v2/guide/computed.html). Svelte uses the [reactive-declarations](https://svelte.dev/examples#reactive-declarations), the famous *$:* sign.\n\nI prefer to only use the native JavaScript/TypeScript features.\n\n### Property Getter\n\nLike in languages such as Java and C#, JavaScript has [object property getter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get), which we can use to compute the property values dynamically.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"state = ({\n a: 1,\n b: 2,\n get c() {\n return this.a + this.b;\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"md`Binding to the _state_ object properties is straightforward.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"view3 = jsx`({a, b, c}) => <>\n \n \n

{a} + {b} = { c }

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"app.start(document.createElement('div'), state, view3).element","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"md `### ES2015 Proxy\n\nThe [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) is used to define custom behavior for fundamental operations (e.g., property lookup, assignment, enumeration, function invocation, etc.)\n\n> Proxies enable you to intercept and customize operations performed on objects (such as getting properties). They are a _metaprogramming_ feature. - from [Metaprogramming with proxies](https://exploringjs.com/es6/ch_proxies.html#sec_programming-vs-metaprogramming)\n\nTo create a Proxy, we create a handler first. Then, we combine the object tobe proxied with the handler.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"handler = ({\n get: (target, name) => {\n const text = target.text || '';\n switch (name) {\n case 'text': return target.text;\n case 'characters': return text.replace(/\\s/g, '').length;\n case 'words': return !text ? 0 : text.split(/\\s/).length;\n case 'lines': return text.split('\\n').length;\n default: return null\n }\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"proxy = new Proxy(\n { text: \"let's count\" },\n handler\n);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"md`\nProxy has almost no barrier to use. Anywhere accepts objects can use Proxy. AppRun can accept a _state_ with Proxy.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"view5 = jsx`state =>

\n \n

{state.characters} {state.words} {state.lines}

\n {state.text}\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"app.start(document.createElement('div'), proxy, view5).element","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"md`\nI like Proxy because it takes the property value calculation logic out of the _state_ objects. The _proxy handler_ is much easier to test and maintain. The _state_ objects stay lean. I want the [_state_ to act like the _data transfer object_ (DTO)](https://apprun.js.org/docs/#/04-architecture) in traditional multi-layered application architecture, where the DTO is an object that carries data between logical and physical layers. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"md ` ## Conclusion\n\nAppRun has full reactivity support that provides us one-way and two-way data binding as well as the reactive _state_. We only need to native JavaScriptand/TypeScript features. AppRun does not require you to learn a new language or a new templating syntax.\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 2f:"$2e:body"