tek4

[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

by - September. 21, 2021
Kiến thức
<p style="text-align: justify;">Tuy tr&ecirc;n c&aacute;c trang tuyển dụng Front end developer l&agrave; một trong những vị tr&iacute; đượ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&ecirc;n c&aacute;c diễn đ&agrave;n, nh&oacute;m facebook về c&ocirc;ng nghệ th&ocirc;ng tin c&oacute; thể thấy vẫn c&ograve;n rất nhiều c&aacute;c thắc mắc li&ecirc;n quan đến front end như front end l&agrave; g&igrave;? phải học những g&igrave;, n&ecirc;n theo React hay Agular... Hầu hết những bạn mới bước ch&acirc;n v&agrave;o lĩnh vực c&ocirc;ng nghệ th&ocirc;ng tin hoặc thậm ch&iacute; đ&atilde; c&oacute; &iacute;t nhiều kinh nghiệm đều c&ograve;n kh&aacute; m&ugrave; mờ về vấn đề n&agrave;y chủ yếu biết đ&acirc;u l&agrave;m đấy v&agrave; cũng chưa r&otilde; mối li&ecirc;n hệ của c&aacute;c c&ocirc;ng nghệ l&agrave; như thế n&agrave;o. V&igrave; lẽ đ&oacute;, b&agrave;i viết n&agrave;y hướng tới việc diễn giải những điều, những kh&aacute;i niệm cần biết về lập tr&igrave;nh front end đồng thời đưa ra một lộ tr&igrave;nh học tập để trở th&agrave;nh một front end developer từ mức chưa biết g&igrave; đến chuy&ecirc;n gia.</p> <p>B&agrave;i viết l&agrave; b&agrave;i tiếp theo nằm trong series Nghề IT, bạn c&oacute; thể tham khảo c&aacute;c b&agrave;i kh&aacute;c của series n&agrave;y <a href="https://tek4.vn/nghe-cam-nang-chuyen-hoc-chuyen-nghe-chuyen-song-va-hon/"><em><strong>tại đ&acirc;y</strong></em></a>. B&acirc;y giờ ch&uacute;ng ta h&atilde;y bắt đầu với c&acirc;u hỏi kinh điển:</p> <h2>Front end l&agrave; g&igrave;?</h2> <p style="text-align: justify;">Như đ&atilde; biết trước đ&acirc;y, phần mềm l&agrave; phần nằm trung gian giữa người d&ugrave;ng cuối v&agrave; phần cứng c&oacute; nhiệm vụ thực hiện một nhiệm vụ g&igrave; đ&oacute;. Trong kiến tr&uacute;c phần mềm, c&oacute; thể c&oacute; nhiều lớp giữa phần cứng v&agrave; người d&ugrave;ng cuối. Mỗi c&aacute;i c&oacute; thể bao gồm một mặt trước (front end) tiếp x&uacute;c với người d&ugrave;ng cuối v&agrave; một mặt sau (back end) tiếp x&uacute;c với hệ thống phần cứng. Đ&acirc;y l&agrave; hai phần t&aacute;ch biệt giữa lớp tr&igrave;nh b&agrave;y (front end) v&agrave; lớp truy cập dữ liệu (back end) của một phần mềm.</p> <p style="text-align: justify;">Front end l&agrave; một sự trừu tượng, đơn giản h&oacute;a th&agrave;nh phần cơ bản bằng c&aacute;ch cung cấp giao diện th&acirc;n thiện với người d&ugrave;ng, trong khi back end thường xử l&yacute; c&aacute;c logic li&ecirc;n quan đến nghiệp vụ v&agrave; lưu trữ dữ liệu. Phần front end nằm ở ph&iacute;a ph&iacute;a kh&aacute;ch h&agrave;ng l&agrave; bất kỳ th&agrave;nh phần n&agrave;o được người d&ugrave;ng thao t&aacute;c v&agrave; tiếp x&uacute;c; phần back end thường nằm tr&ecirc;n m&aacute;y chủ v&agrave; thường kh&ocirc;ng được người d&ugrave;ng để t&acirc;m.</p> <p style="text-align: justify;">T&oacute;m lại đối với phần mềm n&oacute;i chung th&igrave; front end l&agrave; phần vỏ ngo&agrave;i, phần giao diện tương t&aacute;c v&agrave; tạo ra trải nghiệm ph&iacute;a người d&ugrave;ng.</p> <p style="text-align: justify;">Tương tự như vậy đối với web, front end&nbsp;l&agrave; to&agrave;n bộ những g&igrave; m&agrave; kh&aacute;ch truy cập thấy bao gồm c&aacute;c giao diện, t&iacute;nh năng, cấu tr&uacute;c, font chữ, đồ họa, link li&ecirc;n kết, menu, n&uacute;t điều hướng, tương t&aacute;c v&agrave; c&aacute;c ảnh động tr&ecirc;n một website. V&agrave; t&ugrave;y v&agrave;o t&iacute;nh chất m&agrave; những website kh&aacute;c nhau sẽ c&oacute; những t&iacute;nh năng tương t&aacute;c cũng như c&aacute;ch thức điều hướng kh&aacute;c nhau.</p> <h2 style="text-align: justify;">Lập tr&igrave;nh Front End l&agrave; g&igrave;?</h2> <p style="text-align: justify;">Ph&aacute;t triển front end hoặc lập tr&igrave;nh front end hay front end development cho web vẫn l&agrave; một kh&iacute;a cạnh kh&aacute; mới bởi chỉ c&aacute;ch đ&acirc;y khoảng chục năm khi c&aacute;c c&ocirc;ng nghệ mạng v&agrave; thiết bị di động chưa ph&aacute;t triển như hiện nay, front end đ&oacute;ng vai tr&ograve; rất hạn chế. Nếu ch&uacute;ng ta nh&igrave;n lại giao diện của Facebook chục năm trước sẽ thấy điều n&agrave;y.</p> <p style="text-align: justify;">Đ&acirc;y l&agrave; giao diện nguy&ecirc;n bản đầu ti&ecirc;n của Facebook v&agrave;o năm 2005.</p> <p>[caption id="attachment_4309" align="aligncenter" width="432"]<img class="size-full wp-image-4309" src="https://tek4.vn/wp-content/uploads/2019/03/Front-end-l&agrave;-g&igrave;.jpg" alt="Front end l&agrave; g&igrave;" width="432" height="319" /> Giao diện đầu ti&ecirc;n của Facebook năm 2005[/caption]</p> <p style="text-align: justify;">Thậm ch&iacute; đến năm 2007, n&oacute; vẫn kh&ocirc;ng kh&aacute; hơn l&agrave; mấy</p> <p>[caption id="attachment_4314" align="aligncenter" width="426"]<img class="wp-image-4314" src="https://tek4.vn/wp-content/uploads/2019/04/Front-end-l&agrave;-g&igrave;-2.jpg" alt="Front end l&agrave; g&igrave; -2" width="426" height="442" /> Giao diện Facebook năm 2007[/caption]</p> <p style="text-align: justify;">Quả l&agrave; một trời một vực so với giao diện hiện nay của ch&iacute;nh Facebook, thậm ch&iacute; ngay cả khi so với một trang b&aacute;n h&agrave;ng nước phổ th&ocirc;ng. Chắc hẳn nếu cho bạn sử dụng giao diện n&agrave;y, chắc đa phần sẽ hoa mắt &ugrave; tai v&agrave; chẳng bao giờ v&agrave;o lại mất th&ocirc;i!!!</p> <p style="text-align: justify;">Tuy nhi&ecirc;n, đ&acirc;y thực sự l&agrave; những g&igrave; đ&atilde; diễn ra c&aacute;ch đ&acirc;y hơn chục năm. Hầu hết c&aacute;c trang web thời kỳ n&agrave;y đều c&oacute; giao diện kh&aacute; tương tự như tr&ecirc;n. C&aacute;c lập tr&igrave;nh vi&ecirc;n gần như kh&ocirc;ng thể quan t&acirc;m đến phần giao diện hiển thị. Điều n&agrave;y cũng kh&aacute; dễ hiểu v&igrave; khi đ&oacute; đa số người d&ugrave;ng chỉ tiếp cận được Internet dial-up với tốc độ &ldquo;r&ugrave;a b&ograve;" v&agrave; hẳn nhi&ecirc;n việc tải về text th&ocirc;i đ&atilde; vất vả rồi chứ chưa n&oacute;i đến h&igrave;nh ảnh hay animation thậm ch&iacute; c&aacute;c giao diện đẹp mắt, nhiều m&agrave;u sắc, phức tạp kh&aacute;c...</p> <p style="text-align: justify;"><img class=" wp-image-4311 aligncenter" src="https://tek4.vn/wp-content/uploads/2019/03/Front-end-l&agrave;-g&igrave;-3.png" alt="Front end l&agrave; g&igrave; -3" width="297" height="160" /></p> <p style="text-align: justify;">Tất cả sẽ chỉ g&acirc;y nặng nề, chậm chạp v&agrave; chắc chắn sẽ g&acirc;y cảm gi&aacute;c giật lag, hay tải chậm v&agrave; kh&oacute; chịu cho người d&ugrave;ng khi phải chờ h&agrave;ng chục ph&uacute;t để tải trang. Chắc hẳn nếu bạn đ&atilde; từng gặp v&agrave;i vụ th&ocirc;ng b&aacute;o đứt c&aacute;p quang biển, bạn sẽ hiểu cảm gi&aacute;c tải thư tr&ecirc;n Gmail l&agrave; kh&oacute; chịu như thế n&agrave;o. Thậm ch&iacute; để khắc phục Google c&ograve;n duy tr&igrave; song song cả chế độ hiển thị r&uacute;t gọn nhằm tải thư trong trường hợp n&agrave;y. Do đ&oacute; trong thời kỳ n&agrave;y, c&aacute;c website chỉ cần hiệu suất cao kh&ocirc;ng giật lag l&agrave; đạt ti&ecirc;u chuẩn v&agrave; g&aacute;nh nặng chủ yếu được đ&egrave; nặng l&ecirc;n Back-End. V&agrave; trong thời kỳ n&agrave;y nếu c&aacute;c bạn quan t&acirc;m đến tin tuyển dụng sẽ thấy hầu hết đều l&agrave; những tin tuyển dụng chung chung kiểu như "tuyển lập tr&igrave;nh vi&ecirc;n web", "tuyển lập tr&igrave;nh vi&ecirc;n PHP"... hầu như kh&ocirc;ng c&oacute; kh&aacute;i niệm v&agrave; sự t&aacute;ch biệt giữa Back-End v&agrave; Front-End. Khi ai đ&oacute; lập tr&igrave;nh web gần như sẽ ki&ecirc;m nhiệm cả hai c&ocirc;ng việc n&agrave;y. Điều n&agrave;y dẫn đến hệ quả l&agrave; một số Back-End ki&ecirc;m lu&ocirc;n việc của Front-End m&agrave; hiệu quả th&igrave; chắc chắc l&agrave; chỉ ở mức tạm chấp nhận được m&agrave; th&ocirc;i.</p> <p style="text-align: justify;">Tuy nhi&ecirc;n, những năm th&aacute;ng vật lộn với Internet dial-up đ&atilde; qua v&agrave; c&aacute;c c&ocirc;ng nghệ mạng dần được thay thế bằng c&aacute;c c&ocirc;ng nghệ hiện đại hơn như ADSL, thậm ch&iacute; 3G, 4G hay sắp tới đ&acirc;y l&agrave; 5G, 6G...c&ugrave;ng sự ph&aacute;t triển của c&aacute;c c&ocirc;ng nghệ tr&igrave;nh duyệt, gần như c&aacute;c trang web hiện nay đều c&oacute; thể dễ d&agrave;ng được tải thời gian thực với độ trễ kh&ocirc;ng đ&aacute;ng kể. V&agrave; do đ&oacute; y&ecirc;u cầu của người d&ugrave;ng ng&agrave;y c&agrave;ng trở n&ecirc;n kh&oacute; t&iacute;nh hơn. Giống như việc trước đ&acirc;y kh&ocirc;ng c&oacute; ăn th&igrave; chỉ cần ăn no một bữa đ&atilde; l&agrave; tuyệt vời, c&ograve;n b&acirc;y giờ khi ăn no qu&aacute; đủ rồi th&igrave; người ta c&ograve;n phải y&ecirc;u cầu được ăn ngon, nh&igrave;n phải đẹp mắt. Điều đ&oacute; dẫn đến y&ecirc;u cầu c&aacute;c trang web giờ đ&acirc;y kh&ocirc;ng chỉ cần hoạt động tốt, hiệu năng tốt, ổn định, load nhanh nữa m&agrave; c&ograve;n cần phải đẹp, c&oacute; những hiệu ứng bắt mắt, dễ sử dụng, trải nghiệm mượt m&agrave; th&acirc;n thiện với người d&ugrave;ng. L&uacute;c n&agrave;y vai tr&ograve; của Front end v&agrave; Design bắt đầu được ch&uacute; trọng v&agrave; l&agrave;m nảy sinh c&aacute;c kh&aacute;i niệm như Ph&aacute;t triển front end hoặc lập tr&igrave;nh front end hay front end development cho web v&agrave; c&aacute;c front end developer bắt đầu xuất hiện v&agrave; t&aacute;ch biệt rạch r&ograve;i trong c&aacute;c tin tuyển dụng.</p> <p style="text-align: justify;">Thậm ch&iacute; với cấu h&igrave;nh v&agrave; đường truyền ph&iacute;a m&aacute;y kh&aacute;ch ng&agrave;y c&agrave;ng mượt m&agrave;, c&aacute;c tr&igrave;nh duyệt mới với t&iacute;nh năng v&ocirc; cũng mạnh mẽ c&ugrave;ng h&agrave;ng trăm thư viện hỗ trợ như: YUI Library, jQuery... th&igrave; x<span class="tlid-translation translation" lang="vi">u hướng giảm tải xử l&yacute; ph&iacute;a m&aacute;y chủ để chuyển một phần xử l&yacute; về ph&iacute;a m&aacute;y kh&aacute;ch nhằm tăng hiệu năng xử l&yacute; v&agrave; tải trang ng&agrave;y c&agrave;ng phổ biến. Do đ&oacute;, vai tr&ograve; của c&aacute;c front end developer c&agrave;ng ng&agrave;y c&agrave;ng được mở rộng.</span></p> <p>[caption id="attachment_4315" align="aligncenter" width="562"]<img class=" wp-image-4315" src="https://tek4.vn/wp-content/uploads/2019/04/front-end-l&agrave;-g&igrave;_3.jpg" alt="front end l&agrave; g&igrave;_3" width="562" height="288" /> Nguồn: Appstore[/caption]</p> <h2 style="text-align: justify;">Vậy Front end developer l&agrave; ai v&agrave; c&ocirc;ng việc của c&aacute;c front end developer l&agrave; g&igrave;?</h2> <p style="text-align: justify;">N&oacute;i một c&aacute;ch ngắn gọn th&igrave; front end developer ch&iacute;nh l&agrave; những người l&agrave;m c&ocirc;ng việc lập tr&igrave;nh c&aacute;c giao diện v&agrave; tương t&aacute;c của website đối với người d&ugrave;ng đảm bảo trải nghiệm người d&ugrave;ng lu&ocirc;n tốt nhất tr&ecirc;n website.</p> <p style="text-align: justify;">Hay cụ thể hơn l&agrave; tạo ra một giao diện web v&agrave; c&aacute;c tương t&aacute;c như b&ecirc;n dưới bằng c&aacute;ch lập tr&igrave;nh từ c&aacute;c khu&ocirc;n mẫu thiết kế được c&aacute;c designer hoặc ch&iacute;nh front end developer tạo ra từ y&ecirc;u cầu của người d&ugrave;ng.</p> <p style="text-align: justify;"><img class=" wp-image-4312 aligncenter" src="https://tek4.vn/wp-content/uploads/2019/04/front-end-l&agrave;-g&igrave;.png" alt="front end l&agrave; g&igrave;" width="631" height="365" /></p> <p style="text-align: justify;">Hoặc phức tạp hơn với c&aacute;c hiệu ứng v&agrave; h&igrave;nh ảnh đồ họa phức tạp như trang web của <a href="https://waaark.com/">Waaark</a> dưới đ&acirc;y:</p> <p>[caption id="attachment_4313" align="aligncenter" width="713"]<img class=" wp-image-4313" src="https://tek4.vn/wp-content/uploads/2019/04/front-end-l&agrave;-g&igrave;.gif" alt="front end l&agrave; g&igrave;" width="713" height="326" /> Nguồn: https://waaark.com/[/caption]</p> <p style="text-align: justify;">C&ocirc;ng việc của c&aacute;c front end developer l&agrave; đảm bảo t&iacute;nh gọn g&agrave;ng, đẹp mắt, dễ sử dụng của giao diện v&agrave; t&iacute;nh ổn định kh&ocirc;ng bị gi&aacute;n đoạn trong qu&aacute; tr&igrave;nh tải trang. Ngo&agrave;i giao diện s&aacute;ng tạo, hiệu ứng đẹp mắt c&aacute;c front end developer c&ograve;n cần ch&uacute; trọng đến hiệu quả v&agrave; khả năng l&agrave;m việc hiển thị của website với người d&ugrave;ng, chẳng hạn như t&iacute;nh tương th&iacute;ch với nhiều tr&igrave;nh duyệt, m&ocirc;i trường di động, hay trong điều kiện mạng tải chậm hoặc gặp lỗi. N&oacute;i c&aacute;ch kh&aacute;c ngo&agrave;i sự s&aacute;ng tạo v&agrave; chất nghệ sĩ th&igrave; front end developer c&ograve;n cần một tố chất kỹ thuật v&agrave; logic đảm bảo l&agrave; cầu nối giữa Web designer v&agrave; c&aacute;c Back end developer.</p> <p style="text-align: justify;">Thực tế, trong nhiều trường hợp bạn c&oacute; thể thấy c&aacute;c Front end developer l&agrave;m việc như c&aacute;c Designer thiết kế v&agrave; triển khai giao diện từ y&ecirc;u cầu của kh&aacute;ch h&agrave;ng một c&aacute;ch trực tiếp. Tuy nhi&ecirc;n, về mặt bản chất th&igrave; Front end developer c&oacute; nhiệm vụ v&agrave; vai tr&ograve; ho&agrave;n to&agrave;n kh&aacute;c biệt. Nhiệm vụ của c&aacute;c Front end developer l&agrave; chuyển c&aacute;c &yacute; tưởng của Designer th&agrave;nh m&atilde; nguồn v&agrave; tạo ra c&aacute;c giao diện tương t&aacute;c với người d&ugrave;ng từ &yacute; tưởng thiết kế của Designer. Front end developer kh&ocirc;ng thiết kế, kh&ocirc;ng chụp ảnh, kh&ocirc;ng phối m&agrave;u m&agrave; nhiệm vụ ch&iacute;nh l&agrave; sử dụng c&aacute;c nguy&ecirc;n liệu n&agrave;y để tạo n&ecirc;n giao diện v&agrave; c&aacute;c yếu tố chuyển động, tương t&aacute;c kh&aacute;c nhau nhằm tạo n&ecirc;n trải nghiệm sống động cho người xem.</p> <p style="text-align: justify;">Do đ&oacute; c&aacute;c Front end developer cần c&oacute; tr&iacute; tượng tượng phong ph&uacute; để c&oacute; thể h&igrave;nh dung website sẽ tr&ocirc;ng như thế n&agrave;o, trong khi phải đ&aacute;p ứng c&aacute;c yếu tố kỹ thuật để c&oacute; thể hiện thực h&oacute;a những điều đ&oacute;. C&ocirc;ng việc n&agrave;y phải được thực hiện một c&aacute;ch liền mạch, đảm bảo t&iacute;nh trực quan nhất cho người d&ugrave;ng.</p> <h2 style="text-align: justify;">Kh&oacute; khăn m&agrave; c&aacute;c Front end developer gặp phải l&agrave; g&igrave;?</h2> <p style="text-align: justify;">C&oacute; thể c&aacute;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&aacute;c thiết kế từ designer th&igrave; dễ qu&aacute;, vậy chỉ cần k&eacute;o thả, fix m&agrave;u, ch&egrave;n ảnh l&agrave; xong m&agrave;, thậm ch&iacute; kh&ocirc;ng cần biết bất cứ thuật to&aacute;n n&agrave;o ấy chứ !!!". Tuy nhi&ecirc;n, đ&acirc;y l&agrave; huyền thoại v&agrave; tất nhi&ecirc;n đều kh&ocirc;ng c&oacute; thật. C&ocirc;ng việc của c&aacute;c front end developer tr&ecirc;n thực tế kh&ocirc;ng chỉ như vậy. Front end developer giỏi th&igrave; thuật to&aacute;n cũng si&ecirc;u khủng v&agrave; c&oacute; rất nhiều c&aacute;c vấn đề gặp phải tr&ecirc;n thực tế m&agrave; c&aacute;c front end developer cần giải quyết.</p> <p style="text-align: justify;"><span class="tlid-translation translation" lang="vi">Đầu ti&ecirc;n l&agrave; sự thay đổi ch&oacute;ng mặt của c&aacute;c c&ocirc;ng cụ v&agrave; kỹ thuật được sử dụng để tạo giao diện người d&ugrave;ng. C&aacute;c front end developer mới bước v&agrave;o ng&agrave;nh gặp kh&aacute; nhiều kh&oacute; khăn v&agrave; kh&aacute; cho&aacute;ng ngợp kh&ocirc;ng biết bắt đầu từ đ&acirc;u, kh&ocirc;ng biết n&ecirc;n học g&igrave; bỏ g&igrave;. Vấn đề n&agrave;y sẽ được giải quyết ở ph&iacute;a sau của b&agrave;i viết n&agrave;y. Tuy nhi&ecirc;n, chắc chắn một b&agrave;i viết sẽ kh&ocirc;ng thể lột tả to&agrave;n bộ kh&iacute;a cạnh của to&agrave;n ng&agrave;nh, thậm ch&iacute; nhiều kh&iacute;a cạnh sẽ tiếp tục ph&aacute;t triển trong tương lai. Do đ&oacute;, phải lu&ocirc;n t&acirc;m niệm rằng phải li&ecirc;n tục cập nhật c&aacute;c kiến thức trong lĩnh vực để biết n&oacute; đang ph&aacute;t triển như thế n&agrave;o. Đ&acirc;y l&agrave; vấn đề chung đối với bất cứ lập tr&igrave;nh vi&ecirc;n n&agrave;o đều gặp phải.<br /></span></p> <p><img class=" wp-image-4316 aligncenter" src="https://tek4.vn/wp-content/uploads/2019/04/front-end-l&agrave;-g&igrave;_4.png" alt="front end l&agrave; g&igrave;_4" width="259" height="242" /></p> <p style="text-align: justify;"><span class="tlid-translation translation" lang="vi">Th&aacute;ch thức tiếp theo đối với front end developer l&agrave; cần đảm bảo t&iacute;nh dễ đọc của nội dung v&agrave; th&acirc;n thiện trong tương t&aacute;c đối với người d&ugrave;ng khi họ v&agrave;o trang. Điều n&agrave;y nghe c&oacute; vẻ dễ đ&uacute;ng kh&ocirc;ng ạ? Nhưng tr&ecirc;n thực tế n&oacute; kh&ocirc;ng hề dễ d&agrave;ng ch&uacute;t n&agrave;o. L&iacute; do l&agrave; người d&ugrave;ng kh&ocirc;ng chỉ sử dụng một thiết bị c&oacute; k&iacute;ch thước v&agrave; độ ph&acirc;n giải giống hệt với nh&agrave; ph&aacute;t triển, họ c&oacute; thể sử dụng rất nhiều loại thiết bị với k&iacute;ch thước v&agrave; độ ph&acirc;n giải m&agrave;n h&igrave;nh kh&aacute;c nhau, do đ&oacute; buộc nh&agrave; thiết kế phải xem x&eacute;t c&aacute;c kh&iacute;a cạnh n&agrave;y khi thiết kế trang web. C&aacute;c lập tr&igrave;nh vi&ecirc;n front end cần đảm bảo rằng trang web được thiết kế c&oacute; thể hiển thị một c&aacute;ch ch&iacute;nh x&aacute;c trong c&aacute;c tr&igrave;nh duyệt kh&aacute;c nhau (cross-browser), hệ điều h&agrave;nh kh&aacute;c nhau (đa nền tảng) v&agrave; c&aacute;c thiết bị kh&aacute;c nhau (cross-device). Việc n&agrave;y đ&ograve;i hỏi phải lập kế hoạch v&agrave; kiểm thử cẩn thận chi tiết v&agrave; đ&ograve;i hỏi tốn kh&aacute; nhiều thời gian v&agrave; c&ocirc;ng sức.</span></p> <p style="text-align: justify;"><img class=" wp-image-4317 aligncenter" src="https://tek4.vn/wp-content/uploads/2019/04/front-end-l&agrave;-g&igrave;_5.png" alt="front end l&agrave; g&igrave;_5" width="548" height="303" /></p> <p style="text-align: justify;">C&aacute;c website ng&agrave;y nay đ&ograve;i hỏi t&iacute;nh linh hoạt cao, c&aacute;c giao diện cần mềm dẻo, t&ugrave;y biến c&oacute; khả năng thay đổi&nbsp; đ&aacute;p ứng cho từng thiết bị cụ thể, từ m&aacute;y t&iacute;nh để b&agrave;n, smartphone cho đến m&aacute;y t&iacute;nh bảng với mọi k&iacute;ch cỡ. Bất kể người d&ugrave;ng sử dụng thiết bị n&agrave;o, website vẫn phải thay đổi giao diện một c&aacute;ch linh hoạt m&agrave; kh&ocirc;ng gặp bất kỳ trở ngại n&agrave;o, v&agrave; đ&acirc;y ch&iacute;nh l&agrave; c&ocirc;ng việc th&aacute;ch thức lớn nhất của Front-End Developer khi triển khai thiết kế của Designer.</p> <p style="text-align: justify;">Khi HTML5 v&agrave; CSS3 ra đời k&eacute;o theo sự b&ugrave;ng nổ c&ocirc;ng nghệ Resposive (tương th&iacute;ch tr&ecirc;n mobile/tablet) l&agrave;m cho việc thiết kế Layout nhiều hơn v&agrave; c&aacute;c Front end developer đ&ocirc;i khi gặp bế tắc với những giao diện kh&oacute; khi thực hiện Responsive. Khi đ&oacute; 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&agrave; triển khai đẹp mắt tr&ecirc;n m&aacute;y t&iacute;nh c&aacute; nh&acirc;n nhưng khi hiển thị tr&ecirc;n mobile th&igrave; kh&ocirc;ng thể hiển thị đầy đủ c&aacute;c chi tiết hoặc c&aacute;c n&uacute;t bấm nằm qu&aacute; s&aacute;t, hoặc x&ocirc; lệch g&acirc;y kh&oacute; khăn cho người d&ugrave;ng c&oacute; thiết bị nhỏ th&igrave; đ&oacute; ch&iacute;nh l&agrave; thất bại của UI/UX.</p> <p style="text-align: justify;">Vấn đề cuối c&ugrave;ng l&agrave; Front end developer như người "l&agrave;m d&acirc;u trăm họ". C&aacute;c Front end developer phải l&agrave;m thỏa m&atilde;n kh&aacute;ch h&agrave;ng, sếp, designer, v&agrave; thậm ch&iacute; cả backend developer. M&agrave; việc thay đổi mẫu thiết kế v&agrave; y&ecirc;u cầu của kh&aacute;ch h&agrave;ng th&igrave; li&ecirc;n xo&agrave;nh xoạch v&agrave; front end developer v&agrave; designer l&agrave; hai vị tr&iacute; "chịu trận" nhiều nhất. Bởi theo t&acirc;m l&yacute; chung th&igrave; kh&aacute;ch h&agrave;ng chỉ cần nh&igrave;n website bắt mắt v&agrave; hoạt động ổn, c&ograve;n lại phần backend l&agrave;m g&igrave; thường kh&aacute;ch h&agrave;ng kh&ocirc;ng quan t&acirc;m đến nhiều. Điều n&agrave;y dẫn đến vị tr&iacute; Front end developer l&agrave; vị tr&iacute; phải chịu nhiều sự bất đồng nhất. Đặc biệt khi nhiều l&uacute;c kh&aacute;ch h&agrave;ng v&agrave; designer c&oacute; những y&ecirc;u cầu thiết kể m&agrave; kh&ocirc;ng thể m&ocirc; tả r&otilde; như y&ecirc;u cầu một n&uacute;t (button) khi hover sẽ đổi m&agrave;u, hay c&oacute; h&agrave;ng chục hiệu ứng hiện ra. V&agrave; trong những trường hợp kh&oacute; diễn giải như vậy, mọi chuyện trở l&ecirc;n rất phức tạp, khi c&oacute; thể phải l&agrave;m đi l&agrave;m lại h&agrave;ng chục lần vẫn kh&ocirc;ng đ&uacute;ng &yacute;. Đ&oacute; l&agrave; chưa kể khi kh&aacute;ch h&agrave;ng v&agrave; designer đưa ra những y&ecirc;u cầu m&agrave; kh&ocirc;ng khả thi về mặt kỹ thuật (hoặc kinh ph&iacute; kh&ocirc;ng đ&aacute;p ứng). Quả thực l&agrave; một cuộc chiến d&agrave;i cho c&aacute;c front end developer.</p> <p style="text-align: justify;"><img class=" wp-image-4318 aligncenter" src="https://tek4.vn/wp-content/uploads/2019/04/Front-end-l&agrave;-g&igrave;-4.jpg" alt="Front end l&agrave; g&igrave; -4" width="459" height="323" /></p> <h2>Những kỹ năng cần thiết của một Front end developer</h2> <p>Trước đ&acirc;y, lập tr&igrave;nh front end chủ yếu xoay quanh HTML, CSS v&agrave; JavaScript, tuy nhi&ecirc;n c&ugrave;ng với sự ph&aacute;t triển của c&ocirc;ng nghệ lập tr&igrave;nh v&agrave; di động, c&aacute;c kỹ năng đ&ograve;i hỏi với c&aacute;c lập tr&igrave;nh vi&ecirc;n front end đ&atilde; ng&agrave;y c&agrave;ng thay đổi. Dạo qua v&agrave;i trang tuyển dụng hoặc c&oacute; kinh nghiệm l&agrave;m việc v&agrave;i năm trong lĩnh vực lập tr&igrave;nh front end ch&uacute;ng ta c&oacute; thể thấy với một front end developer hiện đại th&igrave; c&aacute;c kỹ năng cần thiết hiện nay l&agrave;:</p> <h3><strong>HTLM &amp; CSS</strong></h3> <p style="text-align: justify;">Đ&acirc;y vẫn l&agrave; kỹ năng cơ bản thiết yếu h&agrave;ng đầu đối với một front end developer. Vai tr&ograve; của HTML v&agrave; CSS tương tự như đất đối với người n&ocirc;ng d&acirc;n. Người n&ocirc;ng d&acirc;n c&oacute; thể thay liềm bằng m&aacute;y gặt, cuốc bằng m&aacute;y c&agrave;y hiệu quả hơn, nhưng đất th&igrave; kh&ocirc;ng thể thay thế được. Mọi phản hồi của trang đều li&ecirc;n quan trực tiếp đến HTML. Khi học l&agrave;m web một điều kh&ocirc;ng thể thiếu đ&oacute; l&agrave; biết HTML, nếu kh&ocirc;ng bạn sẽ kh&ocirc;ng thể hiểu được tại sao trang web lại hiển thị như vậy v&agrave; kh&ocirc;ng thể biết l&agrave;m thế n&agrave;o để c&aacute;c m&atilde; chạy v&agrave; render ra tr&igrave;nh duyệt.</p> <p style="text-align: justify;">Ban đầu khi kh&aacute;i niệm web mới ra đời, chỉ c&oacute; HTML được sử dụng để xử l&yacute; c&aacute;c thiết kế v&agrave; định dạng. HTML hỗ trợ định dạng cấu tr&uacute;c chung của website v&agrave; c&aacute;c yếu tố cơ bản về giao diện như m&agrave;u nền, cỡ chữ, font chữ, kiểu t&ocirc; đậm hoặc in nghi&ecirc;ng của c&aacute;c k&iacute; tự, v&agrave; nh&oacute;m c&aacute;c văn bản lại với nhau. Điều n&agrave;y chỉ đủ đối với c&aacute;c website thuần văn bản, tĩnh. Tuy nhi&ecirc;n khi muốn th&ecirc;m h&igrave;nh ảnh minh họa hay h&igrave;nh nền th&igrave; sao? Đ&acirc;y ch&iacute;nh l&agrave; sức mạnh của CSS. CSS cho ph&eacute;p t&aacute;c động nhiều hơn đến giao diện website. Khi d&ugrave;ng CSS, Front-End Developer c&oacute; thể thay đổi giao diện tr&ecirc;n trang chỉ bằng một đoạn code, m&agrave; kh&ocirc;ng cần phải lập lại nhiều lần. V&iacute; dụ: chỉ cần một v&agrave;i d&ograve;ng CSS để c&oacute; thể biến tất cả ti&ecirc;u đề tr&ecirc;n website th&agrave;nh m&agrave;u xanh thay v&igrave; fix lại bằng tay từng thẻ head trong HTML.</p> <p style="text-align: justify;"><img class=" wp-image-4319 aligncenter" src="https://tek4.vn/wp-content/uploads/2019/04/html_css.jpg" alt="html_css" width="489" height="326" /></p> <p style="text-align: justify;">HTML (Hyper Text Markup Language) v&agrave; CSS (Cascading Style Sheets) vẫn l&agrave; hai th&agrave;nh phần cơ bản nhất trong ph&aacute;t triển ứng dụng web. Nếu kh&ocirc;ng c&oacute; HTML v&agrave; CSS, tất cả những g&igrave; trang web của bạn c&oacute; thể hiển thị l&agrave; một mớ văn bản chưa định dạng tr&ecirc;n m&agrave;n h&igrave;nh. Bạn kh&ocirc;ng thể thiết kế trang web, kh&ocirc;ng thể th&ecirc;m h&igrave;nh ảnh v&agrave;o một trang nếu kh&ocirc;ng c&oacute;&nbsp;HTML!</p> <p style="text-align: justify;">D&ugrave; với Front end hay Back end developer th&igrave; kỹ năng đầu ti&ecirc;n cần phải th&agrave;nh thạo đ&oacute; l&agrave; lập tr&igrave;nh với HTML v&agrave; CSS. Với HTML v&agrave; CSS bạn c&oacute; thể x&acirc;y dựng được một trang web cơ bản. V&agrave; phần n&agrave;y cũng kh&ocirc;ng hề kh&oacute; học. Chỉ mất khoảng v&agrave;i tuần l&agrave; c&oacute; thể sử dụng th&agrave;nh thạo HTML v&agrave; CSS. H&atilde;y ch&uacute; &yacute; đến HTML5 v&agrave; CSS3, đ&acirc;y l&agrave; những cải tiến hiển thị đ&aacute;ng kể để trang tr&iacute; v&agrave; tr&igrave;nh b&agrave;y trang web v&agrave; cung cấp nhiều t&iacute;nh năng hữu &iacute;ch.</p> <h3><strong>JavaScript</strong></h3> <p style="text-align: justify;">Với HTML v&agrave; CSS bạn c&oacute; thể tạo ra c&aacute;c trang web hiển thị nội dung cơ bản tuy nhi&ecirc;n nếu bạn muốn trang web của m&igrave;nh c&oacute; những chức năng phức tạp hơn, th&acirc;n thiện hơn với người d&ugrave;ng, chứa c&aacute;c hiệu ứng đẹp mắt th&igrave; điều kh&ocirc;ng thể thiếu l&agrave; JavaScript. JavaScript cho ph&eacute;p th&ecirc;m v&agrave;o cho trang web h&agrave;ng ng&agrave;n chức năng hữu &iacute;ch chẳng hạn xử l&yacute; sự kiện tương t&aacute;c với người d&ugrave;ng, ghi lại phi&ecirc;n l&agrave;m việc nhằm n&acirc;ng cao trải nghiệm li&ecirc;n tục cho người d&ugrave;ng; thậm ch&iacute; JS c&oacute; thể được sử dụng để tạo ra c&aacute;c tương t&aacute;c tr&ecirc;n bản đồ c&aacute;c tr&ograve; chơi trực tuyến. C&aacute;c trang web như Facebook, Pinterest sử dụng rất nhiều JavaScript để biến giao diện người d&ugrave;ng dễ sử dụng hơn.</p> <p style="text-align: justify;"><img class=" wp-image-4320 aligncenter" src="https://tek4.vn/wp-content/uploads/2019/04/javascript-illustration.png" alt="javascript-illustration" width="560" height="210" /></p> <p style="text-align: justify;">JavaScript c&ograve;n c&oacute; thể sử dụng để điều khiển nhiều th&agrave;nh phần tr&ecirc;n website m&agrave; kh&ocirc;ng phải tải lại trang. Điều n&agrave;y rất quan trọng trong cải thiện trải nghiệm người d&ugrave;ng. Thử tưởng tượng bạn sẽ kh&oacute; chịu như thế n&agrave;o khi form đăng nhập khi chưa xong lại bị tải lại v&agrave; mất to&agrave;n bộ nội dung v&agrave; y&ecirc;u cầu nhập lại, hay khi tr&igrave;nh duyệt refresh mỗi lần bạn lăn chuột để xem News Feed tr&ecirc;n Facebook v&agrave; k&eacute;o theo nội dung bạn đang đọc bị thay đổi ho&agrave;n to&agrave;n. C&aacute;c front-end framework được sử dụng để l&agrave;m nổi bật hay đơn giản h&oacute;a những nhiệm vụ của JavaScript. V&iacute; dụ, với Angular JS framework c&oacute; thể gi&uacute;p c&aacute;c developer x&acirc;y dựng những ứng dụng tr&ecirc;n trang hiệu quả hơn, AJAX c&oacute; thể cập nhật website m&agrave; kh&ocirc;ng cần phải tải lại trang, hay gần đ&acirc;y l&agrave; NodeJS cho ph&eacute;p thực thi m&atilde; ph&iacute;a m&aacute;y chủ.</p> <p style="text-align: justify;">Ngo&agrave;i ra, theo c&aacute;c khảo s&aacute;t th&igrave; JavaScript cũng l&agrave; ng&ocirc;n ngữ lập tr&igrave;nh phổ biến nhất tr&ecirc;n thế giới, v&igrave; vậy JS l&agrave; 1 nội dung gi&aacute; trị cần t&igrave;m hiểu.</p> <h3><strong>jQuery</strong></h3> <p style="text-align: justify;">jQuery l&agrave; một thư viện JavaScript. Đ&acirc;y l&agrave; tập hợp c&aacute;c phần mở rộng được đ&oacute;ng g&oacute;i gi&uacute;p đẩy nhanh qu&aacute; tr&igrave;nh ph&aacute;t triển với JavaScript. Thay v&igrave; phải lập tr&igrave;nh tất cả mọi thứ từ đầu, bạn c&oacute; th&ecirc;m c&aacute;c yếu tố c&oacute; sẵn v&agrave;o dự &aacute;n v&agrave; t&ugrave;y chỉnh khi cần thiết khi sử dụng jQuery. Bạn c&oacute; thể dễ d&agrave;ng tạo ra một đồng hồ đếm thời gian, chức năng đề xuất từ kh&oacute;a t&igrave;m kiểm tr&ecirc;n form t&igrave;m kiếm v&agrave; thậm ch&iacute; l&agrave; tự động sắp xếp v&agrave; hiệu chỉnh k&iacute;ch thước c&aacute;c grid layouts.</p> <p style="text-align: justify;"><img class=" wp-image-4321 aligncenter" src="https://tek4.vn/wp-content/uploads/2019/04/jquery.jpg" alt="jquery" width="527" height="274" /></p> <h3><strong>C&aacute;c Front end frameworks v&agrave; JavaScript Frameworks<br /></strong></h3> <p style="text-align: justify;">Khoảng chục năm trở lại đ&acirc;y với sự ph&aacute;t triển của c&aacute;c thiết bị di động dần dần thay thế c&aacute;c thiết bị m&aacute;y m&oacute;c cũ kỹ c&ugrave;ng với tốc độ mạng được n&acirc;ng cao đ&aacute;ng kể th&igrave; tư duy về m&ocirc; h&igrave;nh Server-Clients đ&atilde; c&oacute; những chuyển biến kh&aacute;c biệt đ&aacute;ng kể. Thay v&igrave; đặt phần chịu tải nặng nề dồn &eacute;p ho&agrave;n to&agrave;n l&ecirc;n Back-End &amp; Server th&igrave; giờ đ&acirc;y hầu hết mọi thứ được trả về cho Clients đảm nhiệm. Thay v&igrave; trước kia mọi xử l&yacute; thuật to&aacute;n hay render hiển thị th&igrave; ph&iacute;a Clients phải gửi request l&ecirc;n Server sau đ&oacute; Server xử l&yacute; rồi trả kết quả để Client hiển thị th&igrave; giờ đ&acirc;y với nền tảng Back-End mới c&aacute;c ứng dụng c&oacute; thể chạy real-time v&agrave; ph&iacute;a front end ho&agrave;n to&agrave;n chủ động trong việc xử l&yacute; c&aacute;c dữ liệu như: tạo v&ograve;ng lập, lưu trữ cục bộ, x&aacute;c nhận...</p> <p style="text-align: justify;">Điều n&agrave;y dẫn tới một khối lượng c&ocirc;ng việc đồ sộ bị đẩy về ph&iacute;a front end developer v&agrave; sẽ rất kh&oacute; để c&aacute;c front end developer thực hiện điều n&agrave;y ho&agrave;n to&agrave;n chỉ với HTML, CSS v&agrave; JavaScript thuần. Do đ&oacute;, dẫn đến việc h&agrave;ng trăm c&ocirc;ng ty c&ocirc;ng nghệ lớn nhỏ hỗ trợ v&agrave; ph&aacute;t triển rất nhiều Front-End Frame Work (m&agrave; trong đ&oacute; chủ yếu l&agrave; c&aacute;c JavaScript framework) nhằm giảm tải v&agrave; đơn giản h&oacute;a c&ocirc;ng việc cho c&aacute;c developer như:</p> <ul> <li>Google: AngularJS, @Angular, Material...</li> <li>Facebook: React, React native...</li> <li>Evan You: Vuejs</li> <li>Twitter: Bootstrap, hogan.js...</li> <li>Apache: Cordova</li> <li>Drifty Co: Ionic</li> <li>...</li> </ul> <p>[caption id="attachment_4322" align="aligncenter" width="544"]<img class=" wp-image-4322" src="https://tek4.vn/wp-content/uploads/2019/04/javascript-framework.png" alt="javascript-framework" width="544" height="272" /> Nguồn: iKodes Technology[/caption]</p> <p style="text-align: justify;">Tương tự như c&aacute;c thư viện như .NET Framework, c&aacute;c front end frameworks hay Javascript frameworks l&agrave; c&aacute;c thư viện tập hợp c&aacute;c cấu tr&uacute;c v&agrave; mẫu c&oacute; sẵn cho việc lập tr&igrave;nh nhằm tăng khả năng sử dụng lại m&atilde; v&agrave; giảm tải số lượng m&atilde; phải viết cho lập tr&igrave;nh vi&ecirc;n.&nbsp;C&oacute; nhiều frameworks kh&aacute;c nhau ph&ugrave; hợp với từng y&ecirc;u cầu kh&aacute;c nhau khi triển khai ứng dụng c&oacute; thể kể đến ở tr&ecirc;n, tuy nhi&ecirc;n phổ biến nhất hiện nay th&igrave; như ch&uacute;ng ta biết đến với JavaScript kể đến l&agrave;: AngularJS, Backbone, Ember, hay ReactJS...hay front end framework Bootstrap x&acirc;y dựng cơ sở từ HTML v&agrave; CSS. Đa phần c&aacute;c trang web đều thường bắt đầu với c&aacute;c elements giống nhau từ trang n&agrave;y qua trang kh&aacute;c. Do đ&oacute; một framework định nghĩa sẵn cho c&aacute;c th&agrave;nh phần v&agrave; tương t&aacute;c n&agrave;y sẽ gi&uacute;p tăng tốc độ lập tr&igrave;nh, gi&uacute;p lập tr&igrave;nh vi&ecirc;n phải viết &iacute;t m&atilde; hơn, giảm thiểu việc phải code&nbsp;lại từ đầu nhiều chức năng sẵn c&oacute; hữu &iacute;ch.</p> <p style="text-align: justify;">Đ&acirc;y l&agrave; một kỹ năng hữu &iacute;ch. Hầu hết c&aacute;c c&ocirc;ng việc hiện nay cho front-end developer đều cần am hiểu v&agrave; vận dụng tốt c&aacute;c frameworks&nbsp;n&agrave;y. Bạn c&oacute; thể chọn một hoặc một v&agrave;i framework điển h&igrave;nh m&agrave; bạn cảm thấy th&iacute;ch để t&igrave;m hiểu. Biết một số framework c&oacute; thể l&agrave; lợi thế rất lớn trong qu&aacute; tr&igrave;nh xin việc. Đặc biệt c&aacute;c kỹ năng li&ecirc;n quan đến Agular, React, Vue hay NodeJS l&agrave; những y&ecirc;u cầu rất phổ biến trong c&aacute;c tin tức tuyển dụng.</p> <h3><strong>CSS Preprocessors hay c&aacute;c bộ tiền xử l&yacute; CSS<br /></strong></h3> <p style="text-align: justify;">CSS đơn giản chỉ l&agrave; một ng&ocirc;n ngữ m&ocirc; tả kiểu hiển thị, do đ&oacute; để x&acirc;y dựng một h&agrave;m, sử dụng lại một định nghĩa hoặc kế thừa một đối tượng tr&ecirc;n CSS l&agrave; rất kh&oacute;. V&igrave; vậy, đối với c&aacute;c dự &aacute;n lớn, hoặc c&aacute;c hệ thống phức tạp th&igrave; việc bảo tr&igrave; l&agrave; một vấn đề rất lớn. Mặt kh&aacute;c, khi c&ocirc;ng nghệ web ng&agrave;y c&agrave;ng ph&aacute;t triển, c&aacute;c th&ocirc;ng số kỹ thuật mới được th&ecirc;m v&agrave;o HTML v&agrave; CSS ng&agrave;y một nhiều hơn, v&agrave; c&aacute;c tr&igrave;nh duyệt của c&aacute;c h&atilde;ng kh&aacute;c nhau thậm ch&iacute; phi&ecirc;n bản kh&aacute;c nhau thường xảy ra sự kh&ocirc;ng đồng bộ về c&aacute;c th&ocirc;ng số kỹ thuật mới. Điều n&agrave;y dẫn rất kh&oacute; khăn khi muốn hiển thị c&ugrave;ng một nội dung định dạng l&ecirc;n c&aacute;c tr&igrave;nh duyệt kh&aacute;c nhau. Để viết CSS tốt hơn, c&oacute; nhiều c&aacute;ch tiếp cận kh&aacute;c nhau như t&aacute;ch c&aacute;c định nghĩa th&agrave;nh c&aacute;c tệp nhỏ hơn v&agrave; nhập ch&uacute;ng v&agrave;o một tệp ch&iacute;nh khi thực thi. C&aacute;ch tiếp cận n&agrave;y đ&atilde; gi&uacute;p đối ph&oacute; với c&aacute;c th&agrave;nh phần kh&aacute;c biệt, nhưng, kh&ocirc;ng giải quyết được sự lặp lại m&atilde; v&agrave; c&aacute;c vấn đề bảo tr&igrave;. Một c&aacute;ch tiếp cận kh&aacute;c l&agrave; triển khai CSS hướng đối tượng đơn giản. Trong trường hợp n&agrave;y, ch&uacute;ng ta c&oacute; thể &aacute;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&ecirc;m một loại mẫu cho th&agrave;nh phần. Điều n&agrave;y l&agrave;m gi&uacute;p tăng khả năng sử dụng lại nhưng lại l&agrave;m giảm khả năng bảo tr&igrave;.</p> <p style="text-align: justify;"><img class=" wp-image-4323 aligncenter" src="https://tek4.vn/wp-content/uploads/2019/04/css-preprocessors.jpg" alt="css-preprocessors" width="630" height="252" /></p> <p style="text-align: justify;">Bộ tiền xử l&yacute; CSS được bổ sung mở rộng c&aacute;c kh&aacute;i niệm biến, to&aacute;n tử, nội suy, h&agrave;m, mixin v&agrave; nhiều kh&aacute;i niệm c&oacute; thể sử dụng kh&aacute;c gi&uacute;p cho c&aacute;c m&atilde; CSS c&oacute; thể sử dụng lại, c&oacute; thể duy tr&igrave; v&agrave; c&oacute; thể mở rộng dễ d&agrave;ng hơn. CSS pre-processor l&agrave;m tăng năng suất v&agrave; giảm số lượng m&atilde; phải viết trong một dự &aacute;n. C&aacute;c chương tr&igrave;nh tiền xử l&yacute; bằng ng&ocirc;n ngữ kịch bản (Preprocessor Scripting Language ), sẽ được bi&ecirc;n dịch th&agrave;nh CSS khi pulish l&ecirc;n website. Nghĩa l&agrave;, ch&uacute;ng ta sẽ l&agrave;m style bằng ng&ocirc;n ngữ kịch bản, rồi bộ tiền xử l&yacute; sẽ render ch&uacute;ng th&agrave;nh c&aacute;c file CSS th&acirc;n thiện với cross-browser v&agrave; c&oacute; format tốt.</p> <p style="text-align: justify;">Một số CSS pre-processor phổ biến m&agrave; ch&uacute;ng ta c&oacute; thể cần biết l&agrave;: <strong>SASS, Stylus, Less hay PostCSS</strong> (PostCSS kh&ocirc;ng phải l&agrave; bộ tiền xử l&yacute; nhưng c&oacute; thể được sử dụng với chức năng tương tự). Theo c&aacute;c y&ecirc;u cầu tuyển dụng thực tế th&igrave; SASS v&agrave; LESS l&agrave; hai preprocessors&nbsp;c&oacute; nhu cầu cao nhất. H&atilde;y quan t&acirc;m đến SASS, c&aacute;c lựa chọn kh&aacute;c chỉ được đưa ra ở đ&acirc;y nhằm mục đ&iacute;ch so s&aacute;nh. SASS vẫn l&agrave; một CSS pre-processor phổ biến v&agrave; ưu việt nhất hiện nay.</p> <h3><strong>Kinh nghiệm với RESTful Services v&agrave; APIs</strong></h3> <p>REST l&agrave; viết tắt của Representational State Transfer, l&agrave; một kiến tr&uacute;c gọn nhẹ gi&uacute;p đơn giản h&oacute;a mạng lưới giao tiếp tr&ecirc;n trang web. C&aacute;c RESTful servicse v&agrave; APIs l&agrave; c&aacute;c web services&nbsp;tu&acirc;n theo kiến tr&uacute;c REST.</p> <p style="text-align: justify;">V&iacute; dụ bạn muốn viết một ứng dụng với mục ti&ecirc;u hiển thị&nbsp;tất cả những người bạn trện mạng x&atilde; 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&oacute; thể call&nbsp;đến RESTful API của Facebook để đọc danh s&aacute;ch bạn b&egrave; v&agrave; trả lại dữ liệu đ&oacute;, tương tự với Twitter (mạng x&atilde; hội cũng sử dụng RESTful APIs). Qu&aacute; tr&igrave;nh chung l&agrave; như nhau cho bất kỳ services n&agrave;o sử dụng RESTful APIs, chỉ c&oacute; c&aacute;c dữ liệu trả về l&agrave; kh&aacute;c nhau.</p> <p style="text-align: justify;">C&aacute;c kinh nghiệm với RESTful Services v&agrave; API gi&uacute;p bạn biết c&aacute;ch giao tiếp với 1 web services. Gi&uacute;p web services l&agrave;m việc hiệu quả hơn, c&oacute; khả năng mở rộng tốt hơn, đ&aacute;ng tin cậy hơn v&agrave; dễ chỉnh sửa hoặc di chuyển hơn.</p> <h3><strong>Responsive, Mobile v&agrave; c&aacute;c web site đa nền tảng<br /></strong></h3> <p style="text-align: justify;">Theo thống k&ecirc; về lưu lượng&nbsp;truy cập Internet th&igrave; lượng truy cập từ thiết bị di động đ&atilde; bắt đầu c&oacute; xu hướng bắt kịp c&aacute;c lưu lượng truy cập qua m&aacute;y t&iacute;nh để b&agrave;n, v&igrave; vậy kh&ocirc;ng c&oacute; g&igrave; ngạc nhi&ecirc;n khi kỹ năng thiết kế website tương th&iacute;ch đa nền tảng, hỗ trợ mobile, c&oacute; khả năng responsive đ&oacute;ng vai tr&ograve; quan trọng đối với c&aacute;c Front end developer hiện nay.</p> <p style="text-align: justify;">Responsive design gi&uacute;p bố tr&iacute; của trang web (đ&ocirc;i khi cả chức năng v&agrave; nội dung của trang) c&oacute; khả năng thay đổi dựa tr&ecirc;n k&iacute;ch thước m&agrave;n h&igrave;nh v&agrave; thiết bị đang d&ugrave;ng thậm ch&iacute; nội dung thay đổi theo từng quốc gia v&agrave; người d&ugrave;ng cụ thể. Chẳng hạn khi người d&ugrave;ng truy cập 1&nbsp;trang web từ thiết bị với m&agrave;n h&igrave;nh lớn sẽ nhận được giao diện gồm nhiều cột, c&aacute;c đồ họa lớn v&agrave; tương t&aacute;c được tạo ra ri&ecirc;ng cho chuột v&agrave; b&agrave;n ph&iacute;m. Trong khi tr&ecirc;n thiết bị di động, trang n&agrave;y sẽ xuất hiện dưới dạng 1 cột duy nhất v&agrave; được tối ưu h&oacute;a cho c&aacute;c tương t&aacute;c chạm vuốt, m&agrave;n h&igrave;nh.</p> <p style="text-align: justify;"><img class=" wp-image-4324 aligncenter" src="https://tek4.vn/wp-content/uploads/2019/04/Front-end-l&agrave;-g&igrave;-7.jpg" alt="Front end l&agrave; g&igrave; -7" width="490" height="306" /></p> <p style="text-align: justify;">Thiết kế mobile c&oacute; thể bao gồm thiết kế responsive, cũng như c&aacute;c thiết kế mobile cụ thể ri&ecirc;ng biệt. Kh&aacute;c biệt nằm ở chỗ khi bạn muốn người d&ugrave;ng c&oacute; trải nghiệm ho&agrave;n to&agrave;n kh&aacute;c tr&ecirc;n mobile so với tr&ecirc;n m&aacute;y t&iacute;nh để b&agrave;n. Chẳng hạn, một trang web ng&acirc;n h&agrave;ng với online banking tr&ecirc;n mobile c&oacute; thể cho ph&eacute;p người d&ugrave;ng t&igrave;m kiếm vị tr&iacute; c&aacute;c điểm giao dịch gần nhất v&agrave; kiểm tra t&agrave;i khoản thời gian thực - điều m&agrave; website th&ocirc;ng thường tr&ecirc;n m&ocirc;i trường m&aacute;y t&iacute;nh c&aacute; nh&acirc;n kh&ocirc;ng cung cấp được.</p> <p style="text-align: justify;">Nh&igrave;n chung c&aacute;c m&ocirc;i trường hệ điều h&agrave;nh v&agrave; tr&igrave;nh duyệt hiện đại đều c&oacute; khả năng hiển thị trang web 1 c&aacute;ch nhất qu&aacute;n, tuy nhi&ecirc;n vẫn c&oacute; sự kh&aacute;c biệt trong c&aacute;ch &ldquo;th&ocirc;ng dịch&rdquo; code v&agrave; c&oacute; thể g&acirc;y ra một số ấn đề với giao diện. Để website hiển thị một c&aacute;ch đồng nhất tr&ecirc;n c&aacute;c tr&igrave;nh duyệt kh&aacute;c nhau, bạn cần biết c&aacute;ch l&agrave;m thế n&agrave;o để l&agrave;m cho mỗi loại tr&igrave;nh duyệt đ&oacute; tu&acirc;n theo &yacute; muốn của m&igrave;nh. Đ&acirc;y ch&iacute;nh l&agrave; kỹ năng lập tr&igrave;nh đa nền tảng, đ&ograve;i hỏi c&aacute;c lập tr&igrave;nh vi&ecirc;n cần c&oacute; những kế hoạch kiểm thử, v&agrave; x&acirc;y dựng tỉ mỉ, cũng như hiểu r&otilde; sự kh&aacute;c biệt của c&aacute;c tr&igrave;nh duyệt trong qu&aacute; tr&igrave;nh hiển thị.</p> <h3><strong>C&aacute;c kỹ năng kiểm thử v&agrave; gỡ rối<br /></strong></h3> <p style="text-align: justify;">C&oacute; một thực tế trong lập tr&igrave;nh l&agrave; c&aacute;c sản phầm kh&ocirc;ng thể tr&aacute;nh khỏi bug hoặc c&aacute;c chức năng kh&ocirc;ng mong muốn. Đối với web điều n&agrave;y cũng kh&ocirc;ng ngoại lệ. V&igrave; vậy, việc l&agrave;m quen với c&aacute;c quy tr&igrave;nh kiểm thử v&agrave; gỡ rối l&agrave; điều cần thiết. Thậm ch&iacute; theo nhiều cao nh&acirc;n trong ng&agrave;nh th&igrave; thời gian để kiểm thử v&agrave; gỡ rối c&ograve;n chiếm đến 80% thời lượng c&ocirc;ng việc của một lập tr&igrave;nh vi&ecirc;n.</p> <p><img class=" wp-image-4325 aligncenter" src="https://tek4.vn/wp-content/uploads/2019/04/Front-end-l&agrave;-g&igrave;-8.jpg" alt="Front end l&agrave; g&igrave; -8" width="519" height="276" /></p> <p style="text-align: justify;">Đối với c&aacute;c front end developer, c&aacute;c loại kiểm thử (testing) phổ biến nhất cần phải l&agrave;m quen ch&iacute;nh&nbsp;l&agrave; 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&igrave;nh duyệt (browser testing) v&agrave; kiểm thử chức năng (functional testing) &ndash; đ&acirc;y ch&iacute;nh l&agrave; những kiểu kiểm thử để chắc chắn rằng c&aacute;c trang web đ&aacute;p ứng đ&uacute;ng nhu cầu của người d&ugrave;ng.</p> <p style="text-align: justify;">Mục ti&ecirc;u của qu&aacute; tr&igrave;nh testing l&agrave; t&igrave;m kiếm c&aacute;c lỗi (bug) trong website. V&agrave; từ c&aacute;c bug n&agrave;y sẽ c&oacute; những giai đoạn t&igrave;m kiếm nguy&ecirc;n nh&acirc;n v&agrave; fix lại c&aacute;c bug. Giai đoạn n&agrave;y thường l&agrave; giai đoạn debug. C&aacute;c c&ocirc;ng ty kh&aacute;c nhau sử dụng c&aacute;c quy tr&igrave;nh debug kh&aacute;c nhau thậm ch&iacute; c&aacute;c c&ocirc;ng cụ quản l&yacute; bug kh&aacute;c nhau, nhưng nh&igrave;n chung c&aacute;c quy tr&igrave;nh đều c&oacute; nguy&ecirc;n tắc chung kh&aacute; giống nhau, v&agrave; do đ&oacute; nếu bạn đ&atilde; từng l&agrave;m quen với debug th&igrave; sẽ dễ d&agrave;ng th&iacute;ch nghi hơn.</p> <h3><strong>Kỹ năng sử dụng hệ thống quản l&yacute; phi&ecirc;n bản (Version control) như Git hay SVN<br /></strong></h3> <p style="text-align: justify;">C&aacute;c hệ thống quản l&yacute; phi&ecirc;n bản như Git hay SVN gi&uacute;p&nbsp;bạn theo d&otilde;i c&aacute;c thay đổi đ&atilde; được tạo ra trong dự &aacute;n theo thời gian, cũng như quay trở lại phi&ecirc;n bản trước dễ d&agrave;ng hơn. Điều n&agrave;y đặc biệt quan trọng trong trường hợp khi bạn th&ecirc;m một plugin jQuery t&ugrave;y biến v&agrave; đột nhi&ecirc;n một nửa c&aacute;c code bị lỗi. Nếu kh&ocirc;ng sử dụng c&aacute;c version control trong trường hợp n&agrave;y bạn sẽ gặp rất nhiều vấn đề. C&aacute;c hệ thống version control gi&uacute;p bạn thay v&igrave; phải &ldquo;undo&rdquo; v&agrave; sửa chữa tất cả c&aacute;c lỗi, th&igrave; bạn c&oacute; thể trở lại&nbsp;phi&ecirc;n bản trước đ&oacute; v&agrave; sau đ&oacute; thử lại với một giải ph&aacute;p kh&aacute;c. Th&ecirc;m v&agrave;o đ&oacute;, c&aacute;c hệ thống version control cũng gi&uacute;p cho việc l&agrave;m việc nh&oacute;m trở l&ecirc;n dễ d&agrave;ng hơn.</p> <p style="text-align: justify;"><img class=" wp-image-4300 aligncenter" src="https://tek4.vn/wp-content/uploads/2019/03/git-svn-combined.png" alt="git-svn-combined" width="567" height="198" /></p> <p>T&ugrave;y từng c&ocirc;ng ty c&oacute; thể sử dụng Git hoặc SVN. Tr&ecirc;n thực tế Git vẫn phổ biến hơn v&agrave; nhiều c&ocirc;ng ty y&ecirc;u cầu biết sử dụng Git l&agrave; một y&ecirc;u cầu bắt buộc.</p> <h3><strong>Biết c&aacute;ch sử dụng một số hệ thống Content Management v&agrave; nền tảng&nbsp;E-commerce Platforms&nbsp;</strong></h3> <p>C&oacute; đến hơn một nửa c&aacute;c trang web tr&ecirc;n thế giới l&agrave; c&aacute;c hệ thống quản l&yacute; nội dung (CMS). Do đ&oacute; việc th&agrave;nh thạo sử dụng một hệ thống CMS l&agrave; một kỹ năng thiết yếu kh&ocirc;ng chỉ với front end developer v&agrave; với cả back end developer. CMS phổ biến nhất thế giới hiện nay l&agrave; Wordpress. Đ&acirc;y l&agrave; nền tảng tạo n&ecirc;n h&agrave;ng triệu trang web tr&ecirc;n thế giới, đặc biệt l&agrave; c&aacute;c trang b&aacute;o ch&iacute; hoặc b&aacute;n h&agrave;ng.</p> <p><img class=" wp-image-4326 aligncenter" src="https://tek4.vn/wp-content/uploads/2019/04/Front-end-l&agrave;-g&igrave;-9.png" alt="Front end l&agrave; g&igrave; -9" width="537" height="269" /></p> <p style="text-align: justify;">Nền tảng thương mại điện tử l&agrave; một loại h&igrave;nh cụ thể của CMS. Ngay tr&ecirc;n Wordpress bạn cũng c&oacute; thể l&agrave;m quen với WooCommerce - một plugin thương mại điện tử hỗ trợ x&acirc;y dựng c&aacute;c trang web b&aacute;n h&agrave;ng trực tuyến.</p> <p style="text-align: justify;">C&aacute;c CMS phổ biến kh&aacute;c bao gồm Joomla, Drupal v&agrave; Magento. Rất nhiều c&ocirc;ng ty tuyển dụng c&aacute;c vị tr&iacute; li&ecirc;n quan đến c&aacute;c kỹ năng v&agrave; hiểu biết tương ứng tr&ecirc;n c&aacute;c CMS n&agrave;y.</p> <h3><strong>C&aacute;c kĩ năng giải quyết vấn đề</strong></h3> <p style="text-align: justify;">Đ&acirc;y l&agrave; kỹ năng chung nhất v&agrave; quan trọng nhất với bất cứ lập tr&igrave;nh vi&ecirc;n n&agrave;o, v&agrave; với front end developer cũng vậy. Một front end developer cần phải biết c&aacute;ch triển khai một thiết kế như thế n&agrave;o l&agrave; tốt nhất, biết c&aacute;ch fix bug, biết c&aacute;ch kết nối v&agrave; xử l&yacute; c&aacute;c vấn đề với việc kết nối front end v&agrave; back end&hellip; Tất cả c&aacute;c vấn đề n&agrave;y đều li&ecirc;n quan đến kĩ năng giải quyết vấn đề. Nhiều c&ocirc;ng ty thậm ch&iacute; tuyển fresher m&agrave; kh&ocirc;ng hề y&ecirc;u cầu bất cứ kỹ năng n&agrave;o ở tr&ecirc;n ngoại trừ kỹ năng giải quyết vấn đề v&agrave; thuật to&aacute;n. Nếu kh&ocirc;ng c&oacute; kỹ năng n&agrave;y d&ugrave; bạn c&oacute; giỏi ng&ocirc;n ngữ đến đ&acirc;u cũng kh&ocirc;ng thể triển khai nổi một thiết kế. Ng&ocirc;n ngữ v&agrave; c&aacute;c kỹ năng kh&aacute;c c&oacute; 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&iacute;ch lũy hoặc do tư duy của mỗi người. Do đ&oacute;, h&atilde;y trau dồi n&oacute; một c&aacute;ch tử tế.</p> <p>Ngo&agrave;i c&aacute;c kỹ năng tr&ecirc;n, liệu <span data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;Kỹ năng mềm liệu c&oacute; quan trọng đối với c&aacute;c lập tr&igrave;nh vi&ecirc;n?&quot;}" data-sheets-userformat="{&quot;2&quot;:15235,&quot;3&quot;:{&quot;1&quot;:0},&quot;4&quot;:[null,2,16777215],&quot;10&quot;:1,&quot;11&quot;:4,&quot;12&quot;:0,&quot;14&quot;:[null,2,1136076],&quot;15&quot;:&quot;Arial&quot;,&quot;16&quot;:10}"><a class="in-cell-link" href="https://tek4.vn/ky-nang-mem-lieu-co-quan-trong-doi-voi-cac-lap-trinh-vien/" target="_blank" rel="noopener">Kỹ năng mềm liệu c&oacute; quan trọng đối với c&aacute;c lập tr&igrave;nh vi&ecirc;n?</a></span></p> <h2>Tạm kết - L&agrave;m thế n&agrave;o để trở th&agrave;nh một front end developer</h2> <p style="text-align: justify;">Ở phần tr&ecirc;n ch&uacute;ng ta đ&atilde; nắm được những kỹ năng v&agrave; kiến thức cần thiết cho một front end developer. HTML, JavaScript v&agrave; CSS l&agrave; những kiến thức bắt buộc đối với một front end developer. Đối với c&aacute;c vị tr&iacute; Senior Front-End Developer điều n&agrave;y thậm ch&iacute; c&ograve;n chưa đủ. C&aacute;c doanh nghiệp thường y&ecirc;u cầu c&aacute;c kinh nghiệm về PHP hay framework về server-side đối với c&aacute;c vị tr&iacute; n&agrave;y. Điều n&agrave;y đảm bảo cho c&aacute;c front end developer c&oacute; kiến thức tổng qu&aacute;t về hệ thống v&agrave; c&oacute; thể tối ưu v&agrave; sửa chữa c&aacute;c vấn đề xảy ra với website cũng như nắm được nguy&ecirc;n tắc ph&iacute;a sau phần back end. C&aacute;c kiến thức về Framework, JSON v&agrave; jQuery cũng cần thiết kh&ocirc;ng chỉ cho front end developer m&agrave; c&ograve;n cả back end developer.</p> <p>Đ&oacute; l&agrave; về mặt bằng chung trước đ&acirc;y, c&ograve;n y&ecirc;u cầu c&ocirc;ng việc của c&aacute;c front end developer hiện đại đ&atilde; thay đổi kh&aacute; nhiều nhất l&agrave; trong v&ograve;ng 3 năm trở lại đ&acirc;y. Giờ đ&acirc;y:</p> <ul> <li style="text-align: justify;">Thay v&igrave; phải viết HTML thuần tu&yacute; thủ c&ocirc;ng như trước th&igrave; giờ đ&acirc;y c&ugrave;ng với sự ra đời của HTML5 v&agrave; CSS3 v&agrave; sắp tới l&agrave; HTML6 v&agrave; CSS4 th&igrave; c&aacute;c front end developer hiện đại cần c&oacute; khả năng chuyển sang sử dụng Template engine như: JADE, PUG, Handlebars... để c&oacute; thể g&aacute;n biến, gọi h&agrave;m, hoặc tuỳ chọn giao diện cho Clients render.</li> <li style="text-align: justify;">Thay v&igrave; phải phụ thuộc v&agrave; những thư viện jQuery bị giới hạn tr&ecirc;n một số thiết bị th&igrave; c&aacute;c front end developer hiện đại cần phải viết NativeScript hoặc Babel, TypeScript... để c&oacute; thể tạo ra c&aacute;c m&atilde; JS chuẩn nhằm đảm bảo c&oacute; thể hoạt động tốt tr&ecirc;n mọi m&ocirc;i trường.</li> <li style="text-align: justify;">Thay v&igrave; viết CSS thủ c&ocirc;ng thi&ecirc;n về thiết kế thẩm mĩ th&igrave; c&aacute;c front end developer giờ đ&acirc;y c&ograve;n cần giỏi thuật to&aacute;n để c&oacute; thể ứng dụng v&agrave;o c&aacute;c CSS processor như: SASS,LESS, STYLUS để tăng tốc độ ph&aacute;t triển ứng dụng nhanh hơn.</li> <li style="text-align: justify;">Thay v&igrave; phải phụ thuộc v&agrave; trao đổi thường xuy&ecirc;n với Back-End để xử l&yacute; những t&igrave;nh huống như tạo v&ograve;ng lặp hiển thị dữ liệu như trước đ&acirc;y th&igrave; giờ đ&acirc;y Back end v&agrave; Front end ho&agrave;n to&agrave;n c&oacute; thể l&agrave;m việc độc lập với nhau kh&ocirc;ng giới hạn vị tr&iacute; địa l&yacute;.</li> <li style="text-align: justify;">Front end developer hiện đại sẽ cần phải xem x&eacute;t xử l&yacute; c&aacute;c hiệu ứng phức tạp v&agrave; tương t&aacute;c người d&ugrave;ng tr&ecirc;n thiết bị di động, đảm bảo t&iacute;nh đa nền tảng, cần phải bắt sự kiện nhận diện người d&ugrave;ng vuốt mấy ng&oacute;n tay, vuốt qua tr&aacute;i hay phải...</li> <li style="text-align: justify;">Việc xử l&yacute; đẩy l&ecirc;n c&aacute;c th&ocirc;ng b&aacute;o thời gian thực cho người d&ugrave;ng giờ đ&acirc;y cũng l&agrave; nhiệm vụ của front end developer.</li> <li>Front end hiện đại c&ograve;n c&oacute; thể ki&ecirc;m lu&ocirc;n cả việc thiết kế v&agrave; viết c&aacute;c ứng dụng di động...</li> </ul> <p style="text-align: justify;">Giờ đ&acirc;y Front-End Developer l&agrave; sự kết hợp của nghệ thuật v&agrave; khoa học h&ograve;a quện với nhau, l&agrave; 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&iacute;nh l&agrave; người tạo n&ecirc;n bộ mặt cho thương hiệu của sản phẩm khi đối diện người d&ugrave;ng.</p> <p style="text-align: justify;">Giới hạn của front end đ&atilde; kh&ocirc;ng c&ograve;n r&otilde; r&agrave;ng như trước đ&acirc;y! một Front-End developer kh&ocirc;ng chỉ g&oacute;i gọn tr&aacute;ch nhiệm của m&igrave;nh trong việc xử l&yacute; giao diện website m&agrave; c&ograve;n c&oacute; thể ki&ecirc;m lu&ocirc;n cả viết Mobile App (cross platform), x&acirc;y dựng giao diện v&agrave; thuật to&aacute;n cho mọi thứ từ mobile, Web/WebApp, m&aacute;y POS cho đến cả Email template... Ngo&agrave;i ra c&ograve;n phải đảm nhận về cả sự thẩm mỹ, sự h&agrave;i ho&agrave; v&agrave; hiệu suất của ứng dụng.</p> <p style="text-align: justify;">Front-End Developer thường kh&ocirc;ng đ&ograve;i hỏi bằng cấp. Hầu hết tr&ecirc;n c&aacute;c trang giới thiệu việc l&agrave;m trong lĩnh vực IT hiện nay đều y&ecirc;u cầu kinh nghiệm thực tế hơn văn bằng tốt nghiệp. Nếu đọc c&aacute;c tin tuyển dụng Front end developer c&oacute; thể thấy rằng chỉ một phần c&aacute;c nh&agrave; tuyển dụng y&ecirc;u cầu bằng cấp cho vị tr&iacute; n&agrave;y. Nguy&ecirc;n do c&oacute; lẽ l&agrave; chương tr&igrave;nh đ&agrave;o tạo đại học, thậm ch&iacute; cao đẳng phần kiến thức n&agrave;y hầu như rất &iacute;t được nhắc đến. Đ&acirc;y c&oacute; thể n&oacute;i l&agrave; một mảng rất &iacute;t được học ở bậc đại học. Hầu hết c&aacute;c kiến thức của c&aacute;c anh em gạo cội trong nghề ở lĩnh vực n&agrave;y đều do tự bồi đắp hoặc học hỏi kinh nghiệm qua c&aacute;c bậc tiền bối hoặc thực tế c&ocirc;ng việc.</p> <p style="text-align: justify;">V&agrave; tr&ecirc;n hết, <a href="https://tek4.vn/" target="_blank" rel="noopener"><strong>tek4.vn</strong></a> sẽ cung cấp cho bạn những kiến thức n&agrave;y, những thứ kh&ocirc;ng được dạy ở trường đại học.</p> <p style="text-align: justify;">H&atilde;y tiếp tục theo d&otilde;i b&agrave;i tiếp theo: "Lộ tr&igrave;nh học lập tr&igrave;nh Front end từ cơ bản đến chuy&ecirc;n gia" <em><strong>tại đ&acirc;y</strong></em>. Đừng qu&ecirc;n để lại thảo luận b&ecirc;n dưới v&agrave; tiếp tục theo d&otilde;i chuy&ecirc;n mục <a href="https://tek4.vn/tu-khoa/nghe-it/">Nghề IT</a> nh&eacute;.</p> <blockquote> <p><strong>Xem lại:</strong>&nbsp;<span data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;[Nghề IT] Lộ tr&igrave;nh của một chuy&ecirc;n gia lập tr&igrave;nh Web (Web Developer) 2019 &ndash; Phần 1. Front end, back end, full stack l&agrave; g&igrave;?&quot;}" data-sheets-userformat="{&quot;2&quot;:15235,&quot;3&quot;:{&quot;1&quot;:0},&quot;4&quot;:[null,2,16777215],&quot;10&quot;:1,&quot;11&quot;:4,&quot;12&quot;:0,&quot;14&quot;:[null,2,1136076],&quot;15&quot;:&quot;Arial&quot;,&quot;16&quot;:10}"><a class="in-cell-link" href="https://tek4.vn/wp-admin/post.php?post=4247&amp;action=edit" target="_blank" rel="noopener">[Nghề IT] Lộ tr&igrave;nh của một chuy&ecirc;n gia lập tr&igrave;nh Web (Web Developer) 2019 &ndash; Phần 1. Front end, back end, full stack l&agrave; g&igrave;?</a></span></p> </blockquote> <p><strong>Tham khảo:</strong></p> <p>https://techtalk.vn/blog/posts/frontend-la-gi</p> <p>https://medium.freecodecamp.org/from-zero-to-front-end-hero-part-1-7d4f7f0bff02</p>