Riot.js を体験しよう

@phi_jp

Profile

  • name ... phi(ファイ)
  • lang ... C/C++, Python, JavaScript
  • job ... frontend game engineer
  • company ... フリーランス(先週まで DeNA)
  • twitter ... @phi_jp
  • github ... phi-jp
  • blog ... phiary

最近の活動

ブログを燃やしたり

技術コンサルサポートしたり

Cordova x Riot.js で
iOS/Androidアプリ開発!!

OSS 活動やったり

本題

Riot.js の特徴, 良いところ

  • コンポーネント指向
  • 手軽に使える(導入できる)
  • 今までの HTML と書き方が近い
  • jade や less を使った開発も可能
  • DOM 系ライブラリとの親和性が高い
  • ライブラリ自体のサイズが小さい
  • updates, reflows のタイミングが
    直感的かつコントロールしやすい
  • etc...

Riot.js の特徴, 良いところ

  • コンポーネント指向
  • 手軽に使える(導入できる)
  • 今までの HTML と書き方が近い
  • jade や less を使った開発も可能
  • DOM 系ライブラリとの親和性が高い
  • ライブラリ自体のサイズが小さい
  • updates, reflows のタイミングが直感的かつコントロールしやすい
  • etc...

ハンズオン

http://goo.gl/dEXFfI

Riot.js を使って
プロフィールカードを作ろう

Runstant について

ハンズオンの狙い

細かい理解は置いといて,

プロフィールカードを作りながら

Riot.js の手軽さを体感し, 基本的な使い方を学ぶ

 

ついでにみなさんのことも知りたい

実際にいじるのはここだけ

this.data = {
  name: 'phi', // 名前
  cp: 2, // 強さ
  icon: 'http://phi-jp.github.io/phiary-workspace/assets/images/kenkyo.png', // アイコン画像のパス
  profile: 'フロントエンドエンジニア. 最近フリーランス(無職)になりました.', // プロフィール
  birthday: '1988/9/16', // 誕生日
  languages: ['JavaScript', 'C/C++', 'Python'], // 得意な言語
  gender: 'male', // 性別(male/female)
  social: {
    twitter: 'phi_jp',
    github: 'phi-jp',
    mail: 'phi1618jp@gmail.com',
  },
};

35行目あたり

サンプルの大まかな流れ

  • ライブラリを読み込む
    (Riot.js, moment.js, less.js, font-awesome)
  • riot タグ(コンポーネント)を定義
    (app, card, chip)
  • app タグを設置
  • riot.mount('*') でタグを展開

コンポーネントの構成

step1 - 名前, プロフィールを変更する
(データバインディング)

<div class='name'>
  {data.name}
  <small if='{data.cp !== undefined}'>(CP{data.cp})</small>
</div>
  name: 'phi', // 名前
  cp: 2, // 強さ
  icon: 'http://phi-jp.github.io/phiary-workspace/assets/images/kenkyo.png', // アイコン画像のパス
  profile: 'フロントエンドエンジニア. 最近フリーランス(無職)になりました.', // プロフィール

名前やプロフィールといった表示が変更される

step2 - CP を消してみる(if 文)

<small if='{data.cp !== undefined}'>(CP{data.cp})</small>

// cp: 2, // 強さ

cp が省略されると表示が消える

step3 - 誕生日を変更してみる(式)

<span>{data.birthday}({moment().diff(data.birthday, 'years')})</span>
  birthday: '1988/9/16', // 誕生日

自動で年齢が表示される

step4 - 言語リストを変更してみる(each)

<chip each='{item in data.languages}' label='{item}'></chip>
languages: ['JavaScript', 'C/C++', 'Python'], // 得意な言語

配列で渡した内容が展開される

step5 - 性別を設定する(三項演算子)

<card style='background-color: {data.gender === "male" ? "hsl(220, 100%, 99%)" : "hsl(0, 100%, 99%)"}'>
gender: 'male', // 性別(male/female)

背景色が変わる

step6 - ソーシャル情報を設定

  social: {
    twitter: 'phi_jp',
    github: 'phi-jp',
    mail: 'phi1618jp@gmail.com',
  },

ネストしたデータも参照可能

<div class='social'>
  <a href='https://twitter.com/{data.social.twitter}' target='_blank' class="fa fa-twitter"></a>
  <a href='https://github.com/{data.social.github}' target='_blank' class="fa fa-github"></a>
  <a href='mailto:{data.social.mail}' target='_blank' class="fa fa-envelope-o"></a>
</div>

完成!

シェアしよう!!

まとめ

Riot.js は, 既存のエンジニアにやさしく
初心者でも手軽に導入できてオススメです!!

よかったら採用, 検討してみてください.

 

Riot.js 良いよ

ご清聴ありがとうございました