You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GruntをREMPに導入するためのメモ。 node.jsのインストール node.jsを最新版にする。node.jsのinstallボタンで落ちてくるパッケージから再インストールするだけ。 node -v v0.10.8 npm -v 1.2.23 grunt-cliのインストール グローバルにgrunt-cliをインストール。 npm install -g grunt-cli プロジェクト毎にgruntを導入する プロジェクトのルートでpackage.jsonを生成する。 npm init プロジェクトのルートでgruntをインストール。 npm install grunt --save-dev --save-devをつけるとpackage.jsonにインストールしたタスクの依存関係が記録される。 package.jsonに依存関係が記録されていればnpm installだけで一括導入
2012/11/14に開催された「なんでもないただの先端技術勉強会(仮)」にて、Backbone.jsの概要説明に使ったスライドです。
個人的なまとめ 公式サイト marionettejs公式 yeoman公式 generator-marionette github xxとは marionetteとは Backbone.jsをラップしたライブラリ。 yeomanとは webフロントエンド周りのビルドツール?rakeとかantとかmavenとかに似てる。内部ではbowerやgruntと連携していい感じにしてくれる。 generator-marionetteとは yeomanのmarionetteのジェネレーター。marionetteはもちろん、mongoDBやexpress(node.jsのフレームワーク)の環境も作ってくれる。 backbone.js and expressの組み合わせ環境を簡単に作ってくれるので、これを使い始めた。 導入 yeomanを入れる。generator-marionetteを入れる。genera
個人的まとめ 各種view要素 item view 例えば「ユーザー」の構成要素としてユーザー名やメールアドレスがあるとして、この2つを含む「ユーザー詳細」と呼べるような最小単位の画面要素。ユーザー名を一つのitemviewにするのは多分やり過ぎ。 itemviewには一塊のhtmlの部品が対応していて、itemviewではその部品をタグ(tagNameで指定される)でラップして返してくれる。 collection view item viewを繰り返すためのview。collection viewは自分自身のhtml部品を持たないためtrに対応したitem viewを繰り返すのには向かない。この目的のためにはcomposit viewを使う。 参考 composit view item viewを何かでラップし、繰り返しなどをするためのview。テーブルやツリーなどはこちらを使う。 re
チュートリアルの続き。 さんざん伸ばした挙げ句、ようやくここからが、本番。 MarionetteのViewを使う。 また、長い記事になったので、先にソースあげておく。 https://github.com/lxyuma/todo-mario これから作るもの 前回、新規作成formを作ったので、 新規作成したtodoを表示するViewを作る。 liタグで、一つずつのTaskを表示する ulタグで、それらを束ねる liタグ用のView(1つ1つのTask) generatorをまた使う。 $ yo marionette:itemview task --create-all --create-allも付けると、templateも作ってくれる。 出来上がったソースに対して tagName: liを紐づける liをクリックしたらfinished:trueにして、線を引きたいので、 clickされた
marionette.jsのチュートリアルの続き。 ここから、クライアント側の話。 先に言うと、メインのmarionetteは、この記事でなく、その3なので読んで飽きてきたら、その3に飛ぶべし。 前回に引き続き、gruntを起動している状態で進める事。 もし、起動していなければ、gruntを起動する。 model 初めにmodel を作る。 railsみたいに、MVC,routerそれぞれのgeneratorが準備されているので、勿論それを使う。 $ yo marionette:model task create app/scripts/models/task.js invoke mocha-amd:unitTest create test/spec/models/task.js conflict test/spec/testSuite.js [?] Overwrite test/spec
Marionette.jsのチュートリアルを書く。 特に、yeoman製のgenerator-marionetteを使って、 railsみたいに、楽しながら、進めていく。 量が多くなったので、何度かに分けて書く。 この記事は、yeomanによる準備から、node+expressによるサーバー側まで。(baucis という楽チンな仕組みを使う) Marionette.jsとは? この前作ったslideをご参考に。 introduction to Marionette.js (jscafe14) from Ryuma Tsukano インストール 以下のgenerator-marionetteのgithubのページを参照 https://github.com/mrichard/generator-marionette#install 特にハマる事は無い。多分ね。 project作成 proje
http://www.stevesouders.com/blog/2013/11/16/async-ads-with-html-imports/ Steve Soundersがブログで、HTML Importで広告を非同期で読込むことでパフォーマンスの悪化を回避するテクニックを紹介してます。 スクリプトの読込みはウェブサイトのパフォーマンスが悪化する要因になるので、Google Analytics / Tweet ボタン / FacebookSDK / Google+のfollowボタンなどは、非同期で読み込める手法をとっているが、広告はdocument.writeを使ってるため、それができない場合が多い。 現状ではHTML importsは、linkタグではなく、それに続くscriptタグでレンダリングがブロックされる。(HTML importsはChrome Canaryで、Exper
以前書いた記事の反省を元にMarionetteに移行した。 思った以上に快適! 大規模になったらMarionette.js使えとか書いているのは嘘で、普通にBackbone使うときは、初めから使うべき。 Backboneで一番恐ろしいのは、各現場/各開発者毎に異なるオレオレ実装。オレオレ実装作るコストに加え、使う人の思わぬバグや学習コストやスイッチングコスト等諸々考えると、特別な理由がない限りMarionetteみたいな既存のframework使うべき。 あんど。データバインディングを提供してくれる、stickitと一緒に使うと、より一層効果的。 めっちゃ、ソースコードの量が減って、ソースの意図が明快になった。悩みも少ない。工数も勿論減る。 ここから、幾つか思った事を、サッカー見ながらお酒飲みながら、ダラダラ書く。※ちなみに、日本vsオランダ戦見てる。 railsアプリでのjs周辺の作りの
GithubのZach Holmanが語るGithubの組織戦略です。まず最初に、 Step #1: ロックスターエンジニアを雇う Step #2: ものすごく透明性のある経営をする Step #3: ブログ/ソーシャルメディアなどでテクノノロジーについて発信する Step #4: カンファレンスで会社について話す Step #5: カネに余裕ができる Step #6: 社員を大勢雇う Step #7: 会社のことを話さなくなる Step #8: コミュニティを無視する Step #9: 創業者が株を売って儲ける Step #10: 別の会社をはじめる という事例を挙げて、Githubは組織が成長する中で、このようなパターンに陥らないように、コミュニケーション及び仕事の進め方をどのように進化させてきたかについて紹介してます。 Dunbar's numberとしてよく知られるとおり、人間が良
An update to Module Pattern, A Little More Detail, an article in which I first explained the idea of using closure’d objects as an alternative to Javascript’s new and prototype system objects. It’s been a few months since my first article on the Javascript module pattern and I’ve learned and read a lot, thanks to whizzes like mraleph and John Firebaugh. Here’s an update. Closures Can Be Less Memor
Webフロントエンドのパフォーマンスチューニングについて全体的な話。javascript、Chrome DevToolsの紹介、ボトルネック、ポイントなど。
本文書は、Jesse James Garrett 氏による “ajax: a new approach to web applications” を、Creative Commons の Attribution ライセンスに基づき、訳出したものです。 本文書の訳には、誤っている箇所が多々あると思います。また、日本語的にうまく訳せない、あるいはわかりにくいところは、激しく意訳しています。しかし、話のおおよその流れについては外してはいないと思いますので、細かいことは気にしないでください。 ちなみに「覚え書き@kazuhi.to: DESIGN IT! 1日目」によると、 Ajax は「エイジャックス」と発音するとのことです。 著者: Jesse James Garrett 訳者: Kentaro Kuribayashi 初稿公開日: 2005-02-22 最終更新日: 2013-11-19 T
Update 2013-11-22: David Herman has published the slide deck “Status Report: ES6 Modules”. [1] is an introduction to ECMAScript 6 modules and how they can be used in current browsers. In contrast, this blog post explains how future browsers will support them natively. As part of that support, we will get the <module> tag, a better version of the <script> tag. Browsers: asynchronous modules, synchr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く