動的アプリケーション向けの有望なRubyフレームワークであるVoltに会う

公開: 2022-03-11

Voltは、データが豊富なアプリケーション向けに設計されたRubyフレームワークです。サーバー側とクライアント側の両方がRubyで記述されているため（OPALを使用してJSにコンパイルされます）、これにより、開発者はJavascriptコードを1行も記述せずに非常に動的なアプリケーションを記述できます。私のようなRubyファンなら、このフレームワークを気に入るはずです。

Webアプリケーションをより動的にするために、Angular.js、Backbone.js、Ember.jsなどのフロントエンドJavascriptフレームワークが多くの人気を得ています。ただし、これらのフレームワークは、有用であるためにバックエンドアプリケーションを必要とすることが多いため、RubyonRailsやDjangoなどのWebフレームワークと組み合わせて使用されます。

一方、RubyフレームワークVoltは、バックエンドと動的フロントエンドを管理できます。両方の機能がコアに緊密に統合されているため（実際、Voltはデータバインディングの利点を活用したMVVMアーキテクチャに似ています）、開発者はこれらのアプリケーションを迅速に構築できます。

箱から出てくる非常にクールな機能は、Voltのリアルタイム機能です。リアルタイムアプリケーションを作成したことがある場合は、プロセスが困難になる可能性があることをご存知でしょう。おそらく、AJAXポーリング、Webソケット、サーバー送信イベント（SSE）を実装したり、外部サービスを使用したりして、アプリケーションを複雑にし、追加のコストを負担することさえあります。。他のフレームワークとは異なり、Voltはサーバーとの接続を（Webソケットを介して）維持するため、アクションごとにAjaxリクエストを行う代わりに、変更をすべてのクライアントに即座にプッシュします。これを機能させるために構成は必要ありません。

Voltを使用してチャットアプリケーションを作成する

このRubyフレームワークのチュートリアルでは、Voltを使用してリアルタイムアプリケーションを作成するプロセスと、チャットがリアルタイムアプリケーションの最大のユースケースであるため、チャットアプリケーションよりも優れた方法でその機能を実証する方法について説明します。

まず、VoltとMongoDBをインストールしましょう。後者のプロセスについては詳しく説明しません。

 gem install volt brew install mongodb

 mkdir -p /data/db

（dbpathを作成します）

 chown `id -u` /data/db (change the owner to have the proper dbpath permissions)

これで、最初のアプリを作成する準備が整いました。これを「チャット」と呼びましょう。これは、数行で簡単に行うことができます。

 volt new chat cd chat

ドキュメント構造には、Railsといくつかの類似点があります。 Railsユーザーが気付く主な違いは、アセット、コントローラー、モデル、ビューなどの残りのフォルダーを含むアプリ内に追加のフォルダーがあることです。この追加のフォルダーは「コンポーネント」です。

コンポーネントは、アプリの分離されたセクションです。コンポーネント内のすべてのページは、そのコンポーネントのすべてのファイルが最初のhttpリクエストでロードされるため、ページをリロードせずにレンダリングされます。したがって、別のコンポーネントのページにアクセスすると、新しいhttpリクエストが作成され、ページがリロードされます。 '。この例では、「main」というデフォルトのコンポーネントを使用してみましょう。

コンソールで「voltserver」コマンドを実行してサーバーを起動し、localhost：3000に移動してブラウザでどのように表示されるかを確認しましょう。

 volt server

また、コンソールでMongoDBを起動することを忘れないでください。

 mongod

Voltには、「ホーム」や「バージョン情報」など、多数のデフォルトページが付属していることがわかります。これらはすぐにカスタマイズできます。

言及する価値のあるもう1つのことは、ページの右上にあるログインボタンです。 Voltには、「volt-user-templates」gemを介してフレームワークに統合された「ユーザー」機能があります。これは、箱から出してすぐにユーザーを登録および認証する方法を提供します。

入門

それでは、アプリの開発を始めましょう。まず、「About」ページは必要ないので、先に進んで次を削除できます。app app/main/views/main/about.htmlファイル、 app/main/controllers/main_controller.rbのaboutアクション、 app/main/config/routes.rbの/about aboutrouteとapp/main/views/main/main.htmlのnavリンクを削除します。

 <ul class="nav nav-pills pull-right"> <:nav href="/" text="Home" /> <:user-templates:menu /> </ul>

それでは、ビジネスに取り掛かり、すべての登録ユーザーを一覧表示することから始めましょう。

 <:Body> <h1>Home</h1> <div class="row"> <div class="col-md-4"> {{ _users.each do |user| }} <div class="contact"> {{user._name}} </div> {{ end }} </div> </div>

これで、すべての登録ユーザーがホームページに表示されます。 {{}}内に記述されたコードは、実行されるRubyコードであることに注意してください。このようにして、ユーザーコレクションを繰り返し処理し、それぞれを印刷できます。

お気づきかもしれませんが、「users」はすべてのユーザーが保存されているコレクションの名前です。覚えておくべきことは、属性には、属性名の前にアンダースコア''を付けてアクセスすることです。これを機能させるには、最初にmain_controller.rbファイルの先頭にコード行を追加する必要があります。

 model :store

Voltには、コントローラーからアクセスできる複数のコレクションモデルが付属しており、それぞれが情報を異なる場所に保存します。ストアコレクションモデルはデータをデータストアに格納します。ここでは、そのコントローラーを使用するコントローラーを指定しています（現在、サポートされているデータストアはMongoDBのみです）。いくつかのユーザーを作成して、どのように見えるかを見てみましょう。

現在、このページにはわくわくするようなものは何もありません。登録ユーザーをリストしているだけです。ここで、メッセージの送信先のユーザーを選択し、現在ログインしているユーザーの名前をリストから削除し（彼は自分自身にメッセージを送信できないため）、認証されたユーザーにのみリストを表示できるようにしたいと思います。ユーザーと認証されていないユーザーに「ランディング」ページを表示します。

 <:Body> <h1>Home</h1> {{ if Volt.user }} <div class="row"> <div class="col-md-4"> {{ _users.each do |user| }} {{ if user._id != Volt.user._id }} <div class="contact {{ if params._user_id == user._id }} active {{ end }}" e-click="select_conversation(user)"> {{user._name}} </div> {{ end }} {{ end }} </div> </div> {{ else }} <p>This is a sample application built with Volt to demonstrate its real-time capabilities. Please log in to access it.</p> {{ end }}

Volt.userは、現在の（ログインしている）ユーザーまたはnilを返します。

e-click属性を使用すると、その要素がクリックされたときに呼び出されるメソッドをコントローラーから選択できます。

属性とCSS

実際、すべての「e-」属性はVoltのイベントバインダーであるため、たとえば、フォームにe-submitを追加して、コントローラーで呼び出されるアクションを選択できます。「選択された」ユーザーのIDをパラメーターに追加して、どのIDが選択されたかを確認し、後でスタイルを設定できる「アクティブ」というクラスを追加します。

次に、コントローラーでselect_conversationメソッドを作成しましょう。

 def select_conversation(user) params._user_id = user._id end

これで終わりです。ページをもう一度チェックアウトすると、ユーザーの名前をクリックするたびにURLが変わることがわかります。また、クラス'active'がその要素に追加されているので、CSSを追加して表示します（後で追加するアイテムのCSSを追加します）。

 .conversation{ form{ input{ margin: 10px 0 5px 0; } } }

 .contact{ width:100%; padding:5px; margin: 4px 0; font-size:15px; cursor:pointer; &:hover{ background-color: #FAFAFA; } &.active{ background-color: #337ab7; color: #FFF; } .badge{ background-color: #900; } }

 .message{ max-width: 80%; padding:10px 15px; margin: 5px 0; background-color: #FEFEFE; border: 1px solid #E7E7E7; border-radius: 5px; float: left; clear:both; &.sent{ background-color: #E4F3DB; border: 1px solid #B7D0A7; float: right; } p{ margin:0; } }

次に、右側に各ユーザーにメッセージを送信するためのフォームを作成しましょう。

 <:Body> <h1>Home</h1> {{ if Volt.user }} <div class="row"> <div class="col-md-4"> {{ _users.each do |user| }} {{ if user._id != Volt.user._id }} <div class="contact {{ if params._user_id == user._id }} active {{ end }}" e-click="select_conversation(user)"> {{user._name}} </div> {{ end }} {{ end }} </div> {{ if params._user_id }} <div class="col-md-8 well conversation"> {{ current_conversation.each do |message| }} <div class="message {{ if message._sender_id == Volt.user._id }} sent {{ end }}"> <p>{{ message._text }}</p> </div> {{ end }} {{ if current_conversation.count == 0 }} <p>You have no messages yet. Start chatting!</p> {{ else }} <div class="clearfix"></div> {{ end }} <form e-submit="send_message" role="form"> <div class="form-group"> <input class="form-control" type="text" placeholder="Write a message" value="{{ page._new_message }}" /> <button type="submit" class="btn btn-primary pull-right">Submit</button> </div> </form> </div> {{ end }} </div> {{ else }} <p>This is a sample application built with Volt to demonstrate its real-time capabilities. Please log in to access it.</p> {{ end }}

まず、フォームを表示する前にユーザーが選択されているかどうかを確認し、次に、少し定義するコントローラーのメソッドからの現在の会話（選択したユーザーとの会話）からのすべてのメッセージを表示します。下部には、新しいメッセージを送信するためのフォームが表示されています。

入力の値は、データストアに保存されたくないため、ページコレクションモデルで作成している属性であることに注意してください。次に、コントローラーでcurrent_conversationメソッドとsend_messageメソッドを定義しましょう。

 def send_message unless page._new_message.strip.empty? _messages << { sender_id: Volt.user._id, receiver_id: params._user_id, text: page._new_message } page._new_message = '' end end def current_conversation _messages.find({ "$or" => [{ sender_id: Volt.user._id, receiver_id: params._user_id }, { sender_id: params._user_id, receiver_id: Volt.user._id }] }) end

send_messageメソッドでは、メッセージが空白でない場合にコレクションに新しいメッセージを追加し（インラインでチェックしているため、現時点で検証を混乱させる必要はありません）、ページ._new_message to ''に設定します。入力フィールドを空にします。

その行をselect_conversationメソッドの最後にも追加したい場合があります。現在の会話メソッドは、選択したユーザーと現在のユーザーの間のメッセージを_messagesコレクションに照会するだけです。

リアルタイム通知でまとめる

最後に、他のユーザーがメッセージを送信していることをユーザーが確認できるように、何らかの通知システムが必要です。

_notificationsという新しいコレクションを追加し、各メッセージが送信された後に新しいコレクションを作成しましょう。

 def send_message unless page._new_message.strip.empty? _messages << { sender_id: Volt.user._id, receiver_id: params._user_id, text: page._new_message } _notifications << { sender_id: Volt.user._id, receiver_id: params._user_id } page._new_message = '' end end def select_conversation(user) params._user_id = user._id unread_notifications_from(user).then do |results| results.each do |notification| _notifications.delete(notification) end end page._new_message = '' end def unread_notifications_from(user) _notifications.find({ sender_id: user._id, receiver_id: Volt.user._id }) end

また、ユーザーが会話を選択して新しいメッセージを表示した後から通知を削除する必要があるため、その部分をselect_conversationメソッドに追加しました。

ユーザー名のすぐ隣に通知カウンターを追加しましょう。

 <div class="contact {{ if params._user_id == user._id }} active {{ end }}" e-click="select_conversation(user)"> {{user._name}} {{ if unread_notifications_from(user).count > 0 }} <span class="badge"> {{ unread_notifications_from(user).count }} </span> {{ end }} </div>

これでアプリの準備が整いました。いくつかのブラウザーを開いて、Voltのリアルタイム機能のテストを開始できます。

ボルトは間違いなく試してみる価値があります

Voltフレームワークは、何年も前から存在している人気のあるRubyフレームワークのほとんどほど成熟していて堅牢ではありませんが（Voltの時点ではまだベータ版です）、検討して検討する価値があります。

興味がある場合は、このRubyフレームワークのチュートリアルを使用して、Voltを試してみてください。 Voltは、開発のこの初期段階でも非常に有望なRubyフレームワークのように見えるため、今後の開発に注目してください。

パイプラインには多くのクールな新機能があり、より多くの人々がそれを実験し始めるにつれて、Voltは今後数年間でより関連性が高くなると確信しています。多くの革新的な機能により、多くの開発者はVoltに夢中になり、次のRubyプロジェクトに使用することができます。