TÌM HIỂU VỀ FRONT-END ENGINEER

25-02-2019 21:25

Từ lúc mới ra mắt khái niệm đến hiện tại, Front-end Engineer (Kỹ sư Front-end) đã tạo ra những thảo luận khác nhau về vai trò của vị trí này với front-end developer (Lập trình front-end), đặ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. ITPlus Academy sẽ chỉ ra những đặc điểm cụ thể của front-end engineer nhé.

Quá trình ra đời của Front-end engineer

Về cơ bản, hầu như front-end engineer với front-end developer 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.

Front-end engineer tiếp cận theo góc độ nào

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.

Trở thành Front-end Engineer cần phải biết những gì?

Học cách tiếp cận với HTML semantic coding.
Học thiết kế CSS theo modules hoặc sử dụng một CSS pre-processor như LESSSCSS. Tìm hiểu các best-practice cho CSS, tối ưu hoá các code CSS đồng thời phải cải thiện tính maintainable.
Hiểu cách hoạt động của các engine đằng sau trình duyệt. Tìm hiểu các nguyên lí của browser, cách chúng load các tài nguyên từ bên ngoài.
Tìm hiểu sâu về DOM – Document Object Model hoặc các mà JS render ra HTML DOM trên trình duyệt, cách thức luân chuyển DOM, DOM events và các chủ đề tương tự.
Học kĩ về RAW JavaScript trước khi học JQuery
Thành thạo một CSS Framework. Tìm hiểu các công cụ liên quan tới Framework đó và các tối ưu hoá khi chạy code ở môi trường production.
Tìm hiểu về kiến trúc client-server và network performance evaluation để hiểu rõ các mà các tài nguyên được load vào trình duyệt (có thể sử dụng Chrome Developer Tool để quan sát).
Học về HTTP và HTTP VERBS cũng như HTTP REQUEST.
Biết CLI terminal hoặc bash
Thành thạo một công cụ automation/build tool như Grunt hoặc Webpack – biết làm sao để buld các package code thành những đoạn minify/uglify CSS và JS, tối ưu hoá và dọn sạch rác và các tài nguyên không dùng.
Học cách sử dụng các lệnh của Git, thử sử dụng trên Github hoặc Bitbucket. Tìm hiểu các vấn đề về xử lí branch, conflict code và đánh tags version bằng Git.
Tìm hiểu về Docker, container structure và cách một số web server hoạt động (Server Apache/Nginx chẳng hạn). Viết các file config webserver Nginx hoặc Apache.