hello world

## A Javascript Library for Building Apps [b8rjs.com](https://b8rjs.com) | [bindinator.com](https://bindinator.com/) | [github](https://github.com/tonioloewald/bindinator.js) | [npm](https://www.npmjs.com/package/@tonioloewald/b8r) | [jsdeliver] (https://www.jsdelivr.com/package/npm/@tonioloewald/b8r?path=dist) | [b8r-native](https://github.com/tonioloewald/b8r-native) Bindinator (`b8r`) is a fairly small (24kB compressed) "front-end" javascript library with *no transitive dependencies* that implements the model-view-controller (MVC) design pattern along with state-management ("reactive programming") and separation of concerns. || Model || View || Controller | objects (and maybe code) | HTML + CSS | code | `{text: 'hello world'}` | `<input data-bind="value=model.text">` | `{ clear(){ b8r.reg.model.text = ''} }` It's **bind** because `b8r` lets you use HTML **data-attributes** to bind data from the model and event-handlers from the controller code with the views. And it's **inator** because once you *register* an object, bindings are managed automatically and efficiently. So, in this simple example, if the user edits the text in the `` field, then `model.text` will be updated as will the text in the `

`, and if you update the registry, e.g. b8r.reg.model.text = "foo", then the `` field and `

` will be updated, which is also how the `clear()` function in the controller works. > You can use the console to see how `b8r.reg.model` is updated and how modifying it automatically > updates the view. You can also modify the controller to do something else. > > You might also want to turn on Chrome's "paint flashing" tools and see how efficiently > `b8r` updates the DOM. > > Oh, and don't worry, the documentation site intentionally exposes `b8r` as a global otherwise you wouldn't > be able to do this. Normally `b8r` is hidden in a *closure* in production. ## b8r's Principle of Laziness - write less code - that runs as written - is easier to read - easier to debug - quicker to test - has fewer bugs (bugs > k × loc) - that loads faster - uses less memory, and thus… - runs faster This is 360° laziness. *Everyone* does less work to get smaller, faster, cheaper results. Wait what? It's not that you can pick all three from "good, fast, cheap", it's that you're operating within a better framework (philosophy, not code library) that lets you spend more time on what's important to *your* app. *Laziness drives every design decision in b8r*. And `b8r` is lazy too. - It doesn't do things for the browser that the browser knows how to do (like parse HTML). - Nor implement a new templating language. - Nor require special debugging tools. - Or add zillions of runtime dependencies. Actually, *it doesn't add any*. ## Basic Principles ### Put data into b8r's registry to bind it to a path b8r.reg.foo = {bar: 17, baz: {lurman: 'hello world'}} ### Bind "data-paths" to the DOM with `data-bind` ### …and stuff "just works" Now, changes in the DOM update the bound data. And changes made to the data (via the registry) update the DOM, e.g. b8r.reg.foo.baz.lurman = 'goodbye world' ### Binding arrays is just as simple:

And then bind a list: b8r.reg.foo.list = [{id: 1, name: 'Tomasina'}, {id: 2, name: 'Deirdre'}, {id: 3, name: 'Harry'}] (Or do it the other way around) Here's all of the above in a live "fiddle". Try adding this above the ` The equivalent as Javascript: export default { css: ` _component_ { background: yellow; } `, html: `

`, load({get, set}) { if(!get().caption) { set({caption: 'I is component'}) } set({ alert(){ window.alert(get().caption) } }) } } But Javascript components are more flexible and can, for example, set properties before the component is inserted into the DOM via `initialValue()`. We don't need to check if `caption` has been set because we're earlier in the component life-cycle. export default { css: ` _component_ { background: yellow; } `, html: `

`, initialValue({get}) => ({ caption: 'I is component', alert(){ window.alert(get().caption) } }) } When you want to get into the details of building components, there are sections on [components](?source=docs/components.md) and on [`b8r`'s component API](?source=source/b8r.component.js). ### Add components with `` A **stateful component** looks like this: And to use the preceding component, you'd write something like this: ``` ``` You can build a **To Do List** app like this: > **Note**: the to-do list component in the preceding example is bound to a global path, > as is the one below. So the two share data automatically. This is *not* an accident. > If you want a component to have its own unique data, you can bind to `_component_`. ### Composing Components [data-children] You can create _composable_ components by using `data-children` inside a component. Within a component, the element with the `data-children` attribute (if any) will receive the children of the element bound to the component. E.g. in the snippet below: ```

``` If the `parent` component has an element with the `data-children` attribute, when it loads, the child will be moved into it. In the example below, the `tab-selector` component creates one tab for each child. ### Dog Food! [bindinator.com](https://bindinator.com) is built using `b8r` (along with numerous third-party libraries, none of which are global dependencies). The inline [fiddle component](?source=fiddle.component.html) used to display interactive examples is 343 lines including comments, styles, markup, and code. `b8r` isolates component internals so cleanly from the rest of the page that the fiddle doesn't need to use an iframe. ## b8r with npm in five minutes Here's a really quick start to working with `b8r` to build a web app. (If you're interested in building a desktop app, you can try [b8r-native](https://github.com/tonioloewald/b8r-native).) ``` mkdir path/to/project cd path/to/project npm init ``` Accept all the defaults. (We'll ignore the entry point for now.) ``` npm install @tonioloewald/b8r—save ``` You'll need something to serve pages, a simple option is: ``` npm install http-server—save-dev ``` Now create a simple web page: ``` hello world

``` …and save it as `index.html`. Now run: ``` npx http-server . ``` And open [http://localhost:8080](http://localhost:8080) in your browser. Go into your dev tools console (`Cmd+Shift+J` in *Chrome*, `Cmd+Option+C` in *Safari*, `Cmd+Option+I` in *Firefox*) and try: b8r.reg.app.message // should print "hello world" b8r.reg.app.message = 'laziness rules!' // updates the value in the input b8r.reg.app.speak() // same as clicking the button ## In a Nut - bind paths to DOM elements using `data-bind`. - bind paths to objects using `b8r.reg.name` (or `b8r.reg['your name']`) `= { … }`. - access and modify values bound to paths using `b8r.reg.path.to.value`. - bind arrays to the DOM using `data-list`. - bind events to event handlers using `data-event`. - bind components to the DOM using ``. - use [web-components](https://www.webcomponents.org/) without worrying about binding. We can register data (*models* and *controllers*) and load components (*views*) asynchronously. If the user clicks the button before the controller is registered, the controller method will be called when it becomes available. [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) Copyright ©2016-2022 Tonio Loewald