GitHub - yahoo/react-i13n: A performant, scalable and pluggable approach to instrumenting your React application.You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - sighjs/sigh: multi-process expressive build system for the web and node.js, built using baconjs observables
Sigh is a declarative functional reactive build system for the web and io.js/node.js. Sigh combines the best features of the best asset pipelines with unique features including best speed by delegating tasks to multiple processes and perfect source maps even in production builds. With sigh sub-second incremental production rebuilds are a reality, including source map support allowing you to debug
ぼくのかんがえたさいきょうのElectron - Qiita
はじめに ElectronはNode.js + HTML5フロントエンドのいいとこ取りな開発が行えるのが特徴です。その分、開発環境もElectronならではの考慮・工夫が必要になります. 今回のエントリでは, Electronアプリを快適に開発するための開発環境Tipsを書いていきます. そもそも「Elecronってなんぞや？」とか「どういう風にアプリを作るの？」という方については, 手前味噌で恐縮ではありますが, Electronでアプリケーションを作ってみよう を目を通すことをオススメします. また, 今回のエントリの元として、Quramy/electron-jsx-babel-boilerplate のレポジトリが出来上がっています. React + Bable + Sass + Livereload + Platform用Packaging 入りのBoilerplateですので,
Electronでアプリケーションを作ってみよう - Qiita
はじめに Electronをご存知でしょうか. Electron(旧称: Atom-Shell)は, Atomエディタを開発するために生まれたクロスプラットフォームデスクトップアプリケーションエンジンです. Node.js + Chromiumをランタイムとしており, Atomだけでなく, Slackや先日のBuildで発表されて話題となったVisualStudio CodeもElectronで実装されています. いわゆるWeb系の技術, Node.js + HTML + CSSでアプリケーションを作成できるのが特徴です. 類似した思想のフレームワークとして, node-webkit(NW.js)もありますが, アプリケーションのエントリポイントの考え方等が異なります. このエントリでは, Electronの使い方をサンプルアプリを実装しながら説明していきます. お題 このエントリのお題と
ネイティブでもWebRTCを使おう！―Android／iOSでWebRTC
ネイティブでもWebRTCを使おう！―Android／iOSでWebRTC がねこまさし（インフォコム株式会社） こんにちは！今回はGoogle I/O 2015の小セッションから、Justin UbertiさんとSam Duttonさんによる、”Video chat for Web, Android and iOS”のお話をお届けします。このセッションではWebRTCを使ってビデオチャットアプリを作る方法について、WebRTCの中の人であるお二人が説明してくれました。 WebRTCはWeb Realtime Communication の略で、Webブラウザ上でカメラやマイクの映像/音声を取得したり、他のブラウザと通信するための技術です。過去のHTML5Experts.jpの記事に解説がありますので、併せてそちらもご覧ください。 HTML5でWebRTCを使ってみよう！「カメラを使ってみ
GitHub - WebAssembly/design: WebAssembly Design Documents
WebAssembly or wasm is a new, portable, size- and load-time-efficient format suitable for compilation to the web. WebAssembly is currently being designed as an open standard by a W3C Community Group that includes representatives from all major browsers. Expect the contents of this repository to be in flux: everything is still under discussion. WebAssembly is efficient and fast: Wasm bytecode is de
大規模Reactアプリケーションを構築するためのベストプラクティス | POSTD
Sift Scienceで製作にReactを使い始めてからほぼ1年になりました。その間、Backbone+Reactという フランケンシュタインのような 複合アプリケーションを、Reactコンポーネントからなる、かなり大きな1つの階層に育て上げました。この記事では、UI不和を最小限にしながら、コードベースをスケーリングするために役立った技法とベストプラクティスを紹介します。また、一般的なコンポーネントのデザインパターンについて、いくつか説明します。 この記事が皆さんの時間の節約と精神衛生の維持に役立ち、UIが複雑になってもReactコードベースの保全性を維持する（破綻するのではなく）ための新しいツールを提供できれば幸いです。 componentDidUpdateで、もっとできる Reactの本質は、DOMの更新というタスクを命令的なものから宣言的なものに変えるということです。他のタイプの命
2015年前半のJavaScriptを振り返る
JSer.infoというサイトを4年半ぐらいやってるのですが、2015年1月から半年ぐらい経ったので軽く振り返りをしてみました。 途中で出てくるグラフとか数値はJSer.infoでの言及数を元にしていて、これはjser/stat-jsを使って出したものです。 なので自分の主観的な数値に過ぎないので、一般的とは値とは異なる可能性があることは覚えておいてください。 言及数: タグ、タイトル、紹介文にキーワードが含まれると+1 2015-01-06のJS: ESLint 0.11.0、Browserifyとwebpack、TypeScriptの本 - JSer.info browserify vs webpack 新たなWeeklyサイトがでてきた 2015-01-13のJS: 6to5、ES6とjspm、リファクタリングJavaScript - JSer.info 6to5 2.0リリース 認
WebアプリをElectronに乗せる
The document discusses an Electron (formerly Atom Shell) meetup. It provides links to documentation on the differences between Electron and Node-webkit. If time permits, an Electron demo may be shown. Electron allows building cross-platform desktop apps using JavaScript, HTML, and CSS by embedding Chromium and io.js. It also references a presentation on embedding Node.js into the Atom editor.
Electronでskyway.ioを使う - Qiita
skaywayを使えば、WebRTCのP2Pビデオチャットが簡単に実装できる。 今、skywayを利用していたWebアプリをElectronに移行しようとしているのだが、Electronでskywayがうまく動かなかった。 上手くいくように頑張ったメモです。 原因 XHRやWebSocketで通信する際のOriginがfile://になっており、skyway側で弾かれるのが原因っぽい。 skywayは利用登録をする時にリクエスト元ドメインを指定するようになっていて、そこに登録されていないOriginからのリクエストは弾くようになっているのだろうと推測した。 解決策 skywayのpeerjsをforkして、XHRをisomorphic-fetchに、WebSocketをwsに書き換え、Peerをインスタンス化するときのオプションにoriginを追加した。（ブラウザのXHR、WebSocke
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 における保守信仰
ElectronでjQueryがundefinedになる - Qiita
<body> <script src="lib/jquery.min.js"></script> <script> jQuery('#hoge'); // jQuery is not defined </script> </body> 原因 electronのissueがあった。 jQuery isn't set globally because "module" is defined · Issue #254 · atom/electron Electronではブラウザ側のJS実行時にmodule.exportsが存在するので、jQueryがcommonJSでロードされたと勘違いして、windowに$とjQueryを定義しないというのが原因。（この辺りにif文が） 解決策 requireでロードする <!--<script src="lib/jquery.js"></script>-->
React/dekuコンポーネントとthisのパターン
componentWillMount() { store.on("change", this.onChange.bind(this)); } componentWillUnmount() { store.off("change", this.onChange.bind(this)); } だとイベントが解除できないという問題が起こります。 そのため、事前にbind済みのハンドラを持っておく必要が出てきたりします。 サンプル この記事では上記のような、ボタンでカウントアップするだけのものを React - thisを普通にbindする手法 React - azu/idempotent-bindを使ってbindする手法 deku を使って書く の3つ書いてみます。 ソースコードはこちら azu/component-event-binding React - thisを普通にbindする手法 こ
ブラウザでビジュアルテストをするreftest-runnerを作った
概要 reftest-runnerというブラウザで描画内容やレイアウトといった表示結果をテストするためのライブラリを作りました。 要素技術としてはブラウザ、WebDriver API、レンダリングキャプチャ、画像Diffという感じです。 azu/reftest-runner 時間が無い人向け 以下のスライドに簡単にreftest-runnerやreftestとはなにか、どういうユースケースがあるのかが書いてあります。 reftest-runner-overview.pdf reftestとは reftest(Referrence Test)とは、2つのHTMLの表示結果(スクリーンショット)を比較することで表示結果が意図したものかをテストする方法です。 用意するHTMLとして以下の2種類を1セットとして用意して利用します。 テスト用HTML テストしたい機能を使って実装したHTML リファ
GitHub - seatgeek/react-infinite: A browser-ready efficient scrolling container based on UITableView
react/fluxでpropsのバケツリレーを避ける - Qiita
reactにfluxを採用してアプリケーションを設計していると、親->子->孫コンポーネントへpropsのバケツリレーになってしまう事がありました。 そもそもイケてない設計が悪いのですが、reactバケツリレーつらいという声を聞くことも多かったし、自分も辛いと思っていたところ助言をいただいて解決法が見えてきたのでまとめてみます。 propsバケツリレー まず、バケツリレーを再現してみます。 DOM構造 おおまかにdiv[class="app"](親), div[class="group"](子）, div[class="item"](孫)というツリー構造になってます。 <div class="app"><!--親--> <div class="group"><!--子--> <h2>1番目のグループ</h2> <p class="count">13</p> <div class="item
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - trueadm/t7: Lightweight virtual DOM templating library
deku/jsx.md at master · dekujs/deku · GitHub
gulp/CHANGELOG.md at v3.9.0 · gulpjs/gulp
HTML to JSX