Lemonadeで使用しているJavaScriptライブラリ

http://lemona.de で使用しているJavaScriptのライブラリ
※2013/11現在

選定基準

2012/04時点で基本方針を決めた。

まず、jQuery前提。
Dom操作をごりごりしたくないので、KnockoutJS採用。
記述をCoffeeScriptで行い、かつファイルを適度に分割して開発しつつ、配布時は1つのファイルにまとめたいので、RequireJS採用。

あとは、必要になったものを都度追加。

使用ライブラリ

基本

• jQuery
  • 1.7.2 -> 1.9.1 -> 1.10.1
  • googleのCDNを使う <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  • ローカルにファイルも置く
• jQueryUI
  • 1.8.18 -> 1.10.3
  • googleのCDNを使う <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
  • ローカルにファイルも置く
  • Widget, Datepicker あたりを使っている
• jQuery UI Touch Punch
  • 0.2.2
• jQuery template plugin
  • https://github.com/jquery/jquery-tmpl
• Knockoutjs
  • 2.0.0 -> 2.2.1
  • http://knockoutjs.com/
• Underscore.js
  • 1.5.2
• CoffeeScript
  • 1.2.0
  • 開発時のみブラウザでコンパイルさせている

Require系

• RequireJS
  • 1.0.7 -> 2.1.6
  • https://github.com/jrburke/requirejs
• require-cs
  • 0.3.2 -> 0.4.4
  • https://github.com/jrburke/require-cs
• requirejs text
  • 1.0.7
  • https://github.com/requirejs/text
• requirejs-plugins async.js
  • 0.1.1
  • https://github.com/millermedeiros/requirejs-plugins
  • GoogleMapsのライブラリ読み込み用
  • 自前でyuicompressorかけたものを使っている

pjax用

• History.js
  • https://github.com/browserstate/history.js

ポップアップ用

• Colorbox
  • 1.4.13
  • http://www.jacklmoore.com/colorbox/

Bootstrap

• bootstrap-carousel.js
  • 2.3.1
• bootstrap-dropdown.js
  • 2.3.2
• bootstrap-modal.js
  • 2.3.2

入力補助系

• jQuery-File-Upload
  • https://github.com/blueimp/jQuery-File-Upload
  • ea5b386afeef941feecf41cdf0f1bf9e68b00159 2013-04-02時点最新
• jQuery Iframe Transport Plugin
  • 1.4
• jQuery Time Entry
  • 1.4.9->1.5.1
  • http://keith-wood.name/timeEntry.html

表示補助系

• jQuery.dotdotdot
  • 1.5.0 -> 1.5.7
  • http://dotdotdot.frebsite.nl/
• jquery.placeholder
  • 2.0.7
  • https://github.com/dannylloyd/jquery-placeholder/blob/master/jquery.placeholder.js

操作補助系

• jquery.outerClick
  • 1.1
• perfect-scrollbar
  • 0.4.1
  • https://github.com/noraesae/perfect-scrollbar

値操作関連

• jquery-dateFormat
  • https://github.com/phstc/jquery-dateFormat
• ISO8601.js
  • https://github.com/shumpei/iso8601.js
  • http://d.hatena.ne.jp/Syunpei/20090909/1252464451
• jQuery-URL-Parser
  • https://github.com/allmarkedup/jQuery-URL-Parser

Cookie操作

• jquery-cookie
  • https://github.com/carhartl/jquery-cookie

ブラウザ判定

• Modernizr 2.6.2
  • http://modernizr.com/download/#-cssanimations-inputtypes-testprop-testallprops-domprefixes
  • CSS Animations, Input Types

グラフ関連

• Flot
  • https://code.google.com/p/flot/
  • 0.7
• jquery.flot.pie.js
• jquery.flot.stack.js
• jquery.flot.crosshair

GoogleMaps関連

• markerclusterer.js
• richmarker.js

LESS,CSS

• Less.js
  • 1.4.1

動き、見た目系

• jquery.easing.js
• jquery.mousewheel.js
  • http://adomas.org/javascript-mouse-wheel/

この辺りはデザイナーさんが導入した

IE関連

• DD_belatedPNG.js
  • 透過PNG用
• excanvas.js
  • グラフ描画用
• html5.js
  • html5のタグ用
• jquery.backgroundSize.js
  • CSS3 の background-size: cover; 用

Node.js

本番サーバにデプロイ時に、CoffeeScriptとLessはコンパイルする
なので、Jenkinsサーバの環境。本番サーバにはNodeは入れていない。

• Node.js
  • 0.6.15 -> 0.8.25
• requirejs
  • 1.0.7 -> 2.1.4
• coffee-script
  • 1.3.1 -> 1.6.3
• less
  • 1.3.0 -> 1.4.2
• bless
  • 3.0.0 -> 3.0.1
  • IE用