Temui Volt, Kerangka Ruby yang Menjanjikan Untuk Aplikasi Dinamis

Volt adalah kerangka kerja Ruby yang dirancang untuk aplikasi kaya data. Sisi server dan klien ditulis dalam Ruby (yang kemudian dikompilasi ke JS menggunakan OPAL), jadi ini memungkinkan pengembang untuk menulis aplikasi yang sangat dinamis tanpa harus menulis satu baris kode Javascript. Jika Anda adalah penggemar Ruby seperti saya, Anda akan menyukai kerangka kerja ini.

Dalam upaya untuk membuat aplikasi web jauh lebih dinamis, kerangka kerja Javascript front-end seperti Angular.js, Backbone.js dan Ember.js telah mendapatkan banyak popularitas. Akan tetapi, kerangka kerja ini sering memerlukan aplikasi back-end agar berguna, sehingga mereka digunakan bersama dengan kerangka kerja web seperti Ruby on Rails dan Django.

Di sisi lain, kerangka kerja Ruby Volt mampu mengelola back-end dan front-end yang dinamis. Karena kedua fungsi terintegrasi erat ke dalam intinya (pada kenyataannya, Volt lebih seperti arsitektur MVVM, memanfaatkan keuntungan dari pengikatan data), ini memungkinkan pengembang untuk membangun aplikasi ini dengan cepat.

Sebuah fitur yang sangat keren yang keluar dari kotak adalah fitur real-time Volt. Jika Anda pernah membuat aplikasi waktu nyata, Anda tahu prosesnya bisa jadi menantang – Anda mungkin menerapkan polling AJAX, soket web, Server-Sent Events (SSE) atau bahkan menggunakan layanan eksternal, menambah kerumitan aplikasi dan bahkan menimbulkan biaya tambahan . Tidak seperti kerangka kerja lain, Volt menjaga koneksi dengan server tetap hidup (melalui soket web), jadi alih-alih membuat permintaan Ajax untuk setiap tindakan, Volt mendorong perubahan secara instan ke semua klien. Tidak diperlukan konfigurasi agar ini berfungsi.

Menggunakan Volt Untuk Membuat Aplikasi Obrolan

Dalam tutorial kerangka kerja Ruby ini saya akan membawa Anda melalui proses pembuatan aplikasi waktu nyata menggunakan Volt, dan cara apa yang lebih baik daripada aplikasi obrolan untuk menunjukkan kemampuannya, karena obrolan tetap menjadi kasus penggunaan nomor satu dari aplikasi waktu nyata.

Pertama-tama, mari kita instal Volt dan MongoDB. Proses terakhir tidak akan dibahas secara rinci:

 gem install volt brew install mongodb

 mkdir -p /data/db

(buat dbpath)

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

Sekarang kita siap untuk membuat aplikasi pertama kita, sebut saja 'chat'. Kita dapat melakukannya dengan mudah dalam beberapa baris:

 volt new chat cd chat

Struktur dokumen memiliki beberapa kesamaan dengan Rails. Perbedaan utama yang akan diperhatikan oleh pengguna Rails adalah bahwa kami memiliki folder tambahan di dalam aplikasi yang berisi folder lainnya seperti aset, pengontrol, model, dan tampilan, folder tambahan ini adalah 'Komponen'.

Komponen adalah bagian aplikasi yang terisolasi. Semua halaman di dalam Komponen dirender tanpa memuat ulang halaman karena semua file untuk komponen tersebut dimuat dengan permintaan http awal, jadi jika kita mengunjungi halaman dari komponen yang berbeda, permintaan http baru akan dibuat dan halaman akan 'dimuat ulang '. Untuk contoh ini mari kita gunakan komponen default yang disebut 'main'.

Mari kita mulai server dengan menjalankan perintah 'volt server' di konsol, dan lihat tampilannya di browser dengan menavigasi ke localhost:3000:

 volt server

Juga jangan lupa untuk memulai MongoDB di konsol:

 mongod

Kita dapat melihat bahwa Volt hadir dengan sejumlah halaman default, termasuk 'Home' dan 'About'. Ini dapat disesuaikan segera.

Hal lain yang layak disebutkan adalah tombol login di sisi kanan atas halaman. Volt memiliki fungsionalitas "pengguna" yang terintegrasi ke kerangka kerja melalui permata 'volt-user-templates', yang menyediakan cara untuk mendaftarkan dan mengotentikasi pengguna, langsung dari kotak.

Mulai

Sekarang, mari kita mulai mengerjakan aplikasi kita. Pertama-tama kita tidak memerlukan halaman 'Tentang' sehingga kita dapat melanjutkan dan menghapus yang berikut: File app/main/views/main/about.html , tentang tindakan di app/main/controllers/main_controller.rb , hapus /about route di app/main/config/routes.rb dan tautan nav di app/main/views/main/main.html .

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

Sekarang mari kita mulai bisnis dan mulai dengan mendaftar semua pengguna terdaftar:

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

Sekarang semua pengguna terdaftar terdaftar di beranda. Perhatikan bahwa kode yang ditulis di dalam {{}} adalah kode Ruby yang dieksekusi. Dengan cara ini kami dapat mengulangi koleksi pengguna dan mencetak masing-masing.

Seperti yang mungkin Anda perhatikan, 'pengguna' adalah nama koleksi tempat semua pengguna disimpan; sesuatu yang perlu diingat adalah bahwa atribut diakses dengan garis bawah '' yang ditambahkan ke nama atribut. Agar ini berfungsi, pertama-tama kita perlu menambahkan baris kode di bagian atas file main_controller.rb :

 model :store

Volt hadir dengan beberapa model koleksi yang dapat diakses dari pengontrol, dan masing-masing model tersebut menyimpan informasi di tempat yang berbeda. Model koleksi toko menyimpan data di penyimpanan data, dan di sini kami menentukan pengontrol untuk menggunakannya (saat ini satu-satunya penyimpanan data yang didukung adalah MongoDB). Mari buat beberapa pengguna untuk melihat seperti apa tampilannya.

Saat ini tidak ada yang menarik tentang halaman ini, kami hanya mencantumkan pengguna terdaftar. Sekarang saya ingin dapat memilih pengguna untuk mengirim pesan, hapus nama pengguna yang saat ini masuk dari daftar (karena dia seharusnya tidak dapat mengirim pesan ke dirinya sendiri), tampilkan daftar hanya untuk diautentikasi pengguna dan tampilkan halaman 'landing' kepada pengguna yang tidak diautentikasi:

 <: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 mengembalikan pengguna saat ini (masuk) atau nihil.

Atribut e-click memungkinkan kita memilih metode dari pengontrol yang akan dipanggil ketika elemen itu diklik.

Atribut Dan CSS

Faktanya, semua atribut 'e-' adalah pengikat peristiwa di Volt, jadi misalnya kita dapat menambahkan e-submit ke formulir untuk memilih tindakan yang akan dipanggil pada pengontrol. Kami akan menambahkan ID pengguna 'terpilih' ke parameter sehingga kami dapat mengetahui mana yang telah dipilih dan menambahkan kelas yang disebut 'aktif' yang nantinya dapat kami gaya.

Sekarang mari kita buat metode select_conversation di controller:

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

Dan hanya itu – jika Anda memeriksa halaman itu lagi, Anda dapat melihat bahwa URL berubah setiap kali Anda mengklik nama pengguna. Juga, kelas 'aktif' sedang ditambahkan ke elemen itu, jadi mari tambahkan beberapa CSS untuk membuatnya terlihat (saya akan melanjutkan dan menambahkan CSS untuk item yang akan kita tambahkan nanti):

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

Sekarang mari kita buat formulir di sisi kanan untuk mengirim pesan ke setiap pengguna:

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

Pertama, kami memeriksa apakah ada pengguna yang dipilih sebelum menampilkan formulir, lalu kami menampilkan semua pesan dari percakapan saat ini (percakapan dengan pengguna yang dipilih) dari metode di pengontrol yang akan kami definisikan sedikit, dan di bagian bawah kami menampilkan formulir untuk mengirim pesan baru.

Perhatikan bahwa nilai input adalah atribut yang kita buat pada model kumpulan halaman karena kita tidak ingin itu disimpan di penyimpanan data. Sekarang mari kita definisikan metode current_conversation dan send_message di controller:

 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

Dalam metode send_message kami menambahkan pesan baru ke koleksi jika pesan tidak kosong (kami memeriksa inline sehingga kami tidak perlu mengacaukan validasi saat ini), lalu kami mengatur halaman ._new_message to '' jadi kami mengosongkan bidang input.

Kita mungkin ingin menambahkan baris itu ke akhir metode select_conversation juga. Metode percakapan saat ini hanya menanyakan koleksi _messages untuk pesan antara pengguna yang dipilih dan pengguna saat ini.

Selesaikan Dengan Pemberitahuan Waktu Nyata

Sebagai penutup, saya ingin memiliki semacam sistem notifikasi, sehingga pengguna dapat melihat kapan pengguna lain mengirim pesan kepada mereka.

Mari tambahkan koleksi baru bernama _notifications dan buat koleksi baru setelah setiap pesan terkirim:

 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

Selain itu, kita perlu menghapus notifikasi setelah pengguna memilih percakapan dan melihat pesan baru, jadi saya menambahkan bagian itu ke metode select_conversation .

Mari tambahkan penghitung notifikasi tepat di sebelah nama pengguna:

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

Sekarang aplikasi sudah siap, Anda dapat membuka beberapa browser dan mulai menguji kemampuan real-time Volt.

Volt Pasti Layak Dicoba

Meskipun kerangka kerja Volt belum matang dan kokoh seperti kebanyakan kerangka kerja Ruby populer yang telah ada selama bertahun-tahun (saat Volt masih dalam versi beta), itu layak untuk dipertimbangkan dan dipelajari.

Jika Anda tertarik, gunakan tutorial kerangka kerja Ruby ini untuk mengeluarkan Volt. Pantau terus perkembangan selanjutnya, karena Volt terlihat seperti kerangka kerja Ruby yang sangat menjanjikan bahkan pada tahap awal pengembangan ini.

Ada banyak fitur baru yang keren dan saya cukup yakin Volt akan menjadi lebih relevan selama beberapa tahun ke depan, karena semakin banyak orang mulai bereksperimen dengannya. Karena sejumlah fitur inovatif, banyak pengembang bisa jatuh cinta dengan Volt dan menggunakannya untuk proyek Ruby berikutnya.