シンプルでも最小の秩序を持ったオブザーバーパターンが使えるライブラリ Obseriot を書いた - Qiita
Flux によりもてはやされてる感のあるオブザーバーパターンですが、個人的に Flux はちょっと大袈裟すぎて疲れてしまいます。 もっとシンプルにできないものかと思って Riot.js に組み込まれてる riot-observable をラップしてちょっと便利にした Obseriot を作りました。 Riot.js での悩みを解決するために作りましたが、Riot.js( 本体 ) は不要なので何にでも合うはずです。 2016/08/01: Fluxのように使う方法を追記しました。 TL;DR Obseriot で解決したかったのは以下の点です。 使えるイベントに秩序が欲しい。定義したイベントだけを使いたい。 受け取れる値にも秩序が欲しい。常に定義したフォーマットで受け取りたい。 そこで riot.observable() の on と trigger をラップして以下のように使えるようにし
phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python Twitter を見ていると 『Riot.js でも Sass 使いたいー！』ってのをちらほら見かけます. Riot.js は, 標準で Less にも Sass にも対応してると思っていたんですが, ちゃんと中身を読んでみると Less にしか対応していませんでした💦 (以前ドキュメントで対応してるっての見た気がするんだけどなぁ...) ただ, 引数で簡単に拡張できるよう良い感じに作ってくれているので, 手軽に Sass を導入できます. なので今回は, 実際に Riot.js のパーサーに Sass
Riotのテストと宿命の反乱(karma-riot) - Qiita
AngularのテストではおなじみのKarma(=宿命、業)ですが、すごい名前ですよね...。karmaのRiotプラグインは日本語だと「宿命の反乱」でしょうか。フロントエンドのテストの話です、念のため。 というわけで、Riotの公式リポジトリにこのKarmaプラグインが仲間入りしたので、簡単に要所をまとめたいと思います。 アプリケーション構成(例) 極小構成ということで、この記事の登場人物はこの5ファイルだけです。動いているのをまず触りたいという方は、こちらにPlunkerで編集可能なものがあります。ソースとテスト一式はこちら。 app.tag index.html karma.conf.js package.json test/ specs.js アプリケーション本体 まずapp.tagですが、簡単なルーティングのデモになっています。ここではテストの説明が主眼なので、細かい話は略。 <
Riot.jsの落とし穴まとめ - Qiita
はじめに 軽量かつ学習コストも低めで書きやすいライブラリのRiot.jsですが、いわゆる落とし穴がいろいろあります。が、このライブラリに関する__日本語の__記事があまり多くなく、コード書いていると突然「あれっ！？」となることがたまにあるので、自分が知っているものを書いていきます。 ※執筆現時点でのバージョンは2.4.1です。 ※2016/11/10追記 既に3.0.0-alpha.13がリリースされた今、2.4.1なんて古いバージョンを使っている方はいないと思いますので、今の時点での2系の最新である2.6.7でも確認しました。 親タグマウント時に子タグもマウントされる タグ(.tagのこと)がネストしていると、親タグをマウントすると子タグも一緒にマウントされます。 例えば以下の様な場合、親タグ（appタグ）で何か処理する必要があって、その結果でマウントする子タグを決めたい場合、子タグ（c
Riot.js試してみた - Qiita
Reactで消耗しているmizchiです。 とりあえず一通り動かしてみた。webpack上でtag-loader使ってtagを動的にコンパイルすると便利だった。 https://github.com/mizchi-sandbox/webpack-riot-skeleton Overview 軽量仮想DOM実装 Vue風の独自文法 riotが軽量なのは独自の文法に対してプリコンパイラを持っててパーサがランタイムから切り離されてることと、仮想DOM実装が本当に最低限で結構サボってるようにみえる。 仮想DOMの実装部分はここ https://github.com/muut/riotjs/blob/master/riot.js#L348-L413 一通り書いてみた結果、独自シンタックスが最大の特長で、イベントハンドラ周りで基本的にDOMべったりのコードを要求されるといった印象。 JSとHTMLを並
phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python はじめに 「webpack インストールしといてー」, 「gulp 導入して watch しながら開発してー」, 「React だから ES6 でコード書いてー」 最近こんな会話が当たり前のように現場で飛び交っています. フロントエンドの開発者には HTML, CSS に特化している人 (coder, markup engineer) JavaScript は得意だけど CSS はちょっと弱い人 (javascripter) HTML, CSS, JavaScript 全てを統べる者 (frontend
Riot はミニマルで Web Components のような UI ライブラリ - Qiita
古典的な構成のサービスを AWS Lambda + S3 で動作するサーバーレスアーキテクチャで再構築し、そのフロントエンドに Riot を採用しました。 プロジェクトは WWD JAPAN.com として公開しています。 React や Angular などに代表される JavaScript の UI ライブラリのうち、Riot はミニマルな API と HTML 標準に近い文法を採用しているのが特徴です。 Riot はコンポーネントベースの UI 開発から複雑さを取り除き、楽しさを与えます。 TL;DR Riot はこれまでの UI ライブラリと比べて以下の点で異なります。 必要最小限の API 少ないボイラープレート Web Components ( HTML Template ) に似た文法 React のコードと比較してみます。 ToDo アプリケーションを React で書くと
Riot.js ソースコード完全解説 - Qiita
追記・「Riot.js ソースコード完全解説 v3対応版」を公開しました。(2016/7/26) 2.0.7時点のコードを読みます。 Qiitaの記事としては、ボリューム感に溢れてますが、ひとつのライブラリとしては驚異的に短いです。各所で指摘されているように、結構サボった実装になっています。ただ、なんだかそれを指摘するのすら野暮という感じの、単純なロジックなので、優しい気持ちでぜひ。 読み解くにあたり、いくつか特徴を挙げておきます。 正規表現を多用する (かなりイージー) DOMのパースはinnerHTML頼り CoffeeScriptやJadeなどのコンパイラは含まない それ以外のライブラリ依存なし セミコロンが嫌いらしい Riot.jsは6つのスクリプトに分かれていますが、★印の3つが基本的な部分です。この記事でも、この3つのみを扱います。 | ファイル | 機能 :-- | :--
RiotJs
Emergencies wait for no one, which is why bad credit is available 24 hours a day, 7 days a week. Instead of waiting for your bank or credit union to submit your loan application, the online loan networks listed below can process your application in minutes. If you are eligible, you can choose from several […]
React.jsではなくRiot.jsを採用した話、運用中サービス『GAMY』でリニューアル - Qiita
今回、ゲーム攻略コミュニティ『GAMY』というサービスでRiot.jsを採用しました。 知る限りでRiot.jsで実装されたサイトの中でも最大規模のサービスだと思います。 これまではjQueryとjQueryプラグインを使っていましたが、デザインのリニューアルを機に、全部書き換えることにしました。 ドキュメントも兼ねてアウトプットしていきます。 Riot.jsとは Riot.jsは今流行りのReact.jsに似た仕組みを持っている、それで非常に軽量なJavaScriptライブラリーです。 最近GitHubのリポジトリが**/muut/riotjsから/riot/riot**にお引っ越しして、これからがより注目なライブラリーです。 詳しくはこちら↓ Riot公式 Riot.js 2.0 情報まとめ GitHub 捨てることを前提としたライブラリー選定 最初は今ブームの２大フレームワークとなっ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Made With Riot
DeNA Engineering - DeNAエンジニアのポータルサイト
GitHub - any-code/riot-animation-context: Riot JS Tag - Animation Context