SPAをとりあえず味わってみたいけどどこからはじめればいいか。 まずはやさしく始められるRiotでやってみよう。 ということでRiotのRoutingについてドキュメント引きながらやってみました。 Riot Routerの機能いわゆるRouting、URLを判断してどのビューを表示させるか決めるというのが大きな仕事 SetupRoutingの書き方は大きく2つ riot.route(callback)URLが変化したらcallbackを返します。 *「URLが変化」するというイベントが発生するタイミングとは以下の4つのパターンのとき 新しい#(URL)がアドレスバーに入力されたとき。 (#が必要な理由はデフォルトの仕様によるため。後述します)ブラウザの戻る/進む ボタンが押されたとき。riot.route(to) が呼ばれたとき。 リンクをクリックする遷移などではなく、自分でaaa.tag

古典的な構成のサービスを 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 で書くと

技術を活かし、新しい価値を創造する DeNAのエンジニアは、想像を超えるDelightを届けるために何ができるかを考え、技術力と発想力で新しい価値を生み出しています。 多様な専門性を持ったエンジニアが切磋琢磨し、互いに刺激し合える環境や制度がさらなる成長へとつなげます。

楽すぎてどうしよう。が最初の感触。まだ3時間しか触ってないけど、もうこれでいいや感が半端ない、深夜2時です。 Angularなのか、Reactなのか、2015年が明けても毎週のように新しいJSフレームワークが出る中で、もう正直どうでもよくなってませんか? でも、これは触って楽しいはず。 Riotって何? Riotは、公式ページに A REACT- LIKE, 2.5KB USER INTERFACE LIBRARY とあるように、Reactを意識して作られた超軽量のUIライブラリで、ビュー部分(コンポーネント)に特化しているのが特長です。Vue.jsとかとも同類です。Riot 1.0も「超軽量」という点で、一時注目を集めました。 そのRiotが、2.0で趣向を変えてJSX的なプリコンパイルの仕組みを取り入れて、ReactとPolymerのいいとこ取りのような感じになっています。ただし、次の

先日書いた 『Electron の入門エントリー』 が好評だったので私の大好きな Riot.js の入門も書いてみました. AngularJS や React でもいくつか Web アプリケーション作ってきましたが, 私にとっては Riot.js が一番しっくりきました. なので今回は Riot.js について紹介します. とにかく詳しい説明はいいから触って試してみたいって方はぜひ読んでみてください. Runstant を使ったデモを並べているので, このページ上で実行したりコードをいじることができます. 実際に動かしながら, Riot.js がどれだけ使いやすいか体感してみてください♪ Riot.js とは？ 今のところ私にとって(使いやすさ, 手軽さ, 規模感総合して)最も優れた JavaScript フレームワークです. 主な特徴 個人的に Riot.js でいくつかサービス作ってき

はじめに この記事は株式会社アイスタイルアドベントカレンダーの5日目の記事です。 新規案件をLaravel5.1で開発しています。@kubotakです。 元デザイナー・コーダーなのでフロントエンドの方が得意な気がします。 今回は簡単な導入として事前コンパイルやbrowserifyなどはしません。 あくまでもルーティング方法のみの説明となります。 Riot.jsについて A React-like user interface micro-library Reactを意識して作られた超軽量のUIライブラリ。 Riot（=反乱）は、ボイラープレート(=雛形、決まり文句)と、不要な複雑さにまみれた現在の潮流に「反旗」を翻すプロジェクト。 超軽量と云うだけあってGitHubリポジトリに以下のように書かれている Framework Size Comparison Framework Version M

＊ はじめに!! ポケモンGO楽しいー！ こんにちは！ぴーすけです！ 今回はRiot.jsのルーティング機能でSPA(シングルページアプリケーション）を作りたいと思います！ とおもったのですが、SPAの定番である画面をふわっと切り替える方法が見つからなかったので、無理やり実装してみました！ もしもっと良い方法があったら教えてください！ ＊ まずはRiot.jsを使った基本的なルーティング機能!! 多分一番簡単なルーティン機能はこんな感じだと思います。上に固定メニューを用意したので、そのリンクを押すと画面が一部切り替わります。 ソースを見るには「html」タブを押してください。

※2017年10月19日 追記 本記事のriot.jsは、バージョンは2のものとなります。 現在の最新バージョンは3.7.3ですので、参考にならないこともありますので、ご注意ください。 はじめに 前回の続きで、今回はもっと具体的にRiot.jsの書き方に触れてみる。 ※よくあるチュートリアルのようなものを書く予定なので、自分の備忘録的に書きます。 したがって、随時更新の形にします。 cognitomさんの記事にRiot.jsのソースコードをとても詳しく解説されているので、 細かい仕様まで確認したい方はご参照ください。 書き方 opts変数 前回の最期でもちょっとだけ書いたopts変数について。tagファイル内で使われる変数だが、本当に中身はこれだけなのか疑問に思ったので、コンソールにopts変数の中身を出力してみた。 マウントした値は以下。 <script> riot.mount('app