SPA に対するつらさを吐き出したものです。 @ CodeGrid 四周年記念パーティ
Vue で作る非 SPA な Web システムの構成
SPA に対するつらさを吐き出したものです。 @ CodeGrid 四周年記念パーティ
2016/05/11時点でWebAssembly関連の情報を整理してみた - Qiita
フロントエンドとしては絶対に避けて通れないWASM、そろそろエッジ環境なら試せるツールが揃ってきたということで、手を出してみた。 自分がどうしてもローレベルに弱いので、たぶん色々間違ってるんだけど、識者各位は指摘お願いします。 現在の仕様はここ https://github.com/WebAssembly/spec Chrome Canary と Firefox Beta で動作可能 WASMのゴール asm.jsに比べてサイズが小さく高速にデコード可能なバイナリフォーマット 将来的な目標として、DOMアクセスとそのGCインテグレーション これが達成されれば、ブラウザにおいて JS がファーストプライオリティな言語という状態ではなくなる とはいえ既存の資産が多いのでなくなることはないだろうが wasmのスペック自体は小さいのでおそらくブレようがないが、DOMの実装とGCは各ベンダごとに別々
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 で書くと
Observableってなんなんね？ - パステル色な日々
ついにRCのリリースも間近となったAngular2ですが、私はこの間のハンズオン以来全然触れてません。 少しづつ触っていきたいものですが、ここ最近の勉強会の経験からAngular2を学ぶならWebの最新技術を学ぶことが大切なのだとわかったので、まずは、Observableを調べてみようと思います。 学習教材を探す Observableについて学ぶぞ！と意気込んでみたもののどうやって学べばいいのでしょう。 どこかにObservableの正体について書かれた資料はないでしょうか。 github.com ここにObservableがリストアップされています。 TC39、ECMAScriptを策定してる組織です。ECMAScriptはJavaScriptの仕様だと前に教えてもらったことがあります。 どういう人達なのか 何が目的なのか そのために何をしているのか 思うことはいろいろありますが、とりあ
意地でもReduxを使う - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? [更新: 2016/05/12] react-transportを公開、サンプルコードをredux-saga v0.10.2に対応 本稿は2016年4月19日に開催されたMeguro.es #3にて同名のタイトルで発表した飛び込みLTのフォローアップになります。こちらがわかりにくいLT資料です。 発表ではReduxが導入しにくい状況でも使っていく方法はあるよ、という内容で具体的な利用例をデモをしました。しかし、その背景にはもう少し大きな問題意識があって、「食わず嫌い」とか「Redux疲れ」になる前にちょっと落ち着いてReduxについて冷
Vue.js 2.0のServer Side Renderingを試しつつ、軽くコードリーディングした - kitak blog
数日前に、Vue.js 2.0 が発表された ( Announcing Vue.js 2.0 – The Vue Point – Medium )。Server Side Renderingに対応するそうなので、pre-alphaではあるけれど、単純なサンプルを動かしつつ、軽くコードリーディングした。対象のVue.jsはこの記事を書いた時の最新のnextブランチ( fix eslint again · vuejs/vue@014ac35 · GitHub ) 2.0のポイント 内部で GitHub - snabbdom/snabbdom: A virtual DOM library with focus on simplicity, modularity, powerful features and performance. ベースのVirtual DOMを持つようになり、パフォーマンスが
Node.jsでWebサイトの更新チェックを自動化する - ほんじゃーねっと
特定のWebサイトを定期的にチェックして特定のキーワードが含まれていたら 通知してくれる仕組みを1つ覚えておくと色々重宝する。 例えば 会社に社員用Webサイトがあるなら、 （そしてそのサイトがRSSもメール通知も提供してないなら） そこに「重要」とか「人事」とかのキーワードを含む記事が投稿された時に 通知を受け取れるようにしておけば、 いちいちサイトをチェックしにいかなくても 逃さず確認できる。 また、Webスクレイピングする方法を覚えておけば、 通知を受け取る以外にも、 画面キャプチャの撮影や画像やテキストの収集を 自動化したり、作成したWebシステムの画面テストを行う、 等の応用もしやすくなる。 今回は Node.js + Grunt + cheerio-httpcli を使用して 手軽にWebサイトのデータをチェックする方法を紹介する。 今週の「世界の果てまでイッテＱ！」で「QTu
Almin.js | JavaScriptアーキテクチャ
autoscale: true Almin.js | JavaScriptアーキテクチャ 自己紹介 Name : azu Twitter : @azu_re Website: Web scratch, JSer.info 中規模以上のJavaScript 設計が必要になる 正しい設計はない Bikeshed.js :bike: 人、目的、何を作るかによってアーキテクチャは異なる 前回の続き? How to work as a Team Read/Write Stack | JavaScriptアーキテクチャ 用語 設計の目的 中規模以上のウェブアプリ SPAというよりは、画面が複雑なElectronアプリのようなイメージ スケーラブル 人、機能追加、柔軟性、独立性 見た目が複雑ではないアーキテクチャ 書き方が特殊ではなく見て分かるもの 設計の目的 テストが自然に書ける パーツごとに無理なく
Retax by retaxJS
Retax helps you to bootstrap your universal react / redux application. It also comes with a set of optional opinionated helpers to structure and reduce your application code. You could look at the examples folder to see how to use retax or look at a HUGE app running with retax here (work in progress). WARNING: The core of retax is stable and tested. Optional modules (ActionsCreator, Api and RetaxC
#child_process_sushi でJavaScriptアーキテクチャについて話してきた
#child_process_sushiで最近やってたJavaScriptの設計の話をしてきた。 Almin.js | JavaScriptアーキテクチャ Fluxとかで上半分は皆やるようになったけど、ドメインモデルとかFluxの場合にビジネスロジックとかをどこに書くとかはまだ未成熟な気がしているので、そのパターンを考えててAlmin.jsというのを書いたという話をした。 Almin自体は大した実装ではないので、サンプルとかドキュメントとしてパターンについて学べるものを書いていきたいイメージ。(このアーキテクチャ話自体は、色々な言語で繰り返しやっては言語が廃れて、パターンがちょっと違う形で残るというのを繰り返している by @t_wada) JavaScriptでもウェブアプリやElectronでのアプリのような、APIを叩いて表示して終わりじゃなくて、ドメインモデルの生存期間が長いものが
Are JavaScript Promises swallowing your errors? - James K Nelson
This article has kindly been turned into a video by the folks at Webucator who do JavaScript training. When dealing with asynchronous code, JavaScript’s ES6 promises can make your life a lot easier. No more callback pyramids, no more error handling on every second line, and no more reliance on external libraries to do things as simple as getting the result of a for loop. But ES6 Promises can have
Node.js v6.0 (Current) がリリースされました。 - from scratch
さて、とうとう皆さん待望の Node.js v6.0 がリリースされました！次のLTS候補です。LTSになるのは2016年の10月からの予定です。v6 の LTS 期間は明示化されてないですが、ルールに照らし合わせれば、LTSになってから 2年半がサポート期間なので、おそらく 2019年4月まではサポートされます。 Node v6.0.0 (Current) | Node.js Node.js v6.0 の主な変更点 ES2015 support の改善 module load性能の改善 Buffer API の new Buffer() コンストラクタの廃止 (セキュリティ上の理由から) ES2015 support の改善 やっぱりこれが一番大きな変化ですね。 node.green を見てもらえればわかるかもしれませんが、 ES2015 のサポートがこれまでは 58% だったのが 96
JavaScriptのES2015クラスでmixinを実装する世界一美しい方法 - Qiita
こいつまた煽りっぽいタイトル書いてるな？ 皆さんES2015のclass使ってますか？ ES2015のクラス、prototypeを利用したり、{}を利用したりして、様々な書き方で実現できるクラスっぽい何かを、単一の記述でまとめた偉業は素晴らしいですよね。 でも、反面まだまだ機能が全然足りません。本当に足りません。 そこで今回は足りない機能をなんとかしよう、みたいな話です。 まずは基本的な継承の振り返り ES2015クラスでは、「extends」を用いることで、継承を実現することが出来ます。 class Swimmable{ swim(){ console.log("すいすいっ"); } } class Fish extends Swimmable{} const fish = new Fish(); fish.swim(); // "すいすいっ"
Promise Error Handling
Promise Error Handling 約束されたエラー Promiseとエラーの基本 Promise内で起きた例外は自動でキャッチされる エラー処理は.catch(fn)で行う var promise = new Promise(function(){ throw new Error("例外"); }); promise.catch(function(error){ // 例外をキャッチできる }); よくある問題 .catch(fn) をしないとエラーログも出せない .catch(fn) をしわすれてエラーの握りつぶしが起きる = unhandled rejection (.catchをしてないpromise) 4.6. Promise.prototype.done とは何か? 現状のunhandled rejectionへの対応 unhandled rejectionが発生した
Finally, CSS In JS! Meet CSSX — Smashing Magazine
Imagine a web component distributed as a single .js file and containing everything. We would still have our basic style sheets, but the dynamic CSS would be a part of JavaScript. Now this is possible, and one way to achieve it is with CSSX. Similar to JSX, CSSX offers encapsulation. Being able to see all parts of a single component is a big step forward. The separation of concerns defined developm
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Hacking with Unicode in 2016
フロントエンドにテストを導入 - Qiita
https://www.barbarianmeetscoding.com/blog/2016/04/27/a-look-at-es6-maps/
Framework-Independent JavaScript Components
時間をユニークな方法で指定するUI実装jQueryプラグイン「timedropper」:phpspot開発日誌