サーバサイドなおじさんがSPAを趣味で初めて作ってみてわかった...

サーバサイドなおじさんが SPAを趣味で初めて作ってみてわかった n のこと(仮)

2015/07/11 関西Ruby会議06

無量井　健(@muryoimpl)

https://www.flickr.com/photos/bongonian/8534960933/


ここに提供

自己紹介•無量井　健(むりょうい　けん)

• 永和システムマネジメント 10ヶ月目

• Ruby関西, 関西Ruby会議04・05 etc

• :white_large_square: 改め :b::b::a:

サーバサイドなおじさんが SPAを趣味で初めて作って始めてみて

わかった n のこと(仮) ハマった n のこと

2015/07/11 関西Ruby会議06

無量井　健(@muryoimpl)



使った技術要素(server)Rails４.2 rails-api

jwt google-api-clientactive_model_serializers

pumahamlit

foremanbootstrap-sass poltergeist

使った技術要素(client)React react-router

webpackjsUri

reqwest

cjsxunderscore

react-draggable

https://www.flickr.com/photos/thomasletholsen/8719637939/

盛大にハマったりわかったりしたこと n 個を紹介します

とあるRubyistに電車の中で

“SPAという単語を使うとモヒカンが現れて

炎上しますよ”

((((；ﾟДﾟ))))

https://www.flickr.com/photos/alvarez-tostado/363243449/


SPAという単語は用法・要領を守って使いましょう


webpackjsUri

reqwest

pumacjsxunderscore

使った技術要素 React• sprockets との共生を選択した(時間なくて)

• npm install react save-dev => package.json

• webpack で結合した js を//=require で固める

• loaders(coffeescriptの慣れでcjsx使用)

• webpack.config.js 書くだけでいけそう(安易)

• 実際foreman 実行だけで済むので楽だった

使った技術要素 webpack

• 理由はreact-jade用のloaderがすでにあったから

•でも、開発開始当時、依存関係で入る react のバージョンが古かったので、react-jadeは今回お見送り🙏

{ "name": "kpton", 中略 }, "dependencies": { "cjsx-loader": "^2.0.1", "coffee-loader": "^0.7.2", "coffee-script": "^1.9.2", "jsuri": "^1.3.1", "jsx-loader": "^0.13.2", "node-libs-browser": "^0.5.0", "react": "^0.13.3", "react-hot-loader": "^1.2.7", "react-router": "^0.13.3", "reqwest": "^1.1.6", "underscore": "^1.8.3", "webpack": "^1.9.7" } }

package.json

entry point な js

React = require 'react' Router = require 'react-router' routes = require './config/routes.cjsx'

Router.run routes, Router.HistoryLocation, (Handler) -> React.render(<Handler/>, document.body)

app/assets/client/main.js

ここでRailsのお決まり!!! %html{lang: :ja} %head %meta… 中略 %title KPT = javascript_include_tag ‘client' %body

app/views/layouts/application.html.haml

ここに main.js 等React 使った js を固めている

全く動かない❗



どうも main.jsの手前に対象のDOMが

ないと動かないらしい…



サンプルどおりの位置に配置する

!!! %html{lang: :ja} %head %meta… 中略 %title KPT %body = javascript_include_tag ‘client'

app/views/layouts/application.html.haml

ここに配置すると問題なく動いた

http://facebook.github.io/react/docs/tutorial.html

Reactのサンプル

http://facebook.github.io/react/docs/tutorial.html

Reactのサンプル

位置関係、大事であった…

使った技術要素(server)Rails４ rails-api


pumahamlit


使った技術要素 poltergeist

• acceptance test を turnip でやろう

• 折角なので、wercker で CI してみよう

• thecaddy/node-ruby の boxを使ってみる

• ローカルで動いたし、おっしゃ push…

謎のエラーを吐く

Capybara::Poltergeist::JavascriptError: One or more errors were raised in the Javascript code on the page. If you don't care about these errors, you can ignore them by setting js_errors: false in your Poltergeist configuration (see documentation for details).

TypeError: 'undefined' is not a function ( evaluating 'ReactElementValidator.createElement.bind( null, type )') TypeError: 'undefined' is not a function ( evaluating 'ReactElementValidator.createElement.bind( null, type )')

ちょっと調べてみると poltergeist 1.x系の問題らしい




• https://github.com/teampoltergeist/poltergeist/issues/292

• 確かにローカルのphantomjsは 2.0.0 だった

• phantomjs2.0に対応していない環境もある

• facebook/react がpolyfillを用意しているらしい

• https://github.com/facebook/react/issues/945#issuecomment-39694748

phantomjs 1.9系は bind に対応していない


https://github.com/facebook/react/issues/945#issuecomment-39694748

ただ今認証周りのスタブが2回目実行時に無反応になる問題に

直面中 (原因調査中)



使った技術要素(server)Rails４ rails-api


pumahamlit


痛恨のコピペミス…

# 当初 rails-api を使っていなかったが導入してみた。 # API 用の親クラスを作成しようとした class ApiController < ActionController::API

# コピペをミスってActionController::APIに… include ActionController::Serialization end

痛恨のコピペミス…

class BoardsController < ApiController

# client 側の js からの request があったので # 子クラスで render json を呼び出す def index render json: @current_user.boards end end

痛恨のコピペミス…SystemStackError (stack level too deep): app/controllers/api_controller.rb:8:in `current_user' app/controllers/api_controller.rb:8:in `current_user' app/controllers/api_controller.rb:8:in `current_user' app/controllers/api_controller.rb:8:in `current_user' app/controllers/api_controller.rb:8:in `current_user' app/controllers/api_controller.rb:8:in `current_user' app/controllers/api_controller.rb:8:in `current_user' app/controllers/api_controller.rb:8:in `current_user' app/controllers/api_controller.rb:8:in `current_user' app/controllers/api_controller.rb:8:in `current_user' app/controllers/api_controller.rb:8:in `current_user' app/controllers/api_controller.rb:8:in `current_user' app/controllers/api_controller.rb:8:in `current_user' app/controllers/api_controller.rb:8:in `current_user'

これが 228 行続く……

マシンのメモリ8G 食いきって

カーソルが挙動不審になりました💦



OOM killer 発動！で

finish👼https://www.flickr.com/photos/alvarez-tostado/363243449/



webpackjsUri

reqwest

pumacjsxunderscore

React 使ってみた所感• getInitialState, componentWillMount, componentDidMount などの役割は名前からイメージつきやすい感じする。FWレベル。

• render 内に、最上位のタグが1つしか書けないのが私は意外にひっかかった。component != partial

• やはり view とロジックは分けて書きたくなるのと、htmlの閉じタグを書きたくないでござる… react-jadeは開発始めたときに対応している react が古くて諦めた。今は？

top level は1つのみReact = require “react” module.exports = React.createClass render: -> ( <div className=“nav”> <p>あいうえおっすおっす</p> </div> <form className=“inline-form”> </form> )

top level は1つのみReact = require “react” module.exports = React.createClass render: -> ( <div className=“nav”> <p>あいうえおっすおっす</p> </div> <form className=“inline-form”> </form> )

先に書かれているtop level のtagが render されない…

partial とは違う…

あと

わかりにくいエラー・警告が多い(気がする…)

ReactMount: Root element has been removed from its original container. New container: null が大量に並ぶ

react consoleみると、同じ要素が2つできてる…

https://github.com/rackt/react-router/issues/600#issuecomment-73364948


同じだ❗https://www.flickr.com/photos/alvarez-tostado/363243449/

※平日深夜4時の出来事である…


Reactがrenderする前の関数で transitionすると発生するみたい😱


transitionTo 辞めると

確かに黙った😷


まとめ


まとめ•ｎ番煎じでした。

•ハマってみないと穴の深さはわからない

•まだ抜け出せてない穴がある

•涙の数だけ強くなれるよ…


無駄にハマらずに楽しく

開発できる人が増えると

いいなぁ

EnjoyProgramming!

サーバサイドなおじさんがSPAを趣味で初めて作ってみてわかった...

Software

Transcript of サーバサイドなおじさんがSPAを趣味で初めて作ってみてわかった...