Hướng dẫn can i use python for frontend and backend? - tôi có thể sử dụng python cho giao diện người dùng và phụ trợ không?

Sê-ri Django đầy đủ:

Nội dung chính Show

• Giới thiệu
• Giải pháp 1: SPA (Ứng dụng một trang)
• Quy trình làm việc
• Phụ trợ
• Ưu và nhược điểm
• Giải pháp 2: SSR (kết xuất phía máy chủ)
• Tiểu sử
• Quy trình làm việc
• Phụ trợ
• Ưu và nhược điểm
• Ứng dụng Web không thân thiện với SEO và hơi chậm trên tải trang đầu tiên.
• Tiểu sử
• Phụ trợ
• Ưu và nhược điểm
• Tài nguyên
• Giải pháp 4: Hybrid
• Biểu đồ
• Quy trình làm việc
• Nhập khẩu
• Ưu và nhược điểm
• Giải pháp 4: Hybrid
• Trong giải pháp này, chúng tôi đã kết hợp chặt chẽ trước và phụ trợ
• Quy trình làm việc
• Ưu và nhược điểm
• Tài nguyên
• Quy trình làm việc
• Đối với khung JavaScript, có nhiều tùy chọn và tôi khuyên bạn nên đọc Đánh giá khung JavaScript nhẹ (cho các nhà phát triển Django)
• Ưu và nhược điểm
• Tài nguyên
• Trong giải pháp này, chúng tôi đã kết hợp chặt chẽ trước và phụ trợ

1. Cách kết hợp frontend và phụ trợ
2. Đánh giá khung JavaScript nhẹ
3. Hướng dẫn Favicon Django
4. Cách phát triển email HTML đáp ứng ở Django

Ebook: Hướng dẫn dứt khoát về Hotwire và Django

Giới thiệu

Đối với nhiều nhà phát triển web Python, cách làm cho Frontend và phụ trợ hoạt động cùng nhau là một vấn đề khó hiểu.

Vì vậy, tôi viết bài đăng trên blog này để nói về một số giải pháp

Sau khi đọc, bạn sẽ biết sáu giải pháp để kết hợp frontend và phụ trợ, và những ưu và nhược điểm.

Giải pháp 1: SPA (Ứng dụng một trang)

Ứng dụng một trang (SPA) là một ứng dụng web hoặc trang web tương tác với người dùng bằng cách tự động viết lại trang web hiện tại với dữ liệu mới từ máy chủ web, thay vì phương thức mặc định của trình duyệt web tải toàn bộ trang mới.

Quy trình làm việc

1. Ứng dụng Frontend là một trang web tĩnh được phục vụ bởi máy chủ web như Nginx.
2. Khi người dùng truy cập trang web, index.html được phục vụ và trình duyệt tải xuống các tệp JS, CSS.
3. Sau đó, trình duyệt sẽ sử dụng ứng dụng JS để init React / Vue và xây dựng cây Dom.
4. Và sau đó ứng dụng React / Vue sẽ tương tác với phụ trợ API thông qua giao thức REST API hoặc GraphQL.

Frontend

Để tạo một ứng dụng Frontend đã tách rời:

1. Chúng ta có thể sử dụng created-react-app để tạo ứng dụng React.
2. Chúng ta có thể sử dụng Vue-cli để tạo một ứng dụng Vue.

Phụ trợ

Phần phụ trợ sẽ hoạt động như máy chủ API:

Django

Đối với Django Dev, chúng tôi cũng có thể cần các gói dưới đây.

1. Django Rest Framework sẽ giúp chúng tôi xây dựng API REST.
2. DJ-Rest-Auth hoặc Djoser cho hỗ trợ API API.
3. Các tiêu đề Django-CORS sẽ giúp giải quyết vấn đề chia sẻ tài nguyên có nguồn gốc chéo (CORS).
4. Graphene-Django tích hợp GraphQL vào dự án Django của bạn.
5. cookiecutter-django-rest

Bình giữ nhiệt

Đối với Flask Dev, chúng tôi cũng có thể cần các gói dưới đây.

1. flask-restful
2. flask-api
3. flask-graphql
4. flask-cors

Fastapi

1. Corsmiddleware

Ưu và nhược điểm

Pros:

1. Thân thiện với cả nhà phát triển Frontend và Prodend, và có nhiều tài nguyên học tập trực tuyến về kiến ​​trúc này.
2. Cấu trúc tách rời là sạch sẽ và dễ dàng để mở rộng quy mô.

Cons:

1. Không thể hưởng lợi từ một số tính năng django tuyệt vời, bình (mẫu, biểu mẫu, auth được xây dựng)
2. Ứng dụng Web không thân thiện với SEO và hơi chậm trên tải trang đầu tiên.

Giải pháp 2: SSR (kết xuất phía máy chủ)

Tiểu sử

Trước tiên hãy kiểm tra lý do tại sao SSR được giới thiệu và vấn đề gì nó giải quyết được.

Nếu bạn tạo ứng dụng web với mẫu SPA ở trên, hãy kiểm tra mã nguồn HTML, bạn sẽ thấy một cái gì đó như thế này:

Chúng tôi nhận thấy một số vấn đề ở đây:

1. ở trên trống, công cụ tìm kiếm không thể hiểu trang là gì mà không chạy JS.
2. Trình duyệt cần chạy một số mã JS để xây dựng cây Dom (có thể cần gửi một số yêu cầu bổ sung), điều này làm cho trang web hơi chậm để tải.

Quy trình làm việc

Ứng dụng Frontend là một trang web tĩnh được phục vụ bởi máy chủ web như Nginx.

Notes:

1. Khi người dùng truy cập trang web, index.html được phục vụ và trình duyệt tải xuống các tệp JS, CSS.
2. Sau đó, trình duyệt sẽ sử dụng ứng dụng JS để init React / Vue và xây dựng cây Dom.
3. Và sau đó ứng dụng React / Vue sẽ tương tác với phụ trợ API thông qua giao thức REST API hoặc GraphQL.
4. Frontend

Frontend

1. Để tạo một ứng dụng Frontend đã tách rời:
2. Chúng ta có thể sử dụng created-react-app để tạo ứng dụng React.

Phụ trợ

Phần phụ trợ sẽ hoạt động như máy chủ API:

Ưu và nhược điểm

Pros:

1. Thân thiện với cả nhà phát triển Frontend và Prodend, và có nhiều tài nguyên học tập trực tuyến về kiến ​​trúc này.
2. Cấu trúc tách rời là sạch sẽ và dễ dàng để mở rộng quy mô.

Cons:

1. Không thể hưởng lợi từ một số tính năng django tuyệt vời, bình (mẫu, biểu mẫu, auth được xây dựng)

Ứng dụng Web không thân thiện với SEO và hơi chậm trên tải trang đầu tiên.

• Giải pháp 2: SSR (kết xuất phía máy chủ)

Tiểu sử

Trước tiên hãy kiểm tra lý do tại sao SSR được giới thiệu và vấn đề gì nó giải quyết được.

Nếu bạn tạo ứng dụng web với mẫu SPA ở trên, hãy kiểm tra mã nguồn HTML, bạn sẽ thấy một cái gì đó như thế này:

Chúng tôi nhận thấy một số vấn đề ở đây:

1. ở trên trống, công cụ tìm kiếm không thể hiểu trang là gì mà không chạy JS.
2. Trình duyệt cần chạy một số mã JS để xây dựng cây Dom (có thể cần gửi một số yêu cầu bổ sung), điều này làm cho trang web hơi chậm để tải.
3. Kết xuất phía máy chủ (SSR) là một kỹ thuật phổ biến để hiển thị ứng dụng một trang (SPA) phía máy khách trên máy chủ và sau đó gửi một trang được hiển thị đầy đủ cho máy khách. Điều này cho phép các thành phần động được phục vụ dưới dạng đánh dấu HTML tĩnh.
4. Khi người dùng truy cập trang web, Node web server cố gắng kết xuất thành phần thành HTML ở phía máy chủ.

Node web server gửi yêu cầu đến phụ trợ API để tìm nạp dữ liệu và hiển thị các thành phần để xây dựng HTML.

Ví dụ, nhiều ứng dụng WordPress hiện nay là Jamstack vì nó nhanh và an toàn hơn.

Frontend

1. Gatsby
2. Next.js
3. Nuxt.js

Bạn nên triển khai ứng dụng Frontend để

1. Netlify
2. Vercel

Chức năng không có máy chủ

Nếu bạn không hiểu index.html5 là gì, bạn có thể tìm hiểu các chức năng của NetLify

Phụ trợ

Giải pháp phụ trợ gần giống như Solution 1: SPA (single-page application).

Ưu và nhược điểm

Pros:

1. Nhanh chóng, an toàn

Cons:

1. Tạo ra mất thời gian, bạn cần xây dựng mỗi khi bạn cập nhật nội dung.
2. Không thân thiện với động, bạn cần viết thêm một số mã để xử lý index.html7.

Tài nguyên

1. Trang chủ Jamstack

Giải pháp 4: Hybrid

Trong giải pháp này, chúng tôi đã kết hợp chặt chẽ trước và phụ trợwe have tightly coupled frontend and backend

Biểu đồ

1. Ứng dụng Frontend Biên dịch và gói tài sản Frontend Frontend.
2. Sau khi hoàn thành việc xây dựng, các tài sản được xây dựng được đặt tại thư mục index.html8.
3. Django hoặc Flask sẽ coi các tài sản được xây dựng là tài sản bình thường và không quan tâm họ đến từ đâu.do not care where they come from.
4. Django hoặc Flask sẽ thêm liên kết JS và CSS vào mẫu để đảm bảo trình duyệt có thể tải xuống.

Quy trình làm việc

Notes:

1. Khi người dùng truy cập trang web, máy chủ web xử lý yêu cầu, hãy hiển thị HTML bằng mẫu Django hoặc Jinja.
2. Trình duyệt tải xuống CSS, JS và các tài sản khác.
3. Trình duyệt chạy JavaScript để rắc HTML được bật máy chủ.

Frontend

1. Chúng ta có thể sử dụng Python-WebPack-B-B-bilerplate để Jump Start Frontend Project được gói bởi WebPack.
2. Đối với khung JavaScript, có nhiều tùy chọn và tôi khuyên bạn nên đọc Đánh giá khung JavaScript nhẹ (cho các nhà phát triển Django)

Nhập khẩu

Đối với những người không thích giải pháp Frontend Bundle như index.html9, bạn có thể kiểm tra REST API0

Bây giờ Khung Rails mới nhất đã sử dụng công nghệ này https://github.com/rails/importmap-rails

Và gói django cũng có sẵn trên https://github.com/dropseed/django-importmap

Ưu và nhược điểm

Pros:

1. Nhanh chóng, an toàn
2. Tạo ra mất thời gian, bạn cần xây dựng mỗi khi bạn cập nhật nội dung.
3. Không thân thiện với động, bạn cần viết thêm một số mã để xử lý index.html7.
4. Tài nguyên

Cons:

1. Trang chủ Jamstack

Giải pháp 4: Hybrid

Trong giải pháp này, chúng tôi đã kết hợp chặt chẽ trước và phụ trợ

Biểu đồ

Ứng dụng Frontend Biên dịch và gói tài sản Frontend Frontend.you do not want to move the whole project to SPA, then you can choose this solution.

Sau khi hoàn thành việc xây dựng, các tài sản được xây dựng được đặt tại thư mục index.html8.

Quy trình làm việc

Notes:

1. Khi người dùng truy cập trang web, máy chủ web xử lý yêu cầu, hãy hiển thị HTML bằng mẫu Django hoặc Jinja.
2. Trình duyệt tải xuống CSS, JS và các tài sản khác.

Frontend

1. Trình duyệt chạy JavaScript để rắc HTML được bật máy chủ.
2. Chúng ta có thể sử dụng Python-WebPack-B-B-bilerplate để Jump Start Frontend Project được gói bởi WebPack.

Ưu và nhược điểm

Pros:

1. Nhanh chóng, an toàn
2. Tạo ra mất thời gian, bạn cần xây dựng mỗi khi bạn cập nhật nội dung.

Cons:

1. Không thân thiện với động, bạn cần viết thêm một số mã để xử lý index.html7.

Tài nguyên

Trang chủ Jamstack

Quy trình làm việc

Notes:

1. Khi người dùng truy cập trang web, máy chủ web xử lý yêu cầu, hãy hiển thị HTML bằng mẫu Django hoặc Jinja.
2. Trình duyệt tải xuống CSS, JS và các tài sản khác.
3. Trình duyệt chạy JavaScript để rắc HTML được bật máy chủ.
4. Chúng ta có thể sử dụng Python-WebPack-B-B-bilerplate để Jump Start Frontend Project được gói bởi WebPack.

Đối với khung JavaScript, có nhiều tùy chọn và tôi khuyên bạn nên đọc Đánh giá khung JavaScript nhẹ (cho các nhà phát triển Django)

1. django-react-templatetags
2. python-react
3. Nhập khẩu

Ưu và nhược điểm

Pros:

1. Nhanh chóng, an toàn

Cons:

1. Tạo ra mất thời gian, bạn cần xây dựng mỗi khi bạn cập nhật nội dung.

Tài nguyên

• Trang chủ Jamstack
• Giải pháp 4: Hybrid

Trong giải pháp này, chúng tôi đã kết hợp chặt chẽ trước và phụ trợ

Biểu đồ

Ứng dụng Frontend Biên dịch và gói tài sản Frontend Frontend.

Sau khi hoàn thành việc xây dựng, các tài sản được xây dựng được đặt tại thư mục index.html8.

1. Django hoặc Flask sẽ coi các tài sản được xây dựng là tài sản bình thường và không quan tâm họ đến từ đâu.
2. Django hoặc Flask sẽ thêm liên kết JS và CSS vào mẫu để đảm bảo trình duyệt có thể tải xuống.
3. Quy trình làm việc
4. Khi người dùng truy cập trang web, máy chủ web xử lý yêu cầu, hãy hiển thị HTML bằng mẫu Django hoặc Jinja.

Trình duyệt tải xuống CSS, JS và các tài sản khác.