Railsからフロントエンド領域だけなんとか切り出す
※注意：
- これが最適解とかいうわけではないです。個人的な経験に基づくソリューションです。
- Railsの良し悪しの話ではないです。あくまで開発規模や体制によっては手法を変えるのもアリだから一考するのも選択肢として存在するという話です。
前提
- 小規模に開発していたRails製のwebサービスの機能拡張をより柔軟に行っていきたい
- そのためサーバーサイド/フロントエンドそれぞれで課題を解決していくためにも分業化を勧めていきたい
- Rails上のViewにフロントエンドを入れたまま分業化した場合、サーバーサイド/フロントエンドいずれかのエラーによって相手の作業をブロックするリスクを孕んでいる。
- 既存のサービスでデグレを起こさず、開発上できるかぎりの疎結合でサーバーサイド/フロントエンド開発を実現することがゴール。
要点
- Viewテンプレート内のbodyタグ内のDOMを取り除く
- View内で利用していたRailsから渡される変数をscriptタグ内のグローバル変数に格納する(buttonやformなども基本的にuriだけ利用してjs側で生成する)
- 仮想DOMで実装した外部のjsを読み込み、Rails側のグローバル変数を参照してつなぎこむ
- あとはよきように運用する
手順
helloword.erb
<html>
<head>
...
</head>
<body>
<div>
<%= @message %>
</div>
...
- Viewテンプレート内のbodyタグ内のDOMを取り除く
- View内で利用していたRailsから渡される変数をscriptタグ内のグローバル変数に格納する(buttonやformなども基本的にuriだけ利用してjs側で生成する)
- 仮想DOMで実装した外部のjsを読み込み、Rails側のグローバル変数を参照してつなぎこむ
- あとはよきように運用する
手順
helloword.erb
<html>
<head>
...
</head>
<body>
<div>
<%= @message %>
</div>
...
helloword.erb
<html>
<head>
...
</head>
<body>
<div>
<%= @message %>
</div>
...
のようなViewがあったとする。これを切り離したい場合。
erbは
helloword.erb
<html>
<head>
...
</head>
<body>
<script>
var bridge_data = {message:"<%= @message %>"}
</script>
<!--上記のグローバル変数を参照してDOMを作るjsを読み込む-->
<script src="/path/to/external.js"></script>
...
として、Viewをサーバー側に持たせない作りにすることで、分業をよりスムーズに実現することができる。（複雑な構成のdomほど効果は高くなる）
以上。
Author And Source
この問題について(Railsからフロントエンド領域だけなんとか切り出す), 我々は、より多くの情報をここで見つけました https://qiita.com/bowz_standard/items/4bce00bba849143cfb8e著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .