大規模UIをJavaScriptで実現するためのテクニック、サイボウズkintone開発の現場から。デブサミ2012 7万行規模のJavaScriptプログラムで構築されたユーザーインターフェイス。そのプログラミングで使われたテクニックとはどういうものか。 2月16日、17日の2日間、都内で開催されたイベント「デベロッパーズサミット2012」(デブサミ2012)で、サイボウズ株式会社 開発部 若原祥正氏、生駒浩隆氏が講演「kintoneの表と裏~大規模JavaScript開発と非構造データベース」を行いました。 講演では前半に大規模JavaScriptのテクニック、後半でスキーマレスデータベース構築の仕組みが解説されましたが、この記事では資料が公開された前半のJavaScriptのテクニックについて、ダイジェストで紹介します。 7万行のコード、フレームワークはClosure Library
Closure Library & HTML5 自己紹介 伊藤千光(いとう ちひろ) @webos_goodies http://webos-goodies.jp フリーで Web 開発やってます Gadgets API Expert Closure Library 本書きました→ Agenda Closure Library について Closure Library 入門 Closure Library の HTML5 関連機能 Closure Library について Closure Libraryの特徴 Googleの主要なプロダクトで利用されている 豊富なUIコンポーネント どうでもいいよね Closure Library のアイデンティティ GoogleのJavaScript開発ノウハウの結集 量より質の改善 体系化された構造 メンテナンス性の向上 大規模開発への対応 実行効率を
Recent entries closure libraryでplaceholder的なもの uchida 2010-11-13 S式は時代遅れ uchida 2010-10-21 goog.dom.getElementsByTagNameAndClassは配列を返さない uchida 2010-08-17 Closure Libraryのi18n/datetimesymbols.jsのファイルサイズがでかい uchida 2010-08-11 logoでハローワールド uchida 2010-06-27 Recent comments Re:goog.dom.getElementsByTagNameAndClassは配列を返さない Anonymous User 2010-09-07 Re:closure libraryのBrowserEventが微妙 uchida 2010-05-17
と言う会が品川某所で、2011/10/05にヒッソリと開催されました。 お客様は主催者たる僕のみで、それ以外の参加者は基本的に講師という大変贅沢な会です。 それなりに話はあっちこっちしていたし、 話題に上がった重要そうな部分で、僕が覚えている事を補足しながらメモ書き。 妥当でない部分があったので、変更。 スケールするUI(by @monjudoh) イベントを遅延ディスパッチする。ドラッグ&ドロップは実装が難しいかも。 イベントリスナは、より広い範囲で受ける。 例えば、一覧データなら、カラム内で受けるより、行で受ける方が良いし、それよりもテーブルで受ける方が良い。 これにはいくつか理由がある。 - 動的にデータが変更される中でイベントリスナの配置漏れによって適切に動作しない様なケースを避ける。 - イベントリスナのオブジェクトのインスタンス数を減らす。 - イベントリスナは登録処理が重いの
最近、 JavaScript のプログラミングでは Closure Library を使うようになってきました。やはりこれひとつでほとんどの機能を賄えて、アプリケーションの構造化も素直に行えるのがいいですね。 Closure Library の機能を把握するには、豊富に用意されているサンプルデモを参照するのが一番の近道なのですが、リファレンスページにファイルのリストがあるだけで、自分が使いたい機能のサンプルがどれなのか、探すのに毎回苦労します。 そこで、この状況を少しでも改善するべく、サンプルをカテゴリ分けしてみました。それぞれの内容も簡単にコメントしてあるので、目的のサンプルを見つけるのがだいぶ楽になると思います。 Closure Library のお供に、ぜひご活用ください。 イベント events.html - イベントオブジェクトの内容表示など。 eventtarget.html
最近closure-libraryの勉強をしているんだけど、WebStormでキレイに補完をしたりする設定方法のメモ。 closure-libraryというよりはWebStormの話だけど、WebStormって全プロジェクトで参照できる共通ライブラリって登録できないのかな?方法を知っている人がいれば教えてください。 以下のようなフォルダ構成を想定。 プロジェクトのルートフォルダ closure-library(ここがclosure-libraryのroot) closure googbincss src(ここに自分のjsとかcssを配置) WebStormで上記のプロジェクトのルートフォルダをOpen DirectoryPreferncesをひらいてProject SettingsセクションのDirectoriesを選択一番右側の領域でproject/closure-library/clo
Recent entries closure libraryでplaceholder的なもの uchida 2010-11-13 S式は時代遅れ uchida 2010-10-21 goog.dom.getElementsByTagNameAndClassは配列を返さない uchida 2010-08-17 Closure Libraryのi18n/datetimesymbols.jsのファイルサイズがでかい uchida 2010-08-11 logoでハローワールド uchida 2010-06-27 Recent comments Re:goog.dom.getElementsByTagNameAndClassは配列を返さない Anonymous User 2010-09-07 Re:closure libraryのBrowserEventが微妙 uchida 2010-05-17
はじめに UI フレームワークとかすっとばして、いきなりテストです。 Closure Library 使って Web アプリを作るということは、それなりの規模の RIA を作るということ。ちょっとしたやつなら jQuery でいいですからね。 それなりの規模の RIA の品質を高めるには、もはや当たり前かもしれませんが、テストが重要。早い段階でテスト機能を使いこなせるようになっておくべきです。 テストの記述 Closure Library は JsUnit を使ったテストをサポートしています。JsUnit の使い方を簡単に説明するなら次の通り。 setUp という名前の関数を作り、テストの準備を行う処理を書く tearDown という名前の関数を作り、テストの後始末を行う処理を書く test で始まる名前のグローバル関数でテストを書く JUnit や NUnit を使ってテストを書いた経験
Closure Compilerを使用したタイプセーフJavaScriptコーディングについてまとめ。 Closure CompilerはClosure Toolsの一部で、 JavaScriptコードを解析して圧縮と最適化を行うJavaScriptToJavaScriptコンパイラです。 最適化だけでなく、シンタックスや型のチェック機能も提供。 型チェックは、JsDocコメントの形式で記載された型情報をもとに行われます。 型システムは、ECMAScript4の仕様に準拠している模様。 Closure Compilerを使用することで、ECMAScript3の世界でECMAScript4ライクな型システムが使えます。(型情報をコメントに書くので、スマートさには欠けますが・・) Closure Compilerのインストール Closure Compilerのサイトよりzipアーカイブを取得
今週末の土曜日に開催される Python Hack-a-thon #3 にて、 JavaScript ハンズオンを担当させていただくことになりました。 Python Hack-a-thon でなぜ JavaScript という感じですが、そのあたりが日本の Python コミュニティーのおおらかさということでしょうか(笑)。 問題はその題材ですが、以前から気になっていた Closure Library を使って簡単なドローツールを作ることにしました。これなら見た目にも楽しいし、 Closure Library は日常業務でも役に立つでしょう。 そんなわけで、本日はそのテキスト作りも兼ねて Closure Library の使い方をご紹介します。 Closure Library とは Closure Library は、 Google が開発しているオープンソース (Apache Licen
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く