Ruby on Rails Documentattion

# Frontend

  • Introduction

    Rails is a backend framework that provides all of the features you need to build modern web applications, such as routing (opens new window), validation (opens new window), caching (opens new window), queues (opens new window), file storage (opens new window), and more. However, we believe it's important to offer developers a beautiful full-stack experience, including powerful approaches for building your application's frontend.

    There are two primary ways to tackle frontend development when building an application with Rails, and which approach you choose is determined by whether you would like to build your frontend by leveraging PHP or by using JavaScript frameworks such as Vue and React. We'll discuss both of these options below so that you can make an informed decision regarding the best approach to frontend development for your application.

  • Using Embedded Ruby

    Embedded Ruby enables you to embed ruby language to HTML.To make it clearer: Is the engine needed to be able to use the Ruby language with all its features inside HTML code.

    ERb is an extremely light-weight templating language that provides convenient, short syntax for displaying data, iterating over data, and more:

    <h1>First User Information</h1>
<ol>
  <li>User id: <%= @user.id %></li>
  <li>User name: <%= @user.name %></li>
  <li>User email: <%= @user.email %></li>
</ol>
    1
    2
    3
    4
    5
    6

    When building applications in this fashion, form submissions and other page interactions typically receive an entirely new HTML document from the server and the entire page is re-rendered by the browser. Even today, many applications may be perfectly suited to having their frontends constructed in this way using simple ERb templates.

  • Using Vue / React

    Although it's possible to build modern frontends using Rails and Livewire, many developers still prefer to leverage the power of a JavaScript framework like Vue or React. This allows developers to take advantage of the rich ecosystem of JavaScript packages and tools available via NPM.

    However, without additional tooling, pairing Laravel with Vue or React would leave us needing to solve a variety of complicated problems such as client-side routing, data hydration, and authentication. Client-side routing is often simplified by using opinionated Vue / React frameworks such as Nuxt (opens new window) and Next (opens new window); however, data hydration and authentication remain complicated and cumbersome problems to solve when pairing a backend framework like Rails with these frontend frameworks.

← Starter Kick →