Việc làm cho lập trình viên javascript

Đây là hướng dẫn mà mọi người có thể sử dụng để tìm hiểu về thực tiễn phát triển giao diện người dùng. Nó phác thảo và thảo luận rộng rãi về thực tiễn của kỹ thuật front-end. cách học nó và những công cụ nào được sử dụng khi thực hành nó vào năm 2019

Nó được viết đặc biệt với mục đích trở thành một nguồn tài nguyên chuyên nghiệp cho các nhà phát triển front-end tiềm năng và hiện đang hành nghề để trang bị cho mình các tài liệu học tập và công cụ phát triển. Thứ hai, nó có thể được sử dụng bởi các nhà quản lý, CTO, người hướng dẫn và công ty săn đầu người để hiểu sâu hơn về thực tiễn phát triển front-end

Nội dung của sổ tay ủng hộ các công nghệ web [HTML, CSS, DOM và JavaScript] và những giải pháp được xây dựng trực tiếp trên các công nghệ mở này. Các tài liệu được tham khảo và thảo luận trong cuốn sách là tốt nhất trong lớp hoặc cung cấp hiện tại cho một vấn đề

Cuốn sách không nên được coi là một phác thảo toàn diện về tất cả các tài nguyên có sẵn cho nhà phát triển front-end. Giá trị của cuốn sách gắn liền với cách sắp xếp ngắn gọn, tập trung và kịp thời với lượng thông tin phân loại vừa đủ để không gây choáng ngợp cho bất kỳ ai về bất kỳ chủ đề cụ thể nào

Mục đích là phát hành bản cập nhật nội dung hàng năm. Đây hiện là năm thứ tư một phiên bản đã được phát hành

Chương 0 cung cấp một bản tóm tắt ngắn gọn về năm phát triển front-end và những gì có thể xảy ra. Chương 1 & 2 nhằm mục đích cung cấp một cái nhìn tổng quan ngắn gọn về nguyên tắc và thực hành phát triển front-end. Chương 3 & 4 sắp xếp và đề xuất các lộ trình và tài nguyên học tập. Chương 5 tổ chức và liệt kê các công cụ được sử dụng bởi các nhà phát triển front-end và Chương 6 nêu bật các cửa hàng thông tin front-end

chương 0. Tổng kết năm 2018 và hướng tới

0. 1 — Tóm tắt quá trình phát triển Front-end năm 2018

0. 2 — Năm 2019, Kỳ vọng

Chương 3. Học Front-end Dev. Tài nguyên tự định hướng/Đề xuất

3. 1. - Tìm hiểu Internet/Web

Internet là một hệ thống toàn cầu gồm các mạng máy tính được kết nối với nhau sử dụng bộ giao thức Internet [TCP/IP] để liên kết hàng tỷ thiết bị trên toàn thế giới. Nó là một mạng các mạng bao gồm hàng triệu mạng tư nhân, công cộng, học thuật, kinh doanh và chính phủ từ địa phương đến toàn cầu, được liên kết bởi một loạt các công nghệ mạng điện tử, không dây và quang học. Internet mang theo nhiều loại tài nguyên và dịch vụ thông tin, chẳng hạn như các tài liệu và ứng dụng siêu văn bản được liên kết với nhau của World Wide Web [WWW], thư điện tử, điện thoại và mạng ngang hàng để chia sẻ tệp

-Wikipedia

nguồn hình ảnh. https. //www. chàoitsliam. com/2014/12/20/how-the-internet-works-infographic/

nguồn hình ảnh. http. //www. phiến quân. com/công nghệ/tìm-ra-người-chạy-biểu-đồ-internet/

3. 2. - Tìm hiểu trình duyệt web

Trình duyệt web [thường được gọi là trình duyệt] là một ứng dụng phần mềm để truy xuất, trình bày và duyệt qua các nguồn thông tin trên World Wide Web. Một nguồn thông tin được xác định bởi Mã định danh tài nguyên thống nhất [URI/URL] và có thể là một trang web, hình ảnh, video hoặc phần nội dung khác. Các siêu liên kết có trong tài nguyên cho phép người dùng dễ dàng điều hướng trình duyệt của họ đến các tài nguyên liên quan. Mặc dù các trình duyệt chủ yếu nhằm mục đích sử dụng World Wide Web, nhưng chúng cũng có thể được sử dụng để truy cập thông tin được cung cấp bởi các máy chủ web trong các mạng riêng hoặc tệp trong hệ thống tệp

-Wikipedia

Các trình duyệt được sử dụng phổ biến nhất [trên máy tính để bàn và thiết bị di động] là

nguồn hình ảnh. http. //gs. máy đếm tiền. com/browser-market-share

Sự phát triển của trình duyệt và công nghệ web [i. e. , API]

Trình duyệt không đầu được sử dụng phổ biến nhất là

Trình duyệt hoạt động như thế nào

Tối ưu hóa cho trình duyệt

So sánh trình duyệt

Hack trình duyệt

Phát triển cho trình duyệt

Trước đây, các nhà phát triển front-end đã dành rất nhiều thời gian để làm cho mã hoạt động trên một số trình duyệt khác nhau. Đây đã từng là một vấn đề lớn hơn ngày nay. Ngày nay, trừu tượng [e. g. , React, Webpack, Post-CSS, Babel, v.v. ] kết hợp với các trình duyệt hiện đại giúp phát triển trình duyệt khá dễ dàng. Thách thức mới không phải là người dùng sẽ sử dụng trình duyệt nào, mà là họ sẽ chạy trình duyệt đó trên thiết bị nào

Trình duyệt thường xanh

Các phiên bản mới nhất của hầu hết các trình duyệt hiện đại được coi là trình duyệt thường xanh. Đó là, về mặt lý thuyết, chúng được cho là tự động cập nhật âm thầm mà không cần nhắc người dùng. Động thái hướng tới các trình duyệt tự cập nhật này phản ứng với quá trình loại bỏ chậm các trình duyệt cũ không tự động cập nhật

Chọn trình duyệt

Tính đến hôm nay, hầu hết các nhà phát triển front-end đều sử dụng Chrome và "Chrome Dev Tools" để phát triển mã front-end. Tuy nhiên, tất cả các trình duyệt hiện đại được sử dụng nhiều nhất đều cung cấp nhiều công cụ dành cho nhà phát triển. Chọn một để sử dụng để phát triển là một lựa chọn chủ quan. Vấn đề quan trọng hơn là biết trình duyệt nào, trên thiết bị nào, bạn phải hỗ trợ và sau đó thử nghiệm một cách thích hợp

3. 3 - Tìm hiểu hệ thống tên miền [hay còn gọi là DNS]

Hệ thống tên miền [DNS] là hệ thống đặt tên phân tán theo thứ bậc cho máy tính, dịch vụ hoặc bất kỳ tài nguyên nào được kết nối với Internet hoặc mạng riêng. Nó liên kết các thông tin khác nhau với các tên miền được gán cho từng thực thể tham gia. Nổi bật nhất, nó dịch các tên miền mà con người có thể dễ dàng ghi nhớ thành các địa chỉ IP dạng số cần thiết cho mục đích của các dịch vụ và thiết bị máy tính trên toàn thế giới. Hệ thống tên miền là một thành phần thiết yếu trong chức năng của hầu hết các dịch vụ Internet vì đây là dịch vụ thư mục chính của Internet

-Wikipedia

nguồn hình ảnh. http. //www. tiêu hóa kỹ thuật số. com/blog/DVDGuy/wp-content/uploads/2011/11/how_dns_works. jpg

3. 4 - Tìm hiểu HTTP/Mạng [Bao gồm CORS & WebSockets]

HTTP - Giao thức truyền tải siêu văn bản [HTTP] là một giao thức ứng dụng cho các hệ thống thông tin siêu phương tiện, cộng tác, phân tán. HTTP là nền tảng giao tiếp dữ liệu cho World Wide Web

-Wikipedia

Tài liệu HTTP

Video/Bài báo/Hướng dẫn HTTP

Mã trạng thái HTTP

CORS - Chia sẻ tài nguyên nguồn gốc chéo [CORS] là một cơ chế cho phép tài nguyên bị hạn chế [e. g. , phông chữ] trên một trang web được yêu cầu từ một miền khác bên ngoài miền mà tài nguyên bắt nguồn từ đó

-Wikipedia

CORS

WebSockets - WebSocket là một giao thức cung cấp các kênh giao tiếp song công hoàn toàn qua một kết nối TCP. Giao thức WebSocket đã được IETF chuẩn hóa thành RFC 6455 vào năm 2011 và API WebSocket trong Web IDL đang được chuẩn hóa bởi W3C

-Wikipedia

ổ cắm web

3. 5 - Tìm hiểu Web Hosting

Dịch vụ lưu trữ web là một loại dịch vụ lưu trữ Internet cho phép các cá nhân và tổ chức truy cập trang web của họ thông qua World Wide Web. Máy chủ web là các công ty cung cấp không gian trên máy chủ do khách hàng sở hữu hoặc thuê để sử dụng, cũng như cung cấp kết nối Internet, điển hình là trong trung tâm dữ liệu

-Wikipedia

học chung

nguồn hình ảnh. https. // trang web đầu tiên. com/wp-content/uploads/2016/06/what-is-web-hosting-infographic. jpg

3. 6 - Tìm hiểu chung về phát triển Front-End

3. 7 - Tìm hiểu giao diện người dùng/Thiết kế tương tác

Thiết kế giao diện người dùng - Thiết kế giao diện người dùng [UI] hoặc kỹ thuật giao diện người dùng là thiết kế giao diện người dùng cho máy móc và phần mềm, chẳng hạn như máy tính, thiết bị gia dụng, thiết bị di động và các thiết bị điện tử khác, với trọng tâm là tối đa hóa trải nghiệm người dùng. Mục tiêu của thiết kế giao diện người dùng là làm cho tương tác của người dùng trở nên đơn giản và hiệu quả nhất có thể, nhằm đạt được các mục tiêu của người dùng [thiết kế lấy người dùng làm trung tâm]

-Wikipedia

Mẫu thiết kế tương tác - Mẫu thiết kế là một cách chính thức để ghi lại giải pháp cho một vấn đề thiết kế phổ biến. Ý tưởng được giới thiệu bởi kiến ​​trúc sư Christopher Alexander để sử dụng trong quy hoạch đô thị và kiến ​​trúc xây dựng, và đã được điều chỉnh cho nhiều ngành khác, bao gồm giảng dạy và sư phạm, tổ chức và quy trình phát triển, thiết kế và kiến ​​trúc phần mềm.

-Wikipedia

Thiết kế trải nghiệm người dùng - Thiết kế trải nghiệm người dùng [UXD hoặc UED hoặc XD] là quá trình nâng cao sự hài lòng của người dùng bằng cách cải thiện khả năng sử dụng, khả năng truy cập và niềm vui được cung cấp trong tương tác giữa người dùng và sản phẩm. Thiết kế trải nghiệm người dùng bao gồm thiết kế tương tác giữa người và máy tính [HCI] truyền thống và mở rộng nó bằng cách giải quyết tất cả các khía cạnh của sản phẩm hoặc dịch vụ theo cảm nhận của người dùng

-Wikipedia

Tương tác giữa người và máy tính - Tương tác giữa người và máy tính [HCI] nghiên cứu thiết kế và sử dụng công nghệ máy tính, đặc biệt tập trung vào giao diện giữa con người [người dùng] và máy tính. Các nhà nghiên cứu trong lĩnh vực HCI đều quan sát cách con người tương tác với máy tính và thiết kế các công nghệ cho phép con người tương tác với máy tính theo những cách mới lạ

-Wikipedia

Tối thiểu tôi khuyên bạn nên đọc các văn bản kinh điển sau đây về vấn đề này để người ta có thể hỗ trợ và xây dựng tiềm năng giao diện người dùng có thể sử dụng được

3. 8 - Học HTML & CSS

HTML - Ngôn ngữ đánh dấu siêu văn bản, thường được gọi là HTML, là ngôn ngữ đánh dấu tiêu chuẩn được sử dụng để tạo các trang web. Trình duyệt web có thể đọc các tệp HTML và hiển thị chúng thành các trang web có thể nhìn thấy hoặc nghe được. HTML mô tả cấu trúc của một trang web về mặt ngữ nghĩa cùng với các gợi ý để trình bày, làm cho nó trở thành một ngôn ngữ đánh dấu chứ không phải là một ngôn ngữ lập trình

-Wikipedia

CSS - Cascading Style Sheets [CSS] là ngôn ngữ biểu định kiểu được sử dụng để mô tả giao diện và định dạng của tài liệu được viết bằng ngôn ngữ đánh dấu. Mặc dù thường được sử dụng để thay đổi kiểu trang web và giao diện người dùng được viết bằng HTML và XHTML, nhưng ngôn ngữ này có thể được áp dụng cho bất kỳ loại tài liệu XML nào, bao gồm XML thuần túy, SVG và XUL. Cùng với HTML và JavaScript, CSS là công nghệ nền tảng được hầu hết các trang web sử dụng để tạo trang web hấp dẫn trực quan, giao diện người dùng cho ứng dụng web và giao diện người dùng cho nhiều ứng dụng di động

-Wikipedia

Giống như việc xây dựng một ngôi nhà, người ta có thể coi HTML là khung và CSS là bức tranh & trang trí

học chung

Làm chủ CSS

Tài liệu tham khảo/Tài liệu

Thuật ngữ/Từ vựng

Tiêu chuẩn/Thông số kỹ thuật

Kiến trúc CSS

Quy ước về tác giả/kiến trúc

3. 9 - Tìm hiểu Công cụ Tìm kiếm Tối ưu hóa

Tối ưu hóa công cụ tìm kiếm [SEO] là quá trình ảnh hưởng đến khả năng hiển thị của trang web hoặc trang web trong kết quả không phải trả tiền của công cụ tìm kiếm — thường được gọi là kết quả "tự nhiên", "không phải trả tiền" hoặc "kiếm được". Nói chung, một trang web càng sớm [hoặc được xếp hạng cao hơn trên trang kết quả tìm kiếm] và càng thường xuyên xuất hiện trong danh sách kết quả tìm kiếm thì trang web đó sẽ nhận được càng nhiều khách truy cập từ người dùng của công cụ tìm kiếm. SEO có thể nhắm mục tiêu các loại tìm kiếm khác nhau, bao gồm tìm kiếm hình ảnh, tìm kiếm địa phương, tìm kiếm video, tìm kiếm học thuật, tìm kiếm tin tức và các công cụ tìm kiếm dọc theo ngành cụ thể

-Wikipedia

nguồn hình ảnh. https. //trực quan. ly/community/infographic/computers/how-does-seo-work

học chung

3. 10 - Học JavaScript

JavaScript là ngôn ngữ lập trình cấp cao, năng động, không định kiểu và được giải thích. Nó đã được chuẩn hóa trong đặc tả ngôn ngữ ECMAScript. Cùng với HTML và CSS, nó là một trong ba công nghệ thiết yếu của sản xuất nội dung World Wide Web; . JavaScript dựa trên nguyên mẫu với các chức năng hạng nhất, làm cho nó trở thành ngôn ngữ đa mô hình, hỗ trợ các phong cách lập trình hướng đối tượng, mệnh lệnh và chức năng. Nó có một API để làm việc với văn bản, mảng, ngày tháng và biểu thức chính quy, nhưng không bao gồm bất kỳ I/O nào, chẳng hạn như thiết bị kết nối mạng, lưu trữ hoặc đồ họa, dựa vào những điều này tùy thuộc vào môi trường máy chủ mà nó được nhúng vào

-Wikipedia

Bắt đầu

học chung

làm chủ

JavaScript chức năng

Tài liệu tham khảo/Tài liệu

Thuật ngữ/Bách khoa toàn thư/Biệt ngữ

Tiêu chuẩn/Thông số kỹ thuật

Phong cách

Trình khám phá/Trình hiển thị JS

3. 11 - Tìm hiểu DOM, BOM, CSSOM & jQuery

DOM - Mô hình đối tượng tài liệu [DOM] là một quy ước đa nền tảng và ngôn ngữ độc lập để biểu diễn và tương tác với các đối tượng trong tài liệu HTML, XHTML và XML. Các nút của mọi tài liệu được tổ chức theo cấu trúc cây, được gọi là cây DOM. Các đối tượng trong cây DOM có thể được xử lý và thao tác bằng cách sử dụng các phương thức trên các đối tượng. Giao diện chung của DOM được chỉ định trong giao diện lập trình ứng dụng [API] của nó

-Wikipedia

BOM - Mô hình đối tượng trình duyệt [BOM] là một quy ước dành riêng cho trình duyệt đề cập đến tất cả các đối tượng được trình duyệt web hiển thị. Không giống như Mô hình đối tượng tài liệu, không có tiêu chuẩn để triển khai và không có định nghĩa nghiêm ngặt, vì vậy các nhà cung cấp trình duyệt có thể tự do triển khai BOM theo bất kỳ cách nào họ muốn

-Wikipedia

jQuery - jQuery là một thư viện JavaScript đa nền tảng được thiết kế để đơn giản hóa tập lệnh phía máy khách của HTML. jQuery là thư viện JavaScript phổ biến nhất được sử dụng hiện nay, được cài đặt trên 65% trong số 10 triệu trang web có lưu lượng truy cập cao nhất trên Web. jQuery là phần mềm mã nguồn mở, miễn phí được cấp phép theo Giấy phép MIT

-Wikipedia

Con đường lý tưởng, nhưng chắc chắn là khó khăn nhất, trước tiên là học JavaScript, sau đó là DOM, sau đó là jQuery. Tuy nhiên, hãy làm những gì có ý nghĩa với bộ não của bạn. Hầu hết các nhà phát triển front-end tìm hiểu về JavaScript và sau đó là DOM bằng cách học jQuery trước tiên. Dù bạn đi theo con đường nào, chỉ cần đảm bảo rằng JavaScript, DOM và jQuery không trở thành hộp đen

học chung

làm chủ

Tài liệu tham khảo/Tài liệu

Tiêu chuẩn/Thông số kỹ thuật

3. 12 - Tìm hiểu Web Animation

học chung

Tiêu chuẩn/Thông số kỹ thuật

3. 13 - Tìm hiểu Phông chữ, Biểu tượng & Hình ảnh trên Web

Kiểu chữ web đề cập đến việc sử dụng phông chữ trên World Wide Web. Khi HTML được tạo lần đầu tiên, các kiểu và kiểu phông chữ được kiểm soát độc quyền bởi cài đặt của từng trình duyệt Web. Không có cơ chế nào cho các trang Web riêng lẻ kiểm soát việc hiển thị phông chữ cho đến khi Netscape giới thiệu thẻ vào năm 1995, thẻ này sau đó đã được chuẩn hóa trong HTML 3. 2 đặc điểm kỹ thuật. Tuy nhiên, phông chữ được chỉ định bởi thẻ phải được cài đặt trên máy tính của người dùng hoặc phông chữ dự phòng, chẳng hạn như phông chữ sans-serif hoặc phông chữ đơn cách mặc định của trình duyệt, sẽ được sử dụng. Thông số kỹ thuật Cascading Style Sheets đầu tiên được xuất bản vào năm 1996 và cung cấp các khả năng tương tự

Đặc tả CSS2 được phát hành vào năm 1998 và đã cố gắng cải thiện quy trình chọn phông chữ bằng cách thêm tính năng khớp, tổng hợp và tải xuống phông chữ. Những kỹ thuật này không được sử dụng nhiều và đã bị xóa trong CSS2. 1 đặc điểm kỹ thuật. Tuy nhiên, Internet Explorer đã thêm hỗ trợ cho tính năng tải xuống phông chữ trong phiên bản 4. 0, phát hành năm 1997. Tải xuống phông chữ sau đó đã được đưa vào mô-đun phông chữ CSS3 và kể từ đó đã được triển khai trong Safari 3. 1, Opera 10 và Mozilla Firefox 3. 5. Điều này sau đó đã làm tăng sự quan tâm đến kiểu chữ Web, cũng như việc sử dụng tải xuống phông chữ.

-Wikipedia

Phông chữ

Biểu tượng

Hình ảnh

3. 14 - Tìm hiểu khả năng tiếp cận

Khả năng tiếp cận đề cập đến thiết kế sản phẩm, thiết bị, dịch vụ hoặc môi trường dành cho người khuyết tật. Khái niệm về thiết kế có thể truy cập đảm bảo cả “truy cập trực tiếp” [i. e. , không được hỗ trợ] và "truy cập gián tiếp" có nghĩa là khả năng tương thích với công nghệ hỗ trợ của một người [ví dụ: trình đọc màn hình máy tính]

Khả năng truy cập có thể được xem là "khả năng truy cập" và hưởng lợi từ một số hệ thống hoặc thực thể. Khái niệm này tập trung vào việc tạo điều kiện tiếp cận cho người khuyết tật, hoặc những người có nhu cầu đặc biệt, hoặc tạo điều kiện tiếp cận thông qua việc sử dụng công nghệ hỗ trợ;

Không nên nhầm lẫn khả năng truy cập với khả năng sử dụng, đó là mức độ mà một sản phẩm [chẳng hạn như thiết bị, dịch vụ hoặc môi trường] có thể được sử dụng bởi những người dùng được chỉ định để đạt được các mục tiêu cụ thể với hiệu quả, hiệu suất và sự hài lòng trong một bối cảnh sử dụng cụ thể

Khả năng truy cập có liên quan chặt chẽ đến thiết kế phổ quát, đó là quá trình tạo ra các sản phẩm có thể sử dụng được bởi những người có phạm vi khả năng rộng nhất có thể, hoạt động trong phạm vi tình huống rộng nhất có thể. Đây là về việc làm cho mọi người có thể tiếp cận mọi thứ [dù họ có khuyết tật hay không]

-Wikipedia

học chung

Tiêu chuẩn/Thông số kỹ thuật

3. 15 - Tìm hiểu Web/Trình duyệt API

nguồn hình ảnh. http. //www. sự phát triển của web. com/

BOM [Mô hình đối tượng trình duyệt] và DOM [Mô hình đối tượng tài liệu] không phải là API trình duyệt duy nhất được cung cấp trên nền tảng web bên trong trình duyệt. Mọi thứ không phải là DOM hoặc BOM cụ thể, mà là giao diện để lập trình trình duyệt có thể được coi là web hoặc API trình duyệt [đáng tiếc là trong quá khứ, một số API này đã được gọi là API HTML5, điều này gây nhầm lẫn giữa các chi tiết cụ thể/tiêu chuẩn hóa của riêng chúng với HTML5 thực tế . Lưu ý rằng API web hoặc trình duyệt bao gồm API thiết bị [e. g. , Navigator.getBattery[]] có sẵn thông qua trình duyệt trên thiết bị máy tính bảng và điện thoại

Bạn nên biết và tìm hiểu, khi thích hợp, API web/trình duyệt. Một công cụ tốt để sử dụng để làm quen với tất cả các API này là điều tra HTML5test. kết quả com cho 5 trình duyệt mới nhất

MDN có rất nhiều thông tin về API web/trình duyệt

Hãy nhớ rằng không phải mọi API đều được chỉ định bởi W3C hoặc WHATWG

Ngoài MDN, bạn có thể thấy các tài nguyên sau đây hữu ích để tìm hiểu về tất cả API của web/trình duyệt

3. 16 - Tìm hiểu JSON [JavaScript Object Notation]

JSON, [đôi khi được phát âm chuẩn là Ký hiệu đối tượng JavaScript], là một định dạng chuẩn mở sử dụng văn bản mà con người có thể đọc được để truyền các đối tượng dữ liệu bao gồm các cặp thuộc tính-giá trị. Đây là định dạng dữ liệu chính được sử dụng cho giao tiếp trình duyệt/máy chủ không đồng bộ [AJAJ], phần lớn thay thế XML [được sử dụng bởi AJAX]

Mặc dù có nguồn gốc từ ngôn ngữ kịch bản JavaScript, JSON là một định dạng dữ liệu độc lập với ngôn ngữ. Mã để phân tích cú pháp và tạo dữ liệu JSON có sẵn trong nhiều ngôn ngữ lập trình

Định dạng JSON ban đầu được chỉ định bởi Douglas Crockford. Nó hiện được mô tả bởi hai tiêu chuẩn cạnh tranh, RFC 7159 và ECMA-404. Tiêu chuẩn ECMA là tối thiểu, chỉ mô tả cú pháp ngữ pháp được phép, trong khi RFC cũng cung cấp một số cân nhắc về ngữ nghĩa và bảo mật. Loại phương tiện Internet chính thức cho JSON là ứng dụng/json. Phần mở rộng tên tệp JSON là. json

-Wikipedia

học chung

Tài liệu tham khảo/Tài liệu

Tiêu chuẩn/Thông số kỹ thuật

kiến trúc

3. 17 - Tìm hiểu các mẫu JS

Mẫu JavaScript thường được sử dụng, nhưng không phải lúc nào cũng có giải pháp MV* để tách các phần của chế độ xem [i. e. , giao diện người dùng] từ logic và mô hình [i. e. , dữ liệu hoặc JSON]

Lưu ý rằng JavaScript 2015 [còn gọi là ES6] đã thêm một cơ chế tạo khuôn mẫu gốc có tên là "Chuỗi mẫu". Ngoài ra, việc tạo khuôn mẫu gần đây đã được thay thế bằng những thứ như JSX, phần tử mẫu hoặc chuỗi HTML

Nếu tôi không sử dụng React & JSX, trước tiên tôi sẽ tiếp cận với "Chuỗi mẫu" của JavaScript và khi thiếu điều đó, hãy chuyển sang nunjucks

3. 18 - Tìm hiểu Trình tạo trang tĩnh

Trình tạo trang tĩnh, thường được viết bằng mã phía máy chủ [i. e. , ruby, php, python, nodeJS, v.v. ], tạo các tệp HTML tĩnh từ văn bản/dữ liệu tĩnh + mẫu dự định được gửi từ máy chủ đến máy khách một cách tĩnh mà không có tính chất động

học chung

3. 19 - Học Khoa học Máy tính qua JS

3. 20 - Tìm hiểu kiến ​​trúc ứng dụng Front-End

học chung

Gần đây không có nhiều nội dung chung được tạo về chủ đề này. Hầu hết nội dung được cung cấp để tìm hiểu cách xây dựng các ứng dụng giao diện người dùng/SPA/JavaScript giả định trước rằng bạn đã chọn một công cụ như Angular, Ember, React hoặc Aurelia

Lời khuyên của tôi, năm 2019 hãy học React và Mobx và Apollo/graphql

3. 21 - Tìm hiểu dữ liệu [i. e. JSON] Thiết kế API

3. 22 - Học phản ứng

học phản ứng

Làm chủ phản ứng

Khi bạn đã xử lý tốt React, hãy chuyển sang tìm hiểu một giải pháp quản lý trạng thái mạnh mẽ hơn như MobX. Nếu bạn là một nhà phát triển có kinh nghiệm với kiến ​​thức Lập trình chức năng, hãy xem Redux. Nếu bạn cần trợ giúp để hiểu vai trò của quản lý trạng thái ngoài việc xem setState của React, "Advanced State Management in React [feat. Redux và MobX]"

3. 23 - Tìm hiểu Quản lý trạng thái ứng dụng

3. 24 - Tìm hiểu ứng dụng web lũy tiến

Không giống như các ứng dụng truyền thống, các ứng dụng web lũy tiến là sự kết hợp giữa các trang web [hoặc trang web] thông thường và ứng dụng dành cho thiết bị di động. Mô hình ứng dụng mới này cố gắng kết hợp các tính năng được cung cấp bởi hầu hết các trình duyệt hiện đại với những lợi ích của trải nghiệm di động

Vào năm 2015, nhà thiết kế Frances Berriman và kỹ sư Alex Russell của Google Chrome đã đặt ra thuật ngữ "Ứng dụng web lũy tiến" để mô tả các ứng dụng tận dụng các tính năng mới được hỗ trợ bởi trình duyệt hiện đại, bao gồm Công nhân dịch vụ và Tệp kê khai ứng dụng web, cho phép người dùng nâng cấp ứng dụng web lên vị trí đầu tiên.

Theo Google Developers, những đặc điểm này là

• Tiến bộ - Hoạt động cho mọi người dùng, bất kể lựa chọn trình duyệt nào vì chúng được xây dựng với tính năng nâng cao tiến bộ như một nguyên lý cốt lõi
• Responsive - Phù hợp với mọi yếu tố hình thức. máy tính để bàn, thiết bị di động, máy tính bảng hoặc các biểu mẫu chưa xuất hiện
• Kết nối độc lập - Nhân viên dịch vụ cho phép làm việc ngoại tuyến hoặc trên các mạng chất lượng thấp
• Giống như ứng dụng - Cảm thấy giống như một ứng dụng đối với người dùng với các tương tác và điều hướng kiểu ứng dụng
• Mới - Luôn cập nhật nhờ quy trình cập nhật nhân viên dịch vụ
• An toàn - Được cung cấp qua HTTPS để ngăn chặn việc rình mò và đảm bảo nội dung không bị giả mạo
• Có thể khám phá - Có thể được xác định là “ứng dụng” nhờ vào bảng kê khai W3C[6] và phạm vi đăng ký nhân viên dịch vụ cho phép các công cụ tìm kiếm tìm thấy chúng
• Có thể tương tác lại - Giúp dễ dàng tương tác lại thông qua các tính năng như thông báo đẩy
• Có thể cài đặt - Cho phép người dùng “giữ” các ứng dụng mà họ thấy hữu ích nhất trên màn hình chính mà không gặp rắc rối với cửa hàng ứng dụng
• Có thể liên kết - Dễ dàng chia sẻ qua URL và không yêu cầu cài đặt phức tạp

-Wikipedia

3. 25 - Tìm hiểu thiết kế API JS

3. 26 - Tìm hiểu Công cụ dành cho nhà phát triển web trên trình duyệt

Các công cụ phát triển web cho phép các nhà phát triển web kiểm tra và gỡ lỗi mã của họ. Chúng khác với các trình tạo trang web và IDE ở chỗ chúng không hỗ trợ trực tiếp tạo trang web, thay vào đó chúng là các công cụ được sử dụng để kiểm tra giao diện người dùng của trang web hoặc ứng dụng web

Các công cụ phát triển web xuất hiện dưới dạng tiện ích bổ sung của trình duyệt hoặc các tính năng tích hợp trong trình duyệt web. Các trình duyệt web phổ biến nhất hiện nay như Google Chrome, Firefox, Opera, Internet Explorer và Safari đã tích hợp sẵn các công cụ để trợ giúp các nhà phát triển web và có thể tìm thấy nhiều tiện ích bổ sung trong các trung tâm tải xuống plugin tương ứng của chúng

Các công cụ phát triển web cho phép các nhà phát triển làm việc với nhiều công nghệ web, bao gồm HTML, CSS, DOM, JavaScript và các thành phần khác do trình duyệt web xử lý. Do nhu cầu ngày càng tăng từ các trình duyệt web để làm cho các trình duyệt web phổ biến hơn đã bao gồm nhiều tính năng hơn dành cho nhà phát triển

-Wikipedia

Mặc dù hầu hết các trình duyệt đều được trang bị các công cụ dành cho nhà phát triển web, nhưng các công cụ dành cho nhà phát triển Chrome hiện được nhắc đến nhiều nhất và được sử dụng rộng rãi

Tôi khuyên bạn nên tìm hiểu và sử dụng các công cụ dành cho nhà phát triển web Chrome, đơn giản vì các tài nguyên tốt nhất để tìm hiểu các công cụ dành cho nhà phát triển web xoay quanh Chrome DevTools

Tìm hiểu Công cụ dành cho nhà phát triển web Chrome

Tài liệu công cụ dành cho nhà phát triển web Chrome

3. 27 - Tìm hiểu dòng lệnh [còn gọi là CLI]

Giao diện dòng lệnh hoặc trình thông dịch ngôn ngữ lệnh [CLI], còn được gọi là giao diện người dùng dòng lệnh, giao diện người dùng bảng điều khiển và giao diện người dùng ký tự [CUI], là phương tiện tương tác với chương trình máy tính nơi người dùng [hoặc khách hàng]

-Wikipedia

học chung

làm chủ

3. 28 - Tìm hiểu nút. js

Nút. js là một môi trường thời gian chạy đa nền tảng, mã nguồn mở để phát triển các ứng dụng web phía máy chủ. Nút. js được viết bằng JavaScript và có thể chạy trong Node. js trên OS X, Microsoft Windows, Linux, FreeBSD, NonStop, IBM AIX, IBM System z và IBM i. Công việc của nó được lưu trữ và hỗ trợ bởi Node. js Foundation, một dự án hợp tác tại Linux Foundation

Nút. js cung cấp kiến ​​trúc hướng sự kiện và API I/O không chặn được thiết kế để tối ưu hóa thông lượng và khả năng mở rộng của ứng dụng cho các ứng dụng web thời gian thực. Nó sử dụng công cụ JavaScript V8 của Google để thực thi mã và một tỷ lệ lớn các mô-đun cơ bản được viết bằng JavaScript. Nút. js chứa một thư viện tích hợp để cho phép các ứng dụng hoạt động như một máy chủ web mà không cần phần mềm như Máy chủ HTTP Apache, Nginx hoặc IIS

-Wikipedia

học chung

3. 29 - Tìm hiểu các mô-đun

học chung

Tài liệu tham khảo/Tài liệu

3. 30 - Tìm hiểu bộ tải/bộ đóng gói mô-đun

gói web

Tổng số

Bưu kiện

3. 31 - Tìm hiểu Trình quản lý gói

Trình quản lý gói hoặc hệ thống quản lý gói là tập hợp các công cụ phần mềm tự động hóa quy trình cài đặt, nâng cấp, định cấu hình và xóa các gói phần mềm cho hệ điều hành của máy tính một cách nhất quán. Nó thường duy trì một cơ sở dữ liệu về các phụ thuộc phần mềm và thông tin phiên bản để ngăn phần mềm không khớp và thiếu các điều kiện tiên quyết

-Wikipedia

học chung

3. 32 - Tìm hiểu kiểm soát phiên bản

Một thành phần của quản lý cấu hình phần mềm, kiểm soát phiên bản, còn được gọi là kiểm soát sửa đổi hoặc kiểm soát nguồn, là quản lý các thay đổi đối với tài liệu, chương trình máy tính, trang web lớn và các bộ sưu tập thông tin khác. Các thay đổi thường được xác định bằng một số hoặc mã chữ cái, được gọi là "số sửa đổi", "mức sửa đổi" hoặc đơn giản là "sửa đổi. " Ví dụ: tập hợp tệp ban đầu là "bản sửa đổi 1. " Khi thay đổi đầu tiên được thực hiện, tập hợp kết quả là "bản sửa đổi 2", v.v. Mỗi bản sửa đổi được liên kết với dấu thời gian và người thực hiện thay đổi. Các bản sửa đổi có thể được so sánh, khôi phục và với một số loại tệp, được hợp nhất

-Wikipedia

Giải pháp phổ biến nhất được sử dụng để kiểm soát phiên bản ngày nay là Git. Học nó

học chung

làm chủ

Tài liệu tham khảo/Tài liệu

3. 33 - Tìm hiểu Build và Task Automation

Tự động hóa bản dựng là quá trình tự động hóa việc tạo bản dựng phần mềm và các quy trình liên quan bao gồm. biên dịch mã nguồn máy tính thành mã nhị phân, đóng gói mã nhị phân và chạy thử nghiệm tự động

-Wikipedia

học chung

Tài liệu tham khảo/Tài liệu

Gulp thật tuyệt. Tuy nhiên, bạn có thể chỉ cần npm run. Trước khi chuyển sang độ phức tạp bổ sung trong ngăn xếp ứng dụng của bạn, hãy tự hỏi liệu npm run có thể thực hiện công việc không. Nếu bạn cần nhiều hơn, hãy sử dụng Gulp

Đọc

3. 34 - Tìm hiểu Tối ưu hóa Hiệu suất Trang web

Tối ưu hóa hiệu suất web, WPO hay tối ưu hóa trang web là lĩnh vực kiến ​​thức về việc tăng tốc độ tải trang web và hiển thị trên trình duyệt web của người dùng. Với tốc độ internet trung bình ngày càng tăng trên toàn cầu, việc cân nhắc thời gian cần thiết để các trang web hiển thị cho khách truy cập là điều phù hợp cho các quản trị viên trang web và quản trị trang web.

-Wikipedia

học chung

3. 35 - Tìm hiểu kiểm tra

Kiểm tra đơn vị - Trong lập trình máy tính, kiểm tra đơn vị là một phương pháp kiểm tra phần mềm theo đó các đơn vị mã nguồn riêng lẻ, bộ một hoặc nhiều mô-đun chương trình máy tính cùng với dữ liệu điều khiển liên quan, quy trình sử dụng và quy trình vận hành, được kiểm tra để xác định xem chúng có đúng hay không. . Theo trực giác, người ta có thể xem một đơn vị là phần nhỏ nhất có thể kiểm tra được của ứng dụng

-Wikipedia

Kiểm thử chức năng - Kiểm thử chức năng là một quy trình đảm bảo chất lượng [QA] và một loại kiểm thử hộp đen dựa trên các trường hợp kiểm thử của nó dựa trên các thông số kỹ thuật của thành phần phần mềm được kiểm thử. Các chức năng được kiểm tra bằng cách cung cấp đầu vào cho chúng và kiểm tra đầu ra, và cấu trúc chương trình bên trong hiếm khi được xem xét [không giống như trong kiểm thử hộp trắng]. Kiểm tra chức năng thường mô tả những gì hệ thống làm

-Wikipedia

Kiểm thử tích hợp - Kiểm thử tích hợp [đôi khi được gọi là tích hợp và kiểm thử, viết tắt là I&T] là giai đoạn kiểm thử phần mềm trong đó các mô-đun phần mềm riêng lẻ được kết hợp và kiểm thử theo nhóm. Nó xảy ra sau khi kiểm tra đơn vị và trước khi kiểm tra xác nhận. Kiểm thử tích hợp lấy các mô-đun đầu vào đã được kiểm thử đơn vị, nhóm chúng thành các tập hợp lớn hơn, áp dụng các kiểm thử được xác định trong kế hoạch kiểm thử tích hợp cho các tập hợp đó và cung cấp đầu ra là hệ thống tích hợp sẵn sàng cho kiểm thử hệ thống

-Wikipedia

học chung

3. 36 - Tìm hiểu Headless Browsers

Trình duyệt không đầu là trình duyệt web không có giao diện người dùng đồ họa

Trình duyệt không đầu cung cấp khả năng kiểm soát tự động trang web trong môi trường tương tự như các trình duyệt web phổ biến, nhưng được thực thi thông qua giao diện dòng lệnh hoặc sử dụng giao tiếp mạng. Chúng đặc biệt hữu ích để kiểm tra các trang web vì chúng có thể hiển thị và hiểu HTML giống như cách trình duyệt sẽ làm, bao gồm các yếu tố kiểu dáng như bố cục trang, màu sắc, lựa chọn phông chữ và thực thi JavaScript và AJAX thường không khả dụng khi sử dụng các trình duyệt khác. . Google đã tuyên bố vào năm 2009 rằng việc sử dụng trình duyệt không đầu có thể giúp công cụ tìm kiếm của họ lập chỉ mục nội dung từ các trang web sử dụng AJAX

-Wikipedia

PhantomJS không còn được duy trì, Headless Chrome bước vào

3. 37 - Tìm hiểu phát triển ngoại tuyến

Phát triển ngoại tuyến [còn gọi là ngoại tuyến trước] là một lĩnh vực kiến ​​thức và thảo luận xung quanh các phương pháp phát triển cho các thiết bị không phải lúc nào cũng được kết nối với Internet hoặc nguồn điện

học chung

3. 38 - Tìm hiểu Bảo mật Web/Trình duyệt/Ứng dụng

3. 39 - Tìm hiểu phát triển đa thiết bị

nguồn hình ảnh. http. // băng giá. com/blog/post/đây-là-web/

Một trang web hoặc ứng dụng web có thể chạy trên nhiều loại máy tính, máy tính xách tay, máy tính bảng và điện thoại, cũng như một số thiết bị mới [đồng hồ, máy điều nhiệt, tủ lạnh, v.v.]. ]. Cách bạn xác định thiết bị nào bạn sẽ hỗ trợ và cách bạn sẽ phát triển để hỗ trợ các thiết bị đó được gọi là "chiến lược phát triển đa thiết bị". Dưới đây, tôi liệt kê các chiến lược phát triển đa thiết bị phổ biến nhất