동적 애플리케이션을 위한 유망한 Ruby 프레임워크인 Volt를 만나보세요

Volt는 데이터가 풍부한 애플리케이션을 위해 설계된 Ruby 프레임워크입니다. 서버 측과 클라이언트 측 모두 Ruby(이후 OPAL을 사용하여 JS로 컴파일됨)로 작성되므로 개발자는 Javascript 코드를 한 줄도 작성하지 않고도 매우 동적인 애플리케이션을 작성할 수 있습니다. 저와 같은 Ruby 팬이라면 이 프레임워크를 좋아할 것입니다.

웹 애플리케이션을 훨씬 더 동적으로 만들려는 시도에서 Angular.js, Backbone.js 및 Ember.js와 같은 프런트 엔드 Javascript 프레임워크가 많은 인기를 얻었습니다. 그러나 이러한 프레임워크는 종종 백엔드 애플리케이션이 유용해야 하므로 Ruby on Rails 및 Django와 같은 웹 프레임워크와 함께 사용됩니다.

반면에 Ruby 프레임워크인 Volt는 백엔드와 동적 프론트엔드를 관리할 수 있습니다. 두 기능 모두 핵심에 밀접하게 통합되어 있기 때문에(사실 Volt는 데이터 바인딩의 장점을 활용하는 MVVM 아키텍처에 가깝습니다.) 개발자는 이러한 애플리케이션을 빠르게 구축할 수 있습니다.

기본적으로 제공되는 매우 멋진 기능은 Volt의 실시간 기능입니다. 실시간 애플리케이션을 만든 적이 있다면 프로세스가 어려울 수 있다는 것을 알고 있습니다. AJAX 폴링, 웹 소켓, SSE(Server-Sent Events)를 구현하거나 외부 서비스를 사용하여 애플리케이션에 복잡성을 추가하고 추가 비용을 발생시킬 수도 있습니다. . 다른 프레임워크와 달리 Volt는 웹 소켓을 통해 서버와의 연결을 유지하므로 각 작업에 대해 Ajax를 요청하는 대신 변경 사항을 모든 클라이언트에 즉시 푸시합니다. 이 작업을 위해 구성이 필요하지 않습니다.

볼트를 사용하여 채팅 애플리케이션 만들기

이 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'이라는 기본 구성 요소를 사용하겠습니다.

콘솔에서 'volt server' 명령을 실행하여 서버를 시작하고 localhost:3000으로 이동하여 브라우저에서 어떻게 보이는지 살펴보겠습니다.

 volt server

또한 콘솔에서 MongoDB를 시작하는 것을 잊지 마십시오.

 mongod

Volt에는 '홈' 및 '정보'를 비롯한 여러 기본 페이지가 함께 제공됩니다. 이들은 즉시 사용자 정의할 수 있습니다.

언급할 가치가 있는 또 다른 것은 페이지의 오른쪽 상단에 있는 로그인 버튼입니다. Volt에는 'volt-user-templates' gem을 통해 프레임워크에 통합된 "사용자" 기능이 있습니다. 이 기능은 상자에서 꺼내자마자 사용자를 등록하고 인증하는 방법을 제공합니다.

시작하기

이제 앱 작업을 시작하겠습니다. 우선 '정보' 페이지가 필요하지 않으므로 다음을 삭제할 수 있습니다. app/main/views/main/about.html 파일, app/main/controllers/main_controller.rb 의 정보 작업 , app/main/config/routes.rb 에서 /about 경로를 제거하고 app/main/views/main/main.html 에서 nav 링크를 제거하십시오.

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

이제 본격적으로 등록된 모든 사용자를 나열하여 시작하겠습니다.

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

이제 등록된 모든 사용자가 홈페이지에 나열됩니다. {{ }} 안에 작성된 코드는 실행되는 Ruby 코드입니다. 이런 식으로 사용자 컬렉션을 반복하고 각 컬렉션을 인쇄할 수 있습니다.

눈치채셨겠지만 'users'는 모든 사용자가 저장된 컬렉션의 이름입니다. 염두에 두어야 할 것은 속성 이름 앞에 밑줄 '' 이 추가되어 속성에 액세스된다는 것입니다. 이것이 작동하려면 먼저 main_controller.rb 파일의 맨 위에 코드 줄을 추가해야 합니다.

 model :store

Volt는 컨트롤러에서 액세스할 수 있는 여러 컬렉션 모델과 함께 제공되며 각각은 다른 위치에 정보를 저장합니다. 저장소 컬렉션 모델은 데이터 저장소에 데이터를 저장하고 여기서 컨트롤러를 사용하여 컨트롤러를 지정합니다(현재 지원되는 유일한 데이터 저장소는 MongoDB임). 어떻게 생겼는지 보기 위해 몇 명의 사용자를 만들어 보겠습니다.

지금은 이 페이지에 대한 흥미로운 내용이 없으며 등록된 사용자만 나열하고 있습니다. 이제 메시지를 보낼 사용자를 선택하고 목록에서 현재 로그인한 사용자의 이름을 제거하고(자신에게 메시지를 보낼 수 없어야 하므로) 인증된 사용자에게만 목록을 표시하고 싶습니다. 인증되지 않은 사용자에게 '방문' 페이지 표시:

 <: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는 현재(로그인한) 사용자 또는 nil을 반환합니다.

e-click 속성을 사용하면 해당 요소를 클릭할 때 호출될 컨트롤러에서 메서드를 선택할 수 있습니다.

속성 및 CSS

사실, 모든 'e-' 속성은 Volt의 이벤트 바인더이므로 예를 들어 컨트롤러에서 호출될 작업을 선택하기 위해 양식에 e-submit를 추가할 수 있습니다. '선택된' 사용자 ID를 매개변수에 추가하여 어느 것이 선택되었는지 알 수 있도록 하고 나중에 스타일을 지정할 수 있는 '활성'이라는 클래스를 추가합니다.

이제 컨트롤러에서 select_conversation 메서드를 생성해 보겠습니다.

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

그게 다야 – 페이지를 다시 확인하면 사용자 이름을 클릭할 때마다 URL이 변경되는 것을 볼 수 있습니다. 또한 'active' 클래스가 해당 요소에 추가되고 있으므로 CSS를 추가하여 표시되도록 합시다(앞으로 계속해서 나중에 추가할 항목에 대해 CSS를 추가하겠습니다).

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

이제 오른쪽에 각 사용자에게 메시지를 보낼 양식을 만들어 보겠습니다.

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

먼저 양식을 표시하기 전에 선택한 사용자가 있는지 확인한 다음 잠시 후에 정의할 컨트롤러의 메서드에서 현재 대화(선택한 사용자와의 대화)의 모든 메시지를 표시합니다. 그리고 맨 아래에는 새 메시지를 보내기 위한 양식이 표시됩니다.

입력 값은 데이터 저장소에 저장되는 것을 원하지 않기 때문에 페이지 컬렉션 모델에서 생성하는 속성입니다. 이제 컨트롤러에서 current_conversation 및 send_message 메서드를 정의해 보겠습니다.

 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

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 메서드에 추가했습니다.

사용자 이름 바로 옆에 알림 카운터를 추가해 보겠습니다.

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

이제 앱이 준비되었으므로 몇 가지 브라우저를 열고 Volt의 실시간 기능 테스트를 시작할 수 있습니다.

볼트는 확실히 시도해 볼 가치가 있습니다

Volt 프레임워크가 수년 동안 사용된 대부분의 인기 있는 Ruby 프레임워크만큼 성숙하고 강력하지는 않지만(Volt는 현재 베타 버전임) 고려하고 연구할 가치가 있습니다.

관심이 있는 경우 이 Ruby 프레임워크 자습서를 사용하여 Volt를 살펴보십시오. Volt는 이 초기 개발 단계에서도 매우 유망한 Ruby 프레임워크처럼 보이므로 추가 개발을 주시하십시오.

파이프라인에는 멋진 새 기능이 많이 있으며 더 많은 사람들이 실험을 시작함에 따라 향후 몇 년 동안 Volt가 더 관련성이 높아질 것이라고 확신합니다. 수많은 혁신적인 기능으로 인해 많은 개발자가 Volt와 사랑에 빠져 다음 Ruby 프로젝트에 사용할 수 있습니다.