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
-, ,

執筆者:

関連記事

Backbone.jsからjQuery UIのDialogを使う例

Backbone.js楽しくなってきた 部品ごとのクラスをつくって、それに飾りとイベントをつけて、あとは上位部品から呼び出してくっつけるだけ jQuery UIのダイアログの場合は、公式のサンプルだと …

Backbone.jsでモデルとフォームを関連づける〜backbone_datalink.js

By: See-ming Lee – CC BY 2.0     こんなコードでフォームからjQueryでいちいち指定しているのを [crayon-58d621abb3 …

backbone-railsのscaffoldで生成されるコードでルーティングとCRUDの処理をどうやってるのか読んでみた

By: asobi tsuchiya   目次1 はじめに2 サンプルの準備3 初期化4 ルーター5 READ6 CREATE7 UPDATE8 DELETE はじめに backbone-r …

Todolistをmarionette化

By: Jackie – CC BY 2.0 目次1 Marionette.js2 インストール3 Application4 gulpfile.coffee5 ItemView6 Coll …

もしもRails3.2とBackbone.jsでリアルタイムな2ch風な掲示板をつくったら〜private_pub

By: Kevin Dooley – CC BY 2.0   まだ、Observerのことがよくわかってない ので、過去のやつをもとにやってみた dry-shore-2517.h …