Backbone.js

Backbone.Marionette+NedbでElectron♪

投稿日:2017年1月21日 更新日:

はじめに

Electronにsqlite3が同梱できずに詰まっていたんだけど、NeDBというnode.jsでできたデータベースを知って試してみた.

環境

  • Ubuntu 16.04 LTS
  • node.js 7.4.0
  • npm 4.0.5

yarnのインストール

yarnは高速なパッケージマネージャ.
yarnはnpmからインストールではなく、リポジトリを追加してからのインストールが奨励されている.

yarnpkg.com/en/docs/install

electronのインストール

パッケージ名はelectron-prebuiltからelectronに変わった.

開発環境の概要

ディレクトリの作成

package.jsonを作成する.

と同じく、templates以下のテンプレートをconcatして、coffee以下をcompileしてconcatする.
そして、パッケージ用にdist以下に必要な部分だけ書き出す.
梱包するライブラリはindex.jsに同梱する.
ただ、今回はライブラリをbrowseryでなくwebpackで梱包してみる.

使うライブラリ

vendor.coffee

coffee以下にvendor.coffeeを作成する.
webpackではrequireしたライブラリをパッキングしてくれるので、必要なライブラリをrequireしたentryファイルを作っておく.

webpackでライブラリの同梱

webpackのインストール

コマンドラインを使う場合はglobalにインストールする必要がある.

webpack.config.coffee

webpackは、実行するディレクトリのwebpack.configという設定ファイルを読みに行くので作っておく.
上のようなvendor.coffeeをentryにして、tmp/vendor.jsに書き出す.

webpackコマンドでvendor.jsに書き出される.

webpack-stream

gulp-webpackから改名された.
こんな感じで使える.

gulpの設定

順番を指定してcompileして、vendor.jsとtemplates.jsとapp.jsを結合する.

backbone.marionette

Marionetteのバージョンも3になり、Viewが整理されて、ViewとCollectionViewのみとなった.

marionettejs.com/

animate.css

animate.cssはcssで簡単にアニメーションできるライブラリ.
marionetteのviewとあわせて使ってみたけど、コールバックがないとやっぱり使いづらいかも…

daneden/animate.css

まず、公式にあるようにjQueryプラグインをつくる.

追加時のアニメーション

クリック時のアニメーション

削除時のアニメーションは、CollectionViewの_removeChildViewあたりをオーバーライドしてみた.

過去の記事を参考に

backbone-nedb

NeDBはnode embedded data baseの略で、純粋なnode.jsのみで出来たデータベース.
NeDBはMongoDBと同じAPIを持つ.
今回はデータの永続化のために、Backbone.syncをオーバーライドしたライブラリbackbone-nedbを使う.
バージョンが新しく、まだアルファバージョンだけど動作に支障はなかった.

ソースコード

github.com/seventhsense/electron_todolist

-Backbone.js
-, ,

執筆者:

関連記事

RailsでこんにちはBackbone.Marionette

By: palindrome6996 – CC BY 2.0 自分の中でmarionette熱がだんだんと高まりつつあり、特徴的なItemView、CollectionView、Compo …

Rails4でMarkdownをリアルタイムプレビュー〜backbone-on-rails&marked.js

By: Kool Cats Photography over 2 Million Views – CC BY 2.0 目次1 前回2 サンプルアプリ3 Gemfile4 generate5 …

三目並べゲームのAI〜原始モンテカルロ法

By: Luca Galli – CC BY 2.0 目次1 ゲーム用のAI2 シャローコピー3 AI4 勝率 ゲーム用のAI 三目並べのAIを考えてみた. 有効手をリストアップして、おの …

Rails3.2とBackbone.jsでサーバーサイドのページネーション

By: Haldane Martin – CC BY 2.0   前提 Rails3.2とBackbone.jsでサーバーサイドのフィルタリング Rails3.2とBackbon …

backbone-relationalで関連するコレクションをRails3.2のAPIに投稿〜accepts_nested_attributes_for

By: Mike Baird – CC BY 2.0   backbonerelational.org/ Backbone-relationalを使って関連するコレクションをまと …