2a:null 2b:["$","title",null,{"children":"Introducing AppRun | Yiyi Sun | Observable"}] 30:[] 2e:{"id":"1478058345b7dcb1","slug":"introducing-apprun","title":"Introducing AppRun","thumbnail":"7288711845e1a944f9abf07ec553866b26086404282163b8b4e848ab0323b819","access_level":"public","create_time":"$D2020-03-15T16:19:52.729Z","update_time":"$D2020-03-19T18:29:44.167Z","view_time":null,"first_public_time":"$D2020-03-15T19:44:50.192Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"406b10a49330fbc3","login":"yysun","name":"Yiyi Sun","avatar_url":"https://avatars-next.observableusercontent.com/631e206b9889c4d1dd75034c7d3ab7bfbfd9d85a263b89e5196099ffde072454","tier":"starter_2024"},"version":405,"publish_version":405,"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":3,"collection":{"id":"7ad33983a7603b5e","slug":"apprun-notes","title":"AppRun Notes","owner":{"id":"406b10a49330fbc3","login":"yysun","name":"Yiyi Sun"}},"type":"notebook","body":{"titling":"auto","title":"Introducing AppRun","cells":[{"id":4,"value":"md`# Introducing AppRun\n\n[AppRun](https://apprun.js.org) is a JavaScript library for developing high-performance and reliable web applications using the elm inspired architecture, events and components.\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"toc(\"h2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"md`## Architecture Concept\n\nApplication logic is broken down into three separate parts in the AppRun architecture.\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 when needed\n\nThe *app.start* function from AppRun ties the three parts together and renders to an HTML element.\n\nSee an example below.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"apprun_jsx`\n\nconst state = 'Hello World';\nconst view = state =>

{state}

;\napp.start(document.createElement('div'), state, view);\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"md`\n\nIn the example above, the _state_ is a string. The _view_ function creates a _div_ element. No _events_ or _update needed.\n\nAppRun supports HTML string, lit-html, and JSX in the _view_ functions. We recommend JSX because JSX provides more advanced features. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"md`> In this notebook we use Babel to compile the code snippets through an string literal, *apprun_jsx()*.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"md`## Events\n\nAppRun applications are event-driven. The $on... directive converts the DOM events to the AppRun events\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"apprun_jsx`\n\nconst state = '';\nconst view = state => <>\n

Hello {state}

\n
\n;\nconst oninput = (_, e) => e.target.value\napp.start(document.createElement('div'), state, view);\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"md`We can also use the _update_ object to define the AppRun event handlers.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"apprun_jsx`\n\nconst state = new Date();\nconst view = state =>

{state.toLocaleTimeString()}

;\nconst update = {\n timer: state => new Date()\n}\nwindow.setInterval(() => { app.run('timer') }, 1000);\napp.start(document.createElement('div'), state, view, update);\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"md`## Components\n\nA component is an autonomous and reusable module that encapsulates a set of data and functions. An AppRun component is a mini-application that has _state_, _view_, and _update_. \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"apprun_jsx`\n\nclass Counter extends Component {\n state = 0;\n view = count => ;\n}\nconst element = document.createElement('div');\nnew Counter().start(element);\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"md`## Web Components\n\nAppRun components can also be turned into the Web Components.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"\n{apprun_jsx`\n\n class Counter extends Component {\n state = 0;\n view = state => {\n const add = (state, num) => state + num;\n return <>\n

{state}

\n \n \n ;\n }\n }\n if(!window.customElements.get('a-counter')) app.webComponent('a-counter', Counter);\n`\n return html``\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"md`## Routing\n\nRouting in AppRun is event-driven. AppRun router detects the hash changes in URL (by listening to the window's onpopstate event) and publishes the AppRun events using the hash as the event name. Components subscribe to the routing events.\n\n> In the example below, we use $onlick to trigger the events because of we aring notebook.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"apprun_jsx`\n\nclass Home extends Component {\n view = () =>

Home

;\n update = {'#Home': state => state };\n}\n\nclass Contact extends Component {\n view = () =>

Contact

;\n update = {'#contact': state => state };\n}\n\nclass About extends Component {\n view = () =>

About

;\n update = {'#about': state => state };\n}\n\n[About, Contact, Home].map(C => new C().start('pages'));\nsetTimeout(()=>app.run('#Home'));\n\nconst view = () =>

SPA Example: {' '} \n Home{' | '} \n Contact{' | '} \n About

\n\napp.start(document.createElement('div'), '', view);\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"md`\n\nThat's all for a quick intro to AppRun. \n\nPlease visit the [AppRun site](https://apprun.js.org) or read the [AppRun book](https://www.amazon.com/Practical-Application-Development-AppRun-High-Performance/dp/1484240685/) published by Apress.\n\n[![Order from Amazon](https://camo.githubusercontent.com/99fad1f024c274a3d752a1583cf125037583811c/68747470733a2f2f696d616765732e737072696e6765722e636f6d2f7367772f626f6f6b732f6d656469756d2f393738313438343234303638372e6a7067)](https://www.amazon.com/Practical-Application-Development-AppRun-High-Performance/dp/1484240685/)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"apprun=require('apprun')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"import {app, apprun_jsx} from '@yysun/apprun'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"import {toc} from '@bryangingechen/toc'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1"}} 2f:"$2e:body"