2b:null 2c:["$","title",null,{"children":"AppRun Events Evolved | Yiyi Sun | Observable"}] 31:[] 2f:{"id":"bab2b03af1b0e129","slug":"apprun-events-evolved","title":"AppRun Events Evolved","thumbnail":"d78fc1ab1746f21e01c8f0c53a28e399128dd20db7a7da5a63024b66041483dc","access_level":"public","create_time":"$D2020-03-17T00:10:30.999Z","update_time":"$D2020-03-23T16:32:09.781Z","view_time":null,"first_public_time":"$D2020-03-17T19:53:41.248Z","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":222,"publish_version":222,"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,"subscribed":null,"forks":2,"collection":{"id":"7ad33983a7603b5e","slug":"apprun-notes","title":"AppRun Notes","owner":{"id":"406b10a49330fbc3","login":"yysun","name":"Yiyi Sun"}},"type":"notebook","body":{"title":"AppRun Events Evolved","cells":[{"id":216,"value":"md`# AppRun Events Evolved`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":118,"value":"import {app, jsx} from '@yysun/apprun'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":0,"value":"md`\n[AppRun](https://apprun.js.org) is a JavaScript library for building reliable, high-performance web applications using the Elm inspired Architecture, events, and components.\n\nAt the core, AppRun is an event pub-sub system.\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"md`## Event Pub-Sub\n\nEvent pub-sub, also known as event emitter, is a commonly used pattern in JavaScript programming.\n\n* Publishing an event means to raise an event for some other code to handle. \n* Subscribing an event means to register an event handler function to the event. \n\nAppRun has a global object _app_ that has two event-related functions\n\n* _app.on_ is for subscribing to the events, a.k.a register event handlers.\n* _app.run_ is for publishing the events, a.k.a triggering/firing the events.\n\nLet's register an event handler for printing to the screen using the _app.on_ function.\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"{\n const element = html`

`\n app.on('print', p => element.innerHTML = p)\n return element\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":53,"value":"md`\n\nNow, let's create a button to fire and _print_ event, with current time.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":56,"value":"md`\n\nClick the _print current time_ button, you will see the current time printed by the event handler above.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":63,"value":"md`## Architecture\n\nAppRun applications have the [Elm](https://guide.elm-lang.org/architecture) inspired architecture, which has three parts:\n\n* State (a.k.a. Model) — the state of your application\n* View — a function to display the state\n* Update — a collection of event handlers to update the state\n\nAppRun ties the three parts together and drives the applications using events.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":169,"value":"state = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":173,"value":"view = jsx`state => {\n return <>\n

{state}

\n \n \n ;\n}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":174,"value":"add = (state, num) => state + num","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":179,"value":"update = ({ add })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":146,"value":"app.start(document.createElement('div'), state, view, update).element;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":124,"value":"md`\n\nYou will see the count change when you click the buttons. Every time you click the button, the DOM event is converted to the AppRun events, and then triggers the AppRun _event lifecycle_:\n\n* AppRun calls the event handler to update the _state_\n* AppRun calls the _view_ function to generate virtual DOM\n* AppRun renders the virtual DOM to the HTML element\n\n## Event Directive\n\nAppRun has implemented the [directives](https://medium.com/@yiyisun/announcing-apprun-directives-6a063f88379c) concept. One of the directive types, called _event directives_ executes the same steps of the _event lifecycle_ listed above.\n\n> Directives are special HTML attributes that have names starting with $, such as _$onclick_. They are the extensions to the JSX syntax to simplify the JSX or add extra features. _$onclick_ is an _event directive_.\n\nLet modify the example above by replacing _onclick_ with the _$onclick_ directive.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":141,"value":"view1 = jsx`state => {\n const add = (state, num) => state + num;\n return <>\n

{state}

\n \n \n ;\n}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":186,"value":"app.start(document.createElement('div'), state, view1).element;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":163,"value":"md`\n\nYou can see the _$onclick_ directive triggers the AppRun event lifecycle directly without events. It calls the event handler (the _add_ function), then calls the _view_ function, and then renders the virtual DOM.\n\n\n## Conclusion\n\nWe recommend using the event directives going forward to reduce the use of the _update_ object.\n\nKeep in mind, AppRun events are still very important. They are used in [routing](https://apprun.js.org/docs/#/07-routing). And they are not just limited in frontend. We can use AppRun events with the [Web Socket API](https://dev.to/yysun/database-driven-applications-using-websockets-2b9o) and Web Workers API explained in the [AppRun Book](https://www.amazon.com/Practical-Application-Development-AppRun-High-Performance/dp/1484240685/). We can also use AppRun in the [Electron Apps](https://github.com/apprunjs/apprun-electron-forge), Firebase, Cloud Pub-Sub, and more ...\n\nFeel the power of event pub-sub pattern and learn more about building applications with AppRun.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"