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
小さいライブラリを採用する - mizchi's blog
僕がJavaScriptでライブラリを選定する際、迷ったら小さいものを使う。その理由について。 前提 前提として、枯れた環境で大きいフレームワークができるのは理解できるし、メリットも大きい。あるいは言語それ自身と区別できないぐらいに発達したフレームワークに依存するのも理解できる。RubyにとってのRailsとか、ErlangのOTPとか(いや、これは詳しくないけどそうなんだろうなっていう予想なんだけど)。 危険信号 今のJS界隈は動きが早すぎて、何に依存するのも危ない。とくにフレームワークと銘打たれたものは、でかすぎてどれも危険信号を放っている。 数年後、廃れてしまったフレームワークで開発し続けるのは、僕個人としてもあまり関わりたくないし、現場の離職リスクとして数字に出るだろうし、採用後の教育コストの問題になる。だいたいそういうものは元の設計者もいなくなるものだ。プロダクトの死を意味する。
Webフロントエンドに従事するお前らはいい加減高頻度イベントとレイアウトとスタイリングの付き合い方を考えろ - Qiita
もうなんかこの際マジで言わせていただくんですけど、知ってるか知らないか分かりませんが世の中にはすごい頻度で呼ばれうるDOMイベントって言うのがいくつかあるわけですよ 例えば scroll mousemove, touchmove devicemotion 辺りですよ。 で、高頻度で呼ばれるって言うことは必然的に処理量が増えるって分かりますよね？？？？？while(1) {}じゃないとはいえUIスレッドに十分影響を与えうる頻度で呼ばれる訳です。分かりますよね？？？？？？？？ そうなると当然そのイベント内で重い処理を行えば人間が認識できるレベルでのレスポンス遅延が起きるっていうのはご理解できますよね？ 重い処理っていうのはまぁ想像出来るとは思うんですが例えばよくあるのが DOMのレイアウトプロパティへのアクセス offsetTop、offsetLeft、offsetWidth、offsetHe
I am mitsuruog | Backbone.jsともっと仲良くなるためのヒント
先日めでたく 1.0.0 をリリースした Backbone.js ですが、よくも悪くも「どう作るか」について、作成者側の思いで自由にできるため、始めの取っ掛かりとして、どう作ればよいかと言うことで結構悩む方も多いかと思います。 そこで、同じように悩んでいる人になんらかのヒントを与えられればと思い、シングルページアプリケーションを題材にチュートリアルを作成して公開してみました。 また、私が Backbone.js でアプリケーションを作成する上で、特に View について注意するポイントを幾つか紹介します。 何かの参考になれば幸いです。 このエントリでお伝えしたいこと。 Backbone.js のチュートリアル作りました。 Backbone.View を扱う際に注意するポイントについていくつか紹介します。 チュートリアル 早速ですが、Backbone.js でシングルページアプリケーションを
さよなら CoffeeScript
僕たちは終わりだ。 ごめんね、君のせいじゃない、僕のせい。 僕は本当に君が好きなんだ、だけど今こそ大きなきな挑戦や決心をする時だと僕は思う。 僕が君を最初に見た時、僕は君の美しいリスト内包表記から目を離す事ができなかった。 君のアロー関数は信じられないぐらい素晴らしかった。 僕たちが一緒に過ごした特別な瞬間を君も覚えているはずだ。とてもすばらしかった。あれは一目惚れだった。 君は、僕に生きるために必要な事を教えてくれた両親 Mr. Python と Mrs. Ruby 思い出させる。 だけど今、僕は両親の助けを借りず自分で決められる。 言った通り、君に悪い所は何も無い。 僕はただ危険な所に飛び込んで、男なら誰でもそうするように冒険に足を踏み入れたいだけなんだ。 バックパックを背負って、ここじゃない世界を見つけるために。 君と一緒だと、関数名を決める自由も無い。 僕がやりたいようにクラスを作
「JavaScriptエンジニア養成読本」でCoffeeScriptについて書いた - mizchi's blog
kyo_agoさんに誘われて、CoffeeScriptについて1章書きました。 JavaScriptエンジニア養成読本［Webアプリ開発の定番構成Backbone.js＋CoffeeScript＋Gruntを1冊で習得！］：書籍案内｜技術評論社 他の章の紹介は他の著者さんに任せるとして、自分の書いた章について少し紹介。 JavaScriptエンジニア養成読本を書きました - watilde's blog 実践的CoffeeScript CoffeeScriptの言語仕様について、初心者でも誤解しないよう、言語マニアでも新しく学びがあるように書いたつもりです。 とくにオブジェクトや配列のパターンマッチ、CoffeeScript特有のオブジェクト指向のイディオム、大規模開発時のディレクトリ構成について実例を交えて書きました。 たとえばこんなコード module.exports = class
Format.JS | Format.JS
FormatJS is a set of JavaScript libraries.FormatJS is a modular collection of JavaScript libraries for internationalization that are focused on formatting numbers, dates, and strings for displaying to people. It includes a set of core libraries that build on the JavaScript Intl built-ins and industry-wide i18n standards, plus a set of integrations for common template and component libraries. Integ
Angularが好き - Can I do web?
ボクは本当にAngularが好きで、もはや恋するレベルに達していて、今ではもう実案件に使っている。 イカ理由。 APIがほんっっっっっとうに糞 趣味の問題といえばそうでもあるが僕は糞だと思う → 趣味には口を出しません。そう思うならそうです。 実装が黒魔術 良識あるJSエンジニアなら Function.prototype.toString() しない 実際に一部のクロージャが破壊されてて挙動が直感に反する DirtyCheckの実装、表面的にもDirtyな挙動として現れるのでデータバインドとして何も嬉しくない →データバインドだったり、Web Components のような、未来にnative実装されるAPIを包括的に実装しようとした結果の１つだと思ってます。 もっといい方法はあるのかもしれないですけど、Angularではこうしてるよっていうのが現状なのかなと。 上記で毒づく程不満はないで
Angularが嫌い - mizchi's blog
僕は本当にAngularが嫌いで、もはや許せないレベルに達していて、今ではもう本当に使いたくない。 イカ理由。 APIがほんっっっっっとうに糞 趣味の問題といえばそうでもあるが僕は糞だと思う 実装が黒魔術 良識あるJSエンジニアなら Function.prototype.toString() しない 実際に一部のクロージャが破壊されてて挙動が直感に反する DirtyCheckの実装、表面的にもDirtyな挙動として現れるのでデータバインドとして何も嬉しくない Googleだから許される、みたいなコミュニティの驕りが本当に嫌 Angularの都合だけでChromeでObject.observeを前倒しするのやめろ Angularの内部モジュール同士が密結合 DI, module, factory, それぞれ大きなテーマなのに密結合 使いはじめるとAngularをやめることが困難 パフォーマン
クライアントサイド JavaScript (AltJS) のテストを書くのは本当に難しいのか？ - @kyanny's blog
TL;DR - 最初の一人はつらいけど後続はそうでもないので先駆者は自覚と誇りを持ってオールグリーンを維持しよう このエントリはMarionette.js ベースで3ヶ月開発したアプリのカバレッジ推移をまとめてみた - @kyanny's blogというエントリの続きにあたります。未読の方は先にそちらを一読されることをおすすめします。 Marionette.js ベースで3ヶ月開発したアプリのカバレッジ推移をまとめてみた - @kyanny's blogの結論で触れたように、今回テストを書くことにこだわったのは、「クライアントサイド JavaScript (AltJS) のテストを書くのは本当に難しいのか？」という問いに対する自分なりの回答を実践して検証してみたかったという理由があったからだ。 以前から「クライアント JavaScript (CoffeeScript や他の AltJS を
AltJSの選び方フローチャート - Qiita
JavaScriptわかる - YES 型がほしい - YES Flash/ActionScript3が青春だった - YES Haxe - NO DeNAに勤めている - YES JSX - NO TypeScript - NO Ruby or Python が好き - YES coffee-script - NO クラスはほしい - YES EcmaScript6(Traceur Compiler) or CoffeeScript - NO JavaScriptの文法に不満がある - YES https://github.com/jashkenas/coffeescript/wiki/List-of-languages-that-compile-to-JS - NO JavaScript書けよ - NO 関数型わかる - YES 自分の好きな言語に深く精通している - YES 好きな言
nodeconf.eu 2日目 (node.js in production, jschan, debugging) - from scratch
さてさて二日目。 ひょんなことから円卓で座って会話したらイギリス英語とアメリカ英語の話になって、 「なんでナスってアメリカだとeggplantなんだよ、卵って紫じゃないだろw」 「イギリスのaubergine ってなんだよ、覚えられないよw」 みたいな会話に巻き込まれて、 「いやいや、そんな野菜よりも色のgreyとgrayの差のほうが深刻で、間違えやすいよ、CSSとかでどうしてるの?」 って言ったら 「ウェブの標準はアメリカ英語だから」 っていうマジレスを受けました。 二日目のセッションも色々と聞いてきてすげー面白かったので、まとめていきます。 node.js in production ab testing in netflix Netflix JavaScript Talks - Scaling A/B Testing on Netflix.com with Node.js from
JavaScriptフレームワークについて個人的な思い - 当時を振り返りながら - albatrosary's blog
HTML5 Experts.jpでエンタープライズ特集が組まれたことは承知だと思います。やはり注目すべきところはJavaScriptフレームワークの見解ではなかったかと思います。JavaScriptフレームワークについては人それぞれ考えがありますので、一概にこれとは言えませんが、私が感じているところを記載したいと思います。 世の中の動向と以前の判断 Googleトレンドを見る限りではAngularJSのひとり勝ちのように思えますが、身の回りの案件ではBackbone.jsが多いのではないかと思えます。１年半前にHTML5プロジェクトを行ったときに選定で残ったのが Backbone.js AngularJS Sencha Ext JS でした。最終的に利用したのはBackbone.JSだったのですが理由がjQueryベースで入り易かったということが上げられます。AngularJSは独特な記法
ウェブの仕様は今どこにあるのか？
Webの仕様 ウェブの仕様といえば、W3CやWHATWG、IETFとかが思い浮かぶかもしれません。 これらの仕様が最近ではメーリングリストやIRCといった旧来のところだけではなく、GitHub上で議論されて策定が進められている事が増えています。(両方使ってるという話) この記事はそのような方法で進められてる仕様等についての紹介です。 ＊ 自分自身はそこまで仕様に対して強い興味があるわけではないので、もっと詳しい方が正しくまとめて頂きたいです。。 最初にMove The Web Forward | Guide to getting involved with standards and browser developmentを見ておくといいかもしれません。 JavaScriptの仕様 この動きが多く見られるのがJavaScript(ECMAScriptやDOM APIを含む)周りの仕様につい
JSX
Toggle shortcuts help? Toggle "can call user code" annotationsu Jump to search box/ Draft / August 4, 2022JSX Introduction JSX is an XML-like syntax extension to ECMAScript without any defined semantics. It's NOT intended to be implemented by engines or browsers. It's NOT a proposal to incorporate JSX into the ECMAScript spec itself. It's intended to be used by various preprocessors (transpilers)
Virtual DOMのアルゴリズムが知りたくてvirtual-domのコードを読んだ話 - saneyuki_s log
Reactの登場以来気になっていた、Virtual DOMアプローチの具体的な差分抽出手法について、virtual-domを読んで確認してみた。 Reactをいきなり読むのは面倒くさかった・ミニマムな実装から読みたかったというのが、こっちを選択した理由。Reactのアルゴリズムが参考にされているものの、Reactには存在する特定の最適化が入ってないかもしれないので、あくまでもReact系のVirtual DOMを実装するには最低限何が必要かを知る程度のものと判断してほしい。 virtual-domについて ReactのVirtual DOM部分だけを切り出して再利用可能な形で再実装したライブラリ。elm-htmlとかMercuryといった箇所でvDOMインフラとして既に使われているので、まったくの趣味プロダクトという訳でもなくなっている。 README.md中での触れられている通り、Vir
あなたがReactを使うべき理由 - mizchi's blog
最近フロントエンドでfacebook/reactをずっと使っている。世界的には一部のエンジニアの間で流行っているのだが、国内だとqiitaのタグ等を見てもどうも少ない。みんなもっと使うべきだと思うので、宣伝かねて意見をまとめてみる。 複雑化するデータバインドに対する懸念 MVWのVに対して思いを馳せると、だいたい次のことに行き着く。すなわち、「ある構造体の入力に対して、必ず一意なビューを生成したい」 {items: [1, 2, 3]} を入力とすると、 1, 2, 3のli要素になってほしい。これは単純な例だから問題に成り得ないように見えるが、アプリケーション全体の状態を一つのjsonとして定義し、 そこから常に0から組み立てればアプリケーションの健全性が確保できると考えたことはないだろうか？ 現実の問題 UIのだいたいの状態は遷移で表現される。遷移の差分をプログラマが記述する。jQue
uilang
a minimal, ui-focused programming language for web designers clicking on ".try-it" toggles class "hidden" on ".info-box" Try It Getting Started Insert uilang.js in your page, write some uilang as shown above in a simple <code> element and use CSS to show, hide and animate things. Download 1KB Build Interfaces Create popovers, tabs, galleries, overlays and more using a language specifically designe
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
qiezi.me
大手Webサービスがクライアント側で発生したJavaScriptのエラーをどう収集しているのか まとめ - Qiita
