Phỏng vấn cùng một Pỏn hub Web Developer
Trong lúc lang thang trên cõi mạng, mình tình cờ đọc được một bài viết khá thú vị của anh David Walsh - anh này là Senior Software Engineering tại MetaMask, và cũng từng là Senior Software Engineering tại Mozilla, chia sẻ rất nhiều bài viết hay về front-end và JavaScript.
Đây là bài phỏng vấn mà anh này thực hiện vào tháng 10 năm 2019 cùng với một Web developer khi đó đang làm việc tại Pỏn hub.
Nội dung bài phỏng vấn tập trung hoàn toàn vào chủ đề công nghệ. Vậy nên bạn đọc hãy lưu ý không lan man vào những khía cạnh khác.
Dưới đây là bản dịch tiếng Việt do mình thực hiện. Mời các bạn cùng theo dõi:
Bất kể quan điểm của bạn về nội dung "khâm diêu" là gì, chúng ta cũng không thể phủ nhận được tác động to lớn mà ngành công nghiệp này đã mang lại trong việc thúc đẩy sự phát triển của web. Từ việc đẩy giới hạn phát video của trình duyệt đến việc đẩy quảng cáo thông qua WebSocket để tránh bị trình chặn quảng cáo phát hiện, bạn phải thực sự thông minh để có thể bắt kịp sự thay đổi của web.
Gần đây, tôi đã may mắn có cơ hội phỏng vấn một Web developer đang làm việc tại trang web người lớn lớn nhất trên Internet: Pỏn hub. Tôi muốn tìm hiểu về công nghệ họ dùng, cách mà các Web API có thể được cải thiện, và cảm giác khi làm việc tại một trang web người lớn là như thế nào. Mời bạn cùng đọc!
Lưu ý: Ngành công nghiệp người lớn có tính cạnh tranh rất cao, vì vậy có một số câu hỏi mà họ không thể trả lời. Tôi tôn trọng việc họ cần giữ bí mật nghề nghiệp của mình.
Hỏi: Các trang web người lớn rõ ràng hiển thị rất nhiều nội dung nhạy cảm. Trong quá trình phát triển, các bạn có sử dụng nhiều placeholder images and videos không? Mức độ khác biệt giữa nội dung và trải nghiệm trong giai đoạn phát triển và sản phẩm cuối cùng là bao nhiêu?
Đáp: Chúng tôi thực ra không sử dụng placeholders khi phát triển website! Cuối cùng, điều quan trọng là code và chức năng – còn giao diện thì ở thời điểm này, chúng tôi đã quá quen thuộc với nó rồi. Ban đầu chắc chắn có một chút thời gian để làm quen, nhưng tất cả chúng tôi đều thích nghi khá nhanh.
Hỏi: Khi nói đến các cam streams và các đoạn mã quảng cáo từ bên thứ ba, các bạn mock những tài nguyên động và quan trọng đó như thế nào trong quá trình phát triển tính năng và trang web?
Đáp: Trong quá trình phát triển, trình phát video (player) được chia thành 2 thành phần. Trình phát cơ bản sẽ triển khai các chức năng core và kích hoạt các events. Việc phát triển được thực hiện trong một môi trường cách ly (clean room). Khi tích hợp vào trang web, chúng tôi muốn các đoạn mã từ bên thứ ba và quảng cáo thực sự chạy để có thể phát hiện lỗi sớm nhất có thể trong quy trình. Trong một số trường hợp đặc biệt, chúng tôi sẽ làm việc với các bên quảng cáo để cho phép chúng tôi tự kích hoạt các events mà bình thường sẽ xảy ra một cách ngẫu nhiên.
Hỏi: Một trang trung bình có lẽ chứa ít nhất một video, quảng cáo dạng GIF, một vài bản cam performer previews, và thumbnails của các video khác. Các bạn đo lường hiệu năng của trang như thế nào, và làm sao để giữ cho trang hoạt động hiệu quả nhất có thể? Có mẹo nào bạn có thể chia sẻ không?
Đáp: Chúng tôi sử dụng một vài hệ thống đo lường khác nhau:
- Trình phát video của chúng tôi sẽ gửi lại các số liệu (metrics) liên quan đến hiệu suất phát video và mức độ sử dụng tổng thể.
- Một hệ thống RUM (Real User Monitoring) từ bên thứ ba** để đo hiệu năng của toàn trang.
- Các WebpageTest private instances để chạy các script tests tại các trung tâm dữ liệu của AWS. Chúng tôi chủ yếu dùng cái này để xem xét điều gì đã xảy ra tại một thời điểm cụ thể. Nó cũng cho phép chúng tôi xem "waterfall" từ các vị trí và providers khác nhau.
Hỏi: Tôi đoán rằng tính năng quan trọng và phức tạp nhất ở phía front-end chính là trình phát video. Từ việc tích hợp quảng cáo trước video, đánh dấu các khoảnh khắc nổi bật trong video, thay đổi tốc độ phát, và nhiều tính năng khác — làm thế nào để các bạn duy trì hiệu năng, chức năng và độ ổn định của thành phần này?
Đáp: Chúng tôi có một nhóm riêng chuyên trách phát triển trình phát video, và ưu tiên hàng đầu của họ là liên tục giám sát hiệu năng và độ hiệu quả. Để làm được điều đó, chúng tôi sử dụng hầu như mọi công cụ có sẵn: công cụ đo hiệu năng của trình duyệt, web page tests, các chỉ số đo lường, ... Độ ổn định và chất lượng được đảm bảo thông qua quy trình kiểm thử QA kỹ lưỡng cho bất kỳ bản cập nhật nào mà chúng tôi thực hiện.
Hỏi: Có bao nhiêu người trong nhóm chuyên trách video? Có bao nhiêu lập trình viên front-end trong nhóm?
Đáp: Tôi nghĩ rằng, xét theo quy mô của sản phẩm, thì kích thước của nhóm ở mức trung bình. (Chỗ này ý là không muốn chia sẻ số người cụ thể, chỉ so sánh với đa số team khác thì số lượng thành viên ở mức trung bình)
Hỏi: Trong thời gian bạn làm việc với các trang web người lớn, bạn đã thấy bức tranh tổng thể của front-end thay đổi như thế nào? Những Web API mới nào đã giúp công việc của bạn dễ dàng hơn?
Đáp: Tôi chắc chắn đã chứng kiến rất nhiều cải tiến ở mọi khía cạnh của thế giới front-end:
- Từ CSS thuần đến cuối cùng là sử dụng LESS và Mixins, rồi đến hệ thống Grid linh hoạt với media queries và thẻ
<picture>để hỗ trợ nhiều độ phân giải và kích thước màn hình khác nhau. - jQuery và jQueryUI đang dần bị loại bỏ, và chúng tôi đang quay lại với lập trình hướng đối tượng hiệu quả hơn bằng JavaScript thuần (vanilla JS). Một số framework hiện nay cũng khá thú vị.
- Chúng tôi rất thích API
IntersectionObservermới, cực kỳ hữu ích để tải ảnh theo cách tối ưu hơn (lazy loading). - Chúng tôi cũng đã bắt đầu thử nghiệm với Picture-in-Picture API, để tạo hiệu ứng video nổi (floating video) trên một số trang – chủ yếu để thu thập phản hồi từ người dùng về ý tưởng này.
Hỏi: Nhìn về tương lai, có Web API nào mà bạn muốn được thay đổi, cải thiện hoặc thậm chí là được tạo ra?
Đáp: Một vài API mà chúng tôi muốn được cải thiện như:
- Beacon: gặp vấn đề trên iOS, không hoạt động đúng với sự kiện
pageHide. - Fetch: không hỗ trợ theo dõi tiến trình tải về (download progress) và không cung cấp cách nào để chặn (intercept) các request.
- WebRTC: các Simulcast layers vẫn bị giới hạn, ngay cả khi dùng để chia sẻ màn hình, nếu độ phân giải không đủ lớn.
- Service Workers: các lệnh gọi tới
navigator.serviceWorker.registerkhông bị chặn bởi bất kỳ Fetch event handler nào trong Service Worker.
Hỏi: WebVR đã có nhiều cải tiến trong vài năm qua — hiện tại WebVR hữu ích đến mức nào, và các trang web người lớn đang đầu tư bao nhiêu công sức để hỗ trợ nội dung VR? Haptics (thiết bị phản hồi xúc giác) có vai trò gì trong WebVR trên trang của các bạn không?
Đáp: Chúng tôi đang nghiên cứu WebXR và cách tốt nhất để thích ứng với các trường hợp sử dụng tính toán không gian (spatial computing) đang nổi lên. Là nền tảng phân phối lớn nhất, chúng tôi cần hỗ trợ cả nhà sáng tạo lẫn người dùng, bất kể họ muốn trải nghiệm nội dung như thế nào. Tuy nhiên, chúng tôi vẫn đang trong giai đoạn khám phá xem nội dung và nền tảng nên trông như thế nào trong các môi trường mới này.
Chúng tôi là nền tảng lớn đầu tiên hỗ trợ VR, thị giác máy tính (computer vision), và virtual performers — và sẽ tiếp tục thúc đẩy công nghệ mới cũng như open web.
Hỏi: Với rất nhiều kiểu media và nội dung khác nhau trên mỗi trang, đâu là các yếu tố quan trọng nhất khi so sánh giữa desktop và mobile, nếu có?
Đáp: Chủ yếu là do sự giới hạn về chức năng bởi hệ điều hành và loại trình duyệt. iOS và Android là ví dụ điển hình — mỗi bên có một tập hợp hoàn toàn khác nhau về quyền truy cập và tính năng.
Ví dụ, một số thiết bị iOS không cho phép chúng tôi dùng trình phát video tùy chỉnh khi ở chế độ toàn màn hình (Fullscreen), và ép buộc sử dụng native QuickTime player. Điều đó là thứ bắt buộc phải cân nhắc khi phát triển các ý tưởng mới. Trong khi đó, Android cho phép toàn quyền kiểm soát, và chúng tôi có thể triển khai toàn bộ tính năng của mình vào chế độ Fullscreen.
Adaptive streaming qua HLS cũng là một ví dụ khác — IE và Edge rất kén chọn về chất lượng HLS streaming. Trong một số trường hợp, chúng tôi phải chặn các higher qualities, nếu không video sẽ liên tục bị giật và xuất hiện lỗi hình ảnh.
Hỏi: Hiện tại, các trang web người lớn mà bạn làm việc hỗ trợ tối thiểu những trình duyệt nào? Internet Explorer đã bị loại bỏ chưa?
Đáp: Chúng tôi đã hỗ trợ Internet Explorer trong một thời gian rất dài, nhưng gần đây đã ngừng hỗ trợ tất cả phiên bản cũ hơn IE11. Đồng thời, chúng tôi cũng ngừng sử dụng Flash cho trình phát video. Hiện tại, chúng tôi tập trung chủ yếu vào Chrome, Firefox và Safari.
Hỏi: Rộng hơn một chút, bạn có thể chia sẻ một chút về technical stack điển hình của một trang web người lớn? Cả phía server và/hoặc phía front-end? Các bạn đang dùng những thư viện nào?
Đáp: Hầu hết các trang của chúng tôi sử dụng những thành phần cơ bản sau:
- Nginx
- PHP
- MySQL
- Memcached và/hoặc Redis
Ngoài ra còn có một số công nghệ khác được dùng tùy theo từng trường hợp, như:
- Varnish
- ElasticSearch
- Node.js
- Go
- Vertica
Về phía frontend, chúng tôi chủ yếu sử dụng JS thuần (vanilla JavaScript), chúng tôi cũng đang dần loại bỏ jQuery, và bắt đầu thử nghiệm với các framework, chủ yếu là Vue.js.
Hỏi: Từ góc nhìn của người ngoài cuộc, các trang web người lớn nhìn chung có vẻ khá giống nhau: nhiều thumbnails, nội dung tổng hợp, cam performers, quảng cáo,... Với tư cách là người làm việc trực tiếp, điều gì làm nên sự khác biệt giữa các trang web người lớn?
Đáp: Chúng tôi đầu tư rất nhiều công sức để mỗi thương hiệu đều có nét riêng ở nhiều cấp độ như:
- Thư viện nội dung
- Trải nghiệm người dùng (UX) và các tính năng
- Bên cạnh đó là nhiều thuật toán khác nhau để mang lại sự độc đáo trong cách phân phối và đề xuất nội dung.
Hỏi: Trước khi nộp đơn và phỏng vấn tại công ty hiện tại của bạn, bạn có suy nghĩ gì về việc có thể sẽ làm cho một trang web người lớn? Bạn có do dự gì không? Nếu có thì điều gì đã giúp bạn vượt qua nỗi lo đó?
Đáp: Thật ra điều đó chưa bao giờ khiến tôi bận tâm, vì thách thức công nghệ ở đây quá hấp dẫn. Viễn cảnh hàng triệu người có thể tương tác với những tính năng do tôi xây dựng là một động lực rất lớn. Và điều đó nhanh chóng trở thành sự thật — ngay lần đầu tiên sản phẩm của tôi được đưa lên sản phẩm thật, tôi cực kỳ tự hào, thậm chí tôi đã khoe ngay với bạn bè để họ vào xem thử!
Ngoài ra, việc nội dung người lớn sẽ không bao giờ biến mất cũng mang lại sự yên tâm về sự ổn định nghề nghiệp!
Hỏi: Xét về sản phẩm cuối cùng, việc nói với người khác rằng bạn làm cho một trang web người lớn không giống như làm ở một công ty thiết kế web bình thường. Vậy có sự kỳ thị nào khi bạn chia sẻ với bạn bè, gia đình, hay người quen rằng bạn làm trong ngành này không? Bạn có do dự gì khi nói điều đó với người khác không?
Đáp: Tôi rất tự hào khi được làm việc trên những sản phẩm như thế này. Những người thân thiết với tôi đều biết và thấy rất tò mò. Nó luôn là một chủ đề thú vị để trò chuyện, đôi khi là chuyện cười, và thật sự thì nó rất đáng để tìm hiểu.
Hỏi: Với kinh nghiệm từng làm ở các công ty ngoài ngành nội dung người lớn, bạn thấy có sự khác biệt nào trong môi trường làm việc khi chuyển sang làm cho các trang web người lớn không?
Đáp: Không khí ở đây rất thoải mái và thân thiện. Tôi không thấy có khác biệt lớn nào về văn hóa làm việc so với những agency khác, ngoại trừ việc quy mô ở đây lớn hơn nhiều so với bất kỳ nơi nào tôi từng làm trước đó.
Hỏi: Là một lập trình viên front-end, bạn thường làm việc gần gũi nhất với những nhóm nào? Phương thức giao tiếp hằng ngày phổ biến nhất là gì?
Đáp: Chúng tôi làm việc chặt chẽ với các backend developers, các QA testers, và các product managers. Hầu hết thời gian chỉ cần đi thẳng đến bàn nhau để trao đổi trực tiếp. Nếu không tiện, thì chat qua MS Teams cũng rất phổ biến. Sau đó là đến email.
Hỏi: Cuối cùng, bạn có điều gì muốn chia sẻ với tư cách là một lập trình viên front-end đang làm việc cho các trang web người lớn không?
Đáp: Cảm giác được tham gia xây dựng trải nghiệm người dùng cho một sản phẩm có lượng truy cập khổng lồ thực sự rất phấn khích. Chúng tôi thường đi đầu trong các xu hướng và thay đổi lớn trong công nghệ, điều này khiến công việc luôn thú vị và đầy thử thách.
Kết thúc phỏng vấn
Tôi thấy buổi phỏng vấn này rất mở mang kiến thức. Tôi hơi bất ngờ khi biết họ không sử dụng các hình ảnh khi phát triển tính năng và thiết kế. Thật phấn khích khi thấy Pỏn hub tiếp tục đi đầu trong việc ứng dụng các công nghệ web tiên tiến như WebXR, WebRTC và Intersection Observer. Tôi cũng rất vui khi biết rằng họ đã bắt đầu loại bỏ jQuery và cho rằng các Web API hiện tại là đủ mạnh để làm điều đó.
Tôi chỉ ước có thể khai thác thêm nhiều mẹo kỹ thuật cụ thể hơn từ họ — đặc biệt là các mẹo tối ưu hiệu năng và thủ thuật thông minh. Chắc chắn rằng đằng sau source code của họ là cả một kho báu kiến thức!
Còn bạn thì sao? Bạn sẽ đặt thêm câu hỏi gì nếu có cơ hội phỏng vấn họ?
Các bạn có thể đọc nội dung bài viết gốc tại đây.
LỜI NHẮN
Theo dõi blog của mình để đọc thêm về những câu chuyện thú vị trong ngành CNTT: https://tmsanghoclaptrinh.com/
Facebook CLB Lập trình - THPT Ngọc Tảo: https://www.facebook.com/clb.it.ngoctao/
Youtube Tờ Mờ Sáng học Lập trình: https://www.youtube.com/@tmsanghoclaptrinh
Hẹn gặp lại 👋
All rights reserved
