Ovserver pattern と Client-side MVC あたり
一定以上の大きさの js を書くと 500 行超えたくらいから汚くなる (脳内メモリには入りきる程度なので破綻はしないけど汚くてテンションが下がる) ので対策を整理したい. Observer pattern (publisher/subscriber) 要するに jquery のカスタムイベント. bind(), live() で独自のイベントとそのハンドラを定義しておいて, trigger() で発火させる. たぶん, この方法がいいのは, イベントの発生源とその処理を疎結合にできること. そうするとイベントを受けて何かするレイヤ (MVC だと M?) を一箇所にまとめられるし, M のテストをしやすい. 詳しく見ていないので後で以下を読んでおく. http://api.jquery.com/bind/ http://api.jquery.com/live/ http://api.jq
超強力な関数型プログラミング用ライブラリ Ramda.js を学ぼう #2 - lens でオブジェクト操作も思いのまま | Recruit Tech Blog
超強力な関数型プログラミング用ライブラリ Ramda.js を学ぼう #2 - lens でオブジェクト操作も思いのまま wakamsha lens とは？ 端的に言うと、 getter や setter を関数型プログラミング的に抽象化したものです。対象となるオブジェクトや配列の特定のプロパティやインデックスからデータを取得したり変換することが出来ます。と、これだけ聞くと何の凄さも伝わってきませんが、ネストの激しい複雑なデータ構造に対して不変性を保ちつつアクセスできるというのが一番の特徴として挙げられます。 元々は Haskell に lens というパッケージがあり、これを Ramda.js の API として実装したものだと思っていただければ OK です。 参考: lens: Lenses, Folds and Traversals 諸説ありますが、対象のプロパティに対し『レンズのよ
Jsonnetの薦め - Qiita
JsonnetというJSONテンプレート言語を紹介する。 後で見るように、これはJSONを生成するための汎用テンプレートというよりはむしろ、計算や依存関係を含む設定を静的に書き下すために便利なのではないかと考えられる。 実際Jsonnetの仕様はGoogleのBCLに似ている。BCLはGoogleでコンテナクラスタシステムBorgの設定を記述するために使われている言語だ。 JSONテンプレート言語 ある意味でJsonnetは毎度おなじみのやつだ。JavaScriptの文法の不便さに対してalt JSが多数出てきた。CSSにおけるネストの分かりづらさやの記述の重複に対してCSS preprocessorが多数出てきた。それと同じようにして、Webにおける機械可読データのLingua FrancaたるJSONを記述するのが不便なのでJSONテンプレートが出てきた。 Jsonnetはその中の1つ
Web Budget API と Web に導入されつつある Budget と Cost の概念 | blog.jxck.io
Intro PWA の普及により、バックグラウンド処理をいかに制限するかといった課題が生まれた。 その対策として、バックグラウンド処理における Budget と Cost の概念が提案され、それを扱う Budget API の策定が進んでいる。 基本概念と現時点での API 外観について解説する。 Update 提案されて以降長いことアップデートがなかったが、Mozilla Standard Position をリクエストしたところ、仕様が消えていたことがわかった。 https://github.com/mozilla/standards-positions/issues/73#issuecomment-373681407 元のリポジトリに Issue で現状を問い合わせたところ、結局開発者からの支持が得られず、Obsolete されたとのこと。 blink-dev では Intent t
JSフレームワーク選定の勘所
大づかみなお話です 結論: 課題を知ったらなんでもいいから手を出してみよう！ （細かいところは犠牲にしてます。React でもステートフルコンポーネントつくれるよねとか）
フロントエンドにおいてModel-View-Controllerは死んだのか？ | POSTD
多くのフロントエンド開発者が 一方向のアーキテクチャ を採用し始めている中で、Model-View-Controller（MVC）に未来はあるのでしょうか。 状況を把握するために、まずはフロントエンドのアーキテクチャの進化を振り返ってみたいと思います。 過去4年にわたり、私は多数のWebプロジェクトに取り組み、フロントエンドの構築、そしてフロントエンドとフレームワークの統合に多くの時間を費やしてきました。 2010年以前は、従来のウェブサイトにDOM操作を追加する場合は大抵JavaScript（ jQuery が書かれたプログラミング言語）が使用されていました。当時の開発者はアーキテクチャ自体についてはそれほど気に掛けていなかったと思います。コードベースを構造化する場合、 Revealing module pattern のようなものがあれば十分でした。 現在、多くの議論が交わされているフ
サーバーサイドレンダリング不要論 - Qiita
サーバーサイドレンダリング、Isomorphic、Universal JavaScriptなどの言葉をよく見かけます。なるほどね、良さそうだね、外部公開するサービスを書くことがあったら挑戦してみたいね、Mithrilにもisomorphic-mithrilってのをがんばっている人がいるし、みたいなことを漠然と思っていたのですが、最近ASCII.jpのシステムコールプログラミングの連載を書いていて、あらためてHTTPの仕様を見返してみて、逆にサーバーサイドレンダリングをしない方がいいのではないか、と思い始めました。 追記(23:30): サーバーサイドレンダリングと書いていますがUniversal JavaScriptみたいな凝ったビューの更新の意味です。 サーバーサイドレンダリングの欠点 サーバーサイドレンダリングのメリットとしてあげられるのは次の2点です。 検索エンジンのクローラー向け
2017年、新規にJavaScriptを書くならどんな設計をするか｜デロイト トーマツ ウェブサービス株式会社（DWS）公式ブログ
この記事はJavaScript Advent Calendar 2016の記事です。 今回は、2017年、新規にJavaScriptを書くならどんな設計をするか、というテーマで書いてみようと思います。2017年といっても、しばらくはこんな感じのアーキテクチャでやってきましたので、どんな構成でJavaScriptを設計してきたかという方が正しいかもしれません。基本的にはSPAをベースとしています。 また、最新のイケてる技術バリバリ使ってやるぜ、というよりは、堅牢で、はやりが変わってもメンテができるということを意識してみました。 DOMのレンダリング Virtual DOMを代表とした、DOMのレンダリングを行うライブラリをなにか採用します。特に理由がなければReactでいいと思います。Virtual DOMではありませんが、AngularでもDOM管理においてはさほど違いはありません。この2
Promiseを複数組み合わせる時の基本パターン（直列、並列、分岐） - Qiita
ES6形式のPromiseを使うときに頻出する3つのパターン。直列パターン、並列パターン、分岐パターンを説明します。 最近、Promise周りが盛り上がっていて、reduceを使ったほうが良いとか、ライブラリがどうとか・・・いう話を聞くのですが、そもそも「ベタに書いたときにどうするのが基本なのか」という情報が見つからないので書いてみました。 直列パターン 一番良く使うのは、複数の処理を直列につなげるパターンでしょう。#1が終わってから、#2、#2が終わってから#3というパターンです。 Promise.resolve() .then(function(){ return new Promise(function(fulfilled, rejected){ asyncFunc(function(){ fulfilled(); }); }) }) .then(function(){ return
Web Application Security Memo
OWASP Dependency Check の使い方（Command Line Tool 編）について説明します。
2017年に注目しておきたい、JavaScriptのライブラリのまとめ | コリス
数多くあるJavaScriptのライブラリの中で、どれを勉強すればいいか判断することはなかなか難しいものです。いくつかのライブラリは放置され衰退し、またいくつかは急速に成長し、広範囲に採用されることがあります。 jQueryやReactは多くの人が知っているでしょう。 2017年に注目しておきたい、急成長しているJavaScriptのライブラリを紹介します。 D3.js ビッグデータは成長産業で、データ ビジュアライゼーションも同じくらい重要になっています。グラフ作成やマッピングのライブラリはたくさんありますが、D3.jsほど目立つものはほとんどありません。このJavaScriptライブラリはSVGやCanvasの要素と連携して、Web上のグラフ、チャート、動的なビジュアライゼーションをレンダリングします。 D3.jsは完全に無料で、JavaScriptで構築された最も強力なビジュアライゼ
業務システム向け HTML5 JavaScript UIライブラリ - Qiita
UIライブラリ 簡単に見た目のデザインを良くして、レスポンシブなサイトを作れるフレームワーク Bootstrap http://getbootstrap.com/ Wijmo Enterprise（ウィジモ） http://wijmo.c1.grapecity.com/ Wijmo 5 Wijmo 3 を含む オープンソース（GPLv3）と商用のデュアルライセンス IgniteUI http://jp.igniteui.com/ 一部がOSSとなりました https://github.com/IgniteUI/ignite-ui Semantic UI http://semantic-ui.com/ KendoUI http://www.telerik.com/kendo-ui ZinoUI http://zinoui.com/ スプレッドシート・Excel系 SpreadJS 9J（20
TypeScript で実現する MVP アーキテクチャパターン - Hatena Developer Blog
こんにちは、アプリケーションエンジニアの id:nanto_vi です。先日行われた Hatena Engineer Seminar #4 で、「TypeScript で実現する MVP アーキテクチャパターン」と題する発表を行いました。当日は皆様ご清聴いただき、また懇親会でも活発な質疑をいただきありがとうございました。 内容としては、TypeScript を用いたクライアントサイド Web プログラミングの話、及び既存の JavaScript フレームワークを採用せず、MVP (Model-View-Presenter) アーキテクチャパターンにのっとり開発を進めた事例の紹介となります。以下に発表資料を加筆修正して公開するのでご参照ください。 自己紹介 id:nanto_vi (外山真) アプリケーションエンジニア JavaScript、Perl アジェンダ 少年ジャンプルーキーでの T
Mithril - 軽量／高速なMVCフレームワーク
[Grand Frontend Osaka2016] DAY2 Frontend Sessions http://kfug.jp/gfo2016/
はじめてのincremental-dom - Qiita
※ これは2016/5/25の記事です。参考にしないでください。 現在、Incremental DOMはAngular Ivyに含まれます。 https://github.com/angular/angular/blob/2b4d5c75486534decef4030d4166806878929e4c/package.json#L80 はじめに google/incremental-domはGoogleが開発しているDOMをレンダリングする為のライブラリです。 DOMを生成し、データの更新時は差分をレンダリングします。 virtualDOMとの違いDOMの生成時に大量にメモリーを消費しないそうです。 const component = data => { elementOpen('div') text(data) elementClose('div') } patch(document.b
Re: React.js界隈の人に聞きたい - mizchi's blog
React.js界隈の人に聞きたい 前提 Reactより前に僕がやりたかったこととして、冪等性の担保の為に毎フレーム document.body.innerHTML を書き換えたかったがパフォーマンス的にそれが許されなかったが、Reactは擬似的にそれを達成させてくれたという圧倒的感謝🙏がある— ダイナモポグラマ (@mizchi) 2016年5月23日 SPA 世の中にSPAの需要があるのか？という点考えていたけど、需要がないからSPA技術がいらない、というのはたぶん間違ってて、SPA技術を持たない人が多いからその発想もなく、SPAで達成できることがイメージ出来ないのがアプリケーション設計の縛りになっている、という感じな気がする— ダイナモポグラマ (@mizchi) 2016年5月23日 GmailやTrelloやPivotalやグラブルは異常な技術の集大成ではなく、個別に分解可能な
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンドの基礎知識
続・CSSフレームワークを開発していて悩む、CSSフレームワークが持つクラスのHTMLへの依存について
▷ JS++: JavaScript Classes, Modules, Type Checking & More
DeNA Engineering - DeNAエンジニアのポータルサイト
