2b:null 2c:["$","title",null,{"children":"AppRun Helps to Avoid Spaghetti Code | Yiyi Sun | Observable"}] 31:[] 2f:{"id":"2fb4227876ec7a1f","slug":"apprun-helps-to-avoid-spaghetti-code","title":"AppRun Helps to Avoid Spaghetti Code","thumbnail":"1b0a14811e9f08635beaca49c01c59d9a808127c944ca6cea1b5df4cc41821ee","access_level":"public","create_time":"$D2020-03-23T21:00:43.790Z","update_time":"$D2020-03-24T12:37:00.326Z","view_time":null,"first_public_time":"$D2020-03-24T00:30:56.999Z","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":161,"publish_version":161,"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":1,"collection":{"id":"7ad33983a7603b5e","slug":"apprun-notes","title":"AppRun Notes","owner":{"id":"406b10a49330fbc3","login":"yysun","name":"Yiyi Sun"}},"type":"notebook","body":{"title":"AppRun Helps to Avoid Spaghetti Code","cells":[{"id":0,"value":"md`# AppRun Helps to Avoid Spaghetti Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"$$=require('jquery')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":124,"value":"md `## jQuery Example\n\n* Direct State Update\n* Rendering Fragments\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"{\n $(function () { \n \n // global state\n let count = 0\n let count_plus = 0\n let count_minus = 0\n\n function plus() {\n // state update\n count ++\n count_plus ++\n \n // rendering\n $('#total').html(count)\n $('#plus').html(`+ (${count_plus})`)\n }\n \n function minus() {\n \n // state update\n count --\n count_minus ++\n\n // rendering\n $('#total').html(count)\n $('#minus').html(`- (${count_minus})`)\n }\n \n $('#plus').on('click', plus);\n $('#minus').on('click', minus);\n\n })\n return html`\n

0

\n \n `\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":128,"value":"md `## AppRun Example`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":84,"value":"import {app} from '@yysun/apprun'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"app.start(document.createElement('div'), state, view, update).element","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":147,"value":"md`\nNo matter how complex the application is, we will always have three parts, the _state_, _view_, and _update_. We no longer mix the state update with DOM rendering. Because the three parts are totally decoupled, our code base is so much easier to reason, test, and maintain.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"state = ({\n count: 0,\n count_plus: 0,\n count_minus: 0\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"view = ({ count, count_plus, count_minus }) => html`\n

${count}

\n \n `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":94,"value":"minus = (state) => ({ ...state,\n count: state.count - 1,\n count_minus: state.count_minus + 1\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":97,"value":"plus = (state) => ({ ...state,\n count: state.count + 1,\n count_plus: state.count_plus + 1\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"update = ({ plus, minus })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"