Front-end Developer: Từ "Zero" Đến "Hero" (Phần 2)

tháng 5 01, 2018 0 nhận xét
Share:
Bài viết này là phần hai của loạt bài "Từ Zero đến Front-end Hero". Trong phần một, bạn đã học cách tạo bố cục với HTML và CSS cũng như một số phương pháp hay nhất. Trong phần hai, chúng tôi sẽ tập trung vào việc học JavaScript như một ngôn ngữ độc lập, cách thêm tương tác vào giao diện, thiết kế JavaScript và các mẫu kiến trúc cũng như cách xây dựng các ứng dụng web.


Cũng giống như với HTML và CSS, có rất nhiều hướng dẫn JavaScript. Tuy nhiên, đặc biệt là đối với người mới đến front-end, thật khó để tìm ra hướng dẫn sử dụng và thứ tự làm gì. Mục tiêu chính của loạt bài này là cung cấp cho bạn bản đồ đường để giúp bạn điều hướng việc học trở thành một lập trình front-end. Nếu bạn chưa đọc phần một, hãy tiếp tục và làm điều đó trước khi đọc.

Khái niệm cơ bản về JavaScript
JavaScript là một ngôn ngữ lập trình đa nền tảng có thể được sử dụng cho thực tế bất cứ điều gì trong những ngày này, nhưng chúng ta sẽ đi vào điều đó sau khi bạn hiểu những điều cơ bản về cách các nhà phát triển sử dụng JavaScript cho web.


Ngôn ngữ
Trước khi tìm hiểu cách áp dụng JavaScript cho web, trước tiên hãy tìm hiểu về chính ngôn ngữ đó. Để bắt đầu, hãy đọc khóa học Javascript cơ bản của MDN. Hướng dẫn này sẽ dạy cho bạn các cấu trúc ngôn ngữ cơ bản như biến, điều kiện và hàm.

Sau đó, đọc qua các phần sau trong hướng dẫn JavaScript của MDN:
Đừng lo lắng quá nhiều về việc ghi nhớ cú pháp cụ thể. Bạn luôn có thể nhìn lên. Thay vào đó, hãy tập trung vào việc tìm hiểu các khái niệm quan trọng như biến đổi, vòng lặp và chức năng biến đổi. Nếu vật liệu quá dày đặc, thì được rồi. Đọc lướt qua việc đọc; bạn luôn có thể quay lại sau. Và khi bạn đặt những khái niệm này vào thực tế, chúng sẽ trở nên rõ ràng hơn nhiều.

Để phá vỡ sự đơn điệu của việc học dựa trên văn bản, hãy kiểm tra khóa học JavaScript của Codecademy. Đó là thực hành và thú vị. Ngoài ra, nếu bạn có thời gian, cho mỗi khái niệm tôi liệt kê ở trên, hãy đọc chương tương ứng trong Eloquent JavaScript để củng cố việc học của bạn. Eloquent JavaScript là một cuốn sách trực tuyến miễn phí tuyệt vời mà mọi nhà phát triển đầu cuối tham vọng nên đọc.
Interactivity (Sự tương tác)


Một cách sử dụng cho JavaScript là tạo hoạt ảnh cho bố cục của bạn
Bây giờ bạn đã có hiểu biết cơ bản về JavaScript như một ngôn ngữ, bước tiếp theo là áp dụng nó cho web. Để hiểu cách JavaScript tương tác với các trang web, trước tiên bạn phải biết về Mô hình đối tượng tài liệu (DOM).

DOM là một cấu trúc biểu diễn các tài liệu HTML. Đó là cấu trúc giống cây tạo thành từ các đối tượng JavaScript tương ứng với các nút HTML. Để đọc thêm về DOM, hãy đọc DOM là gì bởi CSSTricks. Nó cung cấp một giải thích đơn giản và dễ hiểu về DOM.


JavaScript tương tác với DOM để thay đổi và cập nhật nó. Đây là một ví dụ mà chúng tôi chọn một phần tử HTML và thay đổi nội dung của nó:

Đừng lo, đó chỉ là một ví dụ đơn giản. Bạn có thể làm nhiều hơn thế với thao tác JavaScript DOM. Để tìm hiểu thêm về cách sử dụng JavaScript để tương tác với DOM, hãy xem các hướng dẫn sau trong phần MDN, Mô hình đối tượng tài liệu.
Một lần nữa, tập trung vào các khái niệm trên cú pháp. Có thể trả lời các câu hỏi sau:
  • DOM là gì?
  • Làm thế nào để bạn truy vấn các yếu tố?
  • Làm thế nào để bạn thêm người nghe sự kiện?
  • Làm thế nào để bạn thay đổi các thuộc tính nút DOM?
Để biết danh sách các tương tác JavaScript JavaScript phổ biến, hãy xem các hàm và trợ giúp JavaScript của PlainJS. Trang web này cung cấp các ví dụ về cách thực hiện những việc như style của các phần tử HTML và đính kèm trình nghe sự kiện bàn phím. Và nếu bạn muốn đào sâu hơn, bạn luôn có thể đọc phần DOM trong Eloquent JavaScript

Inspector - Kiểm tra
Để gỡ lỗi JavaScript phía máy khách, chúng tôi sử dụng các công cụ dành cho nhà phát triển được tích hợp vào trình duyệt. Bảng kiểm tra có sẵn trong hầu hết các trình duyệt và cho phép bạn xem nguồn của các trang web. Bạn có thể theo dõi JavaScript khi nó thực thi, in các câu lệnh gỡ rối tới bàn điều khiển và xem những thứ như yêu cầu mạng và tài nguyên.

Dưới đây là hướng dẫn về cách sử dụng công cụ nhà phát triển Chrome. Nếu bạn đang sử dụng Firefox, bạn có thể xem hướng dẫn này.


Thực hành các khái niệm cơ bản
Tại thời điểm này, vẫn còn nhiều thứ để tìm hiểu về JavaScript. Tuy nhiên, phần cuối cùng chứa rất nhiều thông tin mới. Tôi nghĩ đã đến lúc chúng tôi nghỉ ngơi và giải quyết một vài thí nghiệm nhỏ. Họ sẽ giúp củng cố một số khái niệm bạn vừa học được.

Thí nghiệm 1
Đối với thử nghiệm 1, hãy truy cập AirBnB, mở trình kiểm tra trang của trình duyệt và nhấp vào tab bảng điều khiển. Ở đây bạn có thể thực thi JavaScript trên trang. Những gì chúng tôi sẽ làm là có một số thú vị với thao tác một số yếu tố trên trang. Xem bạn có thể thực hiện tất cả các thao tác DOM sau đây không.


Tôi đã chọn trang web của AirBnB vì tên lớp CSS của chúng tương đối đơn giản và không bị biên dịch bởi một số trình biên dịch. Tuy nhiên, bạn có thể chọn làm điều này trên bất kỳ trang nào bạn muốn.Chọn thẻ tiêu đề có tên lớp duy nhất và thay đổi văn bản
  • Chọn bất kỳ yếu tố nào trên trang và xóa nó
  • Chọn bất kỳ element nào và thay đổi một trong các thuộc tính CSS của nó
  • Chọn một thẻ section và giảm nó xuống 250 pixel
  • Chọn bất kỳ thành phần nào, như panel và chỉnh sửa sự hiển thị của nó
  • Xác định một hàm có tên "doSomething" cảnh báo “Hello world” và sau đó thực hiện nó
  • Chọn một thẻ đoạn cụ thể, thêm trình xử lý sự kiện nhấp vào nó và chạy "doSomething" mỗi khi sự kiện được kích hoạt
Nếu bạn gặp khó khăn, hãy tham khảo hướng dẫn về hàm và hàm JavaScript. Tôi dựa trên hầu hết các nhiệm vụ này. Dưới đây là ví dụ về cách hoàn thành điểm bullet đầu tiên:

Mục đích chính của thử nghiệm này là thực hiện một số điều bạn đã học về JavaScript và thao tác DOM và xem nó hoạt động.

Thí nghiệm 2



 JavaScript cho phép các nhà phát triển tạo ra các giao diện tương tác
Sử dụng CodePen, viết một thử nghiệm JavaScript cơ bản có sử dụng thao tác DOM và yêu cầu một số logic lập trình để hoạt động. Trọng tâm của thí nghiệm này là lấy một số điều bạn đã học được trong Từ "Zero" Đến "Hero" (Phần 1) và kết hợp nó với JavaScript. Dưới đây là một vài ví dụ tham khảo có thể là nguồn cảm hứng.
  • Bảng tuần hoàn
  • Mood Color Generator
  • Máy tính 
  • JavaScript Quiz
  • Tiểu hành tinh Canvas có thể chơi
More JavaScript
Bây giờ bạn đã biết một số JavaScript và đã có một số thực hành với nó, chúng tôi sẽ chuyển sang một số khái niệm nâng cao hơn. Các khái niệm bên dưới không liên quan trực tiếp với nhau. Tôi đã nhóm chúng lại trong phần này bởi vì chúng cần thiết để hiểu cách xây dựng các hệ thống front-end phức tạp hơn. Bạn sẽ hiểu rõ hơn cách đặt chúng để sử dụng khi bạn đạt đến phần thử nghiệm và khung công tác.

Language
Khi bạn làm việc nhiều hơn với JavaScript, bạn sẽ gặp phải một số khái niệm cấp cao hơn. Đây là danh sách một số khái niệm đó. Khi bạn có thời gian, đi qua từng điểm đạn. Ngoài ra, Eloquent JavaScript bao gồm nhiều tài liệu này, nếu bạn muốn bổ sung cho việc học của mình.
Imperative vs. Declarative
Có hai loại phương pháp tiếp cận cách JavaScript tương tác với DOM: bắt buộc và khai báo. Một mặt, lập trình khai báo tập trung vào những gì xảy ra. Mặt khác, lập trình bắt buộc tập trung vào những gì cũng như như thế nào.

Đây là một ví dụ về lập trình bắt buộc, nơi chúng ta truy vấn một phần tử và lưu trữ trạng thái UI trong DOM một cách thủ công. Nói cách khác, tập trung vào cách để đạt được điều gì đó. Vấn đề lớn nhất với mã này là nó rất mong manh. Nếu ai đó làm việc trên mã thay đổi tên lớp trong HTML từ anh hùng thành nhân vật phản diện, trình xử lý sự kiện sẽ không còn kích hoạt vì không có lớp anh hùng nào trong DOM.

Lập trình khai báo giải quyết vấn đề này. Thay vì phải chọn các phần tử, bạn hãy để nó vào khung hoặc thư viện bạn đang sử dụng. Điều này cho phép bạn tập trung vào những gì thay vì như thế nào. Để đọc thêm, hãy kiểm tra Trạng thái của JavaScript - Một sự thay đổi từ bắt buộc đối với Tuyên bố và Ba D về phát triển web # 1: Tuyên bố so với mệnh lệnh.

Hướng dẫn này trước tiên dạy bạn cách tiếp cận bắt buộc trước khi giới thiệu cách tiếp cận khai báo với các khung như Angular và các thư viện như React. Tôi khuyên bạn nên học theo thứ tự này vì nó cho phép bạn xem vấn đề mà JavaScript khai báo giải quyết.

Ajax
Trong suốt một số bài viết và hướng dẫn này, bạn có thể thấy thuật ngữ Ajax được đề cập một vài lần. Ajax là một kỹ thuật cho phép các trang web giao tiếp với máy chủ bằng JavaScript.



 Ajax làm cho nội dung động
Ví dụ: khi bạn gửi biểu mẫu trên trang web, nó sẽ thu thập dữ liệu nhập của bạn và thực hiện yêu cầu HTTP gửi dữ liệu đó đến máy chủ. Khi bạn đăng một tweet trên Twitter, ứng dụng khách Twitter của bạn sẽ gửi yêu cầu HTTP tới API máy chủ của Twitter và cập nhật trang bằng phản hồi của máy chủ.

Để đọc trên Ajax, hãy xem Ajax là gì. Nếu bạn vẫn không hoàn toàn có được khái niệm về AJAX, hãy xem Explain it like i’m 5, what is Ajax. Và nếu tất cả những điều đó không đủ, bạn có thể đọc chương Eloquent JavaScript trên HTTP.

Ngày nay, tiêu chuẩn trình duyệt sắp tới để thực hiện yêu cầu HTTP là Fetch. Bạn có thể đọc thêm về Fretch trong bài viết này của Dan Walsh. Nó bao gồm cách Fetch hoạt động và cách sử dụng nó. Bạn cũng có thể tìm thấy tệp Fretch mẫu tại đây.

jQuery
Cho đến bây giờ, bạn đã thực hiện các thao tác DOM chỉ với JavaScript. Sự thật là, có rất nhiều thư viện thao tác DOM cung cấp các API để đơn giản hóa mã bạn viết.

Một trong những thư viện thao tác DOM phổ biến nhất là jQuery. Hãy ghi nhớ, jQuery là một thư viện bắt buộc. Nó được viết trước khi hệ thống front-end phức tạp như ngày nay. Ngày nay, câu trả lời để quản lý các UI phức tạp là các khung khai báo và các thư viện như Angular và React. Tuy nhiên, tôi vẫn khuyên bạn nên học jQuery vì bạn sẽ có nhiều khả năng gặp phải nó trong suốt sự nghiệp của bạn như một front-end.



Để tìm hiểu kiến ​​thức cơ bản về jQuery, hãy xem jQuery’s Learning Center. Nó đi từng bước thông qua các khái niệm quan trọng như hoạt hình và xử lý sự kiện. Nếu bạn muốn có nhiều hướng dẫn hơn, bạn có thể cung cấp cho khóa học jQuery của Codecademy’s jQuery.

Hãy nhớ rằng jQuery không phải lúc nào cũng là giải pháp cho thao tác DOM bắt buộc. PlainJS và You Might Not Need jQuery là hai tài nguyên tốt cho bạn thấy các hàm JavaScript tương đương với các hàm jQuery thường được sử dụng.

ES5 với ES6
Một khái niệm quan trọng khác cần hiểu về JavaScript là ECMAScript và cách nó liên quan đến Javascript. Có hai phiên bản chính của JavaScript mà bạn sẽ gặp phải hôm nay: ES5 và ES6. ES5 và ES6 là các tiêu chuẩn ECMAScript mà JavaScript sử dụng. Bạn có thể coi chúng như là các phiên bản của JavaScript. Dự thảo cuối cùng của ES5 đã được hoàn thành vào năm 2009 và đó là những gì bạn đã sử dụng cho đến nay.

ES6, còn được gọi là ES2015, là tiêu chuẩn mới mang lại các cấu trúc ngôn ngữ mới như hằng số, các lớp và các mẫu văn bản cho JavaScript. Điều quan trọng cần lưu ý là ES6 mang đến các tính năng ngôn ngữ mới nhưng vẫn xác định chúng một cách ngữ nghĩa về ES5. Ví dụ, các lớp trong ES6 chỉ đơn thuần là cú pháp trên đường thừa kế nguyên mẫu JavaScript.

Bạn cần phải biết cả ES5 và ES6 vì bạn sẽ thấy các ứng dụng ngày nay sử dụng một ứng dụng này hoặc ứng dụng khác. Giới thiệu tốt về ES6 là ES5, ES6, ES2016, ES.Next: Điều gì đang xảy ra với phiên bản JavaScript và Bắt đầu với Wiki của Dan Wahlin - Phiên bản tiếp theo của JavaScript. Sau đó, bạn có thể xem danh sách đầy đủ các thay đổi từ ES5 đến ES6 tại các tính năng ES6. Nếu bạn muốn nhiều hơn, hãy kiểm tra kho lưu trữ G6 của các tính năng ES6.

Thực hành thêm
Nếu bạn đã đạt đến điểm này, xin chúc mừng bản thân. Bạn đã học được rất nhiều về JavaScript. Hãy đặt một số điều bạn đã học vào thực tế.

Thử nghiệm 3


Flipboard.com
Thử nghiệm 3 sẽ tập trung vào việc dạy bạn cách áp dụng các kỹ năng như thao tác DOM và jQuery. Đối với thử nghiệm này, chúng tôi sẽ thực hiện một cách tiếp cận có cấu trúc hơn. Thử nghiệm 3 sẽ sao chép trang chủ của Flipboard bằng cách làm theo cùng với Codecademy’s Flipboard’s home page and add interactivity with JavaScript.
Trong hướng dẫn, hãy tập trung vào việc hiểu cách làm cho một trang web tương tác, khi nào làm cho nó tương tác và cách áp dụng jQuery.

Thí nghiệm 4

Đồng hồ Dieter Rams
Thử nghiệm 4 kết hợp những gì bạn đã học về HTML và CSS với khóa học giới thiệu của bạn trong JavaScript. Đối với thử nghiệm này, bạn sẽ tạo ra một chiếc đồng hồ của thiết kế của riêng bạn và làm cho nó tương tác với JavaScript. Trước khi bắt đầu, tôi khuyên bạn nên đọc tách HTML, CSS và JavaScript của bạn để tìm hiểu các quy ước đặt tên lớp CSS cơ bản khi JavaScript được đưa vào danh sách kết hợp. Tôi cũng đã chuẩn bị một danh sách các cây bút trên CodePen mà bạn có thể sử dụng làm tài liệu tham khảo cho thí nghiệm này. Để biết thêm ví dụ, tìm kiếm đồng hồ trên CodePen.
Bạn có thể thực hiện thử nghiệm này theo một trong hai cách. Bạn có thể bắt đầu bằng cách thiết kế và tạo bố cục trong HTML và CSS và sau đó thêm tương tác với JavaScript. Hoặc bạn có thể viết logic JavaScript trước và sau đó chuyển sang layout. Ngoài ra, bạn có thể sử dụng jQuery, nhưng cũng cảm thấy tự do để sử dụng JavaScript đơn giản.

JavaScript Framework 
Với các khái niệm cơ bản về JavaScript trong vành đai của bạn, đã đến lúc tìm hiểu về các khung JavaScript. Khung là các thư viện JavaScript giúp bạn cấu trúc và tổ chức mã của mình. Các khung công tác JavaScript cung cấp cho nhà phát triển các giải pháp có thể lặp lại cho các vấn đề phức tạp, như quản lý nhà nước, định tuyến và tối ưu hóa hiệu suất. Chúng thường được sử dụng để xây dựng các ứng dụng web.

Tôi sẽ không mô tả mỗi JavaScript frameworks. Tuy nhiên, đây là danh sách về một vài frameworks cơ bản: Angular, React + Flux, Ember, Aurelia, Vue và Meteor. Bạn không phải học mọi khung công tác. Chọn một và tìm hiểu nó tốt. Đừng đuổi theo các frameworks. Thay vào đó, hãy hiểu các triết lý và nguyên tắc lập trình cơ bản mà các frameworks được xây dựng trên đó.

Mẫu kiến ​​trúc
Trước khi xem xét các framework, điều quan trọng là phải hiểu một vài mẫu kiến ​​trúc mà các framework có xu hướng sử dụng: mô hình-view-controller, mô hình-view-viewmodel, và model-view -presenter. Các model này được thiết kế để tạo ra sự phân tách rõ ràng mối quan hệ giữa các lớp ứng dụng.

Tách mối quan tâm là một nguyên tắc thiết kế cho thấy chia tách các ứng dụng thành các lớp cụ thể của miền khác nhau. Ví dụ, thay vì có trạng thái ứng dụng giữ HTML, bạn có thể sử dụng một đối tượng JavaScript - thường được gọi là một mô hình - để lưu trữ trạng thái.

Để tìm hiểu thêm về các mẫu này, trước tiên hãy đọc về MVC tại nhà phát triển Chrome. Sau đó, đọc Understanding MVC And MVP (For JavaScript And Backbone Developers). Trong bài viết đó, đừng lo lắng về việc học Backbone, chỉ cần đi qua các phần với lời giải thích của MVC và MVP.

Mẫu thiết kế
Các JavaScript framework không phát minh lại bánh xe. Hầu hết trong số họ dựa vào các mẫu thiết kế. Bạn có thể nghĩ về các mẫu thiết kế làm mẫu chung để giải quyết các vấn đề chung trong phát triển phần mềm.

Mặc dù hiểu các mẫu thiết kế JavaScript không phải là điều kiện tiên quyết để học một khuôn khổ, tôi khuyên bạn nên xem qua danh sách sau tại một thời điểm nào đó.
Việc hiểu và có thể thực hiện một số các mẫu thiết kế này sẽ không chỉ làm cho bạn một kỹ sư tốt hơn mà còn giúp bạn hiểu một số framework đang làm gì.

AngularJS
AngularJS là một web framework JavaScript được phát triển và tài trợ bởi Google và cộng đồng để giải quyết các vấn đề gặp phải trong việc phát triển ứng dụng đơn trang.


Angular là một framework khai báo. Một trong những bài đọc hữu ích nhất đã giúp tôi hiểu cách chuyển từ bắt buộc sang lập trình JavaScript khai báo là AngularJS khác với jQuery trên StackOverflow như thế nào.

Nếu bạn muốn tìm hiểu thêm về Angular, hãy xem tài liệu về Angular. Họ cũng có một hướng dẫn được gọi là Angular Cat cho phép bạn nhảy vào code ngay lập tức. Một hướng dẫn đầy đủ hơn để học Angular có thể được tìm thấy trong kho lưu trữ Github này bởi Tim Jacobi. Ngoài ra, hãy xem hướng dẫn phong cách thực hành tốt nhất được viết bởi John Papa.

React + Flux
Angular giải quyết rất nhiều vấn đề mà các nhà phát triển phải đối mặt khi xây dựng các hệ thống front-end phức tạp. Một công cụ phổ biến khác là React, một thư viện để xây dựng giao diện người dùng. Bạn có thể nghĩ về nó như là V trong MVC. Vì React chỉ là một thư viện, nó thường được thấy với một kiến ​​trúc được gọi là Flux.


Thư viện JavaScript để xây dựng giao diện
Facebook đã thiết kế React và Flux để giải quyết một số thiếu sót của MVC và các vấn đề của nó ở quy mô lớn. Hãy xem bản trình bày nổi tiếng của họ Hacker Way: Xem xét lại phát triển ứng dụng web tại Facebook. Nó đi qua Flux và nguồn gốc của nó.

Để bắt đầu với React và Flux, đầu tiên hãy học React. Đầu tiên là tài liệu React. Sau đó, hãy xem phần Giới thiệu về React.js Dành cho những người biết jQuery để có được bằng cách giúp bạn chuyển đổi từ tư duy jQuery.

Một khi bạn có một sự hiểu biết cơ bản về React, hãy bắt đầu học Flux. Một nơi tốt để bắt đầu là tài liệu chính thức của Flux. Sau đó hãy xem Awesome React, đây là danh sách các liên kết được sắp xếp sẽ giúp bạn tiến xa hơn trong việc học của bạn.

Thực hành với Frameworks
Bây giờ bạn đã có một số kiến ​​thức cơ bản về các khuôn khổ JavaScript và các mẫu kiến ​​trúc, đã đến lúc để thực hành nó. Trong hai thí nghiệm này, hãy tập trung vào việc áp dụng các khái niệm kiến ​​trúc mà bạn đã học được. Đặc biệt, giữ mã DRY của bạn, có sự phân tách rõ ràng các mối quan hệ và tuân thủ nguyên tắc trách nhiệm duy nhất.

Thử nghiệm 5
Thử nghiệm 5 là tách rời và xây dựng lại ứng dụng Todo MVC bằng cách sử dụng JavaScript bất khả tri của khung công tác. Nói cách khác, JavaScript cũ thuần túy không có khung công tác. Mục đích của thử nghiệm này là để cho bạn thấy MVC hoạt động như thế nào mà không cần trộn lẫn trong cú pháp khung cụ thể.


Để bắt đầu, hãy kiểm tra kết quả cuối cùng tại TodoMVC. Bước đầu tiên là tạo một dự án mới tại máy tính và thiết lập ba thành phần đầu tiên của MVC. Vì đây là một thử nghiệm liên quan, hãy tham khảo mã nguồn đầy đủ trong kho lưu trữ Github . Nếu bạn không thể hoàn thành các dự án hoặc không có thời gian, điều đó vẫn ổn. Tải về mã repo và tìm hiểu với các thành phần MVC khác nhau cho đến khi bạn hiểu cách chúng tương quan với nhau.

Thí nghiệm 6
Thí nghiệm 6 là một bài tập tốt trong việc áp dụng MVC. Hiểu MVC là một bước quan trọng hướng tới việc học các khuôn khổ JavaScript. Thí nghiệm 6 là làm theo một hướng dẫn của Scotch.io để xây dựng một bản sao Etsy với Angular.


Build an Etsy Clone with Angular and Stamplay sẽ dạy bạn cách xây dựng một ứng dụng web với Angular, giao diện với các API và cách cấu trúc các dự án lớn. Sau khi thực hiện hướng dẫn này, có thể trả lời các câu hỏi sau đây.
  • Ứng dụng web là gì?
  • MVC / MVVM được áp dụng như thế nào với Angular?
  • API là gì và nó hoạt động như thế nào?
  • Làm thế nào để bạn tổ chức và cấu trúc các cơ sở mã lớn?
  • Những lợi thế của việc phá vỡ giao diện người dùng của bạn thành các thành phần chỉ thị là gì?
Nếu bạn muốn thử sức với việc xây dựng thêm các ứng dụng web góc, hãy thử Build a Real-Time Status Update App with AngularJS & Firebase.

Thử nghiệm 7

React và Flux là một sự kết hợp mạnh mẽ để xây dựng các ứng dụng web phức tạp

Bây giờ bạn đã áp dụng MVC, đã đến lúc thử Flux. Thí nghiệm 7 là xây dựng một danh sách việc cần làm bằng cách sử dụng kiến ​​trúc React và Flux. Bạn có thể tìm thấy hướng dẫn đầy đủ trên trang tài liệu Flux của Facebook. Nó sẽ hướng dẫn bạn từng bước cách sử dụng React để xây dựng giao diện và cách Flux được áp dụng để xây dựng các ứng dụng web.

Khi bạn đã hoàn thành hướng dẫn đó, bạn có thể chuyển sang các hướng dẫn khác có liên quan như Cách xây dựng ứng dụng Todo bằng React, Redux và Immutable.js và Build a Microblogging App With Flux and React.

Luôn cập nhật
Cũng giống như phần còn lại của front-end,  JavaScript luôn phát triển thêm nhiều kiến thức mới. 


Dưới đây là danh sách các trang web, blog và diễn đàn thú vị để đọc và cung cấp thông tin.
Như mọi khi, cách tốt nhất để học là ví dụ.

Styleguides
JavaScript styleguides là bộ quy ước mã hóa được thiết kế để giúp mã của bạn có thể đọc được và duy trì được.
Codebases
Tôi không thể nhấn mạnh mức độ hữu ích của việc đọc code tốt. Tìm hiểu cách tìm kiếm Github cho các vị trí lưu trữ có liên quan bất cứ khi nào chọn một thứ gì đó mới.
Tổng kết 
Đến cuối hướng dẫn này, bạn cần nắm vững các nguyên tắc cơ bản về JavaScript và cách áp dụng chúng cho web. Hãy nhớ rằng, hướng dẫn này cung cấp cho bạn một phương hướng chung. Nếu bạn muốn trở thành một "hero" front-end, điều quan trọng là bạn dành thời gian làm việc trên các dự án để áp dụng các khái niệm này. Bạn càng có nhiều dự án và bạn càng đam mê họ, bạn sẽ càng học nhiều.

Bài viết này là phần thứ hai của loạt bài hai phần. Những gì còn thiếu trong hướng dẫn này là giới thiệu về Node, một nền tảng cho phép JavaScript chạy trên các máy chủ.

Lược dịch từ: medium.freecodecamp.org
Share:

Không có nhận xét nào

Đăng ký: Đăng Nhận xét ( Atom )