React in 7 Minutes
Want a whirlwind tour of facebook's React framework? John starts from scratch and builds an app in React in under 7 minutes. You'll learn about building custom components, using React this.state vs. this.props, and React hooking up events. [00:00] React is all about rendering out some sort of element, say an h1 that says "Hello," and then targeting something on the DOM, like the document body. You
React Nativeがスマホアプリのフロント開発を変えるのか - ワザノバ | wazanova
Reactは当初、「Huge step backwards（これではメンテできなくて、かえって大きく後退してしまっている。）」「Rethink established best practives（皆が積み上げてきたベストプラクティスを変えようとしている。）」と揶揄されたりもしましたが、最近は他のJavaScriptフレームワークにもその思想の一部が反映されるようになって、メインストリームに近づきつつあるようです。 さて今回Facebookが、React Nativeを発表 & オープンソースとして公開して話題になっていますが、Tom Occhinoは React.js Conf 2015のキーノートスピーチで、「一度書けば、どのプラットフォームでもうまく動作する。」ではなく、「一度覚えれば、どのプラットフォーム向けにも書けるようになる。」ものであることを強調しています。 同社の開発メンバ
AngularJS Performance in Large Applications
Abraham Polishchuk Abraham Polishchuk is a NodeJS/AngularJS engineer at Lanetix. In a past life he has worked with Ruby on Rails, Chef, and RSpec. 1 Introduction Whether you are writing an Angular front end for an old application with large use and adoption, or your pre-existing Angular application is gaining momentum, performance is an important aspect. It is important to understand what causes a
e2e_sushiとtemplate_literal_sushiでPageObjectパターンの話をした
vivaldi_sushiとe2e_sushiと隣でやってたtemplate_literal_sushiに参加した #template_literal_sushi と #e2e_sushi のログ - Togetterまとめ ログはいつもどおり記憶だよりで色々間違ってる気がするので気になるところは本人に聞こう Vivaldi_sushi Vivaldiの話 付く前に終わってた Testium - azu 自分はTestiumとPageObjectパターンの話をしました。 Testiumって何？ 同期的なWebDriver API PageObjectパターン という感じの内容です。 Testium関係で色々報告したりPR送ったりしたので、自分が気になるところは大体直った感じがします。 後はgroupon-testium/webdriver-http-syncのAPIが順次実装されていけば、
Polymerで作る次世代ウェブサイト
近年、ブラウザーやブラウザーランタイムは、PCやスマートフォンのみならず、テレビ、コンソールゲーム機などの組み込み機器にも導入されるようになりました。また、Raspberry Piに代表されるSingle Board Computer（SBC）も流行りだし、ロースペックな環境で動作しなければならないウェブアプリケーション開発の需要が高まろうとしています。 多くの組み込み機器に搭載されたは、近年よく使われるAPIやCSSをサポートしています。しかし、そのパフォーマンスはスマートフォンと較べて非常に貧弱です。スマートフォンでは当たり前のパフォーマンスが得られることはありません。 本セッションでは、組み込み向け機器の現状を紹介し、その上で動作するウェブアプリケーションの開発の課題、私の経験での苦労話、そして、それに立ち向かうための Tips を紹介します。
テストできないコードをE2Eテストを使ってリファクタリングしよう
ユニットテストがしにくい状態となってるコードをTestiumを使ったE2Eテストを書いてリファクタリングしてみる話です。 例えば、以下のようなjQueryで書いたコードは外(テストコード)から取り出すポイントがないので、ユニットテストを書くのは難しいと思います。(そもそもViewのコードなので) 特定のバージョンでの変更点を簡単に確認できるよう、 「Aの列のラジオボタンを選ぶと同じ行より一つ下にあるBの列のラジオボタンを自動で選ぶ」 という補助機能 $(document).ready(function () { // seq: シーケンス番号 $.each(["new_version", "old_version"], function () { $("input[name='" + this + "']").each(function (idx, elem) { if (idx == 0
React入門 - Part1: Getting Started - Qiita
ReactはFacebookがオープンソースで開発しているJavaScripライブラリです。ドキュメントサイトのGetting StartedとTutorialから勉強をはじめます。きっかけはClojureを勉強していて、OmというReactのClojureScriptインタフェースを紹介したInfoQの記事で興味を持ちました。Web UIのデータバインディングをリアクティブに書く方法を取り入れたいです。 Reactの特徴 Reactのページに書いてある特徴を簡単にまとめます。 JUST THE UI MVCのVだけComponentとして提供する VIRTUAL DOM VirtualDOMを使い差分だけ更新するため高速に動作する DATA FLOW 一方向のリアクティブなデータバインディング JSX JavaScript内にXML風に記述でき、DOM構造がわかりやすい 開発用コンテナ
jspm で快適 javascript 生活（クライアントサイド JS の依存管理決定版） - Qiita
追記 config.js は常に自動生成されるものだと思っていましたが、その認識は誤りだったようです。 そのため、jspm_packages 下ではなく、public ディレクトリに設置するようにしました。 はじめに ぼくは Web の技術が大好き。 はじめに HTML 書いてブラウザで見たら表示されて感動したのを今でも覚えてる。 そんな調子でプログラミングの仕事について、ずっとそこらへんを書いてるけど、 最近の開発、めんどくせーこと多くないですか。 AltJS だー、React + JSX だー。ミニファイだー。依存の解決だー！ もちろん、必要なことだし、イケてるのもわかるけど、開発中に毎回 watch すんのもめんどいし...。と思っていた。 救世主 jspm 会社の人がなにげなく紹介していた jspm。 ビルドツールとかの「開発全体がキレイで楽になります！」っていうのが好きなので、試
Front-End Dev guidelines - tech.tmw.co.uk
Overview This document details the guidelines and standards adhered to by the Creative Technology department at TMW, and all web applications built should take these into consideration. It is an evolving document and should be reviewed as and when required to keep up with changes in technology and best practice. These guidelines have been compiled looking at various previously written guidelines -
I am mitsuruog | SPAを構築するときに知っておいた方がいい7つの課題
ブラウザでの Javascript の高速化と Backbone や Angular のような JavascriptMVC フレームワークの登場により、以前より SPA（Single page application）が構築しやすくなりました。 さらに、Yeoman に代表される SPA を作成するするための scaffold（土台）が整備されてきましたので、結構さくっと SPA が作れるようになったのも事実です。 さくっと作った SPA がさくさく動かない・・・作ったけど使えない・・・なんてことにならないように、SPA を構築する前に知っておいた方がいい課題について調べてたり考えてみました。 目次 1. パフォーマンス 2. メモリリーク 3. セキュリティ 4. フレームワークロックイン 5. 画面設計から UI コンポーネント設計への思想転換 6. フロントエンジニア不足 7. 番外
10 Top Mistakes AngularJS Developers Make
Mark Meyer Mark Meyer is a full stack software developer with over a year of production angular.js experience. Mark is a polyglot with experience ranging from building server apps in C to web applications in Rails to iOS applications in Swift. Introduction AngularJS is one of the most popular Javascript frameworks available today. One of AngularJS's goals is to simplify the development process whi
React / Flux を実案件で使ってみた
自己紹介 Name : Takuto Wada github : twada twitter : t_wada hatena : t-wada TDD とライオンの人 power-assert の人 React / Flux を知ったきっかけ mizchi さんのエントリ (あなたがReactを使うべき理由) だったと思う 日本語の情報はほとんど無かったが、エッジ系の人たちが騒ぎ出した & 海外で圧倒的に事例が増え出したので興味を持った Rendr の AirBnb が React を使い始めたことを知り、これは決定的だと思った React をどう勉強したか 公式ドキュメントとチュートリアルが充実している まず Tutorial をそのまま写経 次に browserify + reactify で Tutorial をもう一周やってみる (showdownはbrowserify 対応してい
A combination of React.js and 6to5
In English article is here. 今までは、react-toolsを使ってjsxのharmony optionを有効にして書くことで一部のES6のfeatureが使えて満足していたのですが、azuさんの記事を見て6to5を試したくなったのでReact.js + 6to5の組み合わせで書いてみました。 https://6to5.org/ http://efcl.info/2015/01/09/write-es6/ 結論から言うと6to5自体がjsxのサポートもしているので何も意識することなく書けていい感じでした。 コードはこんな感じ。 https://github.com/koba04/react-boilerplate structure browserify + 6to5ify 変換の流れはbrowserifyのtransformである6to5ifyを使うので、 E
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Reddit - Dive into anything
GitHub - andreypopp/reactify: [DEPRECATED] Browserify transform for JSX (superset of JavaScript used in React library by Facebook)![GitHub - andreypopp/reactify: [DEPRECATED] Browserify transform for JSX (superset of JavaScript used in React library by Facebook)](https://cdn-ak-scissors.b.st-hatena.com/image/square/7f68744d2c6e66b137d214533b95d0cc53b01bd8/height=288;version=1;width=512/https%3A%2F%2Fopengraph.githubassets.com%2F570a5e73f0d126c3c5f67540216be687231f8ff06d10b46135a166d396cd47b1%2Fandreypopp%2Freactify)
Aurelia
React.js Conf 2015 Keynote 2 - A Deep Dive into React Native
React.js Conf 2015 Keynote - Introducing React Native
コマンドパスを自動で通し npm install -g しない - Qiita
GitHub - groupon/testium: ⛔️ [DEPRECATED] see https://github.com/testiumjs/testium-mocha![GitHub - groupon/testium: ⛔️ [DEPRECATED] see https://github.com/testiumjs/testium-mocha](https://cdn-ak-scissors.b.st-hatena.com/image/square/107801310e6c8f49f5c8cf21175b8418f65f3eae/height=288;version=1;width=512/https%3A%2F%2Fopengraph.githubassets.com%2Ff4ca012931caf08f5e3b55adefebbac4c8dc293a6eea19bf0be44a8a0ea51a4e%2Fgroupon%2Ftestium)
