Những gì một nhà phát triển front-end có thể làm. Các công cụ hiện đại để phát triển Front End. Hệ thống kiểm soát phiên bản và Git
Vậy các bạn ơi, các bạn đã quyết định đi theo con đường lập trình chưa? Tôi bắt tay bạn, quyết định này sẽ thay đổi cuộc đời bạn. Đây luôn là một công việc thú vị và đòi hỏi sự giao thoa giữa trí tuệ và sự sáng tạo, tìm cách mang lại lợi ích cho mọi người và làm cho thế giới tốt đẹp hơn một chút. Khả năng thực hiện nó là vô tận.
Có rất nhiều thứ trong lập trình Những khu vực khác nhau: phát triển web, ứng dụng di động, máy tính để bàn, phát triển hệ điều hành, trình điều khiển phần cứng. Phát triển web là một trong những lĩnh vực thú vị và có nhu cầu cao nhất. Ưu điểm của nó bao gồm thực tế là sản phẩm của bạn có trên Internet và để xem nó, bạn chỉ cần nhập địa chỉ vào trình duyệt của bất kỳ thiết bị nào mà không cần tải xuống hay cài đặt bất cứ thứ gì. Ngoài ra, với sự trợ giúp của các công cụ hiện đại và hiểu biết về web, bạn có thể phát triển cả ứng dụng di động và máy tính để bàn cùng một lúc. Trang web bao gồm một giao diện người dùng (những gì khách hàng nhìn thấy trong trình duyệt) và một phần phụ trợ (phần máy chủ lưu trữ, xử lý và hiển thị dữ liệu). Tôi khuyên bạn nên bắt đầu làm quen với web từ giao diện người dùng.
Ồ, nhân tiện, tên tôi là Roman Latkin, tôi đã làm việc trong lĩnh vực phát triển web được gần 10 năm. Khi tôi bắt đầu, mọi thứ đều đơn giản và khó khăn cùng một lúc. Đơn giản, vì bạn không cần biết nhiều để xây dựng ứng dụng: đây là HTML, một chút CSS, một chút JavaScript - và bạn đã hoàn tất. Điều đó khó khăn vì sự phát triển được thực hiện thông qua nỗi đau. Ngày nay, rất nhiều nỗi đau này đã được chữa khỏi nhờ sự trợ giúp của một hệ sinh thái công cụ khổng lồ, nhưng điều đó rất đáng sợ đối với những người mới bắt đầu; họ không biết cách tiếp cận giao diện người dùng, tiếp cận nó từ phía nào. Tôi thật may mắn, tôi đã theo dõi sự phát triển của giao diện người dùng gần như ngay từ đầu và mọi thứ đều nằm trong đầu tôi. Và tôi muốn truyền đạt sự hiểu biết này để giúp đỡ các nhà phát triển mới làm quen. Tôi hy vọng rằng sau khi đọc bài viết này, bạn sẽ biết rõ nên đi con đường nào, đào ở đâu và phát triển theo kế hoạch nào.
Ba thành phần của giao diện người dùng
Toàn bộ giao diện người dùng bao gồm ba thành phần: HTML (nội dung và đánh dấu), JavaScript (logic) và CSS ( vẻ bề ngoài, định vị). HTML mô tả nội dung của trang và trông giống như thế này:
Nếu bằng cách nào đó, bạn phải sử dụng những công cụ này theo cách thủ công để thực hiện một dự án ít nhiều phức tạp, thì bạn sẽ gặp rất nhiều khó khăn. May mắn thay, thế giới đang phát triển, những thứ phức tạp đang được đơn giản hóa, con người ngày càng nghĩ ra nhiều công cụ và công nghệ mới giúp quá trình sáng tạo này trở nên thú vị và nhanh chóng hơn.
Bất kỳ quá trình nhận thức nào cũng có thể được biểu diễn dưới dạng chữ “T”, trong đó đường ngang là hiểu biết rộng, đường dọc là hiểu biết sâu sắc. bạn chuyên gia lý tưởng chữ T to và đẹp, đồng đều. Nếu nó bị kéo dài sang một bên thì xấu xí, xấu xí; một chuyên gia như vậy ít có tác dụng trong chiến đấu. Anh ta hoặc có thể hiểu sâu về một việc nào đó, nhưng lại bước sang một bên một chút thì không thích hợp; hoặc hiểu mọi việc một cách hời hợt nhưng đồng thời lại không thể làm được gì. Trước hết, cần phát triển thành phần rộng nhất có thể, đó là những gì chúng tôi sẽ làm bây giờ - chúng tôi sẽ cố gắng bao quát tất cả các khía cạnh của giao diện người dùng một cách rộng rãi nhất có thể mà không đi sâu hơn. Và sau đó bạn sẽ làm việc để đào sâu hơn, việc này sẽ để bạn làm việc độc lập.
Để hiểu rõ nguyên nhân dẫn đến tình trạng hiện tại, bạn cần biết ít nhất một chút về lịch sử con đường phát triển của giao diện người dùng và thực tế là các ứng dụng web nói chung. Bây giờ có rất nhiều công cụ mà không chỉ người mới bắt đầu sẽ bị gãy chân. Do đó, để hiểu rõ về tất cả những điều này, chúng ta hãy bắt đầu với lịch sử, với một chuyến tham quan ngắn về cách mọi chuyện bắt đầu, sau đó chuyển sang các phương pháp tiếp cận hiện đại một cách suôn sẻ.
Trang web đầu tiên
Lúc đầu người ta viết thư cho HTML thuần túy, vẽ giao diện bằng CSS thuần túy, thực hiện logic bằng JavaScript thuần túy. Một ứng dụng lỗi thời điển hình là nơi logic phía máy chủ tạo HTML (để đáp ứng yêu cầu của khách truy cập, máy chủ lấy dữ liệu từ cơ sở dữ liệu và chèn nó vào HTML) và phục vụ nó cùng với các tệp tĩnh về kiểu và logic phía máy khách trong JavaScript, vào thời điểm đó (khoảng 10 năm trước) không có nhiều. Khi thực hiện chuyển đổi sang trang khác, toàn bộ quá trình này được lặp lại. Nghĩa là, trước đây không có sự phân chia thành front-end và back-end; chỉ có một ứng dụng hoàn chỉnh hoạt động đồng thời với cơ sở dữ liệu và tạo HTML.
jQuery
Tôi cảm thấy mệt mỏi khi viết bằng JavaScript thuần túy và một công cụ tốt đã xuất hiện - jQuery, sử dụng cú pháp thuận tiện, giúp tôi có thể truy cập các phần tử trang và thực hiện một số hành động với chúng. Nhiều plugin và giải pháp làm sẵn đã xuất hiện, nó trở nên dễ dàng và thú vị hơn.
Nhưng các ứng dụng đã phát triển, khối lượng logic máy khách ngày càng tăng và dần dần tất cả những điều này đã trở thành một món mì lớn. Để làm sáng tỏ nó, cần phải có một số hình thức, kiến trúc.
MVC
Smart Guys đã cố gắng chuyển nó lên giao diện người dùng mẫu kiến trúc từ phía máy chủ - MVC (model-view-controller). Mẫu này chỉ ra rằng có một mô hình mô tả dữ liệu. Ví dụ: mô hình người dùng, mô hình phim, mô hình đánh giá. Có một bộ điều khiển xử lý các yêu cầu, ví dụ: “hiển thị một trang có danh sách các bộ phim ở địa chỉ đó”. Và có một khung nhìn chịu trách nhiệm hiển thị dữ liệu dưới dạng HTML mà bộ điều khiển chuyển dữ liệu tạo sẵn nhận được từ cơ sở dữ liệu/API.
Đây là nơi bắt đầu lịch sử của các ứng dụng một trang, SPA - các ứng dụng được tải xuống một lần và sau đó khi di chuyển qua các trang, chúng sẽ liên hệ với máy chủ để lấy dữ liệu qua API. Cách tiếp cận này được gọi là AJAX. Thay vì tạo HTML ở phía máy chủ, máy chủ sẽ phục vụ logic máy khách của ứng dụng một lần. Bằng cách truy cập một trang khác, ví dụ từ trang chủđến trang tìm kiếm khách sạn, ứng dụng yêu cầu dữ liệu từ máy chủ trong thể tinh khiết(ví dụ: thông tin về khách sạn), không có Thẻ HTML(thường ở định dạng JSON) và tự tạo biểu diễn.
Mẫu MVC mặt trước hoạt động tốt, hoạt động tốt nhưng phức tạp một cách không cần thiết. Angular, Backbone là đại diện cho cột mốc lịch sử này. Nhân tiện, họ vẫn còn sống cho đến ngày nay, nhưng tôi không hiểu họ sâu sắc.
Bộ xử lý và lắp ráp
Các ứng dụng bắt đầu tăng kích thước và bây giờ là lúc nói về trình xây dựng, bộ tiền xử lý và trình quản lý gói. Tôi sẽ cố gắng lướt qua chúng một cách ngắn gọn, mặc dù thực tế là chúng xứng đáng có một bài viết riêng.
Tốc độ rất quan trọng trên web, vì vậy bạn không thể chỉ cung cấp nó cho khách truy cập của mình. tập tin lớn, chúng sẽ mất quá nhiều thời gian để di chuyển qua mạng. Do đó, tất cả các tài nguyên đều được nén bằng các công cụ khai thác khác nhau. JavaScript thường sử dụng uglify nhất (nó loại bỏ khoảng trắng, làm cho tên biến ngắn hơn và nhiều thứ thú vị hơn). Trong CSS, khoảng trắng bị loại bỏ và một số thuộc tính vẫn có thể được kết hợp. Và tất cả những thứ này được thu thập thành một hoặc nhiều tệp thay vì 10-20, tải xuống một tệp nhanh hơn nhiều và tải trên máy chủ ít hơn.
CSS
Về CSS, cái gọi là bộ tiền xử lý đã xuất hiện. Họ đang mở rộng Cú pháp CSS, họ thêm vào đó một loạt tính năng khác nhau - các khối, biến, vòng lặp lồng nhau. Thậm chí chỉ cần thiếu dấu chấm phẩy cũng giúp ích rất nhiều và tăng tốc độ viết mã?
Bộ tiền xử lý là một chương trình chạy và biên dịch cú pháp đường này thành CSS thuần túy. Sử dụng bộ tiền xử lý sẽ tránh được tái sử dụng mã, xây dựng kiến trúc và về cơ bản biến ngôn ngữ mô tả phong cách thành ngôn ngữ lập trình. Học bất kỳ nhạc cụ nào và bạn sẽ hiểu. Bây giờ tôi đã chọn bút Stylus cho mình; có một vài cái nữa, ví dụ - LESS, SASS.
React, mặc dù nó đã trở nên phổ biến rộng rãi và có hệ sinh thái phát triển, nhưng trên thực tế, nó lại quá đơn giản, phức tạp và dài dòng. Để tạo một biểu mẫu đơn giản, bạn cần phải viết nhiều mã bổ sung và cài đặt một loạt tiện ích bổ sung. Để tạo một ứng dụng đơn giản, bạn vẫn cần phải cài đặt rất nhiều thứ và có rất nhiều lựa chọn cho những thứ đơn giản, bạn rất dễ bị lạc - mặc dù hệ sinh thái rất lớn nhưng rất khó điều hướng; Các ứng dụng giống hệt bên ngoài có thể được thiết kế hoàn toàn khác bên trong. Nhưng khái niệm về JSX - sự đan xen giữa mã và đánh dấu, có vẻ không thành công lắm, khi đó rất khó hiểu tác giả mã muốn nói gì và rất khó thay đổi đánh dấu.
Vue.js
Ở đây có Vue.js - một khung web linh hoạt, hiệu quả và dễ học, mang tất cả các khái niệm giống nhau, nhưng chúng trông đẹp hơn nhiều trong đó. Nó kết hợp những điểm tốt nhất của Angular và React và trả lời rõ ràng hơn câu hỏi “cái gì là cái gì”. Ra khỏi hộp Vue đã có sẵn một số lượng lớn các công cụ và khả năng cho phép bạn viết rất nhiều logic trong một vài dòng. Sự phát triển đã được đơn giản hóa rất nhiều.
Vue mang đến một vài khái niệm thú vị hơn, chẳng hạn như các thành phần tệp đơn - các tệp chứa logic, đánh dấu và kiểu cùng một lúc và chúng không đan xen với nhau, như trường hợp của React và JSX. Vue out of the box cho phép bạn sử dụng bất kỳ bộ tiền xử lý nào phù hợp rất liền mạch với các thành phần một tệp. Và nó có nhiều giải pháp tích hợp sẵn, thậm chí là triển khai Flux của riêng nó. Vue có tài liệu tuyệt vời bằng tiếng Nga sẽ dạy bạn thực hành tốt nhấtở giao diện người dùng, từ tập hợp ứng dụng đến kiểm tra tự động.
Ứng dụng đẳng cấu, SSR
Khi nói về các ứng dụng một trang, chúng ta đã bỏ lỡ một chi tiết quan trọng: khi trình thu thập thông tin truy cập vào một ứng dụng một trang, nó không thấy gì cả - chỉ thấy một trang trống có thẻ cơ thể không có nội dung. Trong các ứng dụng lỗi thời, máy chủ sẽ truy cập cơ sở dữ liệu, tạo chế độ xem và cung cấp HTML hoàn chỉnh cùng với văn bản trang. Trong trường hợp ứng dụng một trang, máy chủ trả về một trang trống, trang này chỉ sau khi khởi tạo mới lấy dữ liệu và hiển thị chế độ xem, điều này tất nhiên là robot tìm kiếm sẽ không làm được. Do đó, việc sử dụng Ứng dụng Trang Đơn cho các trang web SEO hướng nội dung là không thể chấp nhận được.
Sự tránh né này đã được khắc phục bằng nhiều cách hack và nạng cho đến khi khái niệm SSR - Server-Side Rendering xuất hiện. Smart Guys đã dạy tất cả JavaScript chạy trong trình duyệt để chạy trên máy chủ bằng NodeJS (một công nghệ tạo ứng dụng phía máy chủ bằng JavaScript dựa trên trình duyệt). Tất nhiên, điều này đã bộc lộ những hạn chế của nó, nhưng cuộc sống đã trở nên dễ dàng hơn. Giờ đây, bạn có thể viết logic một lần bằng một ngôn ngữ và ngay lập tức nó hoạt động cả trên máy chủ (ở lần truy cập đầu tiên của khách truy cập/robot, HTML được tạo cùng với nội dung trang) và trong trình duyệt (các lần chuyển đổi tiếp theo của khách truy cập). ). Đây được gọi là một ứng dụng đẳng cấu, phổ quát.
Lược đồ rất đơn giản: trong lần truy cập đầu tiên, khách truy cập sẽ gửi yêu cầu đến máy chủ NodeJS, máy chủ này sẽ liên hệ với máy chủ API, lấy dữ liệu dưới dạng JSON và hiển thị dưới dạng HTML, trả lại cho khách truy cập. Sau đó, ứng dụng sẽ tồn tại trong trình duyệt; trong các lần chuyển đổi trang tiếp theo, nó sẽ truy cập trực tiếp vào máy chủ API để lấy dữ liệu và hiển thị chế độ xem trực tiếp trong trình duyệt.
Trong React, việc triển khai sơ đồ này được thực hiện theo những cách khác nhau và phức tạp. Có những giải pháp làm sẵn cho việc này, chẳng hạn như khung Next.js. Tài liệu Vue có toàn bộ phần dành riêng cho SSR. Khung Nuxt được liệt kê ở đó - Vue + SSR. Với sự trợ giúp của nó, bạn có thể viết các ứng dụng phổ quát như vậy khá dễ dàng.
Khung CSS, khả năng thích ứng
Bây giờ chúng ta sẽ thay đổi chủ đề sang chủ đề đơn giản hơn và nói về bố cục.
Về mặt lịch sử, để tạo lưới trang và khung của nó, trong những ngày đầu, các nhà thiết kế bố cục đã sử dụng bảng. Sau đó, họ bắt đầu sử dụng các khối hoặc vùng chứa và bố cục vùng chứa xuất hiện. Vị trí của các khối được đặt bằng thuộc tính định vị float: right/left .
Ngày nay, mọi thứ đều được đơn giản hóa; hầu hết tất cả các trình duyệt đều hỗ trợ Flexbox và CSS Grid - những cách hiện đại, thuận tiện để bố trí lưới trang. Sự kết hợp khéo léo của chúng cho phép, bằng cách sử dụng một số đặc tính, đạt được các vị trí của thùng chứa mà lẽ ra phải tốn nhiều công sức bằng các phương pháp cũ, cho phép bạn dễ dàng thực hiện hầu hết mọi thú vui thiết kế.
Đây là khả năng một trang trông đẹp như nhau trên tất cả các thiết bị, có thể là máy tính xách tay, máy tính bảng hoặc điện thoại di động. Khả năng thích ứng đạt được bằng cách sử dụng truy vấn phương tiện - các khối điều kiện trong CSS, ở độ phân giải màn hình mà thuộc tính CSS sẽ hoạt động. Nó cũng có thể đạt được thông qua việc sử dụng khéo léo các thùng chứa flexbox.
Tất cả các ứng dụng web về cơ bản đều điển hình, bao gồm các hàng, cột, bảng, nút và các thành phần giao diện người dùng khác. Để không phải viết chúng mọi lúc, các khung CSS đã được tạo để trợ giúp những người xây dựng trang web, nơi tất cả các đánh dấu đã được nghĩ ra - chỉ cần áp dụng lớp mong muốn. Chúng chứa nhiều thành phần UI được tạo sẵn. Tất nhiên, phổ biến nhất là Bootstrap, hiện đã có phiên bản thứ 4. Ngoài ra còn có Bulma, cũng khá ngon. Và nhiều cái ít phổ biến hơn. Thông thường trong các khung CSS, khả năng thích ứng là hoàn toàn có thể; điều quan trọng là phải sử dụng đúng các công cụ được cung cấp. Khung CSS sẽ là nền tảng tuyệt vời cho hầu hết mọi ứng dụng web của bạn và là khởi đầu tốt để thành thạo các kỹ năng bố cục phù hợp. Chúng nên được sử dụng khi bạn cần các thành phần giao diện người dùng điển hình và khả năng thích ứng, và đây là 99% trường hợp trên web.
Khả năng tương thích trên nhiều trình duyệt
Từ này đề cập đến khả năng một trang web hiển thị giống nhau trong các trình duyệt khác nhau. Thông thường, các khung CSS sẽ giải quyết vấn đề này, nhưng tôi sẽ giải thích ngắn gọn cách đạt được điều này. Trước tiên, bạn cần đặt lại tất cả các thuộc tính của các phần tử tiêu chuẩn ( các trình duyệt khác nhau trưng bày yếu tố tiêu chuẩn- danh sách, bảng, v.v. theo những cách khác nhau). Trong các khung CSS, bạn thường có thể thấy một tệp đặc biệt cho việc này -
Sớm hay muộn, bất kỳ nhà phát triển nào cũng phải đối mặt với câu hỏi công cụ nào phù hợp nhất cho công việc của mình. Việc chọn các công cụ tốt sẽ tăng đáng kể năng suất phát triển và cải thiện chất lượng mã. Trong bài viết này, chúng ta sẽ xem xét các công cụ chúng ta sử dụng khi phát triển phần giao diện người dùng cho các dự án của mình, cũng như cách tổ chức quy trình.
Công cụ.
Một chuyên gia trong lĩnh vực của anh ta được phân biệt không chỉ bởi chất lượng công việc mà còn bởi sự lựa chọn các công cụ anh ta sử dụng.
Trình soạn thảo văn bản
Bạn nên bắt đầu với trình soạn thảo văn bản. Hầu hết mọi người không sử dụng nó tới 50% tiềm năng của nó. Rất có thể, nếu bạn đang sử dụng thứ gì đó tốt hơn Notepad, bạn có thể có quyền truy cập vào các tính năng như:
- Mã hóa Thiền
Cho phép bạn nhanh chóng tạo đánh dấu HTML. Tiết kiệm thời gian và cho phép bạn trải nghiệm một zen đặc biệt. (Bạn có thể đọc về nó là gì trên trang này).
- Mẫu trực tiếp
Chúng ta thường phải gõ những cấu trúc giống nhau: khai báo hàm, đối tượng, cấu trúc ngôn ngữ. Mẫu trực tiếp sẽ cho phép bạn tự động hóa tập hợp các đoạn mã mẫu thông thường và tập trung sự chú ý vào các phần quan trọng hơn của ứng dụng. Ngoài ra, bạn có thể dễ dàng mở rộng bộ mẫu bằng cách tạo chúng cho các khung bạn sử dụng thường xuyên nhất.
- Mẫu tệp
Mẫu tệp cho phép bạn nhanh chóng triển khai các mô-đun dự án mới. Và cũng giống như trường hợp Mẫu trực tiếp, bạn thường có thể mở rộng bộ mẫu nếu cần.
- Chỉnh sửa trực tiếp
Sự hiện diện của chức năng như vậy trong trình chỉnh sửa sẽ cho phép bạn không làm mới trình duyệt khi bố trí bố cục sau mỗi lần chỉnh sửa - hành động này được tự động hóa!
Tuyệt soạn thảo văn bản, có thể được đề xuất - Sublime Text 2. Hỗ trợ các plugin cho mọi trường hợp, đánh dấu mã, đa nền tảng - tất cả những điều này khiến nó trở thành một trình soạn thảo tuyệt vời để sử dụng. Hơn nữa nó hoàn toàn miễn phí.
Nhưng đối với các dự án thực sự lớn, chúng tôi sử dụng PHPStorm/WebStorm từ JetBrains. Các sản phẩm này cung cấp cho nhà phát triển tất cả chức năng cần thiết, các tính năng được mô tả ở trên, cũng như làm nổi bật mã và phần phụ thuộc giữa tất cả các tệp dự án.
Cả SublimeText và PHPStorm đều hỗ trợ nhiều phím tắt mà bạn có thể sử dụng để tăng tốc và đơn giản hóa việc chỉnh sửa văn bản. Bạn có thể nghiên cứu các kết hợp bằng dịch vụ Phím tắt Foo. Quá trình đào tạo diễn ra ở hình thức trò chơi, vậy đo la cai gi cách tuyệt vời kết hợp kinh doanh với niềm vui.
Công nghệ
Sử dụng các công nghệ cho phép bạn viết ít mã hơn để đạt được kết quả tương tự. Tuy nhiên, hãy nhớ rằng việc duy trì mã kết quả phải càng rẻ càng tốt.
Ví dụ: một cách thực hành tốt là sử dụng sass/less, mở rộng CSS thông thường bằng cách thêm các cơ chế tiện lợi như các biến. Khi các tệp kiểu của bạn đã sẵn sàng, tất cả những gì bạn cần làm là chạy một chương trình xử lý sẽ chuyển đổi sass/less thành css thông thường.
Việc sử dụng phương pháp BEM sẽ giúp các dự án lớn không bị sa lầy vào code bố cục. Việc phân tách rõ ràng các kiểu thành các tệp riêng biệt và cấu trúc chúng trong các thư mục sẽ cho phép bạn tốn ít thời gian hơn để duy trì mã. Các nguyên tắc cơ bản của BEM có thể được đọc. Ngoài ra còn có một bộ công cụ gọi là bem-tools cho phép bạn triển khai nhanh chóng các tệp kiểu.
Quy trình làm việc
Quy trình phát triển mã được sắp xếp hợp lý sẽ tăng tốc độ làm việc và chất lượng của nó.
Để đảm bảo công việc song song giữa các nhóm phát triển, nên sử dụng phương tiện chuẩn, chẳng hạn như git (bạn có thể đọc về git workfow thành công). Để điều phối việc thực hiện các nhiệm vụ, hệ thống theo dõi lỗi được sử dụng, ví dụ như Jira và Redmine.
Triển khai dự án
Để mở ra ứng dụng làm sẵn Trong quá trình sản xuất, chúng tôi sử dụng Jenkins. Nhiệm vụ của nó là lấy từ kho lưu trữ Phiên bản hiện tại và sau khi kết thúc quá trình xây dựng và chuẩn bị các tệp, nó sẽ chuyển kết quả lên máy chủ. Phing được sử dụng để hỗ trợ các quá trình này.
Câu hỏi về việc chuẩn bị đổ dự án vẫn còn bỏ ngỏ. Đối với giao diện người dùng trên môi trường phát triển cục bộ, điều này thường là:
- Dịch sass/less sang css
- Kiểm soát phụ thuộc
- Nối tập tin
- Thực hiện autotest
Đối với phiên bản sản xuất, việc chuẩn bị cũng bao gồm:
- Giảm thiểu tập tin
- Làm xáo trộn mã
- Tối ưu hóa hình ảnh
Tự động hóa tất cả các hành động này là nhiệm vụ chính cần được giải quyết để tổ chức một quy trình phát triển tối ưu.
Để thực hiện những nhiệm vụ này, chúng tôi sử dụng dự án Yeoman. Công cụ này cho phép bạn xây dựng trên cơ sở toàn bộ quy trình phát triển giao diện người dùng. Nó thực hiện tất cả các điểm được đề cập ở trên.
Phát triển cùng Yeoman
Yeoman cũng cho phép bạn xây dựng toàn bộ quá trình phát triển giao diện người dùng trên cơ sở của nó. Với sự trợ giúp của nó, bạn có thể nhanh chóng mở rộng cấu trúc thư mục cho các dự án điển hình. Để thực hiện việc này, chỉ cần nhập lệnh trong thư mục dự án:
yeoman ban đầu
Một cuộc đối thoại sẽ bắt đầu, sau khi trả lời các câu hỏi, các thư mục và tệp dịch vụ sẽ được triển khai trong thư mục.
Ngoài ra, Yeoman cho phép bạn chỉ định loại dự án. Trong trường hợp này, nó sẽ chuẩn bị một cây thư mục và tệp cho khung được chỉ định.
Ở trên đã đề cập đến một công cụ tiện lợi như Live Edit. Vì vậy, Yeoman khởi chạy một máy chủ web cho các ứng dụng của bạn có triển khai Live Edit. Để làm điều này bạn cần gọi lệnh:
máy chủ yeoman
Sau vài giây, một cửa sổ trình duyệt sẽ mở ra với ứng dụng đang chạy. Bây giờ mọi thay đổi trong tệp html, css hoặc js sẽ được hiển thị ngay trên trình duyệt. Các tệp sass của bạn cũng sẽ được biên dịch thành css mỗi khi bạn lưu chúng.
Các công nghệ cơ bản là HTML (để tạo cấu trúc trang), CSS (để tạo kiểu) và JavaScript (để tương tác). Vì lý do này, kiến thức cơ bản trong các lĩnh vực nêu trên là điều bắt buộc. Tuy nhiên, vào năm 2019, bạn cần biết những framework, hệ thống kiểm soát phiên bản nào và nhiều thứ khác giúp cuộc sống dễ dàng hơn tới nhà phát triển hiện đại. Chúng ta hãy xem xét kỹ hơn về từng người trong số họ.
HTML (Siêu văn bản Ngôn ngữ đánh dấu) và CSS (Cascading Style Sheets) là nền tảng của phát triển web. Nếu không có hai công nghệ này, bạn sẽ không thể tạo ra một thiết kế web và đầu ra sẽ là văn bản đơn giản trên màn hình. Bạn thậm chí không thể thêm hình ảnh vào một trang nếu không có HTML!
Trước khi bắt đầu sự nghiệp phát triển web, bạn phải trở thành chuyên gia về HTML và CSS. Tin tốt, bạn có thể có được kiến thức tự tin về những công nghệ này chỉ sau vài tuần học tập. Bạn có thể đi cùng chúng tôi!
JavaScript cho phép bạn thêm một lượng lớn chức năng vào trang web của mình. Bạn có thể tạo các ứng dụng web khá chức năng chỉ bằng HTML, CSS và JavaScript (viết tắt là JS). Ở cấp độ cơ bản nhất, JS cho phép bạn thêm tính tương tác. Bạn có thể sử dụng nó để tạo bản đồ cập nhật theo thời gian thực, yếu tố tương tác và trò chơi trực tuyến. Các trang web như Pinterest tận dụng tối đa JavaScript để tạo giao diện người dùng thân thiện.
Ngoài ra, đây là ngôn ngữ lập trình phổ biến nhất trên thế giới, vì vậy, ngay cả với kế hoạch nghề nghiệp của bạn, đây vẫn là ngôn ngữ siêu hữu ích để học.
JQuery là một thư viện JavaScript: một tập hợp các plugin và tiện ích mở rộng giúp phát triển bằng sử dụng JavaScript nhanh hơn và dễ dàng hơn. Thay vì phải viết mọi thứ từ đầu, JQuery cho phép bạn thêm các phần tử dựng sẵn vào dự án của mình, sau đó bạn có thể sửa đổi cho phù hợp với nhu cầu của mình (một trong những lý do tại sao việc biết JavaScript lại quan trọng đến vậy). JQuery được sử dụng khi bạn cần thêm đồng hồ đếm ngược vào trang của mình, biểu mẫu tìm kiếm có tính năng tự động hoàn thành hoặc thậm chí là bảng tự động sắp xếp lại và thay đổi kích thước để phù hợp với nội dung.
Khung JavaScript
Các khung công tác JS (bao gồm AngularJS, Backbone, Ember và ReactJS) cung cấp cấu trúc tạo sẵn cho Mã JavaScript. Có nhiều loại khung khác nhau cho các nhu cầu khác nhau, nhưng bốn loại trên là những yêu cầu phổ biến nhất để tuyển dụng vào năm 2019. Các khung thực sự tăng tốc quá trình phát triển, giúp bạn có một khởi đầu thuận lợi và có thể được sử dụng cùng với các thư viện như JQuery để giảm thiểu thời gian viết các khối tiêu chuẩn.
Khung giao diện người dùng
Các khung CSS và Frontend (phổ biến nhất là Bootstrap) thực hiện cho CSS những gì các khung JS làm cho JavaScript: chúng tăng tốc độ phát triển bằng cách cung cấp điểm khởi đầu với cấu trúc dự án khởi đầu được tạo sẵn. Vì các khối CSS cơ bản được lặp lại từ dự án này sang dự án khác nên một khung xác định mọi thứ cho bạn sẽ rất hữu ích. Hầu hết các nhà tuyển dụng đều yêu cầu kiến thức về frontend framework là gì và cách làm việc với chúng.
Dịch vụ và API RESTful
Không đi sâu vào chi tiết kỹ thuật, REST là viết tắt của Chuyển giao trạng thái đại diện, có nghĩa là “chuyển trạng thái đại diện”. TRONG phác thảo chung, là một công nghệ giúp các thành phần giao tiếp trong mạng dễ dàng hơn. Cả dịch vụ RESTful và API đều là dịch vụ kiến trúc REST. Bạn có thể đọc thêm về điều này ở đây.
Giả sử bạn quyết định viết một ứng dụng sẽ sắp xếp tất cả bạn bè của bạn trên mạng xã hội theo ngày thêm. Bạn có thể gửi yêu cầu tới API RESTful của VKontakte để nhận danh sách bạn bè của mình. Điều tương tự cũng có thể xảy ra với Twitter và Facebook, những mạng này cũng sử dụng API RESTful.
Hệ thống quản lý nội dung và nền tảng thương mại điện tử
Hầu hết mọi trang web đều được xây dựng trên hệ thống quản lý nội dung (CMS). Nền tảng thương mại điện tử là một trong những loại CMS. CMS phổ biến nhất thế giới là WordPress, đứng sau bức màn của hàng triệu trang web, gần 60% tổng số trang web sử dụng CMS đều được xây dựng trên WordPress. Khác CMS phổ biếnđây là Joomla, Drupal và Magento. Ngay cả kiến thức hời hợt về các hệ thống này cũng sẽ mang lại cho bạn lợi thế khi đi xin việc.
Kiểm tra và gỡ lỗi
Sai lầm xảy ra - đây là một thực tế được chấp nhận rộng rãi. Làm quen với các quy trình kiểm tra và gỡ lỗi là rất quan trọng.
Kiểm thử đơn vị là quá trình kiểm thử các khối mã nguồn riêng lẻ và các khung chuyên biệt dành cho loại kiểm thử này cung cấp chức năng khá thuận tiện. Có nhiều framework khác nhau cho các ngôn ngữ lập trình khác nhau.
Một loại thử nghiệm khác là thử nghiệm giao diện người dùng, còn được gọi là thử nghiệm chức năng. Đã kiểm tra ở đây hành vi chung trang web khi người dùng tương tác với nó.
Gỡ lỗi là quá trình loại bỏ tất cả các lỗi (lỗi) được tìm thấy trong quá trình thử nghiệm. Các công ty khác nhau thực hiện những cách tiếp cận khác nhau để kiểm tra và gỡ lỗi, nhưng nếu bạn đã từng làm điều đó trước đây thì bạn sẽ không gặp khó khăn gì trong việc điều chỉnh.
Hệ thống kiểm soát phiên bản và Git
Hệ thống kiểm soát phiên bản cho phép bạn theo dõi các thay đổi được thực hiện đối với mã của mình theo thời gian. Chúng cũng giúp bạn dễ dàng quay trở lại những phiên bản trước mã nếu bạn làm hỏng bất cứ điều gì. Git là hệ thống kiểm soát phiên bản phổ biến nhất. Kiến thức về Git đối với một nhà phát triển là yêu cầu cần thiếtở hầu hết mọi công ty. Bạn có thể học ở đây.
Những điều mà một nhà phát triển front-end chuyên nghiệp nên biết ngày nay
Trong vài năm gần đây, React, một trong những Thư viện JavaScript, đang trở thành một tiêu chuẩn phát triển giao diện người dùng - và điều này mang lại lợi ích cho các nhà phát triển đa nền tảng, với những ưu điểm của React Native như:
- triết lý đơn giản và trực quan để khai báo các quan điểm và trạng thái, làm cho mã sạch sẽ, dễ đọc và dễ gỡ lỗi;
- Kết xuất thông minh và hiệu quả chỉ vẽ lại các thành phần khi cần thiết khi trạng thái thay đổi.
Nói một cách đơn giản, React liên kết HTML và JavaScript với nhau.
Khi nói đến CSS, ngày nay không còn ai viết CSS thuần túy nữa, vì vậy, có thể nói, việc biết các ngôn ngữ tiền xử lý như Sass hoặc Less là điều bắt buộc đối với một nhà phát triển front-end vào năm 2019.
Với sự phổ biến của nhiều yếu tố hình thức nhiều thiết bị khác nhau(điện thoại di động, máy tính bảng, máy tính để bàn), chúng tôi cũng khuyên bạn nên nghiên cứu cách xây dựng các trang web thích ứng. Có rất nhiều thư viện JavaScript và CSS làm tốt công việc này. Nhiều trong số chúng dựa trên nguyên tắc Thiết kế Vật liệu của Google.
Có rất nhiều chủ đề và thư viện liên quan đáng để bạn dành thời gian và sự quan tâm. Ví dụ:
- Webpack dành cho các bản dựng mô-đun (mặc dù trải nghiệm Webpack khá tệ và các lựa chọn bản dựng của cộng đồng thay đổi 1-2 năm một lần);
- Mã thông báo Web JSON để ủy quyền (một loại thay thế cho các cookie tiêu chuẩn trước đây);
- Relay/GraphQL hoặc Redux hoặc Flux, tùy thuộc vào mức độ bạn muốn đi sâu vào các luồng và mẫu dữ liệu;
Cũng như rất nhiều thư viện để gỡ lỗi, tối ưu hóa hiệu suất, thử nghiệm, quản lý dự án, v.v.
Vì vậy, ngày nay, để trở thành một nhà phát triển được săn đón, bạn không chỉ cần biết nguyên tắc cơ bản, nhưng cũng có thể sử dụng công việc hiện có của đồng nghiệp dưới dạng nhiều thư viện và khung khác nhau giúp tăng tốc đáng kể quá trình phát triển.
Lời khuyên của chúng tôi: nếu bạn mới bắt đầu phát triển giao diện người dùng, hãy tham khảo ý kiến của chúng tôi.
Biên tập viên Netology, Svetlana Shapovalova hiểu nhà phát triển front-end là ai, anh ta có thể làm gì (hoặc không nên làm) và tại sao anh ta được trả mức lương cao (hoặc không quá cao).
Nhà phát triển front-end là ai
Theo nghiên cứu hàng năm của StackOverflow, nghề phổ biến nhất đối với người dùng dịch vụ năm 2017 là Nhà phát triển web. Đây là danh mục mà tất cả các nhà phát triển front-end đều rơi vào.
Dữ liệu StackOverflow
Nếu bạn truy cập trang tìm kiếm việc làm đầu tiên mà bạn bắt gặp, chẳng hạn như hh.ru, bạn sẽ có ấn tượng rằng đây là một chuyên gia về tắc kè hoa.
Tất cả bắt đầu với sự nhầm lẫn trong chức danh công việc: bạn có thể tìm thấy “nhà phát triển front-end” và “nhà phát triển front-end” và “nhà phát triển front-end” và “nhà phát triển front-end” và “nhà phát triển web” và “nhà phát triển front-end”. Đôi khi bạn thậm chí có thể thấy một số “nhà thiết kế web” đưa ra các yêu cầu đối với một nhà phát triển full-stack. Chỉ có một phản ứng duy nhất cho việc này: WTF?!
Vấn đề là một số nhà tuyển dụng không phân biệt (hoặc không muốn phân biệt) nhà thiết kế bố cục với nhà phát triển giao diện người dùng - điều này rõ ràng trong mô tả công việc. Hãy cùng tìm hiểu những kỹ năng nào giúp phân biệt nhà phát triển front-end với “bàn làm việc” (người thiết kế bố cục, đừng cảm thấy khó chịu, bạn cũng giỏi).
Nhà thiết kế bố cục là một chiến binh trên mặt trận hẹp. Nhiệm vụ của anh là bố cục bố cục nhận được từ nhà thiết kế bằng cách sử dụng HTML+CSS. Anh ta có thể biết một chút JavaScript, nhưng thường thì anh ta bị hạn chế khả năng cài đặt một số plugin jQuery.
Nhà phát triển front-end không chỉ tạo bố cục. Anh ấy biết rõ về JavaScript, hiểu rõ các framework và thư viện (và tích cực sử dụng một số trong số chúng), hiểu thế nào là “ẩn” ở phía máy chủ. Anh ấy không ngại các bộ tiền xử lý và trình biên dịch LESS, SASS, GRUNT, GULP, anh ấy có thể làm việc với các đối tượng DOM, API, SVG, AJAX và CORS, anh ấy có thể viết các truy vấn SQL và đào sâu vào dữ liệu. Nó hóa ra là một tập hợp các kỹ năng, được bổ sung thêm sự hiểu biết về các nguyên tắc thiết kế UI/UX, bố cục thích ứng và đáp ứng, đa trình duyệt và đa nền tảng, và đôi khi là kỹ năng phát triển thiết bị di động.
Nhân viên giao diện người dùng ở bắt buộc biết cách làm việc với kiểm soát phiên bản (Git, GitHub, CVS, v.v.), sử dụng các trình soạn thảo đồ họa và “chơi” với nhiều mẫu CMS khác nhau.
Bạn cũng nên biết tiếng Anh để không dịch thông số kỹ thuật trong Google Translator, có thể làm việc theo nhóm, đôi khi là đa ngôn ngữ, hiểu phông chữ web, hiểu người kiểm tra cũng như chính quy trình kiểm tra.
Vì vậy, nhà phát triển front-end nên nắm vững những công nghệ nào:
- HTML và CSS (bao gồm lưới và khung CSS, thông số W3C và WHATWG, Polyfill HTML5/CSS3)
- Bộ tiền xử lý CSS (Sass, Less, Stylus, v.v.)
- JavaScript
- Các framework và thư viện phổ biến: jQuery, Angular.JS, React.JS, Backbone.js, v.v.)
- OOCSS/BEM/SMACSS
- API HTML5
- ECMAScript 6
- CMS phổ biến (WordPress, Drupal, Joomla, v.v.)
- Hiểu và hiểu rõ các công nghệ máy chủ (Node.js, PHP, Ruby, .NET, v.v.)
- Công cụ gỡ lỗi (Chrome Những công cụ của nhà phát triển, Firebug và những thứ khác)
- Bộ chuyển mã JavaScript (Babel)
- Các công cụ kiểm soát phiên bản (Git, GitHub, CVS, v.v.)
- Cơ sở dữ liệu và ngôn ngữ truy vấn (SQL, MySql, NoSQL, MongoDB, v.v.)
- Biên tập viên đồ họa (Photoshop, Illustrator, v.v.)
- phát triển đa trình duyệt và đa nền tảng;
- cải tiến tiến bộ và suy thoái duyên dáng;
- phát triển điện thoại di động;
- bố trí thích ứng và đáp ứng;
- phông chữ web;
- Nguyên tắc tối ưu hóa SEO.
Số liệu thống kê nói gì
Những công nghệ và công cụ nào mà các nhà phát triển front-end thường sử dụng nhất? Đầu tiên, thật khó để tưởng tượng một nhà phát triển front-end không biết JavaScript. Các cuộc khảo sát xác nhận điều này:- Theo StackOverflow, JavaScript dẫn đầu danh sách các công cụ front-end với tỷ lệ chênh lệch rất lớn (90,5%)
- Một nghiên cứu của O”Reilly, được thực hiện giữa các lập trình viên châu Âu vào cuối năm 2016, cũng đặt JavaScript ở vị trí đầu tiên.
Dữ liệu StackOverflow
Nếu chúng ta nhóm các công cụ phổ biến nhất thành các nhóm, chúng ta sẽ gặp tình huống sau:
Dữ liệu StackOverflow
Và tập hợp các framework và thư viện phổ biến nhất của tất cả các nhà phát triển trông như thế này (xem hình minh họa). Thật vui khi thấy các công cụ giao diện người dùng trong danh sách này:
Dữ liệu StackOverflow
Con đường sự nghiệp và mức lương của lập trình viên front-end
Con đường sự nghiệp của một nhà phát triển front-end thường bắt đầu với một nhà thiết kế bố cục - đây là lựa chọn hợp lý nhất và được chấp nhận rộng rãi. Đầu tiên, một gói được nghiên cứu, sau đó kiến thức, thư viện và khung công tác được “xếp lớp” trên đó. Chuyên gia tương lai cũng nghiên cứu các khái niệm chính về xây dựng bộ phận máy chủ và bổ sung các công cụ cần thiết cho chuyên môn đã chọn. Sau đó, tất cả điều này được đánh bóng bằng khả năng làm việc với kiểm soát phiên bản, biên tập viên đồ họa và hiểu biết về các nguyên tắc.Có những lựa chọn khác. Nếu một lập trình viên mới vào nghề ban đầu biết mình dự định phát triển lĩnh vực nào, thì không có gì ngăn cản anh ta học một nhóm công nghệ quan trọng ngay lập tức chứ không phải theo từng phần. Tất cả phụ thuộc vào mục tiêu và thời gian dành cho nhà phát triển front-end trong tương lai. Lựa chọn nào cũng được chấp nhận, miễn là kết quả cuối cùng là một chuyên gia thông minh.
Một nhà phát triển front-end đã có sẵn thường có ba lựa chọn phát triển chính:
- theo chiều ngang (để cải thiện với tư cách là một chuyên gia, từ đó không ngừng nâng cao giá trị của bạn trên thị trường lao động);
- theo chiều dọc (tăng lên các bậc thang sự nghiệp);
- đa dạng hóa (phát triển chuyên ngành liên quan, biến thành một ngăn xếp đầy đủ và đào tạo lại).
Việc lựa chọn cái nào chỉ phụ thuộc vào bản thân chuyên gia và mong muốn/kỹ năng của anh ta.
Về mức lương của các nhà phát triển front-end: ở đây, cũng như trong toàn bộ ngành CNTT, không có tiêu chuẩn thống nhất sự chi trả. Tất cả phụ thuộc vào kỹ năng và khả năng thể hiện bản thân. Chà, đôi khi là do may mắn :)
Mức lương trung bình của một chuyên gia front-end ở Nga, rúp/tháng
Mức lương trung bình của một chuyên gia front-end ở Moscow, rúp/tháng
Theo Vòng tròn của tôi
Theo truyền thống, mức lương hàng năm của các nhà phát triển front-end ở Mỹ cao hơn một chút so với ở Nga. Tuy nhiên, nếu bạn làm việc trong chi nhánh của một công ty nước ngoài, rất có thể bạn không sợ khoảng cách như vậy. 
Theo PayScale
Làm thế nào để trở thành nhà phát triển front-end
Đầu tiên, hãy tháo chiếc kính màu hồng của bạn ra. Học tập là sự chăm chỉ và kỷ luật tự giác. Hầu hết các chuyên gia CNTT mới bắt đầu đều bỏ học ở giai đoạn “Tôi muốn trở thành lập trình viên và được trả bằng đô la, nhưng tôi không nghĩ rằng mình sẽ phải học nhiều như vậy”. Sự độc đáo của lập trình và bất kỳ chuyên ngành CNTT nào nói chung nằm ở khả năng tự học không ngừng. Đây vừa là sự phức tạp vừa là vẻ đẹp của lĩnh vực CNTT. Nếu điều này không làm bạn sợ, tuyệt! Bạn có mọi cơ hội để trở thành một chuyên gia xuất sắc.Nguyên tắc chính của một chuyên gia tương lai là đặt ra các mục tiêu thực tế trong quá trình học tập. Lập kế hoạch sẽ giúp với điều này. Lập danh sách các công cụ bạn dự định học và giữ nó trước mặt bạn.
Những người bắt đầu từ đầu cần phải bắt đầu và thành thạo chúng ở mức độ bố cục lý tưởng của bố cục PSD. Ở giai đoạn này, bạn cũng cần học cách làm việc với các trình soạn thảo văn bản và đồ họa, đồng thời biết các nguyên tắc thiết kế cơ bản (là một điểm cộng). Sau đó, hãy sử dụng JavaScript: cú pháp, kiến trúc và khả năng ngôn ngữ. Nắm vững các khung và thư viện phổ biến, đồng thời yêu thích các hệ thống kiểm soát phiên bản và một trong những trình chạy tác vụ phổ biến. Thêm bộ tiền xử lý và khung CSS, hiểu công nghệ máy chủ. Và sau đó bạn có thể uống sinh tố ở Bali và trau dồi thêm kiến thức đã thu được của mình.
Con đường gần đúng cho một nhà phát triển front-end mới bắt đầu.
Bạn sẽ có một cái của riêng bạn.
Bạn có thể đi trên con đường này một mình hoặc với người cố vấn (trường đại học, khóa học). Dưới đây là các định dạng đào tạo dành cho nhà phát triển phổ biến nhất theo StackOverflow: 
Dữ liệu StackOverflow
Các khóa học trực tuyến đứng đầu, được bình chọn bởi 64,7% nhà phát triển được khảo sát, tiếp theo là tự học từ sách, khóa học ngoại tuyến, trại phát triển và lập trình nguồn mở. tôi tự hỏi rằng giáo dục đại học(Bằng thạc sĩ) gần như ở vị trí cuối cùng.
Phần kết luận
là một người lính phổ quát. Anh ta sẽ hoàn thành việc bố trí, xây dựng ứng dụng web và nếu cần, sẽ thành thạo phần máy chủ. Bạn cần biết nhiều thứ: HTML, CSS, JavaScript, thư viện và khung công tác JS, bộ tiền xử lý và khung công tác CSS, hệ thống kiểm soát phiên bản và trình chạy tác vụ, công nghệ phụ trợ, thử nghiệm đơn vị và nhiều hơn thế nữa.Ngoài ra, các kỹ năng mềm sẽ hữu ích: tương tác với mọi người và làm việc nhóm, khả năng thiết lập quy trình làm việc hiệu quả và giải quyết các nhiệm vụ được giao một cách hiệu quả nhất. Cách tốt nhất có thể. Bạn không thể làm được nếu không có kiến thức vững chắc về tiếng Anh.
Mức lương của chuyên viên front-end khá khá, càng có nhiều kỹ năng thì cơ hội nhận được mức lương “béo” càng cao.
Bất cứ ai không đầu hàng việc tự học đều có thể trở thành nhà phát triển front-end: như chúng tôi đã phát hiện ra, việc dựa vào trình độ học vấn đại học là rất khó. Lựa chọn lý tưởng là các khóa học trực tuyến và ngoại tuyến khác nhau + tài liệu về chủ đề, thực hành và Google tuyệt vời.
Netology đang triển khai một chương trình đào tạo chính thức dành cho các chuyên gia front-end - . Đây là khóa học kéo dài 6 tháng bao gồm các công nghệ phát triển front-end cơ bản: HTML và CSS, JavaScript, API Web, AJAX, websockets, thư viện React.
Kết thúc khóa học, học viên sẽ tạo được ứng dụng web một trang của riêng mình. Khóa đào tạo được thực hiện bởi 10 chuyên gia front-end thực hành - điều này cho phép bạn hiểu biết toàn diện về các công cụ và nhiệm vụ phát triển front-end. Trong toàn bộ khóa đào tạo, học viên sẽ nhận được ít nhất 100 nhiệm vụ thực tế, càng gần với nhiệm vụ “chiến đấu” càng tốt và sẽ thực hiện 3 dự án quy mô vừa và 1 dự án chính thức như luận án.
Tất cả sinh viên hoàn thành khóa học đều nhận được chứng chỉ đào tạo nâng cao theo mẫu đã thiết lập và bằng tốt nghiệp có thương hiệu “Netology”.
tái bút Theo bạn, kiến thức nào là quan trọng đối với một front-end dev và kiến thức nào có thể nắm vững khi cần thiết?
Các nhà phát triển web Giao diện người dùng’a chịu trách nhiệm đảm bảo rằng trang khớp chính xác với bố cục của nhà thiết kế và hiển thị giống nhau trong tất cả các trình duyệt. Điều này đã trở nên dễ dàng hơn theo thời gian với sự ra đời của các trình duyệt tiên tiến hơn và nhiều công cụ phát triển hơn.
Trong khi mọi người đều biết về HTML và CSS thì lại có ít người biết về Sass và Haml hơn. Sự phát triển của Frontend tiếp tục tiến bộ hàng năm. Một trong những nhiệm vụ chính của nhà phát triển là luôn nắm bắt được những cải tiến mới nhất.
Nếu bạn cảm thấy hơi không chắc chắn về các kỹ năng front-end của mình hoặc chỉ muốn tìm hiểu về các kỹ thuật mới hơn, tôi khuyên bạn nên đọc bài viết ngắn này cho bạn. Tôi cung cấp cho bạn một số công cụ và tài nguyên phổ biến mà mọi nhà phát triển Front End nên sử dụng hoặc ít nhất là biết về sự tồn tại của chúng.
Bộ tiền xử lý CSS
Có lẽ bộ tiền xử lý CSS nổi tiếng nhất là SASS, cũng có phần giống với LESS. Nhờ hai thư viện này, bạn có thể tạo nhiều mã động hơn.
Thuật ngữ “SASS” có thể được áp dụng cho cả công nghệ và cú pháp. Các tệp SASS cũng có thể là các tệp SCSS, không có sự khác biệt đặc biệt nào giữa chúng, ở một số chỗ, SCSS giống với CSS thông thường hơn. LESS là điều tương tự chỉ với một cú pháp khác.
SASS và LESS không phải là ngôn ngữ mà là những phần mở rộng nhỏ cho CSS. Mã SASS/LESS biên dịch thành CSS đơn giản.
Sự khác biệt lớn nhất giữa SASS và LESS, ngoài cú pháp, là cách chúng hoạt động. SASS được biên dịch bằng Ruby, trong khi LESS được biên dịch bằng JavaScript (hoặc Node.js).
Lưu ý rằng quá trình xử lý trước CSS đòi hỏi một chút kiến thức về lệnh Terminal/CLI. Bạn không cần phải là chuyên gia nhưng ít nhất bạn phải có kiến thức cơ bản về dòng lệnh. Ví dụ: cách nhanh nhất để xây dựng tệp SASS là sử dụng thứ gì đó như thế này trong thiết bị đầu cuối:
sass input.scss đầu ra.css
Nhưng một khi bạn thực hành được một chút, nó sẽ trở thành cách viết CSS thứ hai của bạn.
Dưới đây là một số tài nguyên để tìm hiểu thêm về bộ tiền xử lý CSS:
GIT (Hệ thống kiểm soát phiên bản phân tán)
Kiểm soát dự án và kiểm soát phiên bản là cần thiết cho các dự án web lớn. Một cộng đồng như GitHub đã biến “GIT” trở thành một phần chung của công nghệ.
Nhưng nó hoạt động như thế nào và tại sao bạn nên sử dụng nó?
GIT là một hệ thống kiểm soát phiên bản cho phép các nhà phát triển viết mã mà không cần viết lại tác phẩm trước đó. Điều này có thể thực hiện được thông qua quá trình chuyển đổi, trong đó các phần khác nhau của dự án có thể được lưu dưới dạng kho lưu trữ. Với GIT, bạn có thể phân nhánh dự án hiện tại của mình, hãy thử thêm tùy chọn mới và lưu lại nếu bạn thích hoặc xóa nhánh không hoạt động.
Cài đặt GIT rất nhẹ nhàng cho mọi người các hệ điều hành. Đào tạo dễ dàng, khá chi tiết, trong thời gian đó bạn sẽ học cách mọi thứ được truyền đi, phân nhánh và kiểm soát.
Nhưng với hướng dẫn giới thiệu và thực hành nhiều, GIT sẽ dần dần trở thành một phần trong quy trình làm việc Front End của bạn.
Một trong những trở ngại lớn nhất có thể xảy ra là sử dụng GIT thông qua dòng lệnh. Đây là phương pháp ưa thích của hầu hết các lập trình viên đã sử dụng CLI hàng ngày. Tuy nhiên, nếu bạn vẫn chưa thể học cách sử dụng nó thì một ứng dụng từ GitHub sẽ hỗ trợ bạn và hiện miễn phí.
Lời khuyên của tôi nếu bạn quyết định bắt đầu học GIT là bạn nên học nó không vội vàng mà theo từng giai đoạn. Bạn rất dễ nản lòng khi kiểm soát phiên bản là một khái niệm hoàn toàn xa lạ. Vì vậy, hãy học theo tốc độ của riêng bạn và đừng bỏ cuộc!
Dưới đây là một số trang web tuyệt vời để tìm hiểu các tính năng cơ bản của GIT:
Thư viện JavaScript
Sự phát triển Front End chắc chắn đã chuyển sang hướng hỗ trợ đầy đủ JavaScript. Từ các phần tử trang động đến hoạt ảnh, JavaScript là một trong những công cụ chính của mọi dự án web.
Nhưng gần đây, có vẻ như ngày càng có nhiều nhà phát triển chuyển sang sử dụng các thư viện JavaScript giúp việc viết mã trở nên khá dễ dàng. Điều này thật tuyệt vì các thư viện đôi khi chứa các khái niệm đơn giản hóa có thể giúp tương tác dễ dàng hơn với các phương thức như AJAX. Mặt tiêu cực hiện tượng này - với rất nhiều thư viện khác nhau, thật khó để biết bắt đầu từ đâu.
Một nguyên tắc nhỏ là chỉ học những gì bạn cần và khi nào bạn cần. Nếu bạn là người chỉ thích viết code cho vui thì tốt hơn hết bạn chỉ nên thành thạo một vài thư viện. jQuery có lẽ là lựa chọn tốt nhất để bắt đầu vì đây là một trong năm thư viện JavaScript được sử dụng nhiều nhất.
Nhưng bạn cũng nên xem xét các công cụ hiện đại hơn như Backbone.js hoặc Angular.js. Cả hai đều là những thư viện có sẵn công khai được viết để cấu trúc các ứng dụng web JS cốt lõi. Chúng cực kỳ mạnh mẽ nhưng có thể đóng vai trò như một bổ sung nhỏ cho một blog WordPress đơn giản.
Nhà phát triển, đang tìm kiếm một vấn đề, có thể cân nhắc việc học một trong các công cụ này bằng ngôn ngữ xử lý trước như CoffeeScript, TypeScript hoặc LiveScript. Cả ba ngôn ngữ đều được biên dịch thành JavaScript, nhưng có một chút khác biệt so với cú pháp ban đầu.
Sức mạnh thực sự của JavaScript bây giờ mới được khám phá. Với một công cụ như Node.js, bạn có thể cài đặt nó trên máy chủ. Điều đáng chú ý là JavaScript thô có thể được thực thi trong bảng điều khiển trình duyệt, mang lại nhiều sức mạnh hơn nữa cho các nhà phát triển Front End.
Bạn có phải người mới hoàn thành hoặc một nhà phát triển dày dạn kinh nghiệm, luôn có điều gì đó có thể học được bằng JavaScript nếu bạn đam mê phát triển web. Các tài nguyên sau đây có thể cực kỳ hữu ích:
Bộ tiền xử lý HTML
Phổ biến Bộ tiền xử lý CSS, cũng cho phép xuất hiện các bộ tiền xử lý cho HTML Front End. Điều này hoạt động chính xác như SASS/LESS, nơi bạn viết mã và biên dịch nó để có được HTML thông thường.
Bộ tiền xử lý HTML có thể giúp bạn tránh khỏi sự lặp lại dòng giống hệt nhau mã, thẻ đóng. Mặc dù điều này rõ ràng là hữu ích nhưng đôi khi nó cũng cần một số điều chỉnh.
Haml và Jade là hai bộ tiền xử lý phổ biến nhất với rất những phong cách khác cú pháp. Slim là lựa chọn thứ ba. Cả ba đều ở trong truy cập mở và đang ngày càng được cải thiện nhờ sự hỗ trợ của công chúng.
Haml và Slim chạy trên Ruby, Haml là một giải pháp thay thế cho các mẫu ERB. Haml hiện là một công cụ tuyệt vời dành cho các nhà phát triển Rails. Đối với Front Enders, nó có thể hữu ích cho dù bạn có viết mã Back End hay không.
Jade là một công cụ tạo mẫu chạy trên Node.js. Nó được sử dụng tốt hơn cho các ứng dụng Node hoặc cũng có thể được sử dụng như một giải pháp độc lập cho các nhà phát triển Front End thích cú pháp của Jade.
Không có lệnh cấm hoặc sự lựa chọn sai lầm, vì cả hai đều khá giống nhau. Sự đồng thuận chung giữa những người đam mê Ruby là gắn bó với sự phát triển của Haml. Nhưng nhiều nhà phát triển Front End đang nghiêng về Jade vì Node.js đã trở thành xu hướng hot trong phát triển web.
Đúng, rất ít nhà phát triển tìm thấy sơ bộ xử lý HTML. Bạn có thể thích viết HTML tĩnh hơn, nhưng một số nhà phát triển lại thích Haml/Slim/Jade hơn. Vì vậy, nếu ít nhất bạn có thể hiểu được cú pháp, nó sẽ mang lại cho bạn một lợi thế lớn.
Tôi khuyến khích bạn xem các tài nguyên học tập chi tiết này để tìm hiểu sâu hơn:
Trình quản lý tác vụ JS
Trình quản lý tác vụ tự động – công cụ mới nhất Giao diện người dùng. Khái niệm này ban đầu thường gây nhầm lẫn, nhưng trình quản lý tác vụ có thể cải thiện đáng kể Quy trình công nghệ và mang lại tiềm năng to lớn.
Hai trình quản lý tác vụ lớn là Gulp và Grunt. Bạn sẽ nhận thấy rằng cả hai đều chạy JavaScript nhưng cũng yêu cầu thiết bị đầu cuối. Vậy tất cả hoạt động như thế nào?
Gulp và Grunt được cài đặt thông qua Trình quản lý gói Node (NPM) trên dòng lệnh. Bản thân các thư viện có thể được điều khiển bằng các lệnh JS từ tập tin riêng biệt, gulpfile.js và gruntfile.js tương ứng.
Các tệp này có thể rất nhỏ hoặc rất lớn tùy thuộc vào số lượng tác vụ bạn muốn tự động hóa. Hãy xem Gulpfile.js tiêu chuẩn này để xem nó trông như thế nào.
Nếu bạn chưa bao giờ làm bất cứ điều gì như thế này trước đây thì có lẽ bạn hơi bối rối. Bây giờ đừng lo lắng về cú pháp, thay vào đó bạn có thể tập trung vào các khái niệm và tính năng do các tệp .js này cung cấp.
Bạn có thể thêm mã JS tự động hóa một số tác vụ như xử lý tệp SASS, Haml, thậm chí cả ngôn ngữ JS, một trong số đó là CoffeeScript. Bạn sẽ nhận thấy rằng mỗi liên kết đó đều trỏ đến gói NPM được viết sẵn cho Gulp. Điều này có nghĩa là bạn không cần phải viết nội dung giống như trình biên dịch tự động SASS của riêng bạn, bởi vì tất cả đã được viết sẵn!
Việc học cách sử dụng trình quản lý tác vụ đòi hỏi phải thực hiện từng bước một. Các khái niệm này có vẻ xa lạ và giống như việc học SASS, có thể khó hiểu đối với người mới bắt đầu. Tuy nhiên, một khi bạn hiểu những điều cơ bản và thấy nó ảnh hưởng đến sự phát triển tổng thể của bạn như thế nào, bạn thậm chí sẽ không nghĩ đến việc quay lại con đường cũ.
Để bắt đầu, bạn chỉ cần chọn Gulp hoặc Grunt và ép mình luyện tập.
Dưới đây là một số cách để bắt đầu:
Cuối cùng
Tất cả những công cụ này đều khá mới hoặc đã phát triển rất nhiều trong vài năm qua. Thế giới phát triển Front End cung cấp rất nhiều công cụ ấn tượng để giúp việc viết mã trở nên dễ dàng hơn và tôi hy vọng bài viết này sẽ cung cấp cho bạn một điểm khởi đầu.
