Sự khác nhau giữa Front-end Engineer và Front-end Developer

Tóm tắt

– Không lâu về trước, khi khái niệm front-end engineering lần đầu tiên được đưa ra trong ngành phát triển web, tui hay đọc các bài thảo luận về sự khác nhau giữa hai khái niệm này. – Tuy khái niệm front-end engineer không có gì là quá mới mẻ, tuy nhiên vẫn còn khá nhiều cuộc tranh cãi và nhiều hiểu lầm liên quan tới hai khái niệm này, đặc biệt là trong những năm điên rồ gần đây của giới front-end và sự phất lên của Javascript.

Chi tiết

Vậy cuối cùng là engineer khác gì developer ở front-end side? 😏 Về cơ bản, hầu như nó khác biệt trong các tiếp cận phát triển trang web. Theo cách truyền thống, front-end developer bắt đầu với việc tiếp nhận một tài liệu Photoshop hoặc bản vẽ wireframe, layout từ Sketch hoặc Adobe XD chả hạn, sau đó implement và phát triển giao diện web. Trong trường hợp này, các tools chính mà developer sử dụng chỉ cần là code editor (Sublime Text, Vim, Notepad etc.), trình duyệt Web và một devtool (thường là Chrome Developer Tool) là đủ. Hầu như những việc mà họ cần làm là biến các bản mẫu từ Photoshop (hoặc XD) thành các sản phẩm web chạy được trên trình duyệt. Không có page load speed optimization, không có tối giảm HTTP request hoặc vấn đề nào về hiệu năng khác được quan tâm. Tuy nhiên không chỉ đơn giản như vậy, với sự bùng nổ của các thiêt bị di động, iOS và Android OS, hiện tại hơn 50% website user là người dùng di động trên các trình duyệt màn hình nhỏ, được truy cập từ các mạng khác nhau từ 3G, 4G, Wifi mang đến một sự đau đầu nhẹ cho front-end developer về responsive giao diện hoặc các vấn đề về tối ưu tốc độ tải cho mạng di động. Sau đó, với việc ra mắt CSS3 media query đã giúp cho các front-end developer rất nhiều trong việc làm giao diện responsive, tương thích nhiều màn hình từ desktop, tablet tới mobile, các CSS framework như Bootstrap cũng tích hợp sẵn responsive luôn. Các vấn đề về tốc độ tải và hiệu năng trên trình duyệt di động dần được chú ý hơn và đó là nơi mà các thuật ngữ về engineering được đặt ra. Cách tiếp cận của Front-end Engineer Các tiếp cận phát triển web hiện đại khác kiểu truyền thống ở nhiều khía cạnh khác nhau. Đầu tiên, sự khác biệt là về môi trường phát triển, tiếp theo là hiệu năng load trang và các vấn đề về hiệu năng được đặt lên cao. Thanks God nhờ có NODE.js và package manager NPM, các front-end engineer hiện đại phải làm việc với các bộ CLI (Command line interface) để sử dụng các thể loại build task. Front-end automation (tự động hoá) hay build task là để thực hiện các nhiệm vụ như dịch LESS SASS (các pre-processor giúp viết code CSS ngon hơn, dễ maintain hơn) thành CSS hoặc bundle (trộn) nhiều file CSS, JS lại thành 1 file để giảm số HTTP request từ client tới server, thứ góp phần quan trọng trong việc cải thiện hiệu năng từ front-end side. Càng ít HTTP request thì web bạn load càng ngon hơn và ít lỗi có thể xảy ra hơn. Ngoài ra build task còn có minify CSS, JS (giảm dung lượng file), các phần source-map hỗ trợ debugging tốt hơn, etc. Nhờ có các CSS framework như Bootstrap, Materialize hay nhiều cái khác nữa, việc viết layout CSS và thiết kế giao diện responsive đa trình duyệt trở nên đơn giản hơn nhiều. Tuy nhiên vấn đề của các framework này là, chúng được load sẵn ngay từ đầu (ở trình duyệt của user) với khá nhiều class CSS, thuộc tính và cả những đoạn JS script kể cả những phần không bao giờ xài trong project. Để dễ hình dung, ở một dự án web thực tế, bạn hầu như chỉ xài 30-50% resource của một framework (HTML/CSS class và JS plugin). Các thành phần bị bỏ rơi còn lại chỉ đơn giản trở thành rác, làm nặng thêm trang web của bạn đồng nghĩa với browser sẽ load lâu hơn, hiệu năng kém hơn. Để tối ưu hoá các thành phần sử dụng trong CSS framework, có thể viết các build task từ Grunt, Gulp, Bower hoặc Yeoman. Ví dụ, bạn có thể xài một grunt package để bundle tất cả script JS và CSS thành 1 file, Grunt ngoài ra cũng sẽ minify/uglify CSS và JS của bạn cho hiệu năng load nhanh hơn.

Sao chép liên kết

Đã sao chép liên kết

Posted Interests

Nhà tổ chức

techtalk.vn

Điều chỉnh thông tin 15:26 ngày February 25

Cập nhật tin tức từ site ở trên