[Nghề IT] Lộ trình của một chuyên gia lập trình Web (Web Developer) 2019 – Phần 2. Front end là gì? Lập trình front end từ A đến Z

Tuy trên các trang tuyển dụng Front end developer là một trong những vị trí được tuyển dụng nhiều nhất với mức lương tương đối nhưng lướt qua nhiều thảo luận trên các diễn đàn, nhóm facebook về công nghệ thông tin có thể thấy vẫn còn rất nhiều các thắc mắc liên quan đến front end như front end là gì? phải học những gì, nên theo React hay Agular… Hầu hết những bạn mới bước chân vào lĩnh vực công nghệ thông tin hoặc thậm chí đã có ít nhiều kinh nghiệm đều còn khá mù mờ về vấn đề này chủ yếu biết đâu làm đấy và cũng chưa rõ mối liên hệ của các công nghệ là như thế nào. Vì lẽ đó, bài viết này hướng tới việc diễn giải những điều, những khái niệm cần biết về lập trình front end đồng thời đưa ra một lộ trình học tập để trở thành một front end developer từ mức chưa biết gì đến chuyên gia.

Bài viết là bài tiếp theo nằm trong series Nghề IT, bạn có thể tham khảo các bài khác của series này tại đây. Bây giờ chúng ta hãy bắt đầu với câu hỏi kinh điển:

Front end là gì?

Như đã biết trước đây, phần mềm là phần nằm trung gian giữa người dùng cuối và phần cứng có nhiệm vụ thực hiện một nhiệm vụ gì đó. Trong kiến trúc phần mềm, có thể có nhiều lớp giữa phần cứng và người dùng cuối. Mỗi cái có thể bao gồm một mặt trước (front end) tiếp xúc với người dùng cuối và một mặt sau (back end) tiếp xúc với hệ thống phần cứng. Đây là hai phần tách biệt giữa lớp trình bày (front end) và lớp truy cập dữ liệu (back end) của một phần mềm.

Front end là một sự trừu tượng, đơn giản hóa thành phần cơ bản bằng cách cung cấp giao diện thân thiện với người dùng, trong khi back end thường xử lý các logic liên quan đến nghiệp vụ và lưu trữ dữ liệu. Phần front end nằm ở phía phía khách hàng là bất kỳ thành phần nào được người dùng thao tác và tiếp xúc; phần back end thường nằm trên máy chủ và thường không được người dùng để tâm.

Tóm lại đối với phần mềm nói chung thì front end là phần vỏ ngoài, phần giao diện tương tác và tạo ra trải nghiệm phía người dùng.

Tương tự như vậy đối với web, front end là toàn bộ những gì mà khách truy cập thấy bao gồm các giao diện, tính năng, cấu trúc, font chữ, đồ họa, link liên kết, menu, nút điều hướng, tương tác và các ảnh động trên một website. Và tùy vào tính chất mà những website khác nhau sẽ có những tính năng tương tác cũng như cách thức điều hướng khác nhau.

Lập trình Front End là gì?

Phát triển front end hoặc lập trình front end hay front end development cho web vẫn là một khía cạnh khá mới bởi chỉ cách đây khoảng chục năm khi các công nghệ mạng và thiết bị di động chưa phát triển như hiện nay, front end đóng vai trò rất hạn chế. Nếu chúng ta nhìn lại giao diện của Facebook chục năm trước sẽ thấy điều này.

Đây là giao diện nguyên bản đầu tiên của Facebook vào năm 2005.

Thậm chí đến năm 2007, nó vẫn không khá hơn là mấy

Quả là một trời một vực so với giao diện hiện nay của chính Facebook, thậm chí ngay cả khi so với một trang bán hàng nước phổ thông. Chắc hẳn nếu cho bạn sử dụng giao diện này, chắc đa phần sẽ hoa mắt ù tai và chẳng bao giờ vào lại mất thôi!!!

Tuy nhiên, đây thực sự là những gì đã diễn ra cách đây hơn chục năm. Hầu hết các trang web thời kỳ này đều có giao diện khá tương tự như trên. Các lập trình viên gần như không thể quan tâm đến phần giao diện hiển thị. Điều này cũng khá dễ hiểu vì khi đó đa số người dùng chỉ tiếp cận được Internet dial-up với tốc độ “rùa bò” và hẳn nhiên việc tải về text thôi đã vất vả rồi chứ chưa nói đến hình ảnh hay animation thậm chí các giao diện đẹp mắt, nhiều màu sắc, phức tạp khác…

Tất cả sẽ chỉ gây nặng nề, chậm chạp và chắc chắn sẽ gây cảm giác giật lag, hay tải chậm và khó chịu cho người dùng khi phải chờ hàng chục phút để tải trang. Chắc hẳn nếu bạn đã từng gặp vài vụ thông báo đứt cáp quang biển, bạn sẽ hiểu cảm giác tải thư trên Gmail là khó chịu như thế nào. Thậm chí để khắc phục Google còn duy trì song song cả chế độ hiển thị rút gọn nhằm tải thư trong trường hợp này. Do đó trong thời kỳ này, các website chỉ cần hiệu suất cao không giật lag là đạt tiêu chuẩn và gánh nặng chủ yếu được đè nặng lên Back-End. Và trong thời kỳ này nếu các bạn quan tâm đến tin tuyển dụng sẽ thấy hầu hết đều là những tin tuyển dụng chung chung kiểu như “tuyển lập trình viên web”, “tuyển lập trình viên PHP”… hầu như không có khái niệm và sự tách biệt giữa Back-End và Front-End. Khi ai đó lập trình web gần như sẽ kiêm nhiệm cả hai công việc này. Điều này dẫn đến hệ quả là một số Back-End kiêm luôn việc của Front-End mà hiệu quả thì chắc chắc là chỉ ở mức tạm chấp nhận được mà thôi.

Tuy nhiên, những năm tháng vật lộn với Internet dial-up đã qua và các công nghệ mạng dần được thay thế bằng các công nghệ hiện đại hơn như ADSL, thậm chí 3G, 4G hay sắp tới đây là 5G, 6G…cùng sự phát triển của các công nghệ trình duyệt, gần như các trang web hiện nay đều có thể dễ dàng được tải thời gian thực với độ trễ không đáng kể. Và do đó yêu cầu của người dùng ngày càng trở nên khó tính hơn. Giống như việc trước đây không có ăn thì chỉ cần ăn no một bữa đã là tuyệt vời, còn bây giờ khi ăn no quá đủ rồi thì người ta còn phải yêu cầu được ăn ngon, nhìn phải đẹp mắt. Điều đó dẫn đến yêu cầu các trang web giờ đây không chỉ cần hoạt động tốt, hiệu năng tốt, ổn định, load nhanh nữa mà còn cần phải đẹp, có những hiệu ứng bắt mắt, dễ sử dụng, trải nghiệm mượt mà thân thiện với người dùng. Lúc này vai trò của Front end và Design bắt đầu được chú trọng và làm nảy sinh các khái niệm như Phát triển front end hoặc lập trình front end hay front end development cho web và các front end developer bắt đầu xuất hiện và tách biệt rạch ròi trong các tin tuyển dụng.

Thậm chí với cấu hình và đường truyền phía máy khách ngày càng mượt mà, các trình duyệt mới với tính năng vô cũng mạnh mẽ cùng hàng trăm thư viện hỗ trợ như: YUI Library, jQuery… thì xu hướng giảm tải xử lý phía máy chủ để chuyển một phần xử lý về phía máy khách nhằm tăng hiệu năng xử lý và tải trang ngày càng phổ biến. Do đó, vai trò của các front end developer càng ngày càng được mở rộng.

Vậy Front end developer là ai và công việc của các front end developer là gì?

Nói một cách ngắn gọn thì front end developer chính là những người làm công việc lập trình các giao diện và tương tác của website đối với người dùng đảm bảo trải nghiệm người dùng luôn tốt nhất trên website.

Hay cụ thể hơn là tạo ra một giao diện web và các tương tác như bên dưới bằng cách lập trình từ các khuôn mẫu thiết kế được các designer hoặc chính front end developer tạo ra từ yêu cầu của người dùng.

Hoặc phức tạp hơn với các hiệu ứng và hình ảnh đồ họa phức tạp như trang web của Waaark dưới đây:

Công việc của các front end developer là đảm bảo tính gọn gàng, đẹp mắt, dễ sử dụng của giao diện và tính ổn định không bị gián đoạn trong quá trình tải trang. Ngoài giao diện sáng tạo, hiệu ứng đẹp mắt các front end developer còn cần chú trọng đến hiệu quả và khả năng làm việc hiển thị của website với người dùng, chẳng hạn như tính tương thích với nhiều trình duyệt, môi trường di động, hay trong điều kiện mạng tải chậm hoặc gặp lỗi. Nói cách khác ngoài sự sáng tạo và chất nghệ sĩ thì front end developer còn cần một tố chất kỹ thuật và logic đảm bảo là cầu nối giữa Web designer và các Back end developer.

Thực tế, trong nhiều trường hợp bạn có thể thấy các Front end developer làm việc như các Designer thiết kế và triển khai giao diện từ yêu cầu của khách hàng một cách trực tiếp. Tuy nhiên, về mặt bản chất thì Front end developer có nhiệm vụ và vai trò hoàn toàn khác biệt. Nhiệm vụ của các Front end developer là chuyển các ý tưởng của Designer thành mã nguồn và tạo ra các giao diện tương tác với người dùng từ ý tưởng thiết kế của Designer. Front end developer không thiết kế, không chụp ảnh, không phối màu mà nhiệm vụ chính là sử dụng các nguyên liệu này để tạo nên giao diện và các yếu tố chuyển động, tương tác khác nhau nhằm tạo nên trải nghiệm sống động cho người xem.

Do đó các Front end developer cần có trí tượng tượng phong phú để có thể hình dung website sẽ trông như thế nào, trong khi phải đáp ứng các yếu tố kỹ thuật để có thể hiện thực hóa những điều đó. Công việc này phải được thực hiện một cách liền mạch, đảm bảo tính trực quan nhất cho người dùng.

Khó khăn mà các Front end developer gặp phải là gì?

Có thể các bạn sẽ cảm thấy: “Ồ, nều front end developer chỉ thực hiện việc triển khai giao diện do các thiết kế từ designer thì dễ quá, vậy chỉ cần kéo thả, fix màu, chèn ảnh là xong mà, thậm chí không cần biết bất cứ thuật toán nào ấy chứ !!!”. Tuy nhiên, đây là huyền thoại và tất nhiên đều không có thật. Công việc của các front end developer trên thực tế không chỉ như vậy. Front end developer giỏi thì thuật toán cũng siêu khủng và có rất nhiều các vấn đề gặp phải trên thực tế mà các front end developer cần giải quyết.

Đầu tiên là sự thay đổi chóng mặt của các công cụ và kỹ thuật được sử dụng để tạo giao diện người dùng. Các front end developer mới bước vào ngành gặp khá nhiều khó khăn và khá choáng ngợp không biết bắt đầu từ đâu, không biết nên học gì bỏ gì. Vấn đề này sẽ được giải quyết ở phía sau của bài viết này. Tuy nhiên, chắc chắn một bài viết sẽ không thể lột tả toàn bộ khía cạnh của toàn ngành, thậm chí nhiều khía cạnh sẽ tiếp tục phát triển trong tương lai. Do đó, phải luôn tâm niệm rằng phải liên tục cập nhật các kiến thức trong lĩnh vực để biết nó đang phát triển như thế nào. Đây là vấn đề chung đối với bất cứ lập trình viên nào đều gặp phải.

Thách thức tiếp theo đối với front end developer là cần đảm bảo tính dễ đọc của nội dung và thân thiện trong tương tác đối với người dùng khi họ vào trang. Điều này nghe có vẻ dễ đúng không ạ? Nhưng trên thực tế nó không hề dễ dàng chút nào. Lí do là người dùng không chỉ sử dụng một thiết bị có kích thước và độ phân giải giống hệt với nhà phát triển, họ có thể sử dụng rất nhiều loại thiết bị với kích thước và độ phân giải màn hình khác nhau, do đó buộc nhà thiết kế phải xem xét các khía cạnh này khi thiết kế trang web. Các lập trình viên front end cần đảm bảo rằng trang web được thiết kế có thể hiển thị một cách chính xác trong các trình duyệt khác nhau (cross-browser), hệ điều hành khác nhau (đa nền tảng) và các thiết bị khác nhau (cross-device). Việc này đòi hỏi phải lập kế hoạch và kiểm thử cẩn thận chi tiết và đòi hỏi tốn khá nhiều thời gian và công sức.

Các website ngày nay đòi hỏi tính linh hoạt cao, các giao diện cần mềm dẻo, tùy biến có khả năng thay đổi  đáp ứng cho từng thiết bị cụ thể, từ máy tính để bàn, smartphone cho đến máy tính bảng với mọi kích cỡ. Bất kể người dùng sử dụng thiết bị nào, website vẫn phải thay đổi giao diện một cách linh hoạt mà không gặp bất kỳ trở ngại nào, và đây chính là công việc thách thức lớn nhất của Front-End Developer khi triển khai thiết kế của Designer.

Khi HTML5 và CSS3 ra đời kéo theo sự bùng nổ công nghệ Resposive (tương thích trên mobile/tablet) làm cho việc thiết kế Layout nhiều hơn và các Front end developer đôi khi gặp bế tắc với những giao diện khó khi thực hiện Responsive. Khi đó sự cần thiết của UI/UX bắt đầu được đề cao mạnh mẽ. Một giao diện web được thiết kế và triển khai đẹp mắt trên máy tính cá nhân nhưng khi hiển thị trên mobile thì không thể hiển thị đầy đủ các chi tiết hoặc các nút bấm nằm quá sát, hoặc xô lệch gây khó khăn cho người dùng có thiết bị nhỏ thì đó chính là thất bại của UI/UX.

Vấn đề cuối cùng là Front end developer như người “làm dâu trăm họ”. Các Front end developer phải làm thỏa mãn khách hàng, sếp, designer, và thậm chí cả backend developer. Mà việc thay đổi mẫu thiết kế và yêu cầu của khách hàng thì liên xoành xoạch và front end developer và designer là hai vị trí “chịu trận” nhiều nhất. Bởi theo tâm lý chung thì khách hàng chỉ cần nhìn website bắt mắt và hoạt động ổn, còn lại phần backend làm gì thường khách hàng không quan tâm đến nhiều. Điều này dẫn đến vị trí Front end developer là vị trí phải chịu nhiều sự bất đồng nhất. Đặc biệt khi nhiều lúc khách hàng và designer có những yêu cầu thiết kể mà không thể mô tả rõ như yêu cầu một nút (button) khi hover sẽ đổi màu, hay có hàng chục hiệu ứng hiện ra. Và trong những trường hợp khó diễn giải như vậy, mọi chuyện trở lên rất phức tạp, khi có thể phải làm đi làm lại hàng chục lần vẫn không đúng ý. Đó là chưa kể khi khách hàng và designer đưa ra những yêu cầu mà không khả thi về mặt kỹ thuật (hoặc kinh phí không đáp ứng). Quả thực là một cuộc chiến dài cho các front end developer.

Những kỹ năng cần thiết của một Front end developer

Trước đây, lập trình front end chủ yếu xoay quanh HTML, CSS và JavaScript, tuy nhiên cùng với sự phát triển của công nghệ lập trình và di động, các kỹ năng đòi hỏi với các lập trình viên front end đã ngày càng thay đổi. Dạo qua vài trang tuyển dụng hoặc có kinh nghiệm làm việc vài năm trong lĩnh vực lập trình front end chúng ta có thể thấy với một front end developer hiện đại thì các kỹ năng cần thiết hiện nay là:

HTLM & CSS

Đây vẫn là kỹ năng cơ bản thiết yếu hàng đầu đối với một front end developer. Vai trò của HTML và CSS tương tự như đất đối với người nông dân. Người nông dân có thể thay liềm bằng máy gặt, cuốc bằng máy cày hiệu quả hơn, nhưng đất thì không thể thay thế được. Mọi phản hồi của trang đều liên quan trực tiếp đến HTML. Khi học làm web một điều không thể thiếu đó là biết HTML, nếu không bạn sẽ không thể hiểu được tại sao trang web lại hiển thị như vậy và không thể biết làm thế nào để các mã chạy và render ra trình duyệt.

Ban đầu khi khái niệm web mới ra đời, chỉ có HTML được sử dụng để xử lý các thiết kế và định dạng. HTML hỗ trợ định dạng cấu trúc chung của website và các yếu tố cơ bản về giao diện như màu nền, cỡ chữ, font chữ, kiểu tô đậm hoặc in nghiêng của các kí tự, và nhóm các văn bản lại với nhau. Điều này chỉ đủ đối với các website thuần văn bản, tĩnh. Tuy nhiên khi muốn thêm hình ảnh minh họa hay hình nền thì sao? Đây chính là sức mạnh của CSS. CSS cho phép tác động nhiều hơn đến giao diện website. Khi dùng CSS, Front-End Developer có thể thay đổi giao diện trên trang chỉ bằng một đoạn code, mà không cần phải lập lại nhiều lần. Ví dụ: chỉ cần một vài dòng CSS để có thể biến tất cả tiêu đề trên website thành màu xanh thay vì fix lại bằng tay từng thẻ head trong HTML.

HTML (Hyper Text Markup Language) và CSS (Cascading Style Sheets) vẫn là hai thành phần cơ bản nhất trong phát triển ứng dụng web. Nếu không có HTML và CSS, tất cả những gì trang web của bạn có thể hiển thị là một mớ văn bản chưa định dạng trên màn hình. Bạn không thể thiết kế trang web, không thể thêm hình ảnh vào một trang nếu không có HTML!

Dù với Front end hay Back end developer thì kỹ năng đầu tiên cần phải thành thạo đó là lập trình với HTML và CSS. Với HTML và CSS bạn có thể xây dựng được một trang web cơ bản. Và phần này cũng không hề khó học. Chỉ mất khoảng vài tuần là có thể sử dụng thành thạo HTML và CSS. Hãy chú ý đến HTML5 và CSS3, đây là những cải tiến hiển thị đáng kể để trang trí và trình bày trang web và cung cấp nhiều tính năng hữu ích.

JavaScript

Với HTML và CSS bạn có thể tạo ra các trang web hiển thị nội dung cơ bản tuy nhiên nếu bạn muốn trang web của mình có những chức năng phức tạp hơn, thân thiện hơn với người dùng, chứa các hiệu ứng đẹp mắt thì điều không thể thiếu là JavaScript. JavaScript cho phép thêm vào cho trang web hàng ngàn chức năng hữu ích chẳng hạn xử lý sự kiện tương tác với người dùng, ghi lại phiên làm việc nhằm nâng cao trải nghiệm liên tục cho người dùng; thậm chí JS có thể được sử dụng để tạo ra các tương tác trên bản đồ các trò chơi trực tuyến. Các trang web như Facebook, Pinterest sử dụng rất nhiều JavaScript để biến giao diện người dùng dễ sử dụng hơn.

JavaScript còn có thể sử dụng để điều khiển nhiều thành phần trên website mà không phải tải lại trang. Điều này rất quan trọng trong cải thiện trải nghiệm người dùng. Thử tưởng tượng bạn sẽ khó chịu như thế nào khi form đăng nhập khi chưa xong lại bị tải lại và mất toàn bộ nội dung và yêu cầu nhập lại, hay khi trình duyệt refresh mỗi lần bạn lăn chuột để xem News Feed trên Facebook và kéo theo nội dung bạn đang đọc bị thay đổi hoàn toàn. Các front-end framework được sử dụng để làm nổi bật hay đơn giản hóa những nhiệm vụ của JavaScript. Ví dụ, với Angular JS framework có thể giúp các developer xây dựng những ứng dụng trên trang hiệu quả hơn, AJAX có thể cập nhật website mà không cần phải tải lại trang, hay gần đây là NodeJS cho phép thực thi mã phía máy chủ.

Ngoài ra, theo các khảo sát thì JavaScript cũng là ngôn ngữ lập trình phổ biến nhất trên thế giới, vì vậy JS là 1 nội dung giá trị cần tìm hiểu.

jQuery

jQuery là một thư viện JavaScript. Đây là tập hợp các phần mở rộng được đóng gói giúp đẩy nhanh quá trình phát triển với JavaScript. Thay vì phải lập trình tất cả mọi thứ từ đầu, bạn có thêm các yếu tố có sẵn vào dự án và tùy chỉnh khi cần thiết khi sử dụng jQuery. Bạn có thể dễ dàng tạo ra một đồng hồ đếm thời gian, chức năng đề xuất từ khóa tìm kiểm trên form tìm kiếm và thậm chí là tự động sắp xếp và hiệu chỉnh kích thước các grid layouts.

Các Front end frameworks và JavaScript Frameworks

Khoảng chục năm trở lại đây với sự phát triển của các thiết bị di động dần dần thay thế các thiết bị máy móc cũ kỹ cùng với tốc độ mạng được nâng cao đáng kể thì tư duy về mô hình Server-Clients đã có những chuyển biến khác biệt đáng kể. Thay vì đặt phần chịu tải nặng nề dồn ép hoàn toàn lên Back-End & Server thì giờ đây hầu hết mọi thứ được trả về cho Clients đảm nhiệm. Thay vì trước kia mọi xử lý thuật toán hay render hiển thị thì phía Clients phải gửi request lên Server sau đó Server xử lý rồi trả kết quả để Client hiển thị thì giờ đây với nền tảng Back-End mới các ứng dụng có thể chạy real-time và phía front end hoàn toàn chủ động trong việc xử lý các dữ liệu như: tạo vòng lập, lưu trữ cục bộ, xác nhận…

Điều này dẫn tới một khối lượng công việc đồ sộ bị đẩy về phía front end developer và sẽ rất khó để các front end developer thực hiện điều này hoàn toàn chỉ với HTML, CSS và JavaScript thuần. Do đó, dẫn đến việc hàng trăm công ty công nghệ lớn nhỏ hỗ trợ và phát triển rất nhiều Front-End Frame Work (mà trong đó chủ yếu là các JavaScript framework) nhằm giảm tải và đơn giản hóa công việc cho các developer như:

• Google: AngularJS, @Angular, Material…
• Facebook: React, React native…
• Evan You: Vuejs
• Twitter: Bootstrap, hogan.js…
• Apache: Cordova
• Drifty Co: Ionic
• …

Tương tự như các thư viện như .NET Framework, các front end frameworks hay Javascript frameworks là các thư viện tập hợp các cấu trúc và mẫu có sẵn cho việc lập trình nhằm tăng khả năng sử dụng lại mã và giảm tải số lượng mã phải viết cho lập trình viên. Có nhiều frameworks khác nhau phù hợp với từng yêu cầu khác nhau khi triển khai ứng dụng có thể kể đến ở trên, tuy nhiên phổ biến nhất hiện nay thì như chúng ta biết đến với JavaScript kể đến là: AngularJS, Backbone, Ember, hay ReactJS…hay front end framework Bootstrap xây dựng cơ sở từ HTML và CSS. Đa phần các trang web đều thường bắt đầu với các elements giống nhau từ trang này qua trang khác. Do đó một framework định nghĩa sẵn cho các thành phần và tương tác này sẽ giúp tăng tốc độ lập trình, giúp lập trình viên phải viết ít mã hơn, giảm thiểu việc phải code lại từ đầu nhiều chức năng sẵn có hữu ích.

Đây là một kỹ năng hữu ích. Hầu hết các công việc hiện nay cho front-end developer đều cần am hiểu và vận dụng tốt các frameworks này. Bạn có thể chọn một hoặc một vài framework điển hình mà bạn cảm thấy thích để tìm hiểu. Biết một số framework có thể là lợi thế rất lớn trong quá trình xin việc. Đặc biệt các kỹ năng liên quan đến Agular, React, Vue hay NodeJS là những yêu cầu rất phổ biến trong các tin tức tuyển dụng.

CSS Preprocessors hay các bộ tiền xử lý CSS

CSS đơn giản chỉ là một ngôn ngữ mô tả kiểu hiển thị, do đó để xây dựng một hàm, sử dụng lại một định nghĩa hoặc kế thừa một đối tượng trên CSS là rất khó. Vì vậy, đối với các dự án lớn, hoặc các hệ thống phức tạp thì việc bảo trì là một vấn đề rất lớn. Mặt khác, khi công nghệ web ngày càng phát triển, các thông số kỹ thuật mới được thêm vào HTML và CSS ngày một nhiều hơn, và các trình duyệt của các hãng khác nhau thậm chí phiên bản khác nhau thường xảy ra sự không đồng bộ về các thông số kỹ thuật mới. Điều này dẫn rất khó khăn khi muốn hiển thị cùng một nội dung định dạng lên các trình duyệt khác nhau. Để viết CSS tốt hơn, có nhiều cách tiếp cận khác nhau như tách các định nghĩa thành các tệp nhỏ hơn và nhập chúng vào một tệp chính khi thực thi. Cách tiếp cận này đã giúp đối phó với các thành phần khác biệt, nhưng, không giải quyết được sự lặp lại mã và các vấn đề bảo trì. Một cách tiếp cận khác là triển khai CSS hướng đối tượng đơn giản. Trong trường hợp này, chúng ta có thể áp dụng hai hoặc nhiều định nghĩa lớp cho một phần tử. Mỗi lớp được thêm một loại mẫu cho thành phần. Điều này làm giúp tăng khả năng sử dụng lại nhưng lại làm giảm khả năng bảo trì.

Bộ tiền xử lý CSS được bổ sung mở rộng các khái niệm biến, toán tử, nội suy, hàm, mixin và nhiều khái niệm có thể sử dụng khác giúp cho các mã CSS có thể sử dụng lại, có thể duy trì và có thể mở rộng dễ dàng hơn. CSS pre-processor làm tăng năng suất và giảm số lượng mã phải viết trong một dự án. Các chương trình tiền xử lý bằng ngôn ngữ kịch bản (Preprocessor Scripting Language ), sẽ được biên dịch thành CSS khi pulish lên website. Nghĩa là, chúng ta sẽ làm style bằng ngôn ngữ kịch bản, rồi bộ tiền xử lý sẽ render chúng thành các file CSS thân thiện với cross-browser và có format tốt.

Một số CSS pre-processor phổ biến mà chúng ta có thể cần biết là: SASS, Stylus, Less hay PostCSS (PostCSS không phải là bộ tiền xử lý nhưng có thể được sử dụng với chức năng tương tự). Theo các yêu cầu tuyển dụng thực tế thì SASS và LESS là hai preprocessors có nhu cầu cao nhất. Hãy quan tâm đến SASS, các lựa chọn khác chỉ được đưa ra ở đây nhằm mục đích so sánh. SASS vẫn là một CSS pre-processor phổ biến và ưu việt nhất hiện nay.

Kinh nghiệm với RESTful Services và APIs

REST là viết tắt của Representational State Transfer, là một kiến trúc gọn nhẹ giúp đơn giản hóa mạng lưới giao tiếp trên trang web. Các RESTful servicse và APIs là các web services tuân theo kiến trúc REST.

Ví dụ bạn muốn viết một ứng dụng với mục tiêu hiển thị tất cả những người bạn trện mạng xã hội theo thứ tự kết bạn, ai kết bạn trước, ai kết bạn sau. Bạn có thể call đến RESTful API của Facebook để đọc danh sách bạn bè và trả lại dữ liệu đó, tương tự với Twitter (mạng xã hội cũng sử dụng RESTful APIs). Quá trình chung là như nhau cho bất kỳ services nào sử dụng RESTful APIs, chỉ có các dữ liệu trả về là khác nhau.

Các kinh nghiệm với RESTful Services và API giúp bạn biết cách giao tiếp với 1 web services. Giúp web services làm việc hiệu quả hơn, có khả năng mở rộng tốt hơn, đáng tin cậy hơn và dễ chỉnh sửa hoặc di chuyển hơn.

Responsive, Mobile và các web site đa nền tảng

Theo thống kê về lưu lượng truy cập Internet thì lượng truy cập từ thiết bị di động đã bắt đầu có xu hướng bắt kịp các lưu lượng truy cập qua máy tính để bàn, vì vậy không có gì ngạc nhiên khi kỹ năng thiết kế website tương thích đa nền tảng, hỗ trợ mobile, có khả năng responsive đóng vai trò quan trọng đối với các Front end developer hiện nay.

Responsive design giúp bố trí của trang web (đôi khi cả chức năng và nội dung của trang) có khả năng thay đổi dựa trên kích thước màn hình và thiết bị đang dùng thậm chí nội dung thay đổi theo từng quốc gia và người dùng cụ thể. Chẳng hạn khi người dùng truy cập 1 trang web từ thiết bị với màn hình lớn sẽ nhận được giao diện gồm nhiều cột, các đồ họa lớn và tương tác được tạo ra riêng cho chuột và bàn phím. Trong khi trên thiết bị di động, trang này sẽ xuất hiện dưới dạng 1 cột duy nhất và được tối ưu hóa cho các tương tác chạm vuốt, màn hình.

Thiết kế mobile có thể bao gồm thiết kế responsive, cũng như các thiết kế mobile cụ thể riêng biệt. Khác biệt nằm ở chỗ khi bạn muốn người dùng có trải nghiệm hoàn toàn khác trên mobile so với trên máy tính để bàn. Chẳng hạn, một trang web ngân hàng với online banking trên mobile có thể cho phép người dùng tìm kiếm vị trí các điểm giao dịch gần nhất và kiểm tra tài khoản thời gian thực – điều mà website thông thường trên môi trường máy tính cá nhân không cung cấp được.

Nhìn chung các môi trường hệ điều hành và trình duyệt hiện đại đều có khả năng hiển thị trang web 1 cách nhất quán, tuy nhiên vẫn có sự khác biệt trong cách “thông dịch” code và có thể gây ra một số ấn đề với giao diện. Để website hiển thị một cách đồng nhất trên các trình duyệt khác nhau, bạn cần biết cách làm thế nào để làm cho mỗi loại trình duyệt đó tuân theo ý muốn của mình. Đây chính là kỹ năng lập trình đa nền tảng, đòi hỏi các lập trình viên cần có những kế hoạch kiểm thử, và xây dựng tỉ mỉ, cũng như hiểu rõ sự khác biệt của các trình duyệt trong quá trình hiển thị.

Các kỹ năng kiểm thử và gỡ rối

Có một thực tế trong lập trình là các sản phầm không thể tránh khỏi bug hoặc các chức năng không mong muốn. Đối với web điều này cũng không ngoại lệ. Vì vậy, việc làm quen với các quy trình kiểm thử và gỡ rối là điều cần thiết. Thậm chí theo nhiều cao nhân trong ngành thì thời gian để kiểm thử và gỡ rối còn chiếm đến 80% thời lượng công việc của một lập trình viên.

Đối với các front end developer, các loại kiểm thử (testing) phổ biến nhất cần phải làm quen chính là kiểm thử giao diện (testing UI), kiểm thử chấp nhận sản phẩm (acceptance testing), kiểm thử trình duyệt (browser testing) và kiểm thử chức năng (functional testing) – đây chính là những kiểu kiểm thử để chắc chắn rằng các trang web đáp ứng đúng nhu cầu của người dùng.

Mục tiêu của quá trình testing là tìm kiếm các lỗi (bug) trong website. Và từ các bug này sẽ có những giai đoạn tìm kiếm nguyên nhân và fix lại các bug. Giai đoạn này thường là giai đoạn debug. Các công ty khác nhau sử dụng các quy trình debug khác nhau thậm chí các công cụ quản lý bug khác nhau, nhưng nhìn chung các quy trình đều có nguyên tắc chung khá giống nhau, và do đó nếu bạn đã từng làm quen với debug thì sẽ dễ dàng thích nghi hơn.

Kỹ năng sử dụng hệ thống quản lý phiên bản (Version control) như Git hay SVN

Các hệ thống quản lý phiên bản như Git hay SVN giúp bạn theo dõi các thay đổi đã được tạo ra trong dự án theo thời gian, cũng như quay trở lại phiên bản trước dễ dàng hơn. Điều này đặc biệt quan trọng trong trường hợp khi bạn thêm một plugin jQuery tùy biến và đột nhiên một nửa các code bị lỗi. Nếu không sử dụng các version control trong trường hợp này bạn sẽ gặp rất nhiều vấn đề. Các hệ thống version control giúp bạn thay vì phải “undo” và sửa chữa tất cả các lỗi, thì bạn có thể trở lại phiên bản trước đó và sau đó thử lại với một giải pháp khác. Thêm vào đó, các hệ thống version control cũng giúp cho việc làm việc nhóm trở lên dễ dàng hơn.

Tùy từng công ty có thể sử dụng Git hoặc SVN. Trên thực tế Git vẫn phổ biến hơn và nhiều công ty yêu cầu biết sử dụng Git là một yêu cầu bắt buộc.

Biết cách sử dụng một số hệ thống Content Management và nền tảng E-commerce Platforms 

Có đến hơn một nửa các trang web trên thế giới là các hệ thống quản lý nội dung (CMS). Do đó việc thành thạo sử dụng một hệ thống CMS là một kỹ năng thiết yếu không chỉ với front end developer và với cả back end developer. CMS phổ biến nhất thế giới hiện nay là WordPress. Đây là nền tảng tạo nên hàng triệu trang web trên thế giới, đặc biệt là các trang báo chí hoặc bán hàng.

Nền tảng thương mại điện tử là một loại hình cụ thể của CMS. Ngay trên WordPress bạn cũng có thể làm quen với WooCommerce – một plugin thương mại điện tử hỗ trợ xây dựng các trang web bán hàng trực tuyến.

Các CMS phổ biến khác bao gồm Joomla, Drupal và Magento. Rất nhiều công ty tuyển dụng các vị trí liên quan đến các kỹ năng và hiểu biết tương ứng trên các CMS này.

Các kĩ năng giải quyết vấn đề

Đây là kỹ năng chung nhất và quan trọng nhất với bất cứ lập trình viên nào, và với front end developer cũng vậy. Một front end developer cần phải biết cách triển khai một thiết kế như thế nào là tốt nhất, biết cách fix bug, biết cách kết nối và xử lý các vấn đề với việc kết nối front end và back end… Tất cả các vấn đề này đều liên quan đến kĩ năng giải quyết vấn đề. Nhiều công ty thậm chí tuyển fresher mà không hề yêu cầu bất cứ kỹ năng nào ở trên ngoại trừ kỹ năng giải quyết vấn đề và thuật toán. Nếu không có kỹ năng này dù bạn có giỏi ngôn ngữ đến đâu cũng không thể triển khai nổi một thiết kế. Ngôn ngữ và các kỹ năng khác có thể học rất nhanh nhưng kỹ năng giải quyết vấn đề cần thời gian, kinh nghiệm để tích lũy hoặc do tư duy của mỗi người. Do đó, hãy trau dồi nó một cách tử tế.

Ngoài các kỹ năng trên, liệu Kỹ năng mềm liệu có quan trọng đối với các lập trình viên?

Tạm kết – Làm thế nào để trở thành một front end developer

Ở phần trên chúng ta đã nắm được những kỹ năng và kiến thức cần thiết cho một front end developer. HTML, JavaScript và CSS là những kiến thức bắt buộc đối với một front end developer. Đối với các vị trí Senior Front-End Developer điều này thậm chí còn chưa đủ. Các doanh nghiệp thường yêu cầu các kinh nghiệm về PHP hay framework về server-side đối với các vị trí này. Điều này đảm bảo cho các front end developer có kiến thức tổng quát về hệ thống và có thể tối ưu và sửa chữa các vấn đề xảy ra với website cũng như nắm được nguyên tắc phía sau phần back end. Các kiến thức về Framework, JSON và jQuery cũng cần thiết không chỉ cho front end developer mà còn cả back end developer.

Đó là về mặt bằng chung trước đây, còn yêu cầu công việc của các front end developer hiện đại đã thay đổi khá nhiều nhất là trong vòng 3 năm trở lại đây. Giờ đây:

• Thay vì phải viết HTML thuần tuý thủ công như trước thì giờ đây cùng với sự ra đời của HTML5 và CSS3 và sắp tới là HTML6 và CSS4 thì các front end developer hiện đại cần có khả năng chuyển sang sử dụng Template engine như: JADE, PUG, Handlebars… để có thể gán biến, gọi hàm, hoặc tuỳ chọn giao diện cho Clients render.
• Thay vì phải phụ thuộc và những thư viện jQuery bị giới hạn trên một số thiết bị thì các front end developer hiện đại cần phải viết NativeScript hoặc Babel, TypeScript… để có thể tạo ra các mã JS chuẩn nhằm đảm bảo có thể hoạt động tốt trên mọi môi trường.
• Thay vì viết CSS thủ công thiên về thiết kế thẩm mĩ thì các front end developer giờ đây còn cần giỏi thuật toán để có thể ứng dụng vào các CSS processor như: SASS,LESS, STYLUS để tăng tốc độ phát triển ứng dụng nhanh hơn.
• Thay vì phải phụ thuộc và trao đổi thường xuyên với Back-End để xử lý những tình huống như tạo vòng lặp hiển thị dữ liệu như trước đây thì giờ đây Back end và Front end hoàn toàn có thể làm việc độc lập với nhau không giới hạn vị trí địa lý.
• Front end developer hiện đại sẽ cần phải xem xét xử lý các hiệu ứng phức tạp và tương tác người dùng trên thiết bị di động, đảm bảo tính đa nền tảng, cần phải bắt sự kiện nhận diện người dùng vuốt mấy ngón tay, vuốt qua trái hay phải…
• Việc xử lý đẩy lên các thông báo thời gian thực cho người dùng giờ đây cũng là nhiệm vụ của front end developer.
• Front end hiện đại còn có thể kiêm luôn cả việc thiết kế và viết các ứng dụng di động…

Giờ đây Front-End Developer là sự kết hợp của nghệ thuật và khoa học hòa quện với nhau, là một lĩnh vực hội đủ cả sự tinh tế, thẫm mỹ, am hiểu về logic, sự tiện lợi… chính là người tạo nên bộ mặt cho thương hiệu của sản phẩm khi đối diện người dùng.

Giới hạn của front end đã không còn rõ ràng như trước đây! một Front-End developer không chỉ gói gọn trách nhiệm của mình trong việc xử lý giao diện website mà còn có thể kiêm luôn cả viết Mobile App (cross platform), xây dựng giao diện và thuật toán cho mọi thứ từ mobile, Web/WebApp, máy POS cho đến cả Email template… Ngoài ra còn phải đảm nhận về cả sự thẩm mỹ, sự hài hoà và hiệu suất của ứng dụng.

Front-End Developer thường không đòi hỏi bằng cấp. Hầu hết trên các trang giới thiệu việc làm trong lĩnh vực IT hiện nay đều yêu cầu kinh nghiệm thực tế hơn văn bằng tốt nghiệp. Nếu đọc các tin tuyển dụng Front end developer có thể thấy rằng chỉ một phần các nhà tuyển dụng yêu cầu bằng cấp cho vị trí này. Nguyên do có lẽ là chương trình đào tạo đại học, thậm chí cao đẳng phần kiến thức này hầu như rất ít được nhắc đến. Đây có thể nói là một mảng rất ít được học ở bậc đại học. Hầu hết các kiến thức của các anh em gạo cội trong nghề ở lĩnh vực này đều do tự bồi đắp hoặc học hỏi kinh nghiệm qua các bậc tiền bối hoặc thực tế công việc.

Và trên hết, tek4.vn sẽ cung cấp cho bạn những kiến thức này, những thứ không được dạy ở trường đại học.

Hãy tiếp tục theo dõi bài tiếp theo: “Lộ trình học lập trình Front end từ cơ bản đến chuyên gia” tại đây. Đừng quên để lại thảo luận bên dưới và tiếp tục theo dõi chuyên mục Nghề IT nhé.

Xem lại: [Nghề IT] Lộ trình của một chuyên gia lập trình Web (Web Developer) 2019 – Phần 1. Front end, back end, full stack là gì?

Tham khảo:

https://techtalk.vn/blog/posts/frontend-la-gi

https://medium.freecodecamp.org/from-zero-to-front-end-hero-part-1-7d4f7f0bff02