@transmutable/bink NPM

Bink

Bink is a sleek and reactive framework for Javascript-driven web pages.

It:

Has no dependencies
Is written in modern Javascript
Can be taught in less than an hour
Enables localization and internationalization
Provides reactive components with data binding of data models and collections

Choose Bink when:

Your web app is inherently dynamic
You don't need to support retired browsers like IE
You worry about the fragility of dependency trees
You're unhappy with ever-moving targets like React
Your implementation team knows Javascript
Your leadership is comfortable working without social proof

Do not choose Bink when:

You're making a web page that can be static
You need to support IE and other retired browsers
You can live with the fragility of dependency trees
You're happy within churning ecosystems like React's
Your implementation team needs markup abstractions like JSX
Your leadership is rewarded for "choosing IBM".

Overview of Bink

The API docs have a lot of info and example code but in general:

A web page's script element instantiates a Bink App that coordinates dynamic user interface elements made up of Components that reactively update the DOM based on information and events in DataModels and DataCollections as well as events from user actions.

Examples on Glitch

These examples are in the repo but here they are as Glitch projects for immediate satisfaction. Glitch lets you view the code and then remix it with no fuss.

Hello, world is a bare bones page but it does demonstrate a custom App and a custom Component.
Components shows every Components that is included with Bink and a bit more complex use of App.

A quick code sample from Hello World

Here's a small snippet of code to give you a flavor of Bink.

/*
This Component simply asks to be clicked and then changes its message when that happens.
*/
class ClickMeButton extends ButtonComponent {
	constructor(dataObject=null, options={}) {
		super(dataObject, Object.assign({
			text: lt('Click me') // `lt` is the `Localizer` translation method
		}, options))

		// Add to the existing `class` attribute on `this.dom`. This is good practice but still optional.
		this.addClass('click-me-button-component')

		// Setting the name sets `this.dom.data[name]` for use during debugging. This is optional but handy.
		this.setName('ClickMeButtonComponent')

		// ButtonComponent has an event type, ActivatedEvent that we listen to
		this.listenTo(ButtonComponent.ActivatedEvent, this, (eventName) => {
			this.text = lt('You Clicked Me')
		})
		// Because we used `this.listenTo` the event listener will be automatically cleaned up when `Component.cleanup` is called.
	}
}

/*
App instances run the entire single page app by coordinating DataObjects and Components.

This App simply loads a HeadingComponent and the custom ClickMeButton from above
*/
class SplashApp extends App {
	constructor(options={}) {
		super(options)

		// A Component renders something to the DOM, in this case an 'h1' element
		this._headingComponent = new HeadingComponent(undefined, {
			text: lt('Hello, world')
		}).appendTo(this)

		this._clickMeButton = new ClickMeButton().appendTo(this)
	}
}

What `App` provides:

Page-level orchestration of views
URL routing
User input context

What `Component` provides:

Manage DOM fragments in views
Provide business logic
Track and clean up listeners and data binding

Bink ships with a library of Components.

What `DataModel` and `DataCollection` provide:

The code snippet above doesn't use dynamic data so it doesn't need DataModel or DataCollection. Here's what those classes do:

Manage a shared data structure for key/value maps (models) and ordered lists (collections)
Wrap logic for communicating with services like remote web APIs or local storage
Provide data change events so that the UI can react

Use Bink in your projects

Bink is designed to be easy to use without an ecosystem like npm.

The quickest way to get started is to download the latest source code release zip from the Releases page and copy the /src/ and /style/ directories into your project's doc root. That's how the examples mentioned above work. ☝️

If you are stuck using npm (perhaps via yarn) and need to use Bink that way (dang it) then it's available as @transmutable/bink.

Testing

Bink includes a basic testing harness and uses that harness to test itself. JavaScript testing frameworks are a huge topic and generally come with huge dependency trees. It might be worth your time to see how Bink's works and perhaps decide that a basic framework is all that you need.

To run the Bink tests, start the test server npm run examples and then point a browser at:

http://127.0.0.1:8000/tests/