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 …

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

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

no image

Rails3.2とBackbone.jsでToDoアプリを作ってみた~backbone-on-rails

  公式 backbonejs.org/ Backbone ドキュメント日本語訳 github.com/enja-oss/Backbone イントロダクション github.com/enja

Backbone.jsからRails3.2へのPUTに対して204(no content)が返ってくる問題

By: Bernardo Chang – CC BY 2.0   UPDATEするときRailsはデフォルトでJSONには何も返さないのがデフォルトぽい [crayon-5994 …

Backbone.jsで関連するモデルのREADとCREATE

By: woodleywonderworks – CC BY 2.0   ThoughtBotの本を読み進めてるけど私には買ってよかったと感じている ゾンビviewのワナを回避す …