Web-Käyttöliittymä
Tapaa Volt, lupaava rubiinikehys dynaamisille sovelluksille
Volt on Ruby-kehys, joka on suunniteltu datarikkaille sovelluksille. Sekä palvelin- että asiakaspuolet on kirjoitettu Ruby-muodossa (joka sitten käännetään JS: ään OPAL: n avulla), joten kehittäjä voi kirjoittaa hyvin dynaamisia sovelluksia ilman, että hänen tarvitsee kirjoittaa yhtä riviä Javascript-koodia. Jos olet Rubiinifani kuten minä, rakastat tätä kehystä.
Yrittäessään tehdä verkkosovelluksista paljon dynaamisempia käyttöliittymän Javascript-kehykset, kuten Angular.js, Backbone.js ja Ember.js, ovat saaneet paljon suosiota. Nämä kehykset vaativat kuitenkin usein back-end -sovelluksen olevan hyödyllinen, joten niitä käytetään yhdessä verkkokehysten kanssa, kuten Ruby on Rails ja Django.
Toisaalta Ruby-kehys Volt pystyy hallitsemaan taustaa ja dynaamista käyttöliittymää. Koska molemmat toiminnot on integroitu tiukasti ytimeen (itse asiassa Volt on enemmän kuin MVVM-arkkitehtuuri, joka hyödyntää datan sidonnan etuja), se antaa kehittäjän rakentaa nämä sovellukset nopeasti.
Erittäin hieno ominaisuus, joka tulee laatikosta, on Voltin reaaliaikainen ominaisuus. Jos olet koskaan tehnyt reaaliaikaisia sovelluksia, tiedät, että prosessi voi olla haastava - olet todennäköisesti toteuttanut AJAX-kyselyn, verkkopistorasiat, palvelinten lähettämät tapahtumat (SSE) tai jopa käyttänyt ulkoisia palveluita, lisäämällä sovelluksen monimutkaisuutta ja jopa aiheuttamalla lisäkustannuksia. . Toisin kuin muut kehykset, Volt pitää yhteyden palvelimeen hengissä (verkkopistokkeiden kautta), joten sen sijaan, että tekisi Ajax-pyyntöjä jokaisesta toiminnasta, se ajaa muutokset välittömästi kaikille asiakkaille. Konfigurointia ei tarvita, jotta tämä toimisi.
Voltin käyttäminen chat-sovelluksen luomiseen
Tässä Ruby-kehysoppaassa aion viedä sinut läpi reaaliaikaisen sovelluksen luomisen Voltin avulla ja mikä on parempi tapa kuin chat-sovellus osoittaa kykynsä, koska chat on edelleen reaaliaikaisten sovellusten ensimmäinen käyttötapa.
Ensinnäkin, asennetaan Volt ja MongoDB. Jälkimmäistä prosessia ei käsitellä yksityiskohtaisesti:
gem install volt brew install mongodb mkdir -p /data/db (luo dbpath)
chown `id -u` /data/db (change the owner to have the proper dbpath permissions) Nyt olemme valmiita luomaan ensimmäisen sovelluksemme, kutsumme sitä chatiksi. Voimme tehdä sen helposti parilla rivillä:
volt new chat cd chat Asiakirjarakenteella on joitain yhtäläisyyksiä Railsin kanssa. Tärkein ero Rails-käyttäjien huomaa on, että sovelluksessa on ylimääräinen kansio, joka sisältää muut kansiot, kuten varat, ohjaimet, mallit ja näkymät, tämä ylimääräinen kansio on 'komponentti'.
Komponentti on sovelluksen erillinen osa. Kaikki komponentin sisällä olevat sivut hahmonnetaan lataamatta sivua uudelleen, koska kaikki kyseisen komponentin tiedostot ladataan alkuperäisen http-pyynnön kanssa, joten jos käymme eri komponentin sivulla, tehdään uusi http-pyyntö ja sivu ladataan uudelleen '. Tässä esimerkissä käytetään oletuskomponenttia nimeltä ”main”.
Aloitetaan palvelin suorittamalla ”volt server” -komento konsolissa, ja katsotaan miten se näyttää selaimessa siirtymällä osoitteeseen localhost: 3000:
volt server Älä myöskään unohda käynnistää MongoDB: tä konsolissa:
mongod Voimme huomata, että Voltilla on useita oletussivuja, mukaan lukien Koti ja Tietoja. Nämä voidaan mukauttaa heti.
Toinen mainitsemisen arvoinen asia on kirjautumispainike sivun oikeassa yläkulmassa. Voltilla on 'käyttäjä' -toiminto, joka on integroitu kehykseen 'volt-user-templates' -helmi, joka tarjoaa tavan rekisteröidä ja todentaa käyttäjät heti laatikosta.
Päästä alkuun
Aloitetaan nyt sovelluksemme kehittäminen. Ensinnäkin emme tarvitse Tietoja-sivua, jotta voimme jatkaa ja poistaa seuraavat: app/main/views/main/about.html tiedosto, noin toiminto app/main/controllers/main_controller.rb, poista /about reitti app/main/config/routes.rb ja navigointilinkki app/main/views/main/main.html
Aloitetaan nyt asioista ja aloitetaan luetteloimalla kaikki rekisteröidyt käyttäjät:
{{ 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 }} Ensinnäkin tarkistamme, onko käyttäjä valittu ennen lomakkeen näyttämistä, sitten näytämme kaikki viestit nykyisestä keskustelusta (keskustelu valitun käyttäjän kanssa) ohjaimen menetelmästä, jonka määrittelemme vähän, ja alareunassa näytetään lomake uusien viestien lähettämistä varten.
Huomaa, että syötteen arvo on attribuutti, jonka luomme sivukokoonpanomalliin, koska emme halua sen tallennettavan tietovarastoon. Määritetään nyt current_conversation ja send_message menetelmät ohjaimessa:
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-menetelmässä lisätään uusi viesti kokoelmaan, jos viesti ei ole tyhjä (tarkistamme linjassa, jotta meidän ei tarvitse sotkea vahvistusten kanssa tällä hetkellä), asetamme sitten sivun ._new_message to ‘’ joten tyhjennämme syöttökentän.
Voisimme haluta lisätä kyseisen rivin select_conversation: n loppuun menetelmä. Nykyinen keskustelutapa kysyy vain _messages kokoelma viestejä valitun käyttäjän ja nykyisen käyttäjän välillä.
Kokeile reaaliaikaisia ilmoituksia
Lopuksi haluaisin saada jonkinlaisen ilmoitusjärjestelmän, jotta käyttäjät voisivat nähdä, kun muut käyttäjät lähettävät heille viestejä.
Lisätään uusi kokoelma nimeltä _notifications ja luo uusi jokaisen viestin lähettämisen jälkeen:
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 Lisäksi meidän on poistettava ilmoitukset, kun käyttäjä valitsee keskustelun ja näkee uudet viestit, joten lisäsin kyseisen osan select_conversation menetelmä.
Lisätään ilmoituslaskuri käyttäjänimen viereen:
{{user._name}} {{ if unread_notifications_from(user).count > 0 }} {{ unread_notifications_from(user).count }} {{ end }} Nyt sovellus on valmis, voit avata pari selainta ja alkaa testata Voltin reaaliaikaisia ominaisuuksia.
Volt on ehdottomasti kokeilun arvoinen
Vaikka Volt-kehys ei ole yhtä kypsä ja vankka kuin suurin osa suosituista Ruby-kehyksistä, jotka ovat olleet olemassa vuosia (Voltin hetkellä se on vielä beetaversiossa), kannattaa harkita ja tutkia.
Jos olet kiinnostunut, käytä tätä Ruby-kehyksen opetusohjelmaa viedä Volt ulos pyörittämään. Pidä silmällä jatkokehitystä, koska Volt näyttää hyvin lupaavalta Ruby-kehykseltä jo tässä kehitysvaiheen alkuvaiheessa.
Valmistelussa on paljon hienoja uusia ominaisuuksia, ja olen melko varma, että Voltista tulee merkityksellisempi parin seuraavan vuoden aikana, kun yhä useammat ihmiset alkavat kokeilla sitä. Monien innovatiivisten ominaisuuksien vuoksi monet kehittäjät voivat rakastua Voltiin ja käyttää sitä seuraavaan Ruby-projekti .
