npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@transmutable/bink

v0.3.0

Published

A sleek and reactive framework for web pages

Downloads

5

Readme

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/

Who made Bink?

Bink is the result of two+ decades of work on and with browsers by Trevor Flowers who leads Transmutable and is @TrevorFSmith on Twitter.