facebook/flow 実践編 - Qiita~/s/flow-playground $ flow check /Users/mizchi/sandbox/flow-playground/hello.js:4:11,22: number This type is incompatible with /Users/mizchi/sandbox/flow-playground/hello.js:3:37,42: string Found 1 error
facebook/flowファーストインプレッション - Qiita
前々から出すよ出すよ詐欺してたflowがやっと出た。大雑把にはfacebook製のTypeScriptだと思っていれば良いです。 まだnpmで提供されてなくて、 Flow | Getting started with Flow で実行バイナリが配られてる。 npmで提供されてない理由は、たぶんocamlで書かれてるから。Future Planにjs_of_ocamlでコンパイルされたものが提供されると書いてあった。 DLして適当なパス通った場所に置いてつかう。 TypeScriptとの比較 思想はTypeScriptと同じなので、大枠は一緒だといってよい。 ぱっと見気になったのは、Nullableの書式が違うのとかあるけど、もっと大きな違いもたくさんある。 FlowとTypeScriptにあるもの declareキーワードによるアノテーション ES6 classes Generics ここ
Facebook Flowの初見の感想 - Qiita
mizchi君の記事を見て、だいぶ感想が違ったので書くことにした。 なお、僕はTypeScript信者であることを踏まえてこの記事を読んでほしい。 あと、最初はまじめに記事にしようと思ったけどダルくなってきたのでメモをそのまま投げる。 TypeScriptより良い型推論 Flowパイセンの一番偉いところはTypeScriptより型推論が強いところだと思った。# /* @flow */ function foo(x) { return x * 10; } foo('Hello, world!'); 関数foo内部のxは、* 演算子を利用しているのでnumberであると推論している。 これが実際の利用箇所でstringを引数にしているので怒ってくれるわけだ。偉いな！ Flow is a static type checkerと謳っているとおり、完全にpure JavaScriptで書かれている
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
【翻訳】リッチなWebアプリケーションのための7つの原則 - from scratch
はじめに この話はGuillermo Rauch氏が書いたhttp://rauchg.com/2014/7-principles-of-rich-web-applications/ という記事の翻訳です。許可を得て翻訳しています。 ここ最近Web業界を賑わしているSingle Page Applicationの必要性、HTTP2/SPDYといった技術、リアクティブプログラミングやIsomorphicデザインという考え方について包括的にまとめたすごく良い記事になっております。 最初に断っておきますが、ものすごく長いです。各セクションがわかれているので時間がない方はセクションごとに書かれたtl;DRとまとめを読むだけでも参考になるかと思います。 ちなみに明日のNode学園祭には、本記事を記述したGuillermo Rauch氏が見えるので、そこで詳しく聞いてみるのもいいのではないでしょうか。
やってみよう Flux + React | コラム | MDMによる端末やスマートフォン管理ならMobiConnect
FluxとはFacebookが提唱しているReact向けのアーキテクチャです。(フレームワークではないとのこと) Reactとは同じくFacebookが開発しているJavaScriptクライアントアプリケーションのビューのライブラリです。 Virtual DOMという仕組みを持っていて、ビューの変更差分だけを実際のDOMに反映するため高速に動作する特徴があります。 Reactはビューの機能しかないので、Reactだけではアプリを組めません。そこをカバーするのがFluxです。 Fluxの概念図は下記のとおりです。 Fluxの三大要素はViews(React)、Dispatcher、Storeです。 これらの間をデータは一方向に流れます。(unidirectional data flow) Viewで発生したユーザー操作はActionを経由してDispatcherを呼び出します。D
2014-11-02のJS: Bootstrap 3.3.0、CSP Lv.2、Object.observe()の未来
JSer.info #199 - Bootstrap 3.3.0がリリースされました。 translate3dに起因するバグの修正やNormalize.css、H5BP等のアップデートに対応等が中心となっています。 詳しくは以下に書かれています。 Bootstrap 3.3.0 released · Bootstrap Blog Release v3.3.0 · twbs/bootstrap また、Bootstrap 4の開発を開始していて、navbarの改善やpanels、thumbnailsを置き換える新しいコンポーネントの追加、IE8のサポート終了等が含まれるそうです。 CSP Lv.2の話 というスライドでは、CSP (Content Security Policy)のLv.2で追加された機能などについて書かれています。 CSP Lv.1は既存のプロダクトに適応するのが難しい感じで
Stream API がブラウザにやってくる - Block Rockin’ Codes
Intro 今日は、フロントのプログラミングスタイルに、にまた一つ大きな変化をもたらすであろう Stream という API についてです。 この仕様は現時点でまだ策定中であるため、 API は変更される恐れがある点にご注意ください。 Stream API 以前 「Node.js の Stream API で「データの流れ」を扱う方法」 という記事を書きましたが、簡単に言うとあれがブラウザにもやってくるという話です。 非同期処理おさらい もう何度も書いた話なので駆け足で。 JS はシングルスレッドでイベント駆動な世界なので、何をするにも非同期であり、コールバックを登録することで完了した結果を受け取る API が基本です。 これは、ブラウザの DOM の API でも、 Node.js でも共通しています。 概念を疑似コードで書くと以下のような感じです。 console.log('1');
Class構文について - JS.next
概要 待ち焦がれた人も多いことだろう。ES2015の一番の目玉機能とも言えるクラス構文が、ついにV8でサポートされた。 Class構文は、『関数（コンストラクタ）定義』＋『.prototypeへのメソッド定義』の糖衣構文である。 JSで今まで様々に工夫されてきたクラスの書き方を、綺麗に統一してくれる可能性を秘めている。 クラスを作る 従来、Catクラスを作ろうとした場合このように書いてきた。 function Cat(name) { this.name = name } Cat.prototype.meow = function () { alert( this.name + 'はミャオと鳴きました' ) } しかしこの書き方だとどうしても、コンストラクタとメソッドの定義が分離されているため、クラスとしてまとまりがなく分かりづらく感じる。 メソッドが増えてきた時も、Cat.prototyp
ES6+カジュアルトークに行った - axross blog
セッション runstantで始めるEcmaScript6入門 by @phi_jp Node.js v0.12で使えるようになるES6+αの機能 by @yosuke_furukawa ES6による 関数型プログラミング by @TanUkkii007 Introduing Break the Web: Array extra methods case by @Constellation Closure CompilerのES6対応 あるいはES6時代のAltJS生存戦略 by @teppeis 明日には使えなくなるES7トーク by @azu_re runstantで始めるEcmaScript6入門 runstantという、ES6をはじめ、TypeScriptやCoffeeScriptを実行できるオンラインエディタ上で、ES6の機能を試してみよう、という話。 runstant htt
LINE DEVELOPER DAY 2016 開催のお知らせ « LINE Engineers' Blog
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog saegusa2017-04-16Yoshihiro was a network engineer at LINE, responsible for all levels of LINE's infrastructure. Since being named Infra Platform Department manager, he is finding ways to apply LINE's technology and business goals to the platform. こんにちは。LINEでネットワークやデータセンターを担当している三枝です。2017年1月にJANOG39で登壇する機会を頂きましたので、今回
ES6+カジュアルトークでES7について発表してきた
ES6+カジュアルトーク - connpass ES6+カジュアルトーク に参加と発表してきました。 自分は明日には使えなくなるES7トークというES7の話をしてきました。 「runstant 始めるEcmaScript6 入門」 by @phi_jp EcmaScript 6 のサンプル集 | runstant runstant jsfiddle的なツール ハンズオン let 2進数を直接書ける Lexical grammar - JavaScript | MDN デフォルトパラメータ 引数にデフォルト値を設定出来る 分割代入 template strings バッククオートでヒアドキュメントを書ける class syntax 「Node.js v0.12で使えるようになるES6+αの機能」 by @yosuke_furukawa Node.js v0.12で使えるようになるES6+の機
爆速HTML – Elmでの仮想DOM | POSTD
新たな elm-html ライブラリでは、HTMLとCSSをElmで直接使用できます。FlexBoxも使ってみたいし、既存のスタイルシートも使い続けたいですか？ Elmは使いやすくなり、処理が 速く なりました。例えば、 TodoMVC アプリを再作成する場合、Elmの コード はとても単純で、 事前のベンチマーク でも、他の人気ライブラリに比べ処理速度が極端に速いという結果が出ています。 elm-html とMercuryは、どちらも virtual-dom プロジェクトを基にしているので、パフォーマンスが優れています。この記事では、前半で“仮想DOM”とは何か、 純粋性 と 不変性 によっていかに処理速度が上がるかということについて詳しく検証します。この検証によって、なぜOm、Mercury、Elmがベンチマークでこのような素晴らしい数字を出したかが分かるでしょう。 パフォーマンスは人
小さいライブラリを採用する - mizchi's blog
僕がJavaScriptでライブラリを選定する際、迷ったら小さいものを使う。その理由について。 前提 前提として、枯れた環境で大きいフレームワークができるのは理解できるし、メリットも大きい。あるいは言語それ自身と区別できないぐらいに発達したフレームワークに依存するのも理解できる。RubyにとってのRailsとか、ErlangのOTPとか(いや、これは詳しくないけどそうなんだろうなっていう予想なんだけど)。 危険信号 今のJS界隈は動きが早すぎて、何に依存するのも危ない。とくにフレームワークと銘打たれたものは、でかすぎてどれも危険信号を放っている。 数年後、廃れてしまったフレームワークで開発し続けるのは、僕個人としてもあまり関わりたくないし、現場の離職リスクとして数字に出るだろうし、採用後の教育コストの問題になる。だいたいそういうものは元の設計者もいなくなるものだ。プロダクトの死を意味する。
Webフロントエンドに従事するお前らはいい加減高頻度イベントとレイアウトとスタイリングの付き合い方を考えろ - Qiita
もうなんかこの際マジで言わせていただくんですけど、知ってるか知らないか分かりませんが世の中にはすごい頻度で呼ばれうるDOMイベントって言うのがいくつかあるわけですよ 例えば scroll mousemove, touchmove devicemotion 辺りですよ。 で、高頻度で呼ばれるって言うことは必然的に処理量が増えるって分かりますよね？？？？？while(1) {}じゃないとはいえUIスレッドに十分影響を与えうる頻度で呼ばれる訳です。分かりますよね？？？？？？？？ そうなると当然そのイベント内で重い処理を行えば人間が認識できるレベルでのレスポンス遅延が起きるっていうのはご理解できますよね？ 重い処理っていうのはまぁ想像出来るとは思うんですが例えばよくあるのが DOMのレイアウトプロパティへのアクセス offsetTop、offsetLeft、offsetWidth、offsetHe
スマートフォンWebのフロントエンドを高速化する取り組み - クックパッド開発者ブログ
ユーザファースト推進部の丸山(@h13i32maru)です。 先日「撮るレシピ」というサービスを cookpad.com にて公開しました。「撮るレシピ」というサービスは料理本や雑誌のレシピを写真に撮ってクックパッド上に保存できるというものです。料理本や雑誌でレシピを良く見る方はぜひ使ってみてください(Androidアプリ版もあります)。 この「撮るレシピ」は全体公開前に一部のユーザに限定公開をしていました。そして全体公開をするにあたりフロント側のコードを全面的に書き換え高速化を行いました。その結果、最大で30倍高速化することができユーザの使い勝手が向上しました。以下が「書き換え前」と「書き換え後」の計測結果です(Android端末8機種 + iOS3機種で各操作のターンアラウンド時間*1を計測)。 閲覧系 最大: 30倍高速化(4.2秒→0.14秒) 平均: 15.7倍高速化(3.6秒→
JavaScript Ajax : XmlHttpRequestのLevel2でSameOriginPolicyを回避する - Y's note
クロスドメイン制限の回避について 今まではXHR(XmlHttpRequest)の仕様によりJSを読み込んでいるHTMLファイルがあるサーバから異なるドメインサーバへのAjaxリクエストが制限されていました。Same Origin Policyと呼ばれているものです。Same Origin Policyの役割としては悪意のあるscriptが個人情報等を他のサイトに転送する事を防ぐためです。このセキリティ制限を回避するために多くの人が代表的なJSONP(JSON with Padding)を利用してサーバサイドでクライアントのコールバック関数をechoしてクライアント側で実行されることにより、クロスドメイン間のAjax通信をそれっぽく動くように対応していたと思います。 JSONPについては以前記事を書いたので宜しければ参照してください。20秒で理解するJSONP - Yuta.Kikuchi
Reactを実際に使ってみた話が増えてきた - ワザノバ | wazanova
http://youtu.be/uwnjDXtJufs 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 44分前 コンポーネントベースのviewレイヤのライブラリであるReactを、実際に使ってみた感想についての発信が増えてきているので、まとめてみました。（4)はFluxの話も入ってます。） 1) Reactとは？ E4E Developer Conf 2014の講演でFacebookのBen Andersonは、Reactを採用しているサービスを挙げています。 Facebook / Instagram / GitHub (Atom) / Khan Academy (with Backbone.js) / Mozilla Firefox (for Paneis) / NY Times / Reddit (stor
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これからのJavaScriptー関数型プログラミングとECMAScript6
仮想DOMテンプレーティング概念
