Faceți cunoștință cu Volt, un cadru Ruby promițător pentru aplicații dinamice

Volt este un cadru Ruby conceput pentru aplicații bogate în date. Atât partea server, cât și partea client sunt scrise în Ruby (care este apoi compilat în JS folosind OPAL), astfel încât acest lucru permite dezvoltatorului să scrie aplicații foarte dinamice fără a fi nevoie să scrie o singură linie de cod Javascript. Dacă sunteți fan Ruby ca mine, vă va plăcea acest cadru.

În încercarea de a face aplicațiile web mult mai dinamice, cadrele Javascript front-end precum Angular.js, Backbone.js și Ember.js au câștigat multă popularitate. Cu toate acestea, aceste cadre necesită adesea o aplicație back-end pentru a fi utile, așa că sunt utilizate împreună cu cadre web precum Ruby on Rails și Django.

Pe de altă parte, Ruby framework Volt este capabil să gestioneze back-end-ul și un front-end dinamic. Deoarece ambele funcționalități sunt strâns integrate în nucleul său (de fapt, Volt seamănă mai mult cu o arhitectură MVVM, valorificând avantajele legăturilor de date), acesta permite dezvoltatorului să construiască rapid aceste aplicații.

O caracteristică foarte interesantă care iese din cutie este caracteristica în timp real a lui Volt. Dacă ați realizat vreodată aplicații în timp real, știți că procesul poate fi dificil – probabil ați implementat sondaje AJAX, socket-uri web, evenimente trimise de server (SSE) sau chiar ați folosit servicii externe, adăugând complexitate aplicației și chiar suportând costuri suplimentare. . Spre deosebire de alte framework-uri, Volt menține o conexiune cu serverul vie (prin intermediul socket-urilor web), așa că, în loc să facă cereri Ajax pentru fiecare acțiune, împinge modificări instantaneu către toți clienții. Nu este necesară nicio configurație pentru ca aceasta să funcționeze.

Folosind Volt pentru a crea o aplicație de chat

În acest tutorial Ruby framework vă voi ghida prin procesul de creare a unei aplicații în timp real folosind Volt și ce modalitate mai bună decât o aplicație de chat pentru a-și demonstra capacitățile, deoarece chat-ul rămâne cazul de utilizare numărul unu al aplicațiilor în timp real.

În primul rând, să instalăm Volt și MongoDB. Ultimul proces nu va fi tratat în detaliu:

 gem install volt brew install mongodb

 mkdir -p /data/db

(creează dbpath)

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

Acum suntem gata să creăm prima noastră aplicație, să o numim „chat”. Putem face asta cu ușurință în câteva rânduri:

 volt new chat cd chat

Structura documentului are unele asemănări cu Rails. Principala diferență pe care o vor observa utilizatorii Rails este că avem un folder suplimentar în interiorul aplicației care conține restul dosarelor, cum ar fi active, controlere, modele și vizualizări, acest folder suplimentar este o „Componentă”.

O componentă este o secțiune izolată a aplicației. Toate paginile din interiorul unei componente sunt redate fără reîncărcarea paginii, deoarece toate fișierele pentru acea componentă sunt încărcate cu cererea http inițială, deci dacă vizităm o pagină a unei alte componente, se va face o nouă solicitare http și pagina va fi „reîncărcată”. '. Pentru acest exemplu, să folosim componenta implicită numită „principală”.

Să pornim serverul executând comanda „volt server” în consolă și să vedem cum arată în browser navigând la localhost:3000:

 volt server

De asemenea, nu uitați să porniți MongoDB în consolă:

 mongod

Putem observa că Volt vine cu o serie de pagini implicite, inclusiv „Acasă” și „Despre”. Acestea pot fi personalizate imediat.

Un alt lucru care merită menționat este butonul de conectare din partea dreaptă sus a paginii. Volt are o funcționalitate „utilizator” integrată în cadru prin intermediul bijuteriei „volt-user-templates”, care oferă o modalitate de a înregistra și a autentifica utilizatorii, imediat din cutie.

Noțiuni de bază

Acum, să începem să lucrăm la aplicația noastră. În primul rând, nu avem nevoie de pagina „Despre”, astfel încât să putem continua și să ștergem următoarele: fișierul app/main/views/main/about.html , acțiunea despre în app/main/controllers/main_controller.rb , eliminați ruta /about din app/main/config/routes.rb și linkul de navigare din app/main/views/main/main.html .

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

Acum să trecem la treabă și să începem prin a enumera toți utilizatorii înregistrați:

 <: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>

Acum toți utilizatorii înregistrați sunt listați pe pagina de pornire. Rețineți că codul scris în {{ }} este cod Ruby care este executat. În acest fel, putem itera colecțiile utilizatorilor și le putem imprima pe fiecare.

După cum probabil ați observat, „utilizatori” este numele colecției în care sunt stocați toți utilizatorii; ceva de avut în vedere este că atributele sunt accesate cu o liniuță de subliniere '' înaintea numelui atributului. Pentru ca acest lucru să funcționeze, mai întâi trebuie să adăugăm o linie de cod în partea de sus a fișierului main_controller.rb :

 model :store

Volt vine cu mai multe modele de colectare accesibile de la controler și fiecare dintre ele stochează informațiile într-un loc diferit. Modelul de colectare a magazinului stochează datele în depozitul de date și aici specificăm controlorul să-l folosească (în acest moment singurul depozit de date acceptat este MongoDB). Să creăm câțiva utilizatori pentru a vedea cum arată.

În acest moment, nu este nimic interesant în această pagină, doar listăm utilizatorii înregistrați. Acum aș dori să pot selecta un utilizator căruia să-i trimit un mesaj, să elimin numele utilizatorului conectat în prezent din listă (din moment ce nu ar trebui să poată trimite mesaje către el însuși), să arăt lista doar pentru autentificare utilizatorilor și afișează o pagină „de destinație” utilizatorilor neautentificați:

 <: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 returnează utilizatorul curent (conectat) sau nul.

Atributul e-click ne permite să selectăm o metodă din controler care va fi apelată când se face clic pe acel element.

Atribute și CSS

De fapt, toate atributele „e-” sunt lianți de evenimente în Volt, așa că, de exemplu, putem adăuga e-submit la un formular pentru a alege acțiunea care va fi apelată pe controler. Vom adăuga ID-ul utilizatorului „selectat” la parametri, astfel încât să putem ști care a fost selectat și să adăugăm o clasă numită „activ” pe care o putem stila ulterior.

Acum să creăm metoda select_conversation în controler:

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

Și asta este tot – dacă verificați din nou pagina, puteți vedea că adresa URL se schimbă de fiecare dată când faceți clic pe numele unui utilizator. De asemenea, clasa „activ” este adăugată la acel element, așa că haideți să adăugăm niște CSS pentru a-l face vizibil (voi merge mai departe și voi adăuga CSS-ul pentru elementele pe care le vom adăuga mai târziu):

 .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; } }

Acum să creăm un formular în partea dreaptă pentru a trimite mesaje fiecărui utilizator:

 <: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 }}

În primul rând, verificăm dacă există un utilizator selectat înainte de a afișa formularul, apoi afișăm toate mesajele din conversația curentă (conversația cu utilizatorul selectat) dintr-o metodă din controler pe care o vom defini într-un pic, iar în partea de jos afișăm un formular pentru trimiterea de mesaje noi.

Observați că valoarea intrării este un atribut pe care îl creăm pe modelul de colectare a paginii, deoarece nu dorim ca acesta să fie stocat în depozitul de date. Acum să definim metodele current_conversation și send_message în controler:

 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

În metoda send_message adăugăm un nou mesaj în colecție dacă mesajul nu este gol (verificăm în linie, astfel încât să nu ne mai încurcăm cu validările momentan), apoi setăm pagina ._new_message to '' deci golim câmpul de intrare.

Am putea dori să adăugăm acea linie și la sfârșitul metodei select_conversation . Metoda de conversație curentă doar _messages colecția _messages pentru mesaje între utilizatorul selectat și utilizatorul curent.

Finalizați cu notificări în timp real

Pentru a termina, aș dori să am un fel de sistem de notificare, astfel încât utilizatorii să poată vedea când alți utilizatori le trimit mesaje.

Să adăugăm o nouă colecție numită _notifications și să creăm una nouă după ce fiecare mesaj este trimis:

 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

De asemenea, trebuie să ștergem notificările după ce un utilizator selectează conversația și vede noile mesaje, așa că am adăugat acea parte la metoda select_conversation .

Să adăugăm un contor de notificări chiar lângă numele de utilizator:

 <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>

Acum, aplicația este gata, puteți deschide câteva browsere și puteți începe să testați capabilitățile în timp real ale Volt.

Voltul merită cu siguranță încercat

Chiar dacă cadrul Volt nu este la fel de matur și robust ca majoritatea cadrelor Ruby populare care există de ani de zile (în momentul de față Volt este încă în versiune beta), merită luat în considerare și studiat.

În cazul în care sunteți interesat, utilizați acest tutorial de cadru Ruby pentru a scoate Volt pentru o învârtire. Fiți cu ochii pe evoluțiile ulterioare, deoarece Volt arată ca un cadru Ruby foarte promițător chiar și în acest stadiu incipient de dezvoltare.

Există o mulțime de funcții noi interesante și sunt destul de sigur că Volt va deveni mai relevant în următorii doi ani, pe măsură ce mai mulți oameni vor începe să experimenteze cu el. Datorită unui număr de caracteristici inovatoare, mulți dezvoltatori s-ar putea îndrăgosti de Volt și s-ar putea folosi pentru următorul lor proiect Ruby.