Angular2 を利用して React の公式Tutorial を実行した際の詳細手順。gulp + browserify も利用。JavaScriptAngularReactAngular2 初めに もう少しで ng-japan なので予習として Angular2 の公式ページにある 5 Min Quickstart および Case Study の Tour of Heros を試してみました。 両方とも英語ではあるのですが、とても分かりやすい Tutorial になっていて、楽しんで進めることができました。せっかくなのでもう少し遊んでみようと思って、過去に以下の記事で書いた React Tutorial の続編として Augular2 で React Tutorial を実行してみようと思いました。Angular2 も React も同じコンポーネント志向ですが、同じものを実装した
先週、私たちはWebサイトを検索エンジン向けにインデックス付けできるようにしようとしていました。この記事では、私たちがWebサイトを書き直していて学んだことの要約を紹介したいと思います。 背景 2ヵ月前に RisingStack.com を作成した時、私たちはそのWebサイトでどんなテクノロジを使うか決めなくてはなりませんでした。イベントを追跡する静的なページが数ページあるだけだったので、とても簡単でしたが、私たちはWebサイトをスケーラブルでできるだけ高速なままにしておきたいと考えていました。 私たちのチームは AngularJS の経験が豊富なので、フロントエンドにAngularを選ぶのは妥当だと思われました。 この記事はReactやAngularJSがどちらか一方より優れている理由について述べているわけではないので注意してください。どちらがいいかは常にユースケース次第です。 “Ang
今話題のReact.jsはどのようなWebアプリケーションに適しているか? Introduction To React─ Frontrend Conference 外村 和仁(株式会社 ピクセルグリッド) 本記事は、2015/2/21に行われたFrontrend Conferenceの「Introduction To React」の内容を紹介します。 当日の資料は以下にアップされていますので、こちらも参照してください。 Introduction To React // Speaker Deck React.jsとは何か React.jsはFacebook製のJavaScriptライブラリです。 http://facebook.github.io/react/ 公式サイトに、「A JavaScript library for building user interfaces」とあるように、R
React.jsのserver-side レンダリングを試す React.js Tutorialではフロントエンドでの実例が用いられていた。 githubリポジトリ上には、React.jsを使ってDOM(Virtual DOM)をサーバサイド側で構築し、 フロントエンド側にはレンダリング結果を返す、というサンプルがある。 このサンプルを試用して react-bootstrapを使ったりGrunt 使ったりして 自分なりにReact.jsでのserver-sideレンダリングに対する理解を深めるため コードを書いてみよっかなと思った。 以下記録。 まずreact-server-exampleを試す をgit cloneし、動作確認をしてみた。 プロジェクトソースを手元に持ってくる
これは VirtualDOM Advent Calendar 2014 に勝手に参加する記事です。 あたたかい春の昼下がりのこと、あるブラウザベンダの社内を不穏な噂が駆け巡った。 「React.js なるライブラリ、どうも仮想 DOM というやつのせいで速いらしいぞ」 もうリアルな DOM はお役御免、ブラウザも商売上がったりか・・・。雇用に不安を覚える人(私)がいる一方、 そのアイデアをとりこんでブラウザの DOM を速く出来ないかと考える人たちもいた。 仮想 DOM はなぜ速いのか。誰かのつてを辿って React.js チームにおいでいただき、速さの秘密をテックトークしてもらう。 イミュータブルなデータ構造による単純化、非同期適用による処理のバッチ化、差分アルゴリズムによる副作用の最小化… いくつかのアイデアはブラウザからはどうにもならないが、たとえば非同期化なんかは形は違えどブラウザ
最近フロントエンドでfacebook/reactをずっと使っている。世界的には一部のエンジニアの間で流行っているのだが、国内だとqiitaのタグ等を見てもどうも少ない。みんなもっと使うべきだと思うので、宣伝かねて意見をまとめてみる。 複雑化するデータバインドに対する懸念 MVWのVに対して思いを馳せると、だいたい次のことに行き着く。すなわち、「ある構造体の入力に対して、必ず一意なビューを生成したい」 {items: [1, 2, 3]} を入力とすると、 1, 2, 3のli要素になってほしい。これは単純な例だから問題に成り得ないように見えるが、アプリケーション全体の状態を一つのjsonとして定義し、 そこから常に0から組み立てればアプリケーションの健全性が確保できると考えたことはないだろうか? 現実の問題 UIのだいたいの状態は遷移で表現される。遷移の差分をプログラマが記述する。jQue
All Things Open 2014 - Day 2 Thursday, October 23rd, 2014 James Pearce Head of Open Source with Facebook Front Dev 1 An Introduction to ReactJS Find more by James here: https://speakerdeck.com/jamesgpearceRead less
This document provides an overview of React, including initial reactions to it, fundamental concepts like components and one-way data flow, and how the virtual DOM works. Some key points covered include: - Initial reactions to React were mixed, with some finding it "ugly" but others seeing benefits like separation of concerns with components. - Everything in React is a component, with data flowing
D3 フロントエンド技術勉強会 2016.1.22 - 1年間まじめにSPA開発やってきた経験について - その中で、ぶつかった課題と対策 - SPA開発の全体像 - Web/JS界隈の激しい変化の波に溺れないためのTips - AngularJS と SPA の設計について - TypeScript と ES6 - Gulp タスク
React Native 概要 React.js とだいたい同じ作法で、JavaScript で書いたコードが iOS ネイティブアプリとして一応動く。そのフレームワークと開発環境を提供する。 React.js と同じ React を謳っているとおり、JSX で UI コンポーネントを定義するとか、Props や State で View のデータフローを整えるとか、setState() によるデータバインディングとか、諸々が一緒。従って React.js でアプリケーションを作ったことがあれば、学習コストをほとんどかけずにアプリが作れる・・・かも 例えば以下のように、入力値をそのまま画面にエコーするアプリケーション。 これはこんな感じのコードになる。 var React = require('react-native'); var { AppRegistry, StyleSheet, T
3/22 (日) の rebuild.fm で React の話をしようと思っているが、その前に頭を整理するために React 雑感。雑感なので殴り書き。 React はこれ一つで複数の課題を解決しようとしている。そのため、人と議論してると話のコンテキストがぶれやすい。ざっくりは フロントエンドのプログラミングパラダイムを、サーバーサイドのような富豪的なスタイルに変える コンポーネント (雑に言うと独自タグ) 指向で UI を組み立てる ステートレスコンポーネントやメッセージパッシングで疎結合性を高めることにより、イベントの依存関係地獄を解消する。また結果的にテスタビリティを高める あたりだろうか。 React というと最初に目につくのは VirtualDOM だけれども、VirtualDOM は 1 や 3 を達成するために障害となった技術的課題を解消するためのテクニックであってそれ以上
Reactが最近騒がれてるので、 よくわからないからReactjs tutorialを少しこなしてみた。 Reactとは ぐぐるとmizchiさんのブログエントリが出てくる。 Facebook製リアクティブプログラミングライブラリ React を試してみた + 感想 VirtualDOMという技術を使っているようだ。 [JavaScript] 仮想DOMを提供する『React』について少し調べてみた VirutalDOMだけ切り出した成果物も存在する。 https://github.com/Matt-Esch/virtual-dom Virtual DOMのアルゴリズムが知りたくてvirtual-domのコードを読んだ話 react-toolsのインストール React、type=“text/jsx” なコンテンツについてXHRで取りに行くようだ。 Chromeで開発することが多い、という
対象読者 JavaScriptフレームワーク・ライブラリの選定に悩んでいる方 本格的にJavaScriptを触るのが初めてという方 jQueryでの大規模なフロントエンド開発に限界を感じている方 必要な環境 Node.jsがインストールされていることが推奨です。 React.jsとは何か React.jsは最近注目を浴びているFacebook製のライブラリで、MVCアーキテクチャでいうViewにあたる機能を提供します。 前提として、JavaScriptの世界でMVCのVといえば、紛れもなくDOM(Document Object Model)のことを指します。特に何も意識しないで作った場合、都合の良いDOMからデータを引っ張り出しては別のDOMを書き換えるといった、行き当たりばったりな作りになりがちです。そこで、MVCの考え方を導入することにより、データを画面とは独立した構造体として切り出し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く