0.28.4 • Published 12 months ago

nextbone v0.28.4

Weekly downloads
5
License
MIT
Repository
github
Last release
12 months ago

Nextbone

Nextbone is a conversion of venerable Backbone using modern Javascript features. It also replaces the View layer by a set of utilities to integrate with Web Components.

Features

  • Keeps Backbone features / behavior with minimal changes. In fact, most of the code is untouched
  • Uses EcmaScript Modules and Classes
  • Fully tree shackable
  • Seamless integration with Web Components (specially LitElement)

Install

$ npm install nextbone

To take fully advantage of nextbone is necessary to use Typescript or Babel configured with @babel/plugin-proposal-decorators and @babel/plugin-proposal-class-properties plugins

Usage

Examples uses language features (class properties and decorators) that needs transpiling with Babel or Typescript

Define models

import { Model, Collection } from 'nextbone'

class Task extends Model {
  static defaults  = {
    title: '',
    done: false
  }
}

class Tasks extends Collection {
  static model = Task
}

const tasks = new Tasks()
tasks.fetch()

Define a web component using LitElement

Without decorators

import { LitElement, html} from 'lit'
import { view, delegate } from 'nextbone'

class TasksView extends view(LitElement) {
  static properties = {
    // set type hint to `Collection` or `Model` to enable update on property mutation
    tasks: { type: Collection }
  }

  constructor() {
    super()
    this.tasks = new Tasks()
    delegate(this, 'click', '#fetch', this.fetchTasks)
  }

  fetchTasks() {
    this.tasks.fetch()
  }

  render() {
    return html`
    <h2>Tasks</h2>
    <ul>
      ${tasks.map(task => {
        html`<li>${task.get('title')}</li>`
      })}
    </ul>
    <button id="fetch">Fetch data</button>
    `
  }
}

customElements.define('tasks-view', TasksView)

document.body.innerHTML = '<tasks-view></tasks-view>'

With decorators

import { LitElement, html, property } from 'lit'
import { state, eventHandler } from 'nextbone'

@view
class TasksView extends LitElement {
  // use specialized `state` decorator
  @state
  tasks = new Tasks()

  // or use `property` decorator with type hint = `Collection` or `Model`
  @property({ type: Collection })
  tasks = new Tasks()

  @eventHandler('click', '#fetch')
  fetchTasks() {
    this.tasks.fetch()
  }

  render() {
    return html`
    <h2>Tasks</h2>
    <ul>
      ${tasks.map(task => {
        html`<li>${task.get('title')}</li>`
      })}
    </ul>
    <button id="fetch">Fetch data</button>
    `
  }
}

customElements.define('tasks-view', TasksView)

document.body.innerHTML = '<tasks-view></tasks-view>'

Documentation

WIP

Related projects

Copyright © 2019-2024 Luiz Américo Pereira Câmara

0.28.4

12 months ago

0.28.3

1 year ago

0.28.2

1 year ago

0.28.1

1 year ago

0.28.0

1 year ago

0.27.3

1 year ago

0.27.2

1 year ago

0.27.1

1 year ago

0.27.0

1 year ago

0.26.0

2 years ago

0.25.1

2 years ago

0.25.0

2 years ago

0.24.2

3 years ago

0.24.1

4 years ago

0.24.0

4 years ago

0.23.2

4 years ago

0.23.1

4 years ago

0.23.0

4 years ago

0.22.0

4 years ago

0.21.1

4 years ago

0.21.0

5 years ago

0.20.0

5 years ago

0.19.4

5 years ago

0.19.3

5 years ago

0.19.2

5 years ago

0.19.1

5 years ago

0.19.0

5 years ago

0.18.0

5 years ago

0.17.0

5 years ago

0.16.0

5 years ago

0.15.0

5 years ago

0.14.0

6 years ago

0.13.0

6 years ago

0.12.0

6 years ago

0.11.0

6 years ago

0.10.0

6 years ago

0.9.1

6 years ago

0.9.0

6 years ago

0.8.1

6 years ago

0.8.0

6 years ago

0.7.2

6 years ago

0.7.1

6 years ago

0.7.0

6 years ago

0.6.0

6 years ago

0.5.0

7 years ago

0.4.0

7 years ago

0.3.0

7 years ago

0.2.0

7 years ago

0.1.0

7 years ago