Volt е Ruby рамка, предназначена за приложения, богати на данни. И сървърната, и клиентската страна са написани в Ruby (който след това се компилира в JS с помощта на OPAL), така че това позволява на разработчика да пише много динамични приложения, без да се налага да пише един ред код на Javascript. Ако сте Рубинен вентилатор като мен, ще ви хареса тази рамка.
В опит да направят уеб приложенията много по-динамични, фреймворковите Javascript рамки като Angular.js, Backbone.js и Ember.js са спечелили голяма популярност. Тези рамки обаче често изискват приложение от заден план, за да бъдат полезни, така че те се използват заедно с уеб рамки като Ruby on Rails и Django.
От друга страна, Ruby framework Volt е в състояние да управлява back-end и динамичен front-end. Тъй като и двете функционалности са тясно интегрирани в ядрото му (всъщност Volt е по-скоро като MVVM архитектура, използвайки предимствата на обвързването на данни), това позволява на разработчика да изгради тези приложения бързо.
Много готина функция, която излиза от кутията, е характеристиката на Volt в реално време. Ако някога сте правили приложения в реално време, знаете, че процесът може да бъде предизвикателен - вероятно сте внедрили AJAX-анкетиране, уеб сокети, сървърно изпратени събития (SSE) или дори сте използвали външни услуги, добавяйки сложност към приложението и дори имайки допълнителни разходи . За разлика от други рамки, Volt поддържа връзка със сървъра жива (чрез уеб сокети), така че вместо да прави заявки на Ajax за всяко действие, той прокарва промените незабавно към всички клиенти. За да работи това, не е необходима конфигурация.
В този урок за Ruby framework ще ви преведа през процеса на създаване на приложение в реално време с помощта на 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’.
Нека да стартираме сървъра, като изпълним командата ‘volt server’ в конзолата и да видим как изглежда в браузъра, като навигираме до localhost: 3000:
volt server
Също така не забравяйте да стартирате MongoDB в конзолата:
mongod
Можем да забележим, че Volt идва с редица страници по подразбиране, включително „Начало“ и „Информация“. Те могат да бъдат персонализирани веднага.
Другото нещо, което си струва да се спомене, е бутонът за вход в горната дясна част на страницата. Volt има 'потребителска' функционалност, интегрирана в рамката чрез скъпоценния камък 'volt-user-templates', който предоставя начин за регистриране и удостоверяване на потребителите, веднага от кутията.
Сега нека започнем да работим върху нашето приложение. На първо място, не се нуждаем от страницата „About“, за да можем да изтрием следното: app/main/views/main/about.html
файл, действието за действие в app/main/controllers/main_controller.rb
, премахнете /about
маршрут в app/main/config/routes.rb
и навигационната връзка в app/main/views/main/main.html
.
Сега нека започнем с бизнеса и започнем, като изброим всички регистрирани потребители:
{{ 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 framework, за да изкарате Volt за завъртане. Следете по-нататъшното развитие, тъй като Volt изглежда като много обещаваща Ruby рамка дори на този ранен етап от развитието.
В тръбопровода има много готини нови функции и съм сигурен, че Volt ще стане по-актуален през следващите няколко години, тъй като все повече хора започват да експериментират с него. Поради редица иновативни функции, много разработчици могат да се влюбят във Volt и да го използват за следващите си Руби проект .