Enviar búsqueda
Cargar
Riot.jsに触れてみた話
•
2 recomendaciones
•
19,020 vistas
エンジニア勉強会 エスキュービズム
Seguir
riot
Leer menos
Leer más
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 33
Descargar ahora
Descargar para leer sin conexión
Recomendados
Riotjsハンズオン
Riotjsハンズオン
omi end
AngularJSとFluxとRiotJSと
AngularJSとFluxとRiotJSと
Ryo Iinuma
海外で注目されてるJs framework “mithril”の特徴
海外で注目されてるJs framework “mithril”の特徴
Shoyo Kyou
俺とAngular JS 2
俺とAngular JS 2
Masayuki KaToH
Editorlt
Editorlt
Masaki Suzuki
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
Itaru Kitagawa
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門
Shumpei Shiraishi
Riotでサーバレスにした話
Riotでサーバレスにした話
Hiroyuki Hara
Más contenido relacionado
La actualidad más candente
React meetup 3_eight
React meetup 3_eight
Hideharu Okuma
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
Mizuho Sakamaki
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
silvers ofsilvers
ReactNativeを語る勉強会
ReactNativeを語る勉強会
yohei sugigami
社内LTネタ ReactNative
社内LTネタ ReactNative
Oguri Toru
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
Yusuke Murata
開発チーム管理で役立ったVSCode拡張機能
開発チーム管理で役立ったVSCode拡張機能
Masaki Suzuki
アプリ開発&チーム管理で役立った拡張機能
アプリ開発&チーム管理で役立った拡張機能
Masaki Suzuki
Ember コミュニティとわたし
Ember コミュニティとわたし
Ryunosuke SATO
capybara で快適なテスト生活を
capybara で快適なテスト生活を
Ryunosuke SATO
Riot.jsとフォームのデータバインディング
Riot.jsとフォームのデータバインディング
Keisuke Imai
angular1脳で見るangular2
angular1脳で見るangular2
Moriyuki Arakawa
Java + React.jsでSever Side Rendering #reactjs_meetup
Java + React.jsでSever Side Rendering #reactjs_meetup
Toshiaki Maki
Angular2
Angular2
Kenichi Kanai
Vscodemeetup6
Vscodemeetup6
Masaki Suzuki
React Native 入門
React Native 入門
Seiichi Okumiya
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
Mitsuru Ogawa
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェスト
Masahiko Asai
React.js + Reduxで作るSPA
React.js + Reduxで作るSPA
Shohei Saeki
React NativeでTwitterクライアントを作ってみよう
React NativeでTwitterクライアントを作ってみよう
dcubeio
La actualidad más candente
(20)
React meetup 3_eight
React meetup 3_eight
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
ReactNativeを語る勉強会
ReactNativeを語る勉強会
社内LTネタ ReactNative
社内LTネタ ReactNative
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
開発チーム管理で役立ったVSCode拡張機能
開発チーム管理で役立ったVSCode拡張機能
アプリ開発&チーム管理で役立った拡張機能
アプリ開発&チーム管理で役立った拡張機能
Ember コミュニティとわたし
Ember コミュニティとわたし
capybara で快適なテスト生活を
capybara で快適なテスト生活を
Riot.jsとフォームのデータバインディング
Riot.jsとフォームのデータバインディング
angular1脳で見るangular2
angular1脳で見るangular2
Java + React.jsでSever Side Rendering #reactjs_meetup
Java + React.jsでSever Side Rendering #reactjs_meetup
Angular2
Angular2
Vscodemeetup6
Vscodemeetup6
React Native 入門
React Native 入門
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェスト
React.js + Reduxで作るSPA
React.js + Reduxで作るSPA
React NativeでTwitterクライアントを作ってみよう
React NativeでTwitterクライアントを作ってみよう
Similar a Riot.jsに触れてみた話
20140523 jQuery基礎 (HTML5ビギナーズ)
20140523 jQuery基礎 (HTML5ビギナーズ)
Daisuke Yamazaki
jQuery 対応ライブラリと TypeScript
jQuery 対応ライブラリと TypeScript
インフラジスティックス・ジャパン株式会社
オープンソースCMSにみる、現場で使えるjava scriptライブラリ
オープンソースCMSにみる、現場で使えるjava scriptライブラリ
Ryuji Egashira
ぼく(たち)のかんがえた最新のJS開発環境 #scripty04
ぼく(たち)のかんがえた最新のJS開発環境 #scripty04
Yahoo!デベロッパーネットワーク
LightSwitch 結局何ができるの
LightSwitch 結局何ができるの
Yoshitaka Seo
Scc2014 :jQueryの仕組みを完璧に理解する
Scc2014 :jQueryの仕組みを完璧に理解する
Jun Futakawa
2013 Ignite UI 最新情報 in 岡山
2013 Ignite UI 最新情報 in 岡山
インフラジスティックス・ジャパン株式会社
Salesforce Lightning をやってみてあれこれ
Salesforce Lightning をやってみてあれこれ
寛 吉田
OSSを利用したプロジェクト管理
OSSを利用したプロジェクト管理
Tadashi Miyazato
UIを作る際にライブラリにする?それともDIYする?の切り分け&実装のアイデア例と事例紹介
UIを作る際にライブラリにする?それともDIYする?の切り分け&実装のアイデア例と事例紹介
Fumiya Sakai
運用管理者のための「開発者からみたDevOps」 - Visual Studio 2015 新機能から考える開発者の取り組み
運用管理者のための「開発者からみたDevOps」 - Visual Studio 2015 新機能から考える開発者の取り組み
慎一 古賀
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
Create android app can send SMS and Email by React Natice
Create android app can send SMS and Email by React Natice
GMO-Z.com Vietnam Lab Center
Thing.jsについて
Thing.jsについて
Masakazu Muraoka
Infragistics Web Day 2017 - 継続的な開発を支える テスト自動化技術
Infragistics Web Day 2017 - 継続的な開発を支える テスト自動化技術
Tatsuya Ishikawa
Angularを利用したシステム開発事例
Angularを利用したシステム開発事例
Developer Solutions事業部 メシウス株式会社 (旧グレープシティ株式会社)
Intalio japan special cloud workshop
Intalio japan special cloud workshop
Daisuke Sugai
Web development fundamental
Web development fundamental
Takuya Kumagai
Ignite UI 2012 最新情報 jQuery Mobile 編
Ignite UI 2012 最新情報 jQuery Mobile 編
インフラジスティックス・ジャパン株式会社
Open Shift v3 主要機能と内部構造のご紹介
Open Shift v3 主要機能と内部構造のご紹介
Etsuji Nakai
Similar a Riot.jsに触れてみた話
(20)
20140523 jQuery基礎 (HTML5ビギナーズ)
20140523 jQuery基礎 (HTML5ビギナーズ)
jQuery 対応ライブラリと TypeScript
jQuery 対応ライブラリと TypeScript
オープンソースCMSにみる、現場で使えるjava scriptライブラリ
オープンソースCMSにみる、現場で使えるjava scriptライブラリ
ぼく(たち)のかんがえた最新のJS開発環境 #scripty04
ぼく(たち)のかんがえた最新のJS開発環境 #scripty04
LightSwitch 結局何ができるの
LightSwitch 結局何ができるの
Scc2014 :jQueryの仕組みを完璧に理解する
Scc2014 :jQueryの仕組みを完璧に理解する
2013 Ignite UI 最新情報 in 岡山
2013 Ignite UI 最新情報 in 岡山
Salesforce Lightning をやってみてあれこれ
Salesforce Lightning をやってみてあれこれ
OSSを利用したプロジェクト管理
OSSを利用したプロジェクト管理
UIを作る際にライブラリにする?それともDIYする?の切り分け&実装のアイデア例と事例紹介
UIを作る際にライブラリにする?それともDIYする?の切り分け&実装のアイデア例と事例紹介
運用管理者のための「開発者からみたDevOps」 - Visual Studio 2015 新機能から考える開発者の取り組み
運用管理者のための「開発者からみたDevOps」 - Visual Studio 2015 新機能から考える開発者の取り組み
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Create android app can send SMS and Email by React Natice
Create android app can send SMS and Email by React Natice
Thing.jsについて
Thing.jsについて
Infragistics Web Day 2017 - 継続的な開発を支える テスト自動化技術
Infragistics Web Day 2017 - 継続的な開発を支える テスト自動化技術
Angularを利用したシステム開発事例
Angularを利用したシステム開発事例
Intalio japan special cloud workshop
Intalio japan special cloud workshop
Web development fundamental
Web development fundamental
Ignite UI 2012 最新情報 jQuery Mobile 編
Ignite UI 2012 最新情報 jQuery Mobile 編
Open Shift v3 主要機能と内部構造のご紹介
Open Shift v3 主要機能と内部構造のご紹介
Más de エンジニア勉強会 エスキュービズム
エスキュービズム新技術発表資料
エスキュービズム新技術発表資料
エンジニア勉強会 エスキュービズム
小売りにおけるAIの可能性
小売りにおけるAIの可能性
エンジニア勉強会 エスキュービズム
React Redux Redux-Saga + サーバサイドレンダリング
React Redux Redux-Saga + サーバサイドレンダリング
エンジニア勉強会 エスキュービズム
Azure container service上でコンテナベースでオートスケールの検証をしてみた
Azure container service上でコンテナベースでオートスケールの検証をしてみた
エンジニア勉強会 エスキュービズム
はじめての品質
はじめての品質
エンジニア勉強会 エスキュービズム
Go言語によるWebアプリケーション開発
Go言語によるWebアプリケーション開発
エンジニア勉強会 エスキュービズム
機械学習ライブラリ : TensorFlow
機械学習ライブラリ : TensorFlow
エンジニア勉強会 エスキュービズム
Developer Summit 2016 参加してきました。
Developer Summit 2016 参加してきました。
エンジニア勉強会 エスキュービズム
ほんのりTDD
ほんのりTDD
エンジニア勉強会 エスキュービズム
IoTで何をやったか
IoTで何をやったか
エンジニア勉強会 エスキュービズム
2016 新人研修 基本技術講座 (1)
2016 新人研修 基本技術講座 (1)
エンジニア勉強会 エスキュービズム
Dockerを用いたマイクロサービスについて
Dockerを用いたマイクロサービスについて
エンジニア勉強会 エスキュービズム
VRのコンテンツ
VRのコンテンツ
エンジニア勉強会 エスキュービズム
Azureで動いている機械学習のいろいろについて
Azureで動いている機械学習のいろいろについて
エンジニア勉強会 エスキュービズム
レイアウトについて
レイアウトについて
エンジニア勉強会 エスキュービズム
アルゴリズムとデータ構造(初歩)
アルゴリズムとデータ構造(初歩)
エンジニア勉強会 エスキュービズム
何故エンジニアはテストをしないのか
何故エンジニアはテストをしないのか
エンジニア勉強会 エスキュービズム
IoTのIを考えてみる話
IoTのIを考えてみる話
エンジニア勉強会 エスキュービズム
AzureのIaaSとかの話
AzureのIaaSとかの話
エンジニア勉強会 エスキュービズム
【エンジニア勉強会】品質ってなんなのさ
【エンジニア勉強会】品質ってなんなのさ
エンジニア勉強会 エスキュービズム
Más de エンジニア勉強会 エスキュービズム
(20)
エスキュービズム新技術発表資料
エスキュービズム新技術発表資料
小売りにおけるAIの可能性
小売りにおけるAIの可能性
React Redux Redux-Saga + サーバサイドレンダリング
React Redux Redux-Saga + サーバサイドレンダリング
Azure container service上でコンテナベースでオートスケールの検証をしてみた
Azure container service上でコンテナベースでオートスケールの検証をしてみた
はじめての品質
はじめての品質
Go言語によるWebアプリケーション開発
Go言語によるWebアプリケーション開発
機械学習ライブラリ : TensorFlow
機械学習ライブラリ : TensorFlow
Developer Summit 2016 参加してきました。
Developer Summit 2016 参加してきました。
ほんのりTDD
ほんのりTDD
IoTで何をやったか
IoTで何をやったか
2016 新人研修 基本技術講座 (1)
2016 新人研修 基本技術講座 (1)
Dockerを用いたマイクロサービスについて
Dockerを用いたマイクロサービスについて
VRのコンテンツ
VRのコンテンツ
Azureで動いている機械学習のいろいろについて
Azureで動いている機械学習のいろいろについて
レイアウトについて
レイアウトについて
アルゴリズムとデータ構造(初歩)
アルゴリズムとデータ構造(初歩)
何故エンジニアはテストをしないのか
何故エンジニアはテストをしないのか
IoTのIを考えてみる話
IoTのIを考えてみる話
AzureのIaaSとかの話
AzureのIaaSとかの話
【エンジニア勉強会】品質ってなんなのさ
【エンジニア勉強会】品質ってなんなのさ
Último
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
Matsushita Laboratory
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
Tetsuya Nihonmatsu
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
ssuser539845
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
Sadao Tokuyama
2024 04 minnanoito
2024 04 minnanoito
arts yokohama
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
Ayachika Kitazaki
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
Industrial Technology Research Institute (ITRI)(工業技術研究院, 工研院)
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
Shumpei Kishi
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
arts yokohama
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
ssuser370dd7
2024 03 CTEA
2024 03 CTEA
arts yokohama
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
arts yokohama
Último
(12)
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
2024 04 minnanoito
2024 04 minnanoito
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
2024 03 CTEA
2024 03 CTEA
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
Riot.jsに触れてみた話
1.
0 Riot.jsに触れてみた話 エスキュービズム・テクノロジー エンジニア勉強会 July 24,2015 S-cubism Technology
Inc.
2.
1 JavaScriptのフレームワー クっていっぱいありますよね。
3.
2 主要なもの ※jQueryはフレームワークじゃねぇ!ってツッコミはおいといてください。
4.
3 どれを選ぼうか…
5.
4 Riot.jsはどうですか?
6.
5 A REACT- LIKE,
2.5KB USER INTERFACE LIBRARY React.jsを意識して作られた超軽量なUIライブラリ Riot.jsとは https://muut.com/riotjs/ より
7.
6 Why Riot? And why
we need a new UI library https://muut.com/riotjs/ より
8.
7 1. Custom tags 2.
Simple and minimalistic Why Riot? And why we need a new UI library https://muut.com/riotjs/ より
9.
8 1. Custom tags
10.
9 独自タグ(コンポーネント) 基本的には、独自タグ(コンポーネント)を作成していく形となります。 例では「app」「test」。 本来は.tagで登録しますが、シンタックスカラーが効かないため.htmlに。
11.
10 コード例(コンパイル前) https://muut.com/riotjs/ より
12.
11 コンパイルすると
13.
12 コード例(コンパイル 後) http://muut.github.io/riotjs/demo/ より
14.
13 2. Simple and
minimalistic
15.
14 そんなに軽いの?
16.
15 軽いです。
17.
16 比較① ライブラリ / フレームワーク
サイズ Riot.js 6.7KB jQuery 94KB ※ver1.11.3 Angular.js 145KB ※メインjsファイルのサイズ React.js 122KB
18.
17 比較② https://muut.com/riotjs/guide/ より React.jsのtodo Riot.jsのtodo
19.
18 比較② https://muut.com/riotjs/guide/ より React.jsのtodo Riot.jsのtodo 24倍から128倍の差!(…らしい。)
20.
19 仕様について
21.
20 ルール(抜粋) ・Riot.jsはHTMLタグ(レイアウト)とJavaScript(ロジック)の組み合わせ ・JavaScriptは、まずHTMLが定義されていて、かつscript内に記述する ※外部タグファイルを読み込む場合、bodyタグ内で読み込まないと使用できない。 ・scriptタグを除くhtmlタグの終了位置がJavaScriptの開始。 ・クラス名は省略して記述できる。 例) class={ completed:
done } ⇒ class="completed" ・全ての属性名は小文字でなければならない。(ブラウザの仕様) ・独自タグは必ず閉じる必要がある。 ・式の値がfalseなら属性は無視。 例) <input checked={ undefined }> ⇒ <input> https://muut.com/riotjs/guide/ より
22.
21 書き方について
23.
22 HTML メインとなるindex.html。 ここで各コンポーネントファイルとコンパイラを読み込む。
24.
23 コンパイラ 上: コンパイル済みの特別なファイルを読み込む 下: ブラウザ上でトランスコンパイル
25.
24 マウント 「todo」と言う独自タグに 'Hello Riot!'という文言を 「heading」と言うキーで マウントする。 全ての独自タグをマウントする。 困ったらこう書くw
26.
25 変数 opts タグの属性としてセットした値やマウントされた値は、opts変数からアクセス可。 例では「title」。
27.
26 式 式はHTMLと混合して記述できる、かつ100%JavaScript。
28.
27 繰り返し処理 タグの属性としてセットした値は、opts変数からアクセスできます。例では「title」。
29.
28 条件文 使い方としては、 ・style="display: "(無視される) ・style="display: none" ・真偽値のセット
or 削除 など。
30.
29 …etc 詳しくは公式ページより!
31.
30 DEMO
32.
31 ・https://muut.com/riotjs/ ・http://qiita.com/cognitom/items/fb1295f3f93911e9e92d ・http://qiita.com/cognitom/items/54ae38c9a50dbbe28367 ・http://qiita.com/kazusa-qooq/items/66047d74596ddb494df9 ・http://qiita.com/cognitom/items/8010e0779950df574cc9 参考URL
33.
32 ありがとうございました
Descargar ahora