Որտե՞ղ ես սահմանը դնում ֆրոնտենդ և բեքենդ զարգացման միջև։

Հատվածը անցնում է API մակարդակով: Բեկենդը պատասխանատու է՝

• բիզնես տրամաբանության համար
• տվյալների կառավարում (մասամբ, տվյալների բազա, cache)
• թույլտվություն և հաստատում (եթե չեն առանձնացվել առանձին ծառայության)
• տվյալների և գործառույթների տրամադրում API (REST, GraphQL և այլն)

Ֆրոնտենդը պատասխանատու է՝

• օգտագործողի ինտերֆեյսի համար (HTML, CSS)
• փոխազդեցության համար օգտագործողի հետ (JavaScript/Ruby Hotwire և այլն)
• տվյալների սպառման և ֆունկցիաների կանչի համար API-ի միջոցով
• ստացված տվյալների ներկայացման համար

Կլասիկ մոտեցման դեպքում, բեկենդը գեներացնում է HTML էջեր, ֆրոնտենդը միայն ավելացնում է ինտերակտիվությունը: SPA (Single Page Application)-ում սահմանը ավելի հստակ է, քանի որ փոխազդեցությունը կատարվում է բացառապես API-ի միջոցով:

Օրինակ՝

# app/controllers/api/users_controller.rb
# Բեկենդ՝ պատասխանատու օգտվողի տվյալների ստացման և ձևաչափման համար
class Api::UsersController < ApplicationController
  def show
    user = User.find(params[:id])
    render json: user.as_json(only: [:id, :name, :email])
  end
end

// app/javascript/packs/user_profile.js
// Ֆրոնտենդ՝ պատասխանատու տվյալների հարցման և ցուցադրման համար
document.addEventListener('DOMContentLoaded', () => {
  fetch(`/api/users/${userId}`) // userId-ը ստացվում է ֆրոնտից
    .then(response => response.json())
    .then(data => {
      document.getElementById('user-name').innerText = data.name;
      document.getElementById('user-email').innerText = data.email;
    });
});

Հիբրիդային մոտեցումներում, ինչպիսիք են Hotwire-ը, որոշ ռենդերային լոգիկան կարող է տեղափոխվել բեկենդ, բայց փոխազդեցությունը կառուցվում է տվյալների կամ HTML ֆрагմենտների փոխանցման վրա՝ հատուկ պրոտոկոլների (օրինակ՝ Turbo Streams) միջոցով:

# app/controllers/posts_controller.rb
# Բեկենդ՝ HTML ռենդեր՝ Turbo Stream-ի համար
class PostsController < ApplicationController
  def create
    @post = Post.new(post_params)
    if @post.save
      render turbo_stream: turbo_stream.append(:posts, partial: 'posts/post', locals: { post: @post })
    else
      # սխալների մշակումը
    end
  end

  private

  def post_params
    params.require(:post).permit(:body)
  end
end

<!-- _post.html.erb -->
<!-- HTML ֆրագմենտ, որը ուղարկվում է ֆրոնտենդին՝ Turbo Stream-ի միջոցով -->
<div>
  <%= post.body %>
</div>

Հիմնական սկզբունքը՝ բեկենդը տրամադրում է տվյալներ և ծառայություններ, ֆրոնտենդը օգտագործում է և վիզուալիզացնում է դրանք օգտագործողի համար։