apeescape2.com
  • メイン
  • Uiデザイン
  • 革新
  • リモートの台頭
  • 製品の担当者とチーム
Webフロントエンド

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

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

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

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



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

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

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を介してフレームワークに統合された「ユーザー」機能があります。これは、箱から出してすぐにユーザーを登録および認証する方法を提供します。

音楽業界の価値はいくらですか

入門

それでは、アプリの開発を始めましょう。まず、[概要]ページは必要ないので、先に進んで次を削除できます。app/main/views/main/about.htmlファイル、app/main/controllers/main_controller.rbのaboutアクション、/aboutを削除しますapp/main/config/routes.rbのルートおよびapp/main/views/main/main.htmlのナビゲーションリンク。

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

アマゾンaws認定ソリューションアーキテクト
{{ if Volt.user }} { } {{ if user._id != Volt.user._id }} {{user._name}} {{ end }} {{ end }} {{ if params._user_id }} { current_conversation.each do }

{{ message._text }}

{{ end }} {{ if current_conversation.count == 0 }}

You have no messages yet. Start chatting!

{{ else }} {{ end }} Submit {{ end }} {{ else }}

This is a sample application built with Volt to demonstrate its real-time capabilities. Please log in to access it.

{{ 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 }, { 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に追加しました。方法。

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

{{user._name}} {{ if unread_notifications_from(user).count > 0 }} {{ unread_notifications_from(user).count }} {{ end }}

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

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

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

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

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

バイオテクノロジー評価の特異性とベストプラクティス

財務プロセス

バイオテクノロジー評価の特異性とベストプラクティス
売上予測AIによる小売業者の収益の最適化

売上予測AIによる小売業者の収益の最適化

データサイエンスとデータベース

人気の投稿
Nuxt.jsを使用したサーバー側のレンダリングされたVue.jsアプリの作成
Nuxt.jsを使用したサーバー側のレンダリングされたVue.jsアプリの作成
React.JSエコシステムのナビゲート
React.JSエコシステムのナビゲート
次の大きなものの構築–ビジネスアイデア開発のガイド
次の大きなものの構築–ビジネスアイデア開発のガイド
危機における経済的苦痛:予測することはできず、準備することもできます
危機における経済的苦痛:予測することはできず、準備することもできます
オンデマンド製品開発:デジタルトランスフォーメーションの推進
オンデマンド製品開発:デジタルトランスフォーメーションの推進
 
ブロックチェーンID管理:データセキュリティ革命の火付け役
ブロックチェーンID管理:データセキュリティ革命の火付け役
フロントエンドフレームワーク:ソリューションまたは巨大な問題?
フロントエンドフレームワーク:ソリューションまたは巨大な問題?
愛を込めてデザイナーへ(フロントエンド開発者からの手紙)
愛を込めてデザイナーへ(フロントエンド開発者からの手紙)
Swiftのプロトコル指向プログラミング入門
Swiftのプロトコル指向プログラミング入門
フリーランスのファイナンスコンサルタントが大企業をどのように打ち負かしているか
フリーランスのファイナンスコンサルタントが大企業をどのように打ち負かしているか
人気の投稿
  • 冷戦における技術
  • 出会い系サイトはどのようにお金を稼ぐのですか
  • 装飾的なパターンは一般的に関連付けられています
  • 恒久的な給与計算機との契約
  • anglejsから始める方法
  • ペイパルのクレジットカード番号のハッキング
  • コードを書くとはどういう意味ですか
カテゴリー
ヒントとツール 仕事の未来 バックエンド 収益性と効率性 革新 モバイルデザイン エンジニアリング管理 Uiデザイン ツールとチュートリアル 計画と予測

© 2021 | 全著作権所有

apeescape2.com