thảo luận Trả lời tất cả những câu hỏi về Front End !!!

Cái một và hai thực ra có thể gộp chung vào. Nó trở thành "trải nghiệm người dùng"

Chúng ta, là những thanh niên trẻ tuổi, ít tiền, nhưng được trời ban cho cái gọi là thanh xuân. Mắt sáng, tai thính, tay chân linh hoạt, đã làm quen với internet nói chung, và website nói riêng từ nhỏ rồi. Nói chung có thể gọi là bản năng.

Tuy nhiên, ngoài kia, còn có một bộ phận đông đảo khác, là những anh chị em trung niên, U50 - 60, qua hơn nữa đời người mới được tiếp cận internet. Họ là những khách hàng tiềm năng vì họ có rất nhiều tiền. Và họ còn có:

- Mắt kém, không nhìn rõ chữ trên website

- Tay run, không thể trỏ chuột vào chính xác một mục nào đó, ví dụ như nút "Đặt hàng"

- Tai điếc, không thể nghe được âm thanh trong file audio trên website

- Lạc hậu. Trang web nào mà tầng tầng, lớp lớp là họ bó tay. Mặc dù họ muốn mua sản phẩm của ta đó, nhưng nhìn vô cái web như một rừng ma trận, không tìm thấy sản phẩm

- Và còn cơ số lớn những người khuyết tật, điếc, mù, câm, mù màu,.. Họ cũng có tiền, cũng muốn sử dụng website của ta, dịch vụ của ta. Nhưng lên internet sao mà phức tạp quá

Tất cả những đối tượng trên, đã được chứng minh là chiếm 20% (hoặc hơn) số lượng người dùng. Và cũng tương ứng ngần ấy doanh thu.

Nếu bác làm cho những đối tượng trên, cảm thấy thích thú khi ghé thăm website của bác, muốn mua hàng, đặt hàng, thì bác sẽ là một người kỹ sư thành công.
Cảm ơn bác, văn bác nghe hay quá, nghe xong nghĩ ngay đến giao diện thằng lazada :pudency:
 
Ưu nhược điểm của:
1. Server side rendering
2. Client side rendering
3. Hybrid? Pre-rendering

Mình tự học front-end (kiểu học cho biết). Nhờ bác giải thích giúp.
Hiện tại mình thấy (theo quan điểm cá nhân) server side rendering vẫn chiếm ưu thế?
1. SSD

a. Pros
  • Quick initial access: with SSR your website’s pages are immediately available to interact with for your users, even on slow Internet connections. On a CSR app, users can’t interact with your website until the JS bundle containing the entire site is 100% loaded, which can take a while on big websites. With a decent server, SSR can give you a great First Contentful Paint score, which improves the user experience (UX) and probably your SEO page ranking as well.
  • Great for SEO: the search engines don’t need to run your JavaScript to read and index your content. CSR gets indexed as well, but not as fast as SSR. If your business depends on traffic, you have to use SSR.
b. Cons
  • Slower page transitions: browsing from page to page is often much slower with SSR than on CSR — at least if your pages contain heavy/complex data. With SSR you’re basically rendering your app twice, once on the server, and once on the client.
  • Vulnerability: SSR sites are harder to keep secure because they have a bigger surface to attack than CSR sites. This is however not an issue if you or your developers know what they’re doing.
  • Complex caching: configuring your cache is usually more complex on SSR sites than CSR sites.
  • Server cost: SSR often needs a bigger and more powerful server to provide high-performance than CSR.
  • Higher latency: SSR sites tend to get a high latency if you get lots of traffic at the same time, which delays/slows down the browsing experience for everyone. CSR doesn’t suffer from this nearly as much. Latency is also known as ping rate which is usually measured in ms (milliseconds).
2. CSR

a. Pros

- High Performance: CSR generates on-demand HTML. It will not refresh or re-render the whole page, as with regular HTML pages. It is just pretending to be a separate page, but it renders the content on a single page. This saves a lot of both computation power and RAM, so it gets quicker results than server-side rendering (SSR)

- Speed: CSR generates the HTML required to be displayed. This means DOM only contains enough code which is expected to be displayed by the HTML content. So DOM can easily handle a chunk of elements with the hide and show events. Although DOM has to handle more code, it doesn't take much time to render. Due to lazy loading, CSR becomes much faster than server-side rendering.

- Reusable components: With CSR, we can reuse UI components across multiple pages or routes without having to request the server each time. This enhances usability and on-page performance.

b. Cons
- Slow at first: CSR loads the whole JavaScript the first time, then calls for API to get the data from the database and generate the HTML as per data. But loading the data for the first time takes a bit more time than server-side rendering.

- SEO problem: SEO stands for search engine optimization. CSR requires a two-wave process for JS rendering and indexing in a browser, generally by Google.
The first wave requests the source code, crawls, and then indexes the presented HTML. But in CSR we don't have much of the HTML because it takes time to convert from JavaScript to HTML.
In the second wave, after all resources become available, the browser returns the additional support and index to the search engine. This is not a problem with server-side rendering because in server-side rendering, the HTML is available for the first time itself.

- Caching issue: Since the HTML is not available in the initial render, browsers cannot cache the HTML structure of the page. One way to avoid this issue is to cache the JavaScript, but this may prove to be costly as JavaScript files can take up a lot of space in the browser's memory.
 
Ưu nhược điểm của:
1. Server side rendering
2. Client side rendering
3. Hybrid? Pre-rendering

Mình tự học front-end (kiểu học cho biết). Nhờ bác giải thích giúp.
Hiện tại mình thấy (theo quan điểm cá nhân) server side rendering vẫn chiếm ưu thế?
Tiếng anh hơi nhiều, bác cố gắng đọc nhé. Cơ bản thì SSR:

- Load ban đầu nhanh
Rất quan trọng, như thằng Google, enter phát ăn luôn.
Cái này gọi là first impression, ấn tượng đầu tiên. Tôi vào trang web nào, mà load lâu, là tôi cho chim cút

- Tối ưu SEO
Cái này cũng rất quan trọng luôn, trong thế giới mà mọi người đến với chúng ta thông qua google, chứ không phải qua cách gõ trực tiếp trên URL
Google ưu tiên thằng nào, thì thằng đó thắng

Hai điểm quan trọng như thế nên SSR mới đang chiếm ưu thế, và cũng nhờ vậy mà cloud services đang bùng nổ trên global luôn!
 
Bạn nào mới ra trường, đang chuyển nghề, đang có những thắc mắc về Web Development mà không biết hỏi ai?

Hãy hỏi và mình sẽ trả lời :)
câu của em thì sao thím, em người thực dụng nên cái gì cũng cứ phải đi vào chi tiết, lý thuyết cũng phải đi vào thực hành, nói đông nói tây phải ra sản phẩm luôn phen
 
đang tự học vuejs, cho hỏi cái thớt
mình bị lỗi duplicate modal, tức là khi click 1 cái thì hiện ra 2 cái modal chồng lên nhau

mình thiết kế template như thế này
component cha1 import component cha2 , trong component cha2 mình import 1 component chứa 1 cái modal , ở component cha2 mình có 1 nút để show cái modal kia lên, nhưng nó lại bị tình trạng duplicate modal

cách mình tự giải quyết( hoạt động nhưng quá củ chuối) : import component modal ở component cha1 luôn, bên cha2 thì chỉ gọi lệnh show để show modal, mình nói nó củ chuối vì khi mình emit dữ liệu từ modal phải truyền về cha1, rồi từ cha1 mình mới bind sang cha2 bằng pros, nhìn nó ngu thực sự @@, ở đây chỉ mới là 1 vài component, chứ nếu có cả đống thì cách này là ngu thật
Bạn mô tả lỗi như vầy thì tôi không hiểu.

Bạn mô tả lỗi lại giống bác #27 thử xem.

Có keywords và code thì càng tốt.
 
Tiếng anh hơi nhiều, bác cố gắng đọc nhé. Cơ bản thì SSR:

- Load ban đầu nhanh
Rất quan trọng, như thằng Google, enter phát ăn luôn.
Cái này gọi là first impression, ấn tượng đầu tiên. Tôi vào trang web nào, mà load lâu, là tôi cho chim cút

- Tối ưu SEO
Cái này cũng rất quan trọng luôn, trong thế giới mà mọi người đến với chúng ta thông qua google, chứ không phải qua cách gõ trực tiếp trên URL
Google ưu tiên thằng nào, thì thằng đó thắng

Hai điểm quan trọng như thế nên SSR mới đang chiếm ưu thế, và cũng nhờ vậy mà cloud services đang bùng nổ trên global luôn!
Còn cái 3.Pre-rendering thì sao bác?
 
Cách đọc docs và học cách dùng một thư viện or 1 package mới như nào cho hiệu quả vậy bác
Có một cái gọi là pyramid resources, dựa trên số lượng tài liệu và mức độ chính xác

  • Top 1 (chất lượng nhất): W3C và TC39
  • Top 2 (chất lượng nhì): Platform resources (trang web chính của lib, frame, lang đó)
  • Top 3 (tương tự): Status monitors
  • Top 4 (thượng vàng hạ cám, cần chọn lọc): Community resources

Để lát viết tiếp, giờ đi ăn đã
 
React thì có table component nào ngon vậy thớt. Trước làm Ant Design đang ngon mà giờ đang nghiên cứu thằng react-table dạng headlessUI, cơ mà vẫn thấy khó nhằn
 
Từ backend thì gặp rắc rối với CSS là nhiều. Nên cho mình hỏi là
1. Ở React đang phổ biến styled component và SCSS, tailwind css, Antd thì ở dự án lớn ng ta dùng như thế nào là best practice.
2. Như ý ở trên build CSS như thế nào để tăng tính responsive từ mức global build rồi apply xuống từng component.
3. Việc layout cho từng component hiện đại bây giờ như thế nào? Xài Row, Col của bootstrap hay xài css flexbox, grid hay xài layout của Antd lun (https://ant.design/components/space/)
 
Em học qua html ,css , bootrap, jquery, javascript, Java C# C++ python rồi. Đã code dự án mẫu. Nhưng làm dự án cuối kì, thằng bạn kêu công ty t có data, be, api sẵn rồi, m về lắp front end vào là xong... Mình không hình dung ra lắp như thế nào? và có tool nào hỗ trợ không vì nó có hỏi mình thường xài tool gì để lập trình fe trong khi mình mới học cơ bản- code tay.
 
Em học qua html ,css , bootrap, jquery, javascript, Java C# C++ python rồi. Đã code dự án mẫu. Nhưng làm dự án cuối kì, thằng bạn kêu công ty t có data, be, api sẵn rồi, m về lắp front end vào là xong... Mình không hình dung ra lắp như thế nào? và có tool nào hỗ trợ không vì nó có hỏi mình thường xài tool gì để lập trình fe trong khi mình mới học cơ bản- code tay.
thím search gg xem FE vs BE giao tiếp với nhau như nào là hiểu :LOL:
 
Em chào a và tất cả mọi người, hiện tại em đang học được những kiến thức cơ bản về FE(html, css, js, reactjs) và muốn đi thực tập để học hỏi thêm những kiến thức thực tế. A và mn có thể chia sẻ những phần nội dung trọng tâm để phỏng vấn khi đi thực tập FE k ạ. (Pv FE thì có nặng về thuật toán k ạ)
Em xin cảm ơn ạ
 
Em học qua html ,css , bootrap, jquery, javascript, Java C# C++ python rồi. Đã code dự án mẫu. Nhưng làm dự án cuối kì, thằng bạn kêu công ty t có data, be, api sẵn rồi, m về lắp front end vào là xong... Mình không hình dung ra lắp như thế nào? và có tool nào hỗ trợ không vì nó có hỏi mình thường xài tool gì để lập trình fe trong khi mình mới học cơ bản- code tay.
Mình thắc mắc bạn học qua như thế nào ???, nếu học rồi thì không hỏi vậy đâu
 
Em học qua html ,css , bootrap, jquery, javascript, Java C# C++ python rồi. Đã code dự án mẫu. Nhưng làm dự án cuối kì, thằng bạn kêu công ty t có data, be, api sẵn rồi, m về lắp front end vào là xong... Mình không hình dung ra lắp như thế nào? và có tool nào hỗ trợ không vì nó có hỏi mình thường xài tool gì để lập trình fe trong khi mình mới học cơ bản- code tay.
Sợ voãi nhái, các thanh niên combo "học qua" + combo 1 tỷ keywords :LOL:
 
Em chào a và tất cả mọi người, hiện tại em đang học được những kiến thức cơ bản về FE(html, css, js, reactjs) và muốn đi thực tập để học hỏi thêm những kiến thức thực tế. A và mn có thể chia sẻ những phần nội dung trọng tâm để phỏng vấn khi đi thực tập FE k ạ. (Pv FE thì có nặng về thuật toán k ạ)
Em xin cảm ơn ạ
CSS: centering element, flex, grid
JS: ES6, asynchronous. (Có thể có thuật toán, nắm chắc array + object method là được)
React: hook, render Component. + Bonus Các thư viện (cty liệt kê cái nào thì học cái đó)
 
Back
Top