はてなブックマーク

Ullr というライブラリを書きました。 この記事の API は一部古いです。最新版は GitHub でご確認ください。 最近は個人的に、Web Components を書く機会が多いです。 バニラの Web Componentsは HTMLElement を継承していくのでオブジェクト指向なプログラミングスタイルをとることになります。 ただ、純粋な Web Components だと、コンポーネントの受け取れる値がすべて文字列になるという制約と、テンプレート中に書いた Web Components と実際に呼び出されるコンポーネントの連続性をコードで表現できないという問題があり、とくに後者はストイックでもなんでもなく単純に非効率です。 そこで、テンプレートとコンポーネントの連続性を表現できる Web Components を目指したところ、すべてを関数で表現する、という試みにたどり着きま

SSR as a Service の Renderly というサービスを地道に作っていましたが、先日 Try it out を公開して機能がプレビューできるようになりました。 SSR のこと、普段はあまり考えたくないです。しかし取り扱う情報がパブリックなものであれば対応しておきたいところです。 とはいえ Web Components の中で Shadow DOM を使っている場合、Shadow DOM は文字列にシリアライズするのが難しい1 ので、そもそも完全な SSR はできません。 Isomorphic JavaScript として開発していれば skate js/ssr を使って ブラウザ側で Shadow DOM にリプレイスされる HTML+Script を使うという選択肢もあります。しかし個人的には、ブラウザで動かすためのコードを書いているのであってサーバ側では極力テンプレート

Double O というサービスを作りました。 フロントエンドはピュアな Web Components を採用していて、バックエンドは Lambda と DynamoDB のみで構成しました。 (厳密には CloudFront とか API Gateway とかもあるけどそこは省いていいよね？) REST API 以外の Util 系の Lambda 関数はすべて AWS Cloud9 で管理することで環境構築も不要な Lambda ができて楽でした。 TL;DR サーバーレスについてはごく普通のことしかしていないので、詳しくは触れないでおきます。 ピュアな Web Components だけでサービスを成立させることができた。 HTMLElement クラスを継承するだけなのでメジャーライブラリは不要になった。 Web Components の Custom Elements は標準仕様

Web Components は現在、Chrome と Safari でポリフィルなしで使うことができます。( 参考: Can I use: Custom Elements, Can I use: Shadow DOM ) Web Components ではコンポーネント開発に適した HTML 標準の API を使って、UI ライブラリに頼らずにコンポーネントベースのアプリケーションを構築できます。ポリフィルが必要な場合には Polymer から分離した webcomponents.js があるので、今から、標準の Web Components で開発ができる環境が整っていると言えます。 今回、標準の Web Components を使ったコンポーネント開発と、それを便利にする lit-html との組み合わせを比べてみます。最後に Polymer によって拡張された Extended W

Riot は React のような UI ライブラリです。 ライブラリの特徴については 公式サイトの比較 や 以前に書いた Qiita を参照してもらえれば伝わるかと思います。 React が DOM の複雑な操作をあくまでも JavaScript で解決しようとしているライブラリに対して、Riot はそこを HTML+α で解決するため Web Components を先取りして書けるようにしたライブラリを指向しているという点で大きな思想の違いは存在しています。 実際、Riot の issue では構文を Web Components 準拠にする変更があがったり、Shadow DOM 実装が検討されていたりと、割りと HTML の世界に近いライブラリとなっています。 その上で、ここではコードベースで、React でこう書くとき Riot はどう書くの？ という視点で比較してみます。 Re

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? [ニュースメディアWWD JAPAN.comを支えるSPA+Aurora+サーバーレス, サーバーレスの現実と夢と今 にも同様のトピックをまとめました] WordPress + MovableType で運用されていた WWD JAPAN.com というウェブメディアをサーバーレスに置き換えました。 2016 年 1 月からモックアップの開発を始めて、9 月のローンチまでに大部分の古典的リソースを捨て、トラフィックの影響を受けないサーバーレスなアーキテクチャへと刷新できました。 TL;DR AWS を利用したサーバーレスアーキテクチャは

次々に登場するクラウドの新サービスに疲れを感じていたら、これを試してください。 Now は新しいスタイルの PaaS です。 AWS や GAE とは比較にならないくらいシンプルで高速なデプロイができます。 2018年11月19日に Now 2.0 の内容で書き換えました。[差分] TL;DR Now が他とどう違うのかというより、どのように動作するかを書いたほうが分かりやすいでしょう。 Now のデプロイは以下の手順で行います。 now.json をプロジェクトに追加する now を実行する 認証用のメールが届いたらリンクを開く これだけです。 ソースが自動的にデプロイされ、now.json に従ってサーバが走ります。*.now.sh という形式のドメインが自動的に割り当てられて、瞬時に HTTPS で見られるようになります。CDN も有効になっています。独自ドメインを取得していれば、そ

Flux によりもてはやされてる感のあるオブザーバーパターンですが、個人的に Flux はちょっと大袈裟すぎて疲れてしまいます。 もっとシンプルにできないものかと思って Riot.js に組み込まれてる riot-observable をラップしてちょっと便利にした Obseriot を作りました。 Riot.js での悩みを解決するために作りましたが、Riot.js( 本体 ) は不要なので何にでも合うはずです。 2016/08/01: Fluxのように使う方法を追記しました。 TL;DR Obseriot で解決したかったのは以下の点です。 使えるイベントに秩序が欲しい。定義したイベントだけを使いたい。 受け取れる値にも秩序が欲しい。常に定義したフォーマットで受け取りたい。 そこで riot.observable() の on と trigger をラップして以下のように使えるようにし

JavaScript を書くとき、もはや新しい ES でないとストレスではないでしょうか。 だからこそ僕らは新しい ES で開発してから、ブラウザ対応のために Babel を使って ES5 にトランスパイルするというのが定石となっていました。 しかし、必要最小限の機能に絞って高速なトランスパイルを実現する Buble 1 が登場しました。 TL;DR Buble は、 Babel やその他のトランスパイラと比べて以下の点で異なります。 仕様への準拠ではなくブラウザで動くことを目指す 設定ファイルは不要 高速なトランスパイル Babel は新しい ES で書かれたコードを ES5 ( など )の仕様に準拠したコードにトランスパイルすることが目的です。一方で、新しい ES から ES5 への “完全” な変換は不可能です。 そこで Buble の取ったアプローチは、他仕様へのトランスパイルでは

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

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