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

執筆者:

関連記事

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

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

Todolistをmarionette化

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

no image

Rails3.2でBackbone.jsとPrivate_pubでToDoアプリをリアルタイム化(できた!)

参考 Rails3.2でリアルタイムメッセージング~Private_pub、Faye Rails3.2とBackbone.jsでToDoアプリを作ってみた~backbone-on-rails &nbs …

Rails3.2とBackbone.jsでGoogle CalendarライクなカレンダーにCRUD(後編)~fullcalendar-rails

目次1  前回2 UPDATE1~バグの訂正3 UPDATE2 ~ ドラッグとリサイズでデータ更新4 DELETE~イベントの削除5 バグがあった → 解決しました!6  herokuにサンプルアップ …

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

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