Các công cụ hiện đại để phát triển Front End. Công cụ dành cho nhà phát triển Front-End. Số liệu thống kê nói gì
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ụ, nhất đường tắtđể xây dựng các tệp SASS là sử dụng một cái 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 công việc 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 một hướng dẫn giới thiệu và một lượng lớn Thực hành 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 bởi vì 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à ứng dụng này sẽ giúp bạn. khoảnh khắc này là 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 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ó thể sự 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 khả năng hơn nữa cho các nhà phát triển Front End.
Cho dù bạn là người mới bắt đầu hay một nhà phát triển dày dạn kinh nghiệm, luôn có điều gì đó bạn có thể học với 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 có quyền truy cập mở và luôn đượ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, nhưng một số nhà phát triển 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 - mới nhất Công cụ phía trước End'a. 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.
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 đỡ những nhà phát triển mới vào nghề. 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 sử dụng trong các vấn đề 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
Ban đầu, người ta viết bằng HTML thuần túy, vẽ hình thức trên CSS thuần túy, tạo 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à xuất hiện công cụ tốt- jQuery, sử dụng cú pháp thuận tiện, cho phép bạn 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 bằ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 đến đó.
Đâ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. Khi điều hướng đến một trang khác, ví dụ từ trang chính đến trang tìm kiếm khách sạn, ứng dụng sẽ 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 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 biên dịch mã, bộ tiền xử lý và 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, thêm một loạt chúng vào đó khả 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. Để làm mâu đơn giản, bạn cần phải viết rất nhiều, rất nhiều mã bổ sung và cài đặt hàng 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; bên ngoài ứng dụng giống nhau có thể được sắp xếp khá khác nhau bên trong. Nhưng khái niệm về JSX - sự kết hợp giữa mã và đánh dấu, có vẻ không mấy thành công, 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 số 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 trang đơn, chúng ta đã bỏ lỡ một chi tiết quan trọng: khi robot tìm kiếm truy cập vào ứng dụng một trang, nó không thấy gì - chỉ là một trang trống có thẻ nội dung không có nội dung. Trong các ứng dụng lỗi thời, máy chủ sẽ đi tới cơ sở dữ liệu, tạo chế độ xem và phục vụ HTML sẵn sà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 được chấp nhận.
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. Những Người Thông Minh đã dạy tất cả các JavaScript chạy trong trình duyệt để chạy trên máy chủ bằng cách sử dụng NodeJS (một công nghệ để tạo ứng dụng máy chủ sử dụng trình duyệt Ngôn ngữ JavaScript). 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. BẰNG giải pháp làm sẵn Ví dụ: có khung Next.js cho việc này. 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 như tất cả các trình duyệt đều hỗ trợ Flexbox và CSS Grid - những trình duyệt hiện đại cách 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 ra để 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. Các khung CSS sẽ là nền tảng tuyệt vời cho hầu hết mọi ứng dụng web mà bạn có và khởi đầu tốt nắm vững kỹ năng sắp xếp hợp lý. Chúng nên được sử dụng khi cần các yếu tố điển hình giao diện người dùng, 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 -
Vào ngày thứ sáu đẹp trời này, tôi dám đề xuất cộng đồng habra lựa chọn nhỏ các ứng dụng được thiết kế để tăng năng suất khi làm việc với giao diện người dùng. Nếu ứng dụng yêu thích của bạn không được trình bày ở đây, vui lòng nhận xét!
Trình tạo biểu mẫu tuyệt vời này sẽ giúp bạn tạo các hộp đăng nhập CSS đẹp mắt và những nội dung đầu vào khác với thời gian đầu tư tối thiểu. Ngoài các biểu mẫu trên trang web của dự án này, bạn có thể tạo những biểu mẫu khác không kém CSS đẹp các phần tử, bao gồm các nút và dải băng.
Dành cho tình yêu Twitter khởi động trình tạo này đã được tạo, nhờ đó bạn có thể dễ dàng thay đổi cài đặt ban đầu phong cách và bắt đầu tạo mẫu.
Công tắc và công tắc bật tắt trong CSS thuần túy. Chất lượng rất cao và đơn giản.
Collor tạo ra một bảng màu hài hòa dựa trên màu được chỉ định. Cho phép bạn tránh hiệu ứng “cắt bỏ” trong các dự án của mình, đồng thời sử dụng nhiều màu sắc.
Nén cho CSS của bạn và Tệp JavaScript không có lo lắng và vấn đề.
Tiện ích hữu ích, đồng bộ hóa các thay đổi được thực hiện thông qua FireBug với các tệp CSS. Bạn có thể tưởng tượng bạn sẽ tiết kiệm được bao nhiêu thời gian.
Trang web này sẽ giúp bạn sắp xếp CSS theo tiêu chí nhất định, mức độ ưu tiên, bộ chọn, v.v. Rất điều tiện lợi.
Đang tải trình tạo chỉ báo cho AJAX và jQuery. Dễ dàng sử dụng và tùy chỉnh.
Công cụ này sẽ giúp bạn tạo ra một dải ruy băng dễ thương. Chà, bạn hiểu ý tôi mà - ngày nay chúng ở khắp mọi nơi.
Dự án typecast được dành cho các thử nghiệm về phông chữ. 30 giây để đăng ký và bạn có một công cụ khá mạnh trong kho vũ khí của mình, cho phép bạn thực hiện tất cả các loại thao tác với phông chữ và khi bạn tìm thấy sự kết hợp lý tưởng của mình, mọi thứ sẽ được xuất sang CSS. Chà, thật tuyệt vời phải không?
Rất nhiều biểu tượng và chữ tượng hình cho Sử dụng CSS trên trang web của bạn. Chọn những cái bạn quan tâm, xem bản xem trước và tải xuống. Nó đơn giản.
Ứng dụng thuận tiện nhất để tạo các họa tiết. Chỉ cần kéo và thả hình ảnh cần thiết, nhấp vào Tạo và nhận bảng sprite. Hiện tại nó chỉ hoạt động trong Chrome Firefox.
Nếu bạn đang thực hiện một dự án đáp ứng, thì tại đây bạn có thể kiểm tra xem nó sẽ trông như thế nào trên màn hình nhiều thiết bị khác nhau.
Bạn muốn tạo hoạt ảnh bằng CSS một cách dễ dàng và dễ dàng? Sau đó theo liên kết. Đặt hướng, tọa độ, xem hoạt hình và tải mã nguồn.
Một công cụ khác để làm việc với CSS sprite. Cũng là giao diện kéo thả nhưng mình thấy nó đẹp hơn.
Nếu bạn là người yêu thích bộ tiền xử lý LESS, thì bạn có thể quan tâm đến công cụ chuyển đổi từ CSS sang LESS chỉ bằng một cú nhấp chuột này.
Trình tạo nền tuyệt vời. Sự lựa chọn vĩ đại kết cấu, hiệu ứng và khả năng sửa đổi của họ.
Cắt Lưu 
Trang web này cung cấp cho bạn khả năng lưu trữ tất cả các đoạn CSS của bạn ở một nơi. Trong thư viện của tôi, đó là. Giao diện đẹp, rất vui khi được làm việc cùng.
tiền tố
Một ứng dụng từ Jeffrey Way giúp bạn giải quyết nhanh chóng các sự cố trên nhiều trình duyệt. Bạn có thể viết mã CSS chỉ cho một trình duyệt, sau đó chạy mã đó qua Prefixr và nó sẽ tạo mã bị thiếu để hiển thị chính xác trong các trình duyệt khác.
Xin vui lòng HTML5 
Bạn có thể gọi dự án này là trợ lý HTML5 trực tuyến. Bạn bối rối về việc sử dụng một thẻ mới cụ thể? Trang web sẽ cho bạn biết liệu nó có đáng sử dụng hay không. Và nếu vậy thì chính xác như thế nào.
Hôm nọ, tôi đã chuẩn bị README cho một dự án, tôi hy vọng nó sẽ thú vị và mang tính hướng dẫn cho các nhà phát triển khác. Vì vậy, khi tôi viết nó, tôi nhận ra rằng cách đây vài năm tôi sẽ sợ chết khiếp nếu gặp phải thứ gì đó tương tự, với đủ loại tài liệu tham khảo về Node và trình quản lý gói của nó, hệ thống Homebrew và Git, tất cả các loại kiểm tra, thử nghiệm và xây dựng cuối cùng.
Ngày xửa ngày xưa, phần lớn quy trình làm việc của nhà phát triển front-end bao gồm chỉnh sửa tệp, kiểm tra chúng cục bộ (trong khả năng tốt nhất của họ) và tải chúng lên máy chủ qua FTP. Chúng tôi đã đo lường mức độ tuyệt vời của mình bằng khả năng điều chỉnh IE6 theo ý muốn của mình hoặc đạt được khả năng khớp pixel trong các trình duyệt khác nhau. Nhiều thành viên trong cộng đồng của chúng tôi - bao gồm cả tôi - thiếu kinh nghiệm về lập trình truyền thống. HTML, CSS và JavaScript - thường ở dạng jQuery - đều được tự học.
Trong vài năm qua, một số điều đã thay đổi. Có lẽ lý do cho điều này là mọi người bắt đầu coi trọng việc phát triển front-end; có lẽ phần lớn các nhà phát triển trình duyệt cuối cùng đã đưa ra trật tự cho những sáng tạo của họ; hoặc có thể chỉ các nhà phát triển front-end, bao gồm cả tôi, mới hiểu được bản chất của quy trình phát triển phần mềm.
Dù đó là gì đi nữa, tôi nghĩ chúng ta đã thấy sự thay đổi trong tầm quan trọng từ giá trị của những thứ nhỏ nhặt sang giá trị của các công cụ. Giờ đây, để trở thành một nhà phát triển front-end thành công, bạn cần phải có một bộ kỹ năng cơ bản và những nhà phát triển không đáp ứng được những yêu cầu này sẽ sớm bắt đầu cảm thấy ngày càng tụt hậu quá xa khi các nguồn thông tin bắt đầu lấy một số kiến thức cho giả dụ như vậy. .
Dưới đây là một số điều chúng tôi muốn mọi người làm quen và một số tài nguyên bạn có thể sử dụng để nâng cao kỹ năng của mình. (Cảm ơn Paul Irish, Mike Taylor, Angus Croll và Vlad Filippov vì những đóng góp của họ.)
JavaScript
Điều này có thể hiển nhiên nếu không cần dùng lời nói, nhưng chỉ biết một thư viện JavaScript thôi thì chưa đủ. Tôi không nói rằng bạn phải có khả năng triển khai tất cả các tính năng của thư viện bằng cách sử dụng JavaScript đơn giản, nhưng bạn nên hiểu khi nào thư viện thực sự phù hợp để sử dụng và có thể hoạt động với JavaScript cũ tốt nếu cần.
Điều này có nghĩa là bạn đã đọc JavaScript: Điểm mạnh, tốt nhất là nhiều lần. Rằng bạn hiểu cách hoạt động của các cấu trúc dữ liệu như đối tượng và mảng; các tính năng, bao gồm cách thức và lý do bạn cần chúng gọi Và áp dụng; biết cách làm việc với tính kế thừa thông qua nguyên mẫu; và bạn có thể xử lý sự không đồng bộ.
Nếu kỹ năng của bạn với JavaScript đơn giảnđể lại nhiều điều mong muốn, đây là một số tài nguyên sẽ giúp bạn:
- Eloquent JavaScript: Một cuốn sách hay (cũng có bản in) bao gồm những điều cơ bản về JavaScript
- Kiểm tra đánh giá mức độ thành thạo JS: tuyển tập các bài kiểm tra có lỗi về các chủ đề khác nhau trong JavaScript; bạn có thể viết lại mã kiểm tra để nó hoạt động được không?
- - một tác phẩm tuy cũ nhưng mạnh mẽ của Paul Irish chứng minh những gì bạn có thể học được từ việc đọc mã của người khác.
Hệ thống phiên bản tệp Git (và hồ sơ GitHub)
Nếu bạn không sử dụng GitHub, bạn thường không thể tham gia vào cộng đồng nguồn mở lớn. mã nguồn, phát triển xung quanh các công nghệ phát triển front-end. Việc sao chép một kho lưu trữ để thử các khả năng của nó sẽ trở nên phổ biến đối với bạn và bạn nên hiểu cách sử dụng các nhánh trong các dự án hợp tác.
Bạn muốn cải thiện kỹ năng Git của mình?
Tổ chức mô-đun, quản lý phụ thuộc và xây dựng thử nghiệm
Những ngày mà việc quản lý các phần phụ thuộc đơn giản như thêm một tập lệnh bổ sung hoặc thẻ định kiểu vào một trang đã qua lâu rồi. Ngay cả khi bạn chưa có cơ hội triển khai các công cụ tuyệt vời như RequireJS vào quá trình phát triển của mình tại nơi làm việc, bạn vẫn nên dành thời gian để khám phá chúng trong dự án cá nhân của mình hoặc một dự án như Backbone Boilerplate, vì những lợi ích mà chúng mang lại là không thể cường điệu hóa. Đặc biệt, RequireJS cho phép phát triển bằng cách sử dụng các tệp JS và CSS mô-đun nhỏ, sau đó ghép nối và thu nhỏ chúng bằng công cụ tối ưu hóa của nó để sử dụng tiếp.
Hoài nghi về sự phát triển dựa trên mô-đun? Đây không phải là lý do để không làm gì cả. Ít nhất, bạn nên làm quen với các công cụ như UglifyJS hoặc Closure Compiler, những công cụ này nén mã của bạn một cách thông minh và sau đó nối chúng lại với nhau. tập tin nén trước khi đưa ra kết quả.
Nếu bạn đang viết CSS thuần túy—tức là không sử dụng bộ tiền xử lý như Sass hay Stylus—RequireJS cũng có thể giúp bạn sắp xếp các tệp CSS của mình theo kiểu mô-đun. Sử dụng câu lệnh @import trên tệp chính để tải các phần phụ thuộc phát triển, sau đó chạy trình tối ưu hóa RequireJS trên tệp chính để tạo tệp sẵn sàng sử dụng.
Công cụ dành cho nhà phát triển được tích hợp trong trình duyệt
Các công cụ dành cho nhà phát triển được tích hợp trong trình duyệt đã được cải thiện đáng kể trong vài năm qua và chúng có thể cải thiện đáng kể trải nghiệm phát triển của bạn nếu bạn học cách sử dụng chúng một cách chính xác. (Gợi ý: Nếu bạn vẫn đang gỡ lỗi mã của mình bằng cách sử dụng cảnh báo thì bạn đang lãng phí thời gian.)
Có lẽ bạn nên chọn một trình duyệt có công cụ dành cho nhà phát triển mà bạn sẽ sử dụng cơ sở vĩnh viễn- Tôi hiện đang nghiêng về Công cụ dành cho nhà phát triển trong Google Chrome - nhưng không hoàn toàn từ bỏ các công cụ trong các trình duyệt khác vì đôi khi chúng bổ sung thêm các tính năng hữu ích mới dựa trên phản hồi của nhà phát triển. Đặc biệt, Dragonfly của Opera đã bổ sung thêm một số tính năng giúp các công cụ dành cho nhà phát triển của nó nổi bật so với các công cụ khác, chẳng hạn như trình lược tả CSS (thử nghiệm), các phím nóng có thể tùy chỉnh, gỡ lỗi từ xa mà không cần kết nối USB cũng như khả năng lưu và sử dụng bảng màu tùy chỉnh. .
Nếu bạn không quen lắm với các công cụ dành cho nhà phát triển trình duyệt, thì bài thuyết trình "Sửa mã jQuery" là một tổng quan tuyệt vời (và không quá tập trung vào jQuery) về gỡ lỗi, bao gồm hướng dẫn từng bước về quy trình gỡ lỗi - một điều gì đó sẽ thay đổi cuộc sống của bạn nếu bạn tham gia. Chúng tôi chưa quen với bài thuyết trình.
Dòng lệnh
Khi nói đến dòng lệnh, việc sử dụng nó một cách tự tin đã là điều bắt buộc—bạn sẽ bỏ lỡ rất nhiều điều nếu chưa sẵn sàng ngay lập tức nhảy vào cửa sổ terminal và lao vào làm việc. Tôi không nói cho bạn biết bạn nên làm gì Tất cả thông qua thiết bị đầu cuối - bạn có thể tiếp tục sử dụng GUI Git, mặc dù tôi nghĩ cuối cùng bạn sẽ tốt hơn nếu từ bỏ nó - nhưng tất nhiên bạn phải luôn mở một cửa sổ đầu cuối cho dự án bạn đang làm việc . Có một số tác vụ bạn nên thực hiện thông qua dòng lệnh mà không cần suy nghĩ kỹ:
- ssh để kết nối với máy hoặc máy chủ khác
- scp để sao chép tập tin sang máy hoặc máy chủ khác
- ack hoặc grep để tìm kiếm tệp trong dự án theo chuỗi hoặc mẫu
- tìm để tìm các tập tin có tên khớp với một mẫu nhất định
- git để thực hiện ít nhất các hành động cơ bản như thêm, cam kết, trạng thái và kéo
- brew để sử dụng Homebrew để cài đặt gói
- npm để cài đặt gói Node
- gem để cài đặt gói Ruby
Nếu có một số lệnh bạn đặc biệt sử dụng thường xuyên, hãy chỉnh sửa .bashrc , .profile hoặc .zshrc (hoặc bất kỳ lệnh nào) và tạo tên thay thế cho chúng để bạn không phải gõ lệnh bằng tay mỗi lần. Bạn cũng có thể thêm tên thay thế vào tệp ~/.gitconfig của mình. Các tập tin chấm của Gianni Chiappetta là nguồn cảm hứng tuyệt vời.
Lưu ý: Nếu bạn đang sử dụng Windows, tôi không biết làm cách nào để giúp bạn, ngoài việc tôi có thể giới thiệu Cygwin. Có thể tôi sai, nhưng việc tham gia vào cộng đồng nhà phát triển front-end với mã nguồn mở trên máy Windows thì khó khăn hơn nhiều. Về mặt tích cực, máy tính xách tay MacBook Air không đắt lắm, mạnh mẽ và di động một cách đáng ngạc nhiên, sau đó còn có Ubuntu hoặc Unix.
Tạo khuôn mẫu phía khách hàng
Cách đây không lâu, các máy chủ thường phản hồi yêu cầu XHR bằng một đoạn mã HTML, nhưng trong 12-18 tháng qua, cộng đồng nhà phát triển giao diện người dùng đã nhận ra ánh sáng và bắt đầu yêu cầu dữ liệu thô từ máy chủ. Việc chuyển đổi dữ liệu đó thành HTML, sau đó có thể được thêm vào cây tài liệu, có thể là một quá trình tốn thời gian và bất tiện khi xử lý trực tiếp mã. Đây là lúc các thư viện tạo khuôn mẫu phía máy khách xuất hiện: chúng cho phép bạn sử dụng các mẫu mà sau khi bạn thêm dữ liệu, sẽ biến thành chuỗi HTML. Bạn có cần trợ giúp trong việc chọn một công cụ tạo khuôn mẫu không? Biểu đồ lựa chọn mẫu từ Garann Means sẽ giúp bạn tìm được mẫu phù hợp.
Bộ tiền xử lý CSS
Bài viết gốc: Đường cơ sở dành cho nhà phát triển Front-End Bài viết được hiệu đính bởi:Trong tài liệu này, tôi muốn trình bày danh sách các công cụ giúp tôi khi phát triển phía máy khách của một ứng dụng hoặc trang web. Đó là về về phát triển Front-End.
Nhà phát triển Front-End là ai?
Sau khi tạo mẫu bắt buộcĐã đến lúc bố trí và làm việc với bảng định kiểu.
Làm việc với CSS.
Có rất nhiều công cụ và trình tạo để làm việc với CSS. Một số trong số chúng được thu thập trong bài viết này “Lựa chọn trình tạo CSS”.
Trang web: http://habrahabr.ru/post/118056
Trong công việc của mình tôi chỉ sử dụng một trình tạo, đây là tiện ích mở rộng trình duyệt CSSsir Mozilla Firefox. Một công cụ đơn giản và dễ sử dụng cho phép bạn tạo mã trên nhiều trình duyệt cho các thuộc tính CSS cơ bản chỉ bằng vài cú nhấp chuột. Trình tạo CSS3 này sẽ hữu ích không chỉ cho các quản trị viên web và nhà thiết kế mà còn cho cả người dùng thông thường.
Trang web: https://addons.mozilla.org/ru/firefox/addon/csssir
Tham chiếu CSS
Làm việc với động lực trang web JavaScript và jQuery
Các dịch vụ để làm việc với API jQuery.
Bảng tính jQuery - Oscar Otero
JQuery Cheatsheet bằng HTML có liên kết đến tài liệu API gốc. Thật tiện lợi vì mọi thứ đều được tập hợp trong một mset, bạn có thể chọn phiên bản jQuery thư viện và xem phiên bản nào hỗ trợ cái gì. Mô tả chức năng sẽ mở tài liệu gốc trong một cửa sổ mới.
