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-relationalをJasmineでテストしてみた

RailsでこんにちはBackbone.Marionette

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

MIddlemanでrails-assets.orgをつかってbowerのコンポーネントをつかう

By: Simon Cunningham – CC BY 2.0 middlemanは静的なサイトのジェネレータ rails-assets.orgは「the frictionless pr …

Yeomanで最新のJavaScript開発環境を最速で整える

環境 mac OSX Lion Yeomanは最新のJavaScript開発のための統合環境を提供してくれます yeoman.io/index.html 紹介動画 目次1 インストール2 さっそくアプ …

Underscore.jsのリファレンスなどのリンクメモ

By: Anne-Lise Heinrichs – CC BY 2.0 Underscore.jsは便利な関数ライブラリ. Backbone.jsが依存している.一部でアンスコと呼ばれてい …