5次元のカオス

南の島の学生がつらつらと日々を書き連ねます

「アトウッドの法則 ~JavaScriptの秋~」に参加してきました

レキサス勉強会:Javascriptワークショップ!「アトウッドの法則 ~JavaScriptの秋~」に参加してきました

なんだか夏休み明けてからまだ調子が戻ってきません。

こんにちは、pxp_ssです。

去年ぐらい?から話題になってたのに、

なんだかんだでMeteor触った事ないなー!と思って

思い切って参加してきました。(思い立ったが吉日

こういうワークショップ系のイベントもっと増えないかなと切実に思います。

以下、勉強会のメモ。

Atwoowの法則とは?

  • JavaScriptをアマチュア向けの言語としてみなす傾向がある
  • しかし、JSで書けるアプリケーションは近い将来全部JSで書き直されるだろう という法則

※ (アトウッドさんは、StackOverflowの人)

ユーザの体感速度

Ilya Grigorikさん曰く(Googleの人、パフォーマンス界隈の重鎮)

Webページの表示速度

- 0-100ms : 早いと感じる
- 100ms-300ms:普通に感じる
- 300ms-1000ms:かなり重い
※ 許容できるのは約3ms程度まで

ユーザが求めるものとはデータである

それ以外の飾りはどうでもいい。

  • Pjax history API, Single Page Application, Loading Bar and Optimaized Code.

youtubeローディング -> HistoryAPIというものでやっている.

ローディングを見せることでユーザのストレスが軽減される

※ Pjax <- Ajaxでページを読み込むこと

レキサスにて業務で使っているサードパーティ

  • Knockout.js

    • jsonをページに流し込む
  • History,js

    • シングルページを使う
  • コードの最適化, 軽量化

    • require.js
    • flight.js
    • grant.js

meteorを使ったworkshop

meteorとは?

  • クライアント、サーバサイド、DBを直結させたフレームワーク

  • 今はまだ、実績が少ないが開発スピードが早いため、注目されている

Meteorの公式ドキュメント

WorkShop内でのメモ

アプリのひな形作成

  meteor create test
  • js, css, htmlが1つずつ生成される

テンプレートの作成(HTML内)

<template name="history"></template>

上で作成したテンプレートを埋め込む記述

{{> history}}

javascriptファイルについて

  • 予め定義されているif文でクライアントサイドとサーバサイドが書かれている
  • グローバル変数は、クライアント、サーバで共通の変数として扱える

meteorは内部でmongoDBを使っている

  • 正確に言うと、ミニマムなmongoDB
  • phpみたいな感じでmongoDBをいじるイメージ(個人的に)

テーブルの作成

Messages = new Meteor.Collection('messages');

※ テーブルがなかった場合、自動的に作成される

※ 設定すれば、無いテーブルを参照したときにエラーを出すこともできる

DBへのアクセス

Messages.find({}, {sort: {cdate: -1}, limit: 30});
- 第一引数 : 条件文
- 第二引数 : ソート?
- 第三引数 : 件数?

※ 引数についてはちょっと曖昧。調べる必要あり。

使っているモジュール一覧を見る

meteor list --using
  • ちなみに、insecureを削除すると決まったユーザしかアクセスできなくなる

簡単な掲示板アプリの作成

meteorの簡単な概要を習ったあとに、

実際に手を動かしながら簡単な掲示板アプリを作成しました。

基本的な流れは下記リンクの通り.

メッセージの挿入

Messages.insert(
    {user_name: 'pxp_ss', message: 'Hello, World!', cState new Date()}
);

メッセージの更新

Messages.update({
    _id: this._id},
    {$set: {message: newmessage}
});

メッセージの削除

Messages.remove({_id: this._id});

所感

  • なんとなく、phpをいじっている感じ。

  • クライアントサイドのjsから直接?ローカルのmonogoDBを叩けるのでほとんどサーバサイドをいじることは無いかなーと感じた。

  • ちょっと動くモックアップを作りたいときとかに重宝するんじゃないだろうか。

余談

meteorの描画遅延について

WorkShop中、削除処理を行ったのに 一瞬だけ削除したはずのデータが見えたことがあった(すぐに消えたけど)

  • ローカルにDBを持っていてる
  • 更新があるとWebSocketを使って本体のデータベースと同期している
  • 本体への同期が完了してないときにアクセスすると、同期していないものが見えることがある

※ 気になる場合はmongoへアクセスした後のコールバック関数で処理できる

Metorのサーバサイドでどんなことするか?

ほとんどクライアントサイドのjsをいじるだけで良いのではという感じ。

  • アクセス制限(1万件を超えるようなデータを扱うと死ぬらしい
    • autopublishの設定を参考
  • RPCのような使い方をした一例もある

入力チェックの話

  • formなどの入力チェックはクライアント, サーバサイドどっちでもした方が良い

Meteorの導入事例

  • サンフランシスコのスタートアップの教育用

jsを無効にしている人への対策はどのように行っているのか?

  • 基本的には無対応
  • GoogleMapだとそもそも弾くように設定している

jsの容量軽減

  • require.js使うと一括でjsを読み込める
  • http通信の回数が減るのでWebページの読み込み速度が劇的に早くなったりする

面白いサイト

Forecast

  • iPhoneでアクセスするとあたかもAppleStoreでインストールしたかのように表示される
  • ショートカットがホームに勝手に作られるすごい!

リンク集

Atwoodさん って一体だれ?

パフォーマンス関連

モバイルアプリと JavaScript

Meteor関連

所感

Meteorを使った簡単な掲示板アプリを作成しました。

噂に違わぬ爆速ぶりというか、数行のHTMLとJSだけでそれっぽいものができたと思います。

DBを定義したりする必要もないので、

サーバサイドもそれほど凝ったことをしないのであれば

簡単なモックを作る爆速で作れると思います。

一応、色々と設定すれば大規模開発もできるとのことでしたが、

これを使った実績を聞いたことがないので

まだまだこれからだなーという感じもしました。

kmzwさん曰く、コミュニティは結構活発だそうなのでこれからに期待です!

やっぱり手を動かす勉ことのできる強会は楽しいですね。

終始、ワクワクしながらモクモクできました。

講師のkmzwさんや、他の参加者の方もありがとうございました。