初見から実務でReact NativeやったAndroidエンジニアが社内LTで所感を共有しました
こんにちは、React Nativeエンジニアの@kiriminです。去年の末くらいからReact Nativeでの開発案件に携わっていまして、ある程度形になってきたので、Webフロント開発の経験がないAndroidエンジニアがReact Native案件にいきなりJoinして感じた事やReact Nativeでの開発の雰囲気などについて週次で開催している社内LT会で共有しました。 ネイティブエンジニアチームによるReact Native開発案件の一例として共有したいと思います。 TL;DR・React Nativeの学習コストはかなり低い ・最新のJavaScriptでの開発はそれなりに快適 ・思ったよりはよく出来ていてAndroidとiOSをあまり意識せず同時に実装出来るのは本当 ・ただしネイティブと遜色ないデザインを実現するにはかなりの努力が必要 ・Reduxは面白いけど難しい An
React with Reduxによる大規模商用サービスの開発 / nodefest2016
東京Node学園祭2016で話したブッキングテーブルのやつ
はてブviewer『Pasta』をReact + Reduxで作って公開した - undefined
概要 自分用に使い勝手の良い、はてブviewerをReact/Reduxで作って公開しました。 ※GoogleFeedAPI停止につき現在利用できません。申し訳ありません。 Pasta - Hatena Bookmark Viewer - ひとまず復旧したようです。 デスクトップ版をもご利用ください。 blog.bokuweb.me スクリーンショット どんなものか 登録したキーワードに関連するニュースを配信する『Zite』というアプリがあるんですが、配信される記事が英語のみなので、こいつの日本語版を作ろうと思い着手しまた。当初はReact Nativeでスマホアプリを作り始めたんだけど、先にWEB版を作ってしまったほうが変なところで躓かずにすむんじゃないかと思い、こちらを先に実装することにしました。 ただリリース直前で気づいたんですが、公式にも同様の機能の『関心ワード』なるものが実装され
Phoenix, React, Redux example - Binary Consulting
Why Phoenix? Phoenix is a framework for building HTML5 apps, API backends and distributed systems. Written in Elixir, you get beautiful syntax, productive tooling and a fast runtime. – phoenixframework.org My introduction to Phoenix came with their announcement of v1.0. Reading about the framework, discovering it’s usage of the Elixir language and Erlang’s VM, and watching videos of its capabiliti
Rails + React + ES6 のためのアセット環境構築 - 破いて捨てたノート
結論 Sprocketsの動作を維持しつつ、npmやgulpなどのモダンなパワーも取り入れた、いいとこどりな環境を構築してみた。 やりたいこと SEOのため、Reactでserver-side renderingをしたい JSコードをES6で記述したい 既存のCoffeeScriptのコードも共存させたい（後ほど書き換える予定） npmやgulpといったモダンな環境でアセット管理をしたい browserifyを使いたい Sprocketsが実現している機能は維持したい そもそもSprocketsは何をしているか 周知のことでしょうが念のためおさらい。 ファイル毎の依存関係の管理 application.jsなどのマニュフェストファイルがやってること altJSのコンパイル アセットのminify アセットの連結 アセットファイル名にMD5フィンガープリントを挿入 Sprocketsの問題点
リスト表示＋ページングを実装しながらReact.jsを理解してみる - Qiita
jsonを返すAPIを使用して、チュートリアル+αの画面を実装してみます。 前提知識・単語 実装しながら読んだほうが理解しやすいと思います。 React.jsのadventカレンダー コンポーネント 画面を構成している要素。React.jsは画面をコンポーネントと呼ばれる要素に分けて実装します。 http://qiita.com/koba04/items/4f874e0da8ebd7329701 コンポーネントのライフサイクル propとstate http://qiita.com/koba04/items/bc13d1f42964278ae14e (prop) http://qiita.com/koba04/items/63267bcc918d76ac8767 (state) 1. 画面をコンポーネント分けする reactJSは画面を構成している要素ごとにパーツ分けをし、コンポーネントと
Reactに最適化したテンプレートエンジンを作り始めた - Qiita
Reiny, 名前の由来は、一昨日の木曜日に作り始めて、その日雨が降ってたから。 最近react-jadeに不満を持ってて、自分はコンパイラというかプリプロセッサを作るノウハウはあるので、だったら自分で作ればいいじゃん、といった感じで作り始めた。(typed coffee を作り直すためのAST操作の勉強も兼ねてた) 何ができるか 今これが動いてる - let i = () => {}; div(hoge='fuga') { backgroundColor = 'red' } // unicode span( key="--🐑--" ) // ref with & span&foo() // for syntax ul for i in @items li(key=i) = i // if syntax if false a hoge fuga aaa // inline express
Panda Strike: High-performance Web and Mobile Apps and Zero-hassle Dev Ops
React Is A Terrible IdeaMar 11, 2015Dan Yoder There’s been a lot of excitement lately about React. React seems to have bumped Angular from the top of the hippest-framework mountain. This is unfortunate, because both of these frameworks are bad for your application’s health. They’re also bad for the entire software industry. For new applications, please, for the love of all things open, use Web com
Introduction to Facebook's Flux architecture
Introduction to Facebook's Flux architectureFebruary 21, 2015 The versions of Flux and React in this article are quite old - some of this may not work If you’re like me and you wanted to go further with React, you more than likely would’ve checked out Flux, had a glance, closed the tab and then reassessed your life as a Javascript developer. If you’re not familiar with React, please checkout my ge
Ardaの設計指針と設計思想 - Qiita
@armorik83 さんの記事を受けて Fluxフレームワーク Arda が気になる10の理由 - Qiita 設計思想とか指針とか残しておきます。 mizchi/arda Arda - MetaFluxなフレームワークを作った - Qiita Ardaは実践的なものを目指した 他のフレームワークは思想から入って実装されたものかもしれませんが、ArdaはFluxを意識しつつも実際のアプリで使われている画面遷移の機構を抽象化する点から開発がスタートしています。 またKobitoという比較的寿命が長い(ことを予定している)アプリの基盤にすることで長くメンテされる予定です。なのでKobitoはちゃんと使ってもらえるようなものにしたい、と思って開発しています。(この記事が宣伝兼ねてないとは言いませんが。) (自分の開発したものにしては)ドキュメントが充実していることについて 開発者の今回の様子に
React.js Conf 2015 - Immutable Data and React
Lee Byron, Facebook Immutable data unlocks powerful memoization techniques and prohibits accidental coupling via shared mutable state. It's no accident that these are the the same benefits provided by React. Persistent data structures provide the benefits of immutability while maintaining high performance reads and writes and present a familiar API. Learn about how persistent immutable data str
mozilla-central @ 40eeaa1a8c0d
--- a/browser/components/loop/content/conversation.html +++ b/browser/components/loop/content/conversation.html @@ -33,16 +33,18 @@ <script type="text/javascript" src="loop/shared/js/actions.js"></script> <script type="text/javascript" src="loop/shared/js/validate.js"></script> <script type="text/javascript" src="loop/shared/js/dispatcher.js"></script> <script type="text/javascript" src="loop/shar
Get Started React.js
React.jsについての簡単な紹介 Component化、Prop、Stateの使い分け、イベント、addon、mixin、アーキテクチャ、ServerSide Renderingなどについての説明。 一部v0.12で変わった部分の対応もしています。
Virtual DOMのアルゴリズムが知りたくてvirtual-domのコードを読んだ話 - saneyuki_s log
Reactの登場以来気になっていた、Virtual DOMアプローチの具体的な差分抽出手法について、virtual-domを読んで確認してみた。 Reactをいきなり読むのは面倒くさかった・ミニマムな実装から読みたかったというのが、こっちを選択した理由。Reactのアルゴリズムが参考にされているものの、Reactには存在する特定の最適化が入ってないかもしれないので、あくまでもReact系のVirtual DOMを実装するには最低限何が必要かを知る程度のものと判断してほしい。 virtual-domについて ReactのVirtual DOM部分だけを切り出して再利用可能な形で再実装したライブラリ。elm-htmlとかMercuryといった箇所でvDOMインフラとして既に使われているので、まったくの趣味プロダクトという訳でもなくなっている。 README.md中での触れられている通り、Vir
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - aws-amplify/amplify-js: A declarative JavaScript library for application development using cloud services.
なぜReduxを使うのか
React.js Conf 2015 Keynote - Introducing React Native
GitHub - kriasoft/react-starter-kit: The web's most popular Jamstack front-end template (boilerplate) for building web applications with React
React - A JavaScript library for building user interfaces