アーキテクチャ編: SSR と CDN ( Fastly ) とユーザー依存情報の分離（新規開発のメモ書きシリーズ4）
新規開発のメモ書きのラスト シリーズだったはずなのに、色々あって前回のエントリから1ヶ月あきました。_:(´ཀ`」 ∠): 今回の話の中心は結果的に「Server Side Rendering との折り合いの付け方」と「Fastly を利用した動的コンテンツのキャッシュ戦略」です。 このシリーズの他の記事はこちら。 技術要素編: web アプリが新陳代謝を続けるための依存関係の厳選 ビルド設定編: UA に応じた最適な JS バンドルの配信と webpack との距離感 コード設計編: context による縦軸分類とレイヤードアーキテクチャ まずは全体的なアーキテクチャ像 次の図はアーキテクチャの全体像です。クライアントサイド寄りの範囲を中心に書いているため、バックエンドな Microservice 群以降がおざなりな図ではありますがご容赦ください。 主要リソースは Fastly を通じ
Web アクセシビリティ向け Node.js 製の自動チェックツールや DevTools 用の拡張機能など
アクセシビリティを担保するプロセス作り この記事は Web Accessibility Advent Calendar 2016 - Adventar の 12 日目の記事です。 UI 実装の再考と a11y - Frontrend Vol.8 LT でも述べましたが、Accessibility is a Process, Not a Project ということでアクセシビリティ対応するプロジェクトではなく、アクセシビリティを担保するプロセスを作りましょうということで、チェックツールをいくつか並べて俯瞰してみます。対象読者は自分と同じようなクライアントサイドの Web アプリケーション屋さんということにしておきます。 ちなみにアクセシビリティ評価ツールについては 3 日目のアクセシビリティ方針、報告書、試験支援ツールa11ycのご紹介 (Web Accessibility Advent C
Isomorphic Architecture を実装してるときの細かいアレコレ
Isomorphic あらため Universal ？ 一時期火がついていた Isomorphic について。各自がプロダクションの事例を作り上げる潜伏期に入ったのか、はたまた本当に一過性で火が消えたのか、コモディティ化を遂げたのか分かりませんが、あまり耳にすることがなくなった印象です。 そんな中ですが先日、Universal JavaScript — Medium が公開され、なるほど Universal ってキモチになったので、タイトルに反して以下は Universal と呼称します。 今回の話題にするのは module レベルではなく Universal な JavaScript architecture のほうです。アーキテクチャのレベルで Universal なコードが役立つ代表的ケースは SPA (Single Page Application) と SSR (Server S
yahoo/fluxible による SPA + Server Rendering の概観
Single Page Application + Server Rendering yahoo/fluxible を使って、Single Page Application と Server Rendering の良いとこ取りのアーキテクチャを目指す。ある程度の複雑性と引き換えに、双方の利点で双方の欠点を打ち消し合うことができるため、全体的には良好なユーザーインタラクションを期待できる構成。 なぜ Single Page Application なのか 画面遷移時するたびにJavaScript/CSS のパースと評価をしなくて良くなる 画面遷移時のトランジションを柔軟に適用できる 画面遷移をまたがった実装が可能になる（あくまで可能になるだけ） なぜ Server Rendering するのか 初期表示の Critical Rendering Path を短縮できる SEO における保守信仰
React に対する感情とかコンポーネント管理ライブラリの選定とか
コンポーネント管理できそうなライブラリの選定 ここでいうコンポーネントは HTML 要素をコンポーネントに見立てるような、近代 Web フロントエンドにおける狭義のコンポーネントです。大まかな条件は次の3点。 コンポーネント中心の開発ができること >= IE9 をサポートすること（切っても良さそうなんだけど...） 既製品・スクラッチは問わないが極端なリスクは踏めない（納期がシビア） あとは期待度や API のセンスなど、個人的な審美眼判定に依ります。 angular/angular : 2.0 が正式リリースしたらまた会いましょう jashkenas/backbone : 最近のコンポーネント管理には及ばない Custom Elements ( Polymer ) : polyfill が >= IE10サポート segmentio/deku : 振る舞いは十分だったけど、>= IE10
Polymer 0.5 → 1.0 変更点ナナメ読みメモ
変更点のナナメ読み Polymer 1.0 が Google I/O 2015 のキーノート（？）で公開されたようなので、ドキュメントから変更点について気になるところだけ拾い読みしました。 ハイライト Introducing Polymer 1.0 - Polymer の Highlight より。 0.5 と比べて Web Components をネイティブサポートする Chrome で起動速度と実行時性能が劇的に高速化（したしい） 0.5 と比べて ペイロードサイズ（ファイルサイズ）を減らした 実装の全体的なリファクタリング（たぶんゼロベース） 新しく シンプル化＆高速化されたデータバインディングを実装 新しく shady DOM という Shadow DOM の Polyfill を実装 ネイティブの Shadow DOM なしで要素のスタイルを保護する境界を作った 前々からアピール
TCP Slow Start と MSS, initcwnd などのメモ
現実的な値と根拠など Slow Start などの例に良く出てくる数字の論拠と、個々の単位がどこで決まってくるかを主に取り扱う。というメモ。苦手科目だ。_:(´ཀ`」 ∠): Max Segment Size (MSS) の決定 この MSS がウインドウサイズ（一度に転送するデータサイズ）の単位として扱われる。（後述） TCP コネクションが 3-way handshake によって確立される際、ノード間で下記のような MSS に関するやり取りが発生する。 各ノードは Maximum Transmission Unit (MTU) から TCPヘッダ20バイト、IPヘッダ20バイトの計40バイトを引いた値を MSS として提示する 各ノードの希望 MSS のうち低い方を、そのコネクションにおける MSS とする たとえばイーサネットでは最大1,500バイト（オクテット）がIP通信に利用で
Reactive Programming in JavaScript - Frontrend Final Conference 資料
Reactive Programming in JavaScript ( 今回のスライド: HTML版 ) このスライド自体が Bacon.js で書かれた ahomu/Talkie で作られています。Rx系のライブラリに興味を持たれた方は、ぜひコードのほうもご覧いただければ。 アジェンダ What is Reactive Programming ? Reactive in Frontend JavaScript FRP with Reactive Extensions Reactive Programming について紹介しました。今回も懲りずに新ネタでしゃべった次第。Reactive も Functional も若干こわいひとたちが生息しているイメージ（個人の感想です）があるので、遅延評価で飛んでくる斧だけがこわい :P ノイズ避け 率直な感想として、RP/FRP を学ぼうとすると情報
2014年のWebパフォーマンスふりかえり - 来年以降の期待etc
ひさびさにWebフロントエンドパフォーマンス系の話題をつらつらと書いてみます。例によってモバイル系開発者寄りの視点かもしれません。文中の参照リンク多め。 ファクタ まずはパフォーマンスに影響を与えるファクタについての所感。Webパフォーマンスにおけるイニシャライズとランタイム ::ハブろぐ で示した分類に基づきます。 イニシャライズ（いわゆるページロード） 4GやLTEが普及してもコンテンツの肥大化には追いついていない concat と CSS Sprites の呪いが解けない HTTP/2 の Streams and Multiplexing に期待 HTTP/2 の Server Push にも期待 画像周りだと <picture> 関連仕様も使いたい（srcsetだけならいける？） WebRTC とか WebSocket とかストリーミングとかは？ （やや疎い、てかイニシャライズじゃ
Front-end with Node.js - Node学園祭 2014
Node学園祭・初参加 初参加だったんですが、ビギナー＆フロントエンド向けのNode.jsツール系セッションを担当させていただきました。なんかめっちゃ緊張した･･･。 参考リンク集 1. Package manager npm Bower npm とフロントエンドのパッケージ管理の未来 ::ハブろぐ The npm Blog — npm and front-end packaging Npm Tips · fiveisprime npmのあまり知られてない機能 10選 - from scratch npm-shrinkwrap Bower Resolutions - Jake Trent 2. Task runner Grunt: The JavaScript Task Runner gulp.js - the streaming build system Node.js の Stream
npm とフロントエンドのパッケージ管理の未来
JavaScript 系パッケージマネージャの重複問題 npm は言わずもがな Node.js のパッケージマネージャだが、フロントエンド開発においては Bower も利用するのが一般的になっている。この現状の問題点は、package.jon と bower.json という似たような管理ファイルを二重で管理しなければならないということだ。 現状の使い分けをおさらいをしておくと、次のような感じになる。 タスクランナー（Grunt/gulp）・モジュールシステム（browserify/webpack）・テストスイート（karma/testem）などの開発環境系の管理が npm の主なお仕事。インストールされたパッケージは node_modules 内に展開されて、CommonJS スタイルのモジュール管理から利用する。 本題につながる話としては、ブラウザで動くライブラリの一部は npm にも
AngularJS についての所感
AgularJS に対する気持ち 所感といいつつ、主に自分がつらさとして感じていることを書く。所感シリーズとしては jQueryについての所感 も併せて読みたい。 この学習曲線の中でいうと、たぶん今の自分は Very Cool! の頂点から降りている最中くらいだと思う。そして、マサカリをふりかぶった諸兄にひとつだけ言いたいのは、共感脳を養った方がモテるということだ。 チキンハート的弁解: 以下はAngularJSに関するつらさを述べることに専念するために、美点を挙げていないだけであってAngularJSを全方位的に貶めたり、何かと比べて明確にクソだというような意図はない。 画像は AngularJS: The Best Parts · Anand Mani Sankar からの引用。X軸にある www.bennadel.com は AngularJS 大好きさん。 辛1. $scope が
Web Components(+Virtual DOM)ラッパー書いてみた
Concept 『Web Components with Virtual DOM』 ahomu/Claylump Motivation Web Components ラッパーを書いてみたいなーと思った React の JSX がイマイチ気にくわない（JSとHTMLを一緒にするなオジサン） <template> に書いた内容を Virtual DOM 生成器に変換すればいいんじゃね というような所から人様のライブラリを借りてツギハギして習作してみた次第。借りてきたライブラリ（HTML String パーサと Virtual DOM）は独自実装しても楽しそうなので、やる気があればやる。 もちろん実験品なので、実用には耐えない Files claylump.polyfill.js（webcomponents.js + window.fetch + es6promise） claylump.run
Concatだけでビルドを済ませてた例（Backbone.jsとAngularJS）
Concatでどこまで戦えるのか @jxck_ browserify使ってるんだけどあんま意味ない感じになっててつらいんだよねーっていうのを昨日 @ahomu に話したら、concatで全然いけますよって言われたからさっき乗り換えた。 — Kazuhito Hokamura (@hokaccha) August 6, 2014 (＾ω＾) 全然いけますよ 依存管理をサボってconcat 以下、「依存管理に労力を割きたくない」という理由で依存管理を省略した場合に、concatだけで破綻無くビルドするためにやっていたパターンの紹介。いけますと言った手前はあるが、最終的には現場によってケースバイケースということで、どうかひとつご容赦願いたい。 Case 1: Backbone.js Backbone.jsの場合、extends に代表されるクラスベースのオブジェクト指向モデルに多少の制約が必要に
Docker を Mac で使ってみた（Nodeアプリ例）
色々あってDockerした。さっくりとアプリ作るならHerokuも便利なのだけど、Dockerをサポートする他のPaaSも使えた方が便利そうな風潮を感じたので。 1. インストール＆導入 Mac OS X - Docker Documentation Releases · boot2docker/osx-installer からpkgインストーラをダウンロードして実行。適当にはいる。 boot2docker Mac OS X上で、Dockerを走らせるためのLinuxなVMを boot2docker で立ち上げられる。（boot2docker/boot2docker はpkgインストーラに含まれている） boot2docker init boot2docker up boot2docker init で初期化 boot2docker up で起動。dockerコマンドにホストを教えるための
Webパフォーマンスにおけるイニシャライズとランタイム
Webフロントエンド・パフォーマンス 思考整理系。 Webフロントエンドにおける3要素として、過去のセッションでは下記の3つを中心に紹介していました。 通信コスト - Networking 描画コスト - Rendering 計算コスト - Computing これらの問題は複雑に絡み合い、時として相反する関係をとります。例えば、通信コストを減らすために、視覚表現を画像からCSS3に置き換えたら、描画コストが高くなってしまいスクロールが重くなった、なんてケースは頻繁にあるでしょう。 理解の問題 この3つのコストは確かにパフォーマンスに影響を与える要因であります。しかし、その要因がWebフロントエンドのページライフサイクルにおいて、どこで影響を与えているかは表してくれません。 要因がどのような影響を及ぼしうるかという基礎的な理解と、パフォーマンスの問題に取り組むための切り口としての理解は、そ
AngularJSとサーバーサイドテンプレートの混在とngNonBindable
Angularとサーバーサイドテンプレートの混在 先日リリースされた某サービス(他社)がAngularを使っていて、XSSがボロボロ出てくるだとか、{{var}} な形式で値を入力するとng-template側でテンプレーティングされるだとかの話がありました。 詳しくは見ていないので、今回の話とまったく同じかは把握していませんが、サーバーサイドテンプレートを混在させると、次のようなことが起こりえます。 例えばejsとAngular サンプルとしてスカスカなControllerを用意します。 angular.module('app', []).controller('AcmeCtrl', function($scope) { $scope.foo = 'bar'; }); ejsは次のようなテンプレートになっているとします。
Componentによるフロントエンドのパッケージ管理
直近で、新規案件に関わることになりそうなので、ライブラリ選定やタスクランナー、そして今回の依存管理のようにベーシックな話が続いてます。次第に、具体的な実装やコード設計のポストが多くなる･･･はず。 今回はVue.jsでも触れましたが、改めてcomponent - modular javascript frameworkについて。 概要 Componentはパッケージマネージャー兼、依存解決込みのビルドツールです。クライアントサイドについて、JSのパッケージマネージャーやビルダーは既にありますが、Componentは HTML/CSS/JSをセットにして扱うことができます。 npmでいうpackage.jsonと同様に、component.jsonという定義ファイルによって、パッケージの依存関係やリポジトリなどの各種情報を示します。 component/component コア部分のリポジト
いぇーい yield と co と koa
express の後継だけあって期待が高まってる Koa ですが、あの珍妙な yield による同期処理っぽい記述がどのようにして支えられているかメモってみます。 年末年始を経てヤル気が高まってきたので、久々にnodeの話。 visionmedia/co さて本題。 早速ですが、koa の middleware における、あの特徴的な yield 天国は、koa ではなく co というモジュールによるものです。サンプルを見るのが早いです。 本件は yield を使うので、現時点では node v0.11.x を --harmony オプション付き実行が必要なことに注意してください 下記は co を単品で利用した場合のサンプルです。 /** * GETリクエストを非同期処理するモジュールを想定 * @example get('http://example.com')(function() {
最近のオレオレconcatパターンとか
concatパターンの小ネタ 最終的には、1つに結合される予定の個別ファイル ( 例 Phalanx/src/view.js ) において (そのファイル内の)グローバルに use strict 書いておきたい ひとつひとつにファイルに即時実行関数パターンを書きたくない 'use strict' var View = defineClass({ constructor: function() { // 初期化とか }, // 以下クラス定義 }); こんな感じで、余計なラップを書かずに1ファイルの中身を完結させたい。 という条件を満たすために下記のような grunt-concat の設定を使っている。 var RE_USE_STRICT_STATEMENT = /(^|\n)[ \t]*'use strict';?\s*/g, BANNER_TEMPLATE_STRING = '/*! <
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
