Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

体感!Javascriptで超速アプリケーション開発 第2回

技術評論社のMeteor完全解説を資料として作成。http://gihyo.jp/dev/serial/01/meteor
by

Masakazu Kobayashi

on 30 March 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of 体感!Javascriptで超速アプリケーション開発 第2回

体感!Javascriptで超速アプリケーション開発 Complete Meteor Meteorの実行環境 MeteorによるJavascript/CSSの管理自動化 Meteorアプリケーションのディレクトリ構造 CSSファイルの扱い HTMLファイルの扱い Javascriptファイルの扱い まとめ すべてをJavascriptで書くことができる 大規模アプリケーションの場合
多量のJavascriptとCSSになる場合がある アプリケーションルート server, publicディレクトリ以外のHTML serverディレクトリ以外の場所に置く どこでも置ける。 サーバーとクライアントでコード共有できる 第2回 サーバーとクライアントでコード共有 サーバーのコードをクライアントから呼び出す //サーバーサイド
Meteors.methods({
calcTax: function(amount){
return amount * 0.05;
}
}); //クライアントサイド
Meteor.call('calcTax', 1000, function(err, result){
var tax = document.getElementById("tax");
tax.value = result;
}); 開発時点
<link rel="stylesheet" href="default.css" type="text/css" />
<link rel="stylesheet" href="header.css" type="text/css" />
<link ...>
<script type="text/javascript" src="src1.js"></script>
<script type="text/javascript" src="src2.js"></script>
<script...> HTTPリクエストが多発してしまう 結合とミニファイ //src1.js
function calcTax(amount, taxrate){
return amount * taxrate;
} //src2.js
function calc(){
var amount = document.getElementById("amount");
var taxrate = document.getElementById("taxrate");
document.getElementById("tax".value = calcTax(amount, taxrate);
} 結合 //src.js
function calcTax(amount, taxrate){
return amount * taxrate;
}
function calc(){
var amount = document.getElementById("amount");
var taxrate = document.getElementById("taxrate");
document.getElementById("tax").value = calcTax(amount, taxrate);
} ミニファイ function calcTax(amount,taxrate){return amount*taxrate;}function calc(){var amount=... 余分なスペースや改行を省く 変数名や関数名の長さを短くする function f1(v1,v2){return v1*v2;}function f2{var v1=document.getElementById("amo... 概念説明用 ファイル名 ファイル内容から生成されたハッシュ値 ファイル内容が変更するとファイル名も変更される キャッシュが変更されないことに頭を悩ませることがない client server public クライアント側で実行されるJavascript、CSS、HTMLファイル サーバー側で実行されるJavascriptファイル 静的なファイル Meteorは特別な処理をしない それ以外 サーバーでもクライアントでも実行される 1つのHTMLファイルに纏められる 結合順序 基本的に1つのHTMLファイルで構成 Flexのイメージに近いかも 開発時 HTML分割 実行時 結合 ディレクトリ名のアルファベット順でソート
深さ優先で探索
ファイル名のアルファベット順 home
a
a.html
b
b.html
client
part1.html
part2.html
index.html
public
public.html a/b/b.html
a/a.html
client/part1.html
client/part2.html
index.html 最初にすべてのHTMLがダウンロードされる server, publicディレクトリ以外のCSSが結合・ミニファイされる server サーバー側で実行される client クライアント側で実行される public 静的に配信される それ以外 サーバーでもクライアントでも実行される クライアントで実行されるファイルは結合・ミニファイされる Javascript/CSSのコードをミニファイ・結合を自動化 HTMLコードが1つにまとめられる
Full transcript