Cách kết nối giữa frontend và backend

#1

Dạo này mình đang làm một số project với Node, và mình có thắc mắc nên dùng cách nào để kết nối trang web và server.

Mình biết được 2 cách như sau:

  1. Tách riêng web và server ra: khi nào cần thì web gọi API lấy dữ liệu về và xử lý
  2. Bỏ web vào chung backend cho server render dưới dạng template. Server sẽ trả về trang HTML được render luôn.

Cách 2 theo mình thì nó không tách biệt rõ ràng frontend và backend, và phải dùng một template engine và viết web theo cú pháp của nó (khá phức tạp) nên sẽ khó maintain hơn.
Mình nghiêng về cách 1 hơn, nhưng không rõ phải deploy và routing cho nó thế nào. Nếu điều hướng theo file .html và thư mục thì làm sao cho nó mất đi phần đuôi tệp, và như vậy có ảnh hưởng gì không.

Ví dụ như có 2 page là index.html và login.html.
Nếu dùng cách 2 thì mình bắt hai route là / trả về index.html và /login trả về login.html.
Còn cách 1 thì mình để 2 file trong cùng thư mục gốc và cho người dùng truy cập vào luôn. Trong 2 file ấy sẽ có script để gọi API tới server. Nhưng khi route đến phải đúng tên file, ví dụ /index.html và /login.html nó mới hiển thị.

Mình không rõ thực tế người ta làm như thế nào, hoặc có thể mình hiểu sai gì đó. Mong nhận được góp ý từ mọi người.

1 Like
#2

Nói câu này tức là bạn chưa hiểu frontend là gì và backend là gì. Nếu bạn đang hiểu thì hãy trả lời xem bạn hiểu như nào là frontend và backend

Nếu bạn dùng cách 2 thì bạn phải xử lý hết mọi thứ, cái cuối cùng người dùng thấy là hiển thị giao diện mà thôi, người dùng request trang / thì bạn phải xử lý kiểm tra xem có login hay chưa và hiển thị trang login hay index bên dưới, và bạn muốn rewrite hay không rewrite url đều được. Tức là trên trình duyệt vẫn là trang / nhưng nội dung có thể là login hoặc index. Thậm chỉ tất cả mọi page cũng đều có url là / luôn đều được

3 Likes
#3

Theo mình hiểu backend chỉ xử lý các logic phía server như database, còn frontend là làm ra giao diện để người dùng tương tác.

Cách 2 mình thấy không tách biệt rõ ràng frontend và backend vì server nó phải render các template rồi trả về HTML. Nếu như có 2 team, một team frontend chỉ làm giao diện và team backend thì họ sẽ làm việc với nhau như thế nào? Nếu trả về HTML như thế thì chẳng lẽ team backend phải viết template cho node render ra???

Thường thì những project mình làm trước giờ frontend là viết một đống html, css, js và dùng API lấy dữ liệu, nghĩa là backend đã có API rồi. Như mình trình bày ở trên thì nó là cách 1, và cách 1 có một số vấn đề chưa hiểu mà mình đã nói ở trên.

#4

cách 2 thì front end thích vẽ vời js css html gì thì cứ phang ở phần template (view) thôi có liên quan gì tới backend (model) đâu mà ko tách biệt với nhau được :V

logic model lo hết, controller hầu như chỉ có nhiệm vụ trả về View(template, context) là hết. Phần view thì lo render cái template với context kia, đâu có liên quan gì tới Model của backend :V Vậy thì dính chùm với nhau thế nào nhỉ :V Cách 1 trả về API thì chỉ khác chỗ thay vì trả về view(template, context) bây giờ chỉ trả về View(template) còn context cho vào API kia khác có tí ti chứ nhiêu :V

chưa kể cách 1 front end phải viết phần kết nối với API, có phải là làm cả nhiệm vụ của controller gì luôn đó ko? :V

7 Likes
#5

frontend làm ra giao diện bằng cách nào? bạn mở chrome, gõ google.com thì nhận được cái giao diện, cái giao diện đó đâu phải trình duyệt tự sinh ra hay không, hay từ đâu mà có (server của google làm gì để trả về cho cái giao diện đó?)
hoặc bạn viết web như cách 2 thì fronend ở đâu ra
maybe là bạn đang nhầm lẫn frontend (là cái thứ tương tác với người dùng) và kĩ thuật code frontend (là kĩ thuật để hiện thực frontend)

cái bạn chưa hiểu rõ là khái niệm frontend mà thôi, nó là lớp giao diện để người dùng tương tác
nó không có nghĩ là bộ combo những file .html .css .js (mặc dù hiểu vậy cũng không sai)
ở đây khi nói về web thì frontend là những gì trình duyệt của bạn tải về để hiển thị thành giao diện cho người dùng tương tác, và nó có thể đã được xử lý logic trước đó để ra được giao diện
nhìn chung giao diện mà bạn thấy cũng chỉ là text html mà thôi, làm thế nào người ta làm ra được đoạn text đó thì tùy người ta thôi
trong thực tế có nhiều bạn hiểu lầm Single Page Application (SPA) hoặc Client side rendering (CSR) mới là dev frontend, còn cánh 2 kia thì không có dev frontend

trong thực tế, cả cách 1 và 2 đều có rất nhiều cách để hiện thực, tùy vào combo dev sử dụng mà có những cách khác nhau

với cách 1, nếu là CSR thì có những framework lớn (Angular, React, Vue) có thệ sinh thái routing của nó làm chuyện đó cho mình, nếu là viết thuần static file html (vẫn có thể là csr) như bạn thì có thể dùng tính năng rewrite url của web server
với cách 2 thì cũng không bắt buộc phải dùng template engine, bạn đi bộ vẫn có thể đi được nhưng bạn vẫn chọn xe máy để đi lại, việc đi xe máy cũng là 1 tùy chọn. dễ thấy nhất chắc là code php thuần trộn trong html

cách 2 nghe có vẻ toàn là nhược điểm như vậy thì bây giờ người ta có xài nữa hay không? câu trả lời là có và nhiều, đơn giản là vì nó SEO tốt, là vì business của nó không cần phải có những ưu điểm của cách 1, và còn vài lý do khác

8 Likes
#6

À, thanks bác @kisuluoibieng và @tntxtnt, cơ bản là hiểu được sơ sơ rồi.

Có lẽ vậy, trước giờ toàn code một đống html, css kết nối API nên cứ nghĩ frontend không liên quan gì tới xử lý ở server.

1 Like
#7

Context trong frontEnd là gì vậy anh ?

1 Like
#8

Controller chỉ định template và truyền cho nó những thứ để render lên UI, gọi là context, kèm theo là các hàm phụ lực trong Controller :smiley:

5 Likes
#10

Tui cũng chưa rõ nữa@@
Nhưng mà theo như ông nói thì FE là thao tác trên VIEW(trong mô hình MVC) còn BE thì sẽ là người thao tác trên Model vs Controller đúng ta

  • Tui chưa hiểu BE và FE làm việc như thế nào á
#11

Chưa hiểu thì cứ làm thử một project website nhỏ nhỏ sẽ biết, lên github search mấy pet (side) project ấy.

2 Likes
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?