More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to サーバサイドなおじさんがSPAを趣味で初めて作ってみてわかった n のこと(仮)
Similar to サーバサイドなおじさんがSPAを趣味で初めて作ってみてわかった n のこと(仮) (20)
More from Ken Muryoi
サーバサイドなおじさんがSPAを趣味で初めて作ってみてわかった n のこと(仮)
- 2. ここに提供
- 3. 自己紹介 • 無量井 健(むりょうい けん) • 永和システムマネジメント 10ヶ月目 • Ruby関西, 関西Ruby会議04・05 etc • :white_large_square: 改め :b::b::a:
- 4. サーバサイドなおじさんが SPAを趣味で初めて作って始めてみて わかった n のこと(仮) ハマった n のこと 2015/07/11 関西Ruby会議06 無量井 健(@muryoimpl) https://www.flickr.com/photos/bongonian/8534960933/
- 8. 1
- 13. 2
- 15. 使った技術要素 React • sprockets との共生を選択した(時間なくて) • npm install react ̶save-dev => package.json • webpack で結合した js を//=require で固める • loaders(coffeescriptの慣れでcjsx使用) • webpack.config.js 書くだけでいけそう(安易) • 実際foreman 実行だけで済むので楽だった
- 16. 使った技術要素 webpack • 理由はreact-jade用のloaderがすでに あったから • でも、開発開始当時、依存関係で入る react のバージョンが古かったので、 react-jadeは今回お見送り🙏
- 17. { "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
- 18. var webpack = require('webpack'); var path = require('path'); var assetsPath = path.join(__dirname, 'app', 'assets', 'client'); module.exports = { // the base path which will be used to resolve entry points context: __dirname, // the main entry point for our application's frontend js entry: { main: [ 'webpack/hot/only-dev-server', path.join(assetsPath, 'main.cjsx') ] }, output: { path: path.join(__dirname, 'app', 'assets', 'javascripts'), // for Rails Assets Pipeline filename: "[name]-bundle.js" }, ̶̶̶̶̶̶- 中略 ̶̶̶-̶̶̶̶̶ resolve: { extensions: ['', '.js', '.jsx', 'cjsx', '.coffee'] }, module: { loaders: [ {test: /.jsx$/, loaders: ['jsx-loader', 'react-hot']}, {test: /.coffee$/, loaders: ['coffee']}, {test: /.cjsx$/, loaders: ['coffee', 'cjsx']}, webpack.config.js entry point なファイルを 指定する 上が配置場所 下が固めた後のファイル名 loaderの対象とする拡張子 どの拡張子にどのloaderを 割り当てるか
- 19. 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
- 20. ここでRailsのお決まり !!! %html{lang: :ja} %head %meta… ̶̶ 中略 ̶̶ %title KPT = javascript_include_tag client' %body app/views/layouts/application.html.haml ここに main.js 等React 使った js を固めている
- 23. サンプルどおりの位置に配置する !!! %html{lang: :ja} %head %meta… ̶̶ 中略 ̶̶ %title KPT %body = javascript_include_tag client' app/views/layouts/application.html.haml ここに配置すると問題なく 動いた
- 26. ３
- 28. 使った技術要素 poltergeist • acceptance test を turnip でやろう • 折角なので、wercker で CI してみよう • thecaddy/node-ruby の boxを使っ てみる • ローカルで動いたし、おっしゃ push…
- 29. 謎のエラーを吐く 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 )')
- 31. https://www.flickr.com/photos/alvarez-tostado/363243449/ • 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 に対応していない
- 33. ただ今認証周りの スタブが2回目実行時 に無反応になる問題に 直面中 (原因調査中)https://www.flickr.com/photos/alvarez-tostado/363243449/
- 34. ４
- 36. 痛恨のコピペミス… # 当初 rails-api を使っていなかったが導入してみた。 # API 用の親クラスを作成しようとした class ApiController < ActionController::API # コピペをミスってActionController::APIに… include ActionController::Serialization end
- 37. 痛恨のコピペミス… class BoardsController < ApiController # client 側の js からの request があったので # 子クラスで render json を呼び出す def index render json: @current_user.boards end end
- 38. 痛恨のコピペミス… 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 行続く…… ̶̶̶̶̶̶̶
- 41. ５
- 43. React 使ってみた所感 • getInitialState, componentWillMount, componentDidMount などの役割は名前から イメージつきやすい感じする。FWレベル。 • render 内に、最上位のタグが1つしか書けないのが私は 意外にひっかかった。component != partial • やはり view とロジックは分けて書きたくなるのと、html の閉じタグを書きたくないでござる… react-jadeは開発 始めたときに対応している react が古くて諦めた。今は？
- 44. top level は1つのみ React = require react module.exports = React.createClass render: -> ( <div className= nav > <p>あいうえおっすおっす</p> </div> <form className= inline-form > </form> )
- 45. 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 されない…
- 46. partial とは違う…
- 47. あと
- 49. ReactMount: Root element has been removed from its original container. New container: null が大量に並ぶ
- 53. https://www.flickr.com/photos/alvarez-tostado/363243449/ Reactがrender する前の関数で transitionすると 発生するみたい😱
- 56. https://www.flickr.com/photos/thomasletholsen/8719637939/ まとめ • ｎ番煎じでした。 • ハマってみないと穴の深さはわからない • まだ抜け出せてない穴がある • 涙の数だけ強くなれるよ…