Bài viết được dịch từ: freecodecamp.org

Tham khảo khóa học Web Frontend + ReactJs tại đây.

Bài viết này là phần hai của loạt bài "From Zero to Front-end Hero". Trong phần một, bạn đã học cách tạo bố cục bằng HTML và CSS cũng như một số phương pháp hay nhất. Trong phần hai, chúng ta 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ính 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 ứng dụng web.

Cũng giống như HTML và CSS, có rất nhiều hướng dẫn về JavaScript trên mạng. Tuy nhiên, đặc biệt là đối với những người mới làm quen với front - end, thật khó để tìm ra hướng dẫn nào để sử dụng và trình tự thực hiện chúng. Mục tiêu chính của loạt bài này là cung cấp cho bạn lộ trình để giúp bạn định hướng việc học trở thành một 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 tiếp.

Front-end developer từ chưa biết gì tới chuyên gia (phần 1)

JavaScript Basics

JavaScript là một ngôn ngữ lập trình đa nền tảng có thể được sử dụng cho hầu hết mọi thứ ngày nay, nhưng chúng ta sẽ đi sâu vào vấn đề đó sau khi bạn hiểu kiến ​​thức 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 học cách áp dụng JavaScript vào web, trước tiên hãy tìm hiểu về ngôn ngữ đó. Để bắt đầu, hãy đọc khóa học cơ bản về Ngôn ngữ của Mạng nhà phát triển Mozilla Language basics crash course. Hướng dẫn này sẽ dạy 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 đó, hãy đọc qua các phần sau trong hướng dẫn JavaScript của MDN JavaScript guide: 

  • Ngữ pháp và các loại
  • Kiểm soát luồng và xử lý lỗi
  • Vòng lặp và lặp lại
  • Chức năng

Đừng lo lắng quá nhiều về việc ghi nhớ cú pháp cụ thể. Bạn có thể tra cứu nó. Thay vào đó, hãy tập trung vào việc hiểu các khái niệm quan trọng như khởi tạo biến, vòng lặp và hàm. 

Nếu bạn có thời gian, đối với 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ố kiến ​​thức của bạn Eloquent JavaScript. Eloquent JavaScript là một cuốn sách trực tuyến miễn phí tuyệt vời mà mọi lập trình viên front-end đều nên đọc. 

Interactivity

Một công dụng của JavaScript là tạo hiệu ứng cho bố cục của bạn

Bây giờ bạn đã hiểu cơ bản về JavaScript như một ngôn ngữ, bước tiếp theo là áp dụng nó vào 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 đại diện của các tài liệu HTML. Đó là một cấu trúc dạng cây được 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ì của CSSTricks. Nó cung cấp một lời giải thích đơn giản và dễ hiểu về DOM.

Kiểm tra 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ó:

var container = document.getElementById(“container”); 
container.innerHTML = 'New Content!';

Đừng lo lắng, đó chỉ là một ví dụ đơn giản. Bạn có thể làm được nhiều điề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 qua các hướng dẫn sau trong phần của MDN  The Document Object Model.

  • Sự kiện
  • Ví dụ về lập trình web và XML bằng cách sử dụng DOM
  • Cách tạo cây DOM
  • Giới thiệu về DOM
  • Định vị các phần tử DOM bằng bộ chọn

Một lần nữa, hãy tập trung vào các khái niệm thay vì cú pháp. Có thể trả lời các câu hỏi sau:

  • DOM là gì?
  • Bạn truy vấn các phần tử như thế nào?
  • Làm cách nào để bạn lắng nghê các sự kiện đó?
  • Làm cách nào để bạn thay đổi các thuộc tính của nút DOM?

Để biết danh sách các tương tác DOM JavaScript phổ biến, xem JavaScript Functions and Helpers 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ư đặt kiểu trên 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 tìm hiểu sâu hơn, bạn luôn có thể đọc phần về DOM trong Eloquent JavaScript.

Kiểm duyệt

Để gỡ lỗi JavaScript phía khách hàng, chúng tôi sử dụng các công cụ dành cho lập trình viên được tích hợp trong trình duyệt. Bảng điều khiển 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ỡ lỗi vào bảng điều khiển và xem những thứ như yêu cầu mạng và tài nguyên.

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

Công cụ dành cho lập trình viên Chrome

Thực hành những điều cơ bản

Tại thời điểm này, vẫn còn rất nhiều điều để tìm hiểu về JavaScript. Tuy nhiên, phần cuối cùng chứa nhiều thông tin mới. Tôi nghĩ đã đến lúc chúng ta tạm dừng và giải quyết một vài thử nghiệm nhỏ. Chúng sẽ giúp củng cố một số khái niệm bạn vừa họ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 của bạn và nhấp vào tab bảng điều khiển. Tại đây bạn có thể thực thi JavaScript trên trang. Những gì chúng ta sẽ làm là việc thao tác một số phần tử trên trang. Xem liệu bạn có thể thực hiện tất cả các thao tác DOM sau đây không.

Airbnb.com

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ị xáo trộn 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 một thẻ tiêu đề có tên lớp duy nhất và thay đổi văn bản
  • Chọn bất kỳ phần tử nào trên trang và xóa nó
  • Chọn bất kỳ phần tử nào và thay đổi một trong các thuộc tính CSS của nó
  • Chọn một thẻ phần cụ thể và di chuyển nó xuống 250 pixel
  • Chọn bất kỳ thành phần nào, như một bảng điều khiển và điều chỉnh khả năng hiển thị của nó
  • Xác định một hàm có tên là doSomething thông báo “Hello world” và sau đó thực thi nó
  • Chọn một thẻ đoạn cụ thể, thêm trình nghe sự kiện nhấp chuột vào thẻ đó 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 JavaScript Functions and Helpers. Tôi dựa hầu hết các nhiệm vụ này vào nó. Dưới đây là ví dụ về cách hoàn thành dấu đầu dòng đầu tiên:

var header = document.querySelector(‘.text-branding’)
header.innerText = ‘Boop'

 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ề thao tác JavaScript và DOM và xem nó hoạt động.

Thí nghiệm 2

JavaScript cho phép các nhà phát triển tạo giao diện tương tác

Sử dụng CodePen, viết một thử nghiệm nặng JavaScript cơ bản 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 From Hero to Front-end Hero Part 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ể đóng vai trò là nguồn cảm hứng.

Bảng tuần hoàn

  • Máy tạo màu 
  • Máy tính
  • JavaScript Quiz
  • Tiểu hành tinh Canvas

Thêm JavaScript

Bây giờ bạn đã biết một số JavaScript và đã thực hành một số với nó, chúng ta sẽ chuyển sang một số khái niệm nâng cao hơn. Các khái niệm dưới đây không liên quan trực tiếp đến nhau. Tôi đã nhóm chúng trong phần này 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 về cách sử dụng chúng khi bạn đến phần thử nghiệm và khuôn khổ.

Ngôn ngữ

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, hãy xem qua từng dấu đầu dòng. Ngoài ra, Eloquent JavaScript bao gồm phần lớn tài liệu này, nếu bạn muốn bổ sung cho việc học của mình.

  • Kế thừa nguyên mẫu
  • Phạm vi
  • Đóng cửa
  • Vòng lặp event
  • Xây dựng event
  • Áp dụng, gọi và ràng buộc
  • Gọi lại và hứa hẹn
  • Biến và chức năng cẩu

Mệnh lệnh so với Khai báo

Có hai loại phương pháp tiếp cận về cách JavaScript tương tác với DOM: mệnh lệnh 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 mệnh lệnh tập trung vào những gì cũng như cách thức. 

var hero = document.querySelector('.hero')
hero.addEventListener(‘click’, function() {  var newChild = document.createElement(‘p’)
  newChild.appendChild(document.createTextNode(‘Hello world!’))    newChild.setAttribute(‘class’, ‘text’)    newChild.setAttribute(‘data-info’, ‘header’)    hero.appendChild(newChild) })}

Đây là một ví dụ về lập trình bắt buộc trong đó chúng tôi truy vấn thủ công một phần tử và lưu trữ trạng thái giao diện người dùng trong DOM. Nói cách khác, tập trung vào việc làm thế nào để đạt được điều gì đó. Vấn đề lớn nhất với mã này là nó rất dễ vỡ. Nếu ai đó làm việc trên mã thay đổi tên lớp trong HTML từ hero thành villain, trình nghe sự kiện sẽ không kích hoạt nữa vì không có lớp hero 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 để nó tùy theo khung hoặc thư viện mà 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ì làm thế nào. 

Hướng dẫn này đầu tiên dạy bạn phương pháp bắt buộc trước khi giới thiệu phương pháp khai báo với các khung công tác 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 bạn thấy 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.

 

Ví dụ: khi bạn gửi một biểu mẫu trên một trang web, nó sẽ thu thập thông tin đầu vào của bạn và thực hiện một 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 thực hiện 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 về Ajax, hãy xem Ajax là gì. Nếu bạn vẫn chưa hoàn toàn hiểu khái niệm về AJAX, hãy xem Giải thích nó giống như khi tôi 5 tuổi, Ajax là gì. Và nếu tất cả những điều đó vẫn chưa đủ, bạn có thể đọc chương của Eloquent JavaScript trên HTTP.

jQuery

Cho đến nay, bạn vẫn đang thực hiện thao tác DOM chỉ với JavaScript. Một trong những thư viện thao tác DOM phổ biến nhất là jQuery.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 nhớ rằng, 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 giao diện người dùng phức tạp là các khung và thư viện khai báo như Angular và React. Tuy nhiên, tôi vẫn khuyên bạn nên học jQuery vì rất có thể bạn sẽ gặp phải nó trong quá trình làm front-end của mình.

 

Để tìm hiểu kiến ​​thức cơ bản về jQuery, hãy xem Trung tâm kiến ​​thức của jQuery. Nó đi từng bước qua các khái niệm quan trọng như hoạt ảnh và xử lý sự kiện.

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à Bạn có thể không cần 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 dùng.

ES5 vs. 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 "hương vị" chính của JavaScript mà bạn sẽ gặp ngày 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 là phiên bản của JavaScript. Bản thảo cuối cùng của ES5 đã được hoàn thiện vào năm 2009 và đó là những gì bạn đang sử dụng cho đến nay.

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

Điều cần thiết là 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 cái này hay cái kia. Một phần giới thiệu hay về ES6 là ES5, ES6, ES2016, ES.Next: What’s going on with JavaScript versioning and Dan Wahlin’s Getting Started with ES6 — The Next Version of JavaScript. Sau đó, bạn có thể xem danh sách đầy đủ các thay đổi từ ES5 sang ES6 tại Tính năng của ES6. Nếu bạn muốn nhiều hơn nữa, hãy xem kho lưu trữ Github này về các tính năng của ES6. 

Thực hành nhiều hơn

Nếu bạn đã đạt đến điểm này, hãy tự chúc mừng. Bạn đã học rất nhiều về JavaScript. Hãy áp dụng một số điều bạn đã học được vào thực tế.

Thí nghiệm 3

 

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 theo dõi cùng với trang chủ của Flipboard của Codecademy và thêm tính tương tác với hướng dẫn JavaScript. 

Trong phần hướng dẫn này, hãy tập trung vào việc hiểu cách tạo 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

 

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 về JavaScript. Đối với thí nghiệm này, bạn sẽ tạo đồng hồ theo thiết kế của riêng mình 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 hỗn hợp. Tôi cũng đã chuẩn bị một danh sách các 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ụ, hãy 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, sau đó thêm tính tương tác với JavaScript. Hoặc bạn có thể viết logic JavaScript trước và sau đó chuyển sang bố cục. Ngoài ra, bạn có thể sử dụng jQuery, nhưng cũng có thể thoải mái sử dụng JavaScript đơn giản. 

JavaScript Frameworks

Với kiến ​​thức cơ bản về JavaScript, đã đến lúc tìm hiểu về các JavaScript frameworks. Framework là các thư viện JavaScript giúp bạn cấu trúc và tổ chức code của mình. Các khung JavaScript cung cấp cho các 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 của giao diện người dùng, như quản lý trạng thái, đị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ả về mọi khung JavaScript. Tuy nhiên, đây là danh sách nhanh một vài framework: Angular, React + Flux, Ember, Aurelia, Vue và Meteor. Bạn không cần phải học tất cả. Chọn một cái và tìm hiểu nó thật tốt. Đừng chạy theo khuôn khổ. 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 khuôn khổ được xây dựng. 

Các mẫu kiến ​​trúc

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

Tách các mối quan tâm là một nguyên tắc thiết kế đề xuất chia các ứng dụng thành các lớp cụ thể trong 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ô 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 đó, hãy đọc Hiểu về MVC và MVP (Dành cho nhà phát triển JavaScript và Backend). Trong bài viết đó, đừng lo lắng về việc học Backbone, chỉ cần xem qua các phần có giải thích về MVC và MVP. 

Addy Osman cũng đã viết về MVVM trong phần Hiểu về MVVM - Hướng dẫn dành cho nhà phát triển JavaScript. Để tìm hiểu về nguồn gốc của MVC và tại sao nó ra đời, hãy đọc bài luận của Martin Fowler về Kiến trúc GUI. Cuối cùng, hãy đọc phần, JavaScript MV * Patterns, trong Học các mẫu thiết kế JavaScript. Học các mẫu thiết kế JavaScript là một cuốn sách trực tuyến miễn phí. 

Mẫu thiết kế

Các khuôn khổ JavaScript không phát minh lại bánh xe. Hầu hết chúng đều dựa vào các mẫu thiết kế. Bạn có thể coi các mẫu thiết kế là các 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ổ, nhưng tôi khuyên bạn nên xem qua danh sách sau tại một số điểm.

Việc hiểu và có thể triển khai một số mẫu thiết kế này sẽ không chỉ khiến bạn trở thành một kỹ sư giỏi hơn mà còn giúp bạn hiểu những gì một số khuôn khổ đang hoạt động.

AngularJS

AngularJS là một khung JavaScript MVC và đôi khi là MVVM. Nó được Google duy trì và gây bão cộng đồng JavaScript khi nó được phát hành lần đầu tiên vào năm 2010. 

 

Angular là một khung 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ừ lập trình JavaScript bắt buộc sang 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 Angular. Họ cũng có một hướng dẫn có tên Angular Cat cho phép bạn bắt đầu viết mã ngay lập tức. Bạn có thể tìm thấy hướng dẫn đầy đủ hơn để học Angular trong kho Github này của Tim Jacobi. Ngoài ra, hãy xem hướng dẫn phong cách thực hành tốt nhất dứt khoát này đượ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 gặp phải 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, là một thư viện để xây dựng giao diện người dùng. Bạn có thể coi nó là chữ V trong MVC. Vì React chỉ là một thư viện nên nó thường được thấy với một kiến ​​trúc được gọi là Flux.

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ó trên quy mô lớn. Hãy xem bài thuyết trình nổi tiếng của họ Cách Hacker: Suy nghĩ lại về 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, trước tiên hãy học React. Một mồi tốt là tài liệu React. Sau đó, hãy xem phần Giới thiệu React.js dành cho những người biết vừa đủ về jQuery để tham gia để giúp bạn chuyển đổi từ tư duy jQuery. 

Khi bạn đã hiểu 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 Flux chính thức. Sau đó, hãy xem Awesome React, đây là một danh sách các liên kết được tuyển chọn sẽ giúp bạn tiến xa hơn trong quá trình học của mình. 

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 biệt, hãy giữ cho code của bạn DRY, tách biệt rõ ràng các mối quan tâm 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. Nói cách khác, JavaScript cũ đơn giản không có khuôn khổ. Mục đích của thử nghiệm này là để cho bạn thấy cách MVC hoạt động mà không trộn lẫn trong cú pháp cụ thể của khung.

Để bắt đầu, hãy xem 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 địa phương và đầu tiên thiết lập ba thành phần của MVC. Vì đây là một thử nghiệm có liên quan, hãy tham khảo mã nguồn đầy đủ trong kho Github này. Nếu bạn không thể tái tạo hoàn toàn dự án hoặc không có thời gian, điều đó cũng tốt. Tải xuống mã repo và chơi xung quanh 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ọc các framework JavaScript. Thử nghiệm 6 là làm theo hướng dẫn của Scotch.io để tạo bản sao Etsy với Angular. 

Xây dựng Bản sao Etsy với Angular và 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.

  • Ứng dụng web là gì?
  • MVC / MVVM được áp dụng với Angular như thế nào?
  •  
  • API là gì và nó làm gì?
  • Làm thế nào để bạn tổ chức và cấu trúc các cơ sở mã lớn?
  • Lợi ích của việc chia 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 trong việc xây dựng nhiều ứng dụng web Angular hơn, hãy thử Xây dựng ứng dụng cập nhật trạng thái theo thời gian thực với AngularJS & Firebase.

Thí nghiệm 7

React và Flux là 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 dùng 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 toàn bộ hướng dẫn trên trang tài liệu về 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 ứng dụng web.

Sau khi hoàn thành hướng dẫn đó, bạn có thể chuyển sang các hướng dẫn liên quan khác như Cách tạo ứng dụng Todo bằng React, Redux và Immutable.js và Xây dựng ứng dụng tiểu blog với Flux và React.

Stay current

Cũng giống như phần còn lại của giao diện người dùng, cảnh quan JavaScript di chuyển nhanh chóng. Điều quan trọng là phải đi trước đường cong.

Toàn cảnh JavaScript thay đổi nhanh chóng

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.

Tìm hiểu bằng ví dụ 

Như mọi khi, cách tốt nhất để học là bằng ví dụ.

Styleguides

Hướng dẫn định kiểu JavaScript là tập hợp các quy ước mã hóa được thiết kế để giúp giữ cho mã của bạn dễ đọc và có thể bảo trì.

Codebases 

Tôi không thể nhấn mạnh việc đọc code tốt hữu ích như thế nào. Tìm hiểu cách tìm kiếm trên Github các kho lưu trữ có liên quan bất cứ khi nào chọn thứ gì đó mới.

Wrap up

Đến cuối hướng dẫn này, bạn sẽ nắm chắc các nguyên tắc cơ bản về JavaScript và cách áp dụng chúng vào web. Hãy nhớ rằng, hướng dẫn này cung cấp cho bạn một bản đồ đường đi chung. Nếu bạn muốn trở thành người hùng front-end, điều quan trọng là bạn phải dành thời gian làm việc trong các dự án để áp dụng những khái niệm này. 

Bài viết này là phần thứ hai của loạt bài gồm hai phần. Điều còn thiếu trong hướng dẫn này là phần giới thiệu về Node, một nền tảng cho phép JavaScript chạy trên máy chủ. Trong tương lai, tôi có thể viết phần ba nói về phát triển phía máy chủ với Node và những thứ như cơ sở dữ liệu noSQL. 

Liên hệ hỗ trợ, tư vấn:

Ms. Mẫn - 0963023185 (zalo)

manpham@techmaster.vn