Cách tốt nhất để học cách viết mã là viết mã: Tìm hiểu kiến ​​trúc ứng dụng bằng cách xây dựng ứng dụng

Thực hành làm cho hoàn hảo bởi Benjamin Stäudinger (CC BY-NC-ND 2.0)

Học mã có thể khó khăn. Một trong những thách thức lớn nhất mà tôi gặp phải khi học là làm thế nào để nhảy từ việc học tài nguyên và những thử thách thực hành nhỏ dạy cho bạn những điều cơ bản về mã hóa sang các ứng dụng toàn diện.

Không có cách nào khác xung quanh nó. Cách tốt nhất để học là nhảy vào và bắt đầu xây dựng, nhưng điều đó có thể rất nan giải. Bạn bắt đầu từ đâu

Người dùng & Xác thực?

Bạn có thể nghĩ rằng quản lý và xác thực người dùng là bước đầu tiên tốt để tìm hiểu. Bạn đã sai. Trước hết, mật khẩu đã lỗi thời, vì vậy tất cả các ứng dụng mới của bạn nên sử dụng xác thực không cần mật khẩu.

Thứ hai, xác thực người dùng là một rủi ro bảo mật rất lớn và không nên để người mới trong bất kỳ trường hợp nào. Hàng trăm triệu thông tin đăng nhập đã bị đánh cắp từ các công ty lớn với các chuyên gia bảo mật chuyên dụng, những người không làm gì ngoài làm việc suốt ngày về cách cải thiện bảo mật. Rất có thể là một số thông tin đăng nhập của bạn đã bị đánh cắp.

Nó không nguy hiểm cho ứng dụng của bạn nếu bạn làm hỏng xác thực người dùng, nó rất nguy hiểm cho người dùng của bạn, bởi vì họ có thể đang sử dụng cùng thông tin đăng nhập cho các ứng dụng khác, như nhà cung cấp email hoặc tài khoản ngân hàng của họ. Nói cách khác, nếu ai đó đánh cắp mật khẩu từ ứng dụng của bạn, họ có thể sử dụng chúng để gây thiệt hại thực sự ở những khu vực không liên quan gì đến ứng dụng của bạn.

Hãy nhớ rằng, xác thực người dùng là một rủi ro bảo mật rất lớn và không nên để người mới trong bất kỳ trường hợp nào.

Tôi khuyên rằng hầu hết các ứng dụng ủy thác nhiệm vụ xác thực cho các nhà cung cấp xác thực bên ngoài như Facebook, Twitter hoặc tương tự. Ngay cả các ứng dụng lớn được hỗ trợ bởi các doanh nghiệp lớn, những người có lý do chính đáng và tài nguyên để quản lý chiến lược xác thực người dùng của riêng họ cũng nên sử dụng các thư viện đã được thử nghiệm, phổ biến thay vì tự xác thực từ đầu.

Nhưng có nhiều ứng dụng người dùng đơn lẻ nhỏ mà bạn có thể xây dựng mà don không cần xác thực người dùng và một số ứng dụng có thể hưởng lợi từ xác thực người dùng có thể thêm tính năng đó sau.

Một cách tốt để bắt đầu quá trình chuyển đổi của bạn sang các ứng dụng thực tế là xây dựng các ứng dụng dựa trên trình duyệt bằng cách sử dụng `localStorage`, chỉ hỗ trợ một người dùng duy nhất và sau đó mở rộng quy mô từ nền tảng đó. Bạn có thể thêm nhiều người dùng và kết nối cơ sở dữ liệu sau đó, sau khi bạn đã nắm vững các kiến ​​thức cơ bản về kiến ​​trúc ứng dụng phía khách hiện đại.

Giới thiệu về Kiến trúc ứng dụng phía khách hàng

Vậy kiến ​​trúc ứng dụng phía khách hiện đại trông như thế nào? Chỉ vài năm trước, nó đã bị chi phối bởi các kiến ​​trúc MV * như MVC, MVP, MVVM, vân vân

Hầu hết trong số họ xử lý cách phối hợp giữa các mô hình (dữ liệu) và chế độ xem (UI / Presentation). Một khái niệm quan trọng trong kiến ​​trúc ứng dụng là tách các mối quan tâm.

Dưới đây là một số mối quan tâm chúng tôi muốn tách riêng:

  • Trình bày / khung nhìn (bố cục, kiểu dáng, thao tác DOM)
  • Xử lý / hành động sự kiện (nắm bắt và chuyển đổi đầu vào từ người dùng và tin nhắn bên ngoài thành hành động trong ứng dụng)
  • Định tuyến / URL (dịch URL thành hành động)
  • Logic nghiệp vụ (quy tắc về cách dữ liệu được thao tác)
  • Quản lý trạng thái máy khách / mô hình / cửa hàng (cấu trúc dữ liệu phía máy khách trong bộ nhớ)
  • I / O lưu trữ dữ liệu và máy chủ (lưu trữ dữ liệu dài hạn, AJAX, SSE)

Kiến trúc MVC trông giống như thế này:

Sơ đồ MVC từ Lập trình ứng dụng JavaScript Ứng dụng JavaScript

Trong MVC, mô hình phát ra các sự kiện thay đổi và khung nhìn phản hồi bằng cách truy vấn trạng thái hiện tại và cập nhật. Bộ điều khiển lắng nghe để xem các sự kiện và phản hồi bằng cách cập nhật trạng thái và cũng có khả năng thao túng chế độ xem hoặc chọn chế độ xem mới để đáp ứng các thay đổi định tuyến.

Với các thay đổi liên kết dữ liệu 2 chiều cho chế độ xem được phản ánh trực tiếp trong mô hình mà không cần thông qua bộ điều khiển. Hãy tưởng tượng rằng thay vì chỉ đơn giản là truy vấn trạng thái, chế độ xem cũng có thể cập nhật trạng thái trực tiếp. Đó là ràng buộc 2 chiều trong một tóm tắt.

Đầu vào của người dùng có thể kích hoạt cập nhật trạng thái, có thể kích hoạt thay đổi DOM, có thể kích hoạt cập nhật trạng thái khác, có thể kích hoạt nhiều thay đổi DOM hơn, v.v. Nó nhanh chóng trở nên khó hiểu làm thế nào các thay đổi có thể xếp tầng và tác động đến trạng thái của ứng dụng của bạn và việc vô tình đưa ra các vòng lặp vô hạn trở nên dễ dàng.

Một ví dụ về điều này là Angular 1. Angular 1 đã cố gắng quản lý sự phức tạp này bằng cách kiểm soát vòng lặp cập nhật trạng thái UI (được gọi là vòng lặp digest). Để tránh đệ quy tin nhắn vô hạn, vòng lặp digest có giới hạn 10 dây cứng, nhưng vẫn còn nhiều chỗ cho một sự kiện duy nhất gửi đi một tầng có thể gây ra nhiều thay đổi DOM, có thể gây ra nhiều thay đổi hơn chu kỳ. Ngoài việc phức tạp và khó hiểu, nó cũng là một nguyên nhân phổ biến gây ra các vấn đề về hiệu suất trong Angular, bởi vì một thay đổi duy nhất có thể kích hoạt một loạt các bản cập nhật lớn.

Năm 2013, Facebook đã công bố React: một khung nguồn mở mới để xây dựng các thành phần giao diện người dùng. React không quan tâm đến cách bạn xử lý cập nhật dữ liệu, nhưng nó không hỗ trợ ràng buộc dữ liệu 2 chiều. Thay vào đó, bạn đã khuyến khích sử dụng luồng dữ liệu một chiều, ghép React với một cái gì đó giống như kiến ​​trúc Flux.

React & Flux đã thay đổi hoàn toàn cách chúng tôi xây dựng các ứng dụng nền tảng web và ý tưởng về luồng dữ liệu đơn hướng cũng đã lan truyền vào các ứng dụng Angular và Ember.

Kiến trúc Flux trông giống như thế này:

Kiến trúc thông lượng

Thay vì tuyên truyền các thay đổi thông qua một số lượng lớn người nghe sự kiện, các hàm gọi lại được chuyển vào dạng xem, được nối với các cuộc gọi lại của trình nghe sự kiện DOM. Cuộc gọi lại tạo ra một đối tượng hành động được gửi đến cửa hàng nơi quản lý các thay đổi trạng thái.

Khi bạn thêm I / O máy chủ vào hỗn hợp, nó có thể trông như thế này:

Thông lượng với I / O máy chủ

Ngoài việc xem các cuộc gọi lại, nhiều ứng dụng cũng sẽ có các trình lắng nghe sự kiện được nối dây để liên lạc với máy chủ. Các hành động UI cũng có thể gửi các truy vấn máy chủ và chuyển tiếp cập nhật đến máy chủ. Vì vậy, một cuộc gọi lại hành động từ chế độ xem có thể kích hoạt truy vấn hoặc cập nhật máy chủ và người nghe cho các sự kiện được gửi bởi máy chủ có thể kích hoạt các hành động tiếp theo, có thể được gửi đến cửa hàng, v.v.

Bạn có thể đã nghe nói về Redux, hiện đang là lựa chọn thay thế Flux phổ biến nhất. Nó bổ sung khái niệm về các hàm thuần túy để thao tác với cửa hàng, được gọi là bộ giảm tốc. Các bộ giảm tốc đơn giản hóa cách lập luận về cửa hàng bằng cách đảm bảo rằng mỗi loại cập nhật trạng thái có thể được quản lý và kiểm tra độc lập, và các bộ giảm tốc không có tác dụng phụ, điều đó có nghĩa là đơn giản để hiểu tác động của bất kỳ hành động cụ thể nào. Để có cái nhìn tổng quan tuyệt vời về kiến ​​trúc Redux, hãy xem bản trình chiếu này.

Đối với các ứng dụng đầu tiên của bạn, có lẽ bạn không cần phải đối phó với tất cả kiến ​​trúc này. Chúng tôi đã đến các bản cập nhật kiến ​​trúc này bằng cách xây dựng các ứng dụng lớn, nơi truy cập chia sẻ không hạn chế vào trạng thái ứng dụng có thể gây nhầm lẫn và lộn xộn. Những tóm tắt này cung cấp cho chúng ta một mạch rõ ràng cho tất cả các thay đổi trạng thái trong ứng dụng, nhưng chúng có thể quá mức cần thiết cho các ứng dụng tầm thường.

Ban đầu, bạn có thể kết nối những người nghe sự kiện và trực tiếp thao tác với trạng thái ứng dụng của bạn để đáp ứng, và điều đó OK OK. Học cách đi bộ trước khi bạn chạy. Khi bạn đã sẵn sàng để chuyển sang các ứng dụng phức tạp hơn, hãy xem Dan Abramov, các khóa học tuyệt vời, Bắt đầu với Redux Kẻ và ứng dụng Xây dựng ứng dụng với Idiomatic Redux.

Ứng dụng thực hành

Mỗi nhà phát triển cần một danh mục đầu tư mã. Ứng dụng thực hành là một cách tuyệt vời để xây dựng một.

Khi bạn khám phá các khóa học đã đề cập ở trên, bạn sẽ tiếp xúc với ứng dụng ví dụ danh sách Công việc rất thường được sử dụng. Tôi khuyên bạn nên làm theo cùng với các hướng dẫn và tự mình kết hợp chúng lại với nhau.

Nhưng những ứng dụng thú vị nào bạn có thể xây dựng? Một trong những điều khó nhất khi học viết mã là đưa ra những ý tưởng hay cho các ứng dụng để xây dựng.

Có những trang web tổng hợp và xếp hạng ý tưởng ứng dụng bằng phiếu bầu. Chắc chắn hãy xem những thứ đó nếu bạn đang tìm kiếm ý tưởng.

Học sinh của Học Tìm hiểu JavaScript với Eric Elliott, sẽ tìm thấy một danh sách mới về các dự án của sinh viên, được sắp xếp với các danh sách tính năng ngắn. Cả ứng dụng và tính năng này đều có xếp hạng độ khó, cơ bản, trung gian, và trung cấp nâng cấp để giúp học sinh phù hợp với thử thách với trình độ học tập hiện tại.

Dự án ví dụ: Từ chối

Một dự án sinh viên cho Tìm hiểu JavaScript với Eric Elliott.

Bạn muốn làm việc theo nhóm? Tìm một người bạn mã hóa trong cuộc trò chuyện của sinh viên.

Bạn phải thua để giành chiến thắng.

Rèn luyện bản thân để:

  • Được tăng lương
  • Bán nhiều hơn
  • Phát triển kinh doanh hơn
  • Đàm phán giao dịch tốt hơn

Trò chơi có một quy tắc:

Bạn phải bị từ chối bởi một con người ít nhất một lần mỗi ngày.

Yêu cầu những thứ bên ngoài vùng thoải mái của bạn, và bạn sẽ thấy mình chiến thắng nhiều hơn nữa.

Thắng = 1 điểm. Từ chối = 10 điểm.

Bao lâu bạn có thể làm cho chuỗi từ chối của bạn kéo dài?

Cấp độ cơ bản

Xây dựng giao diện người dùng cho phép bạn theo dõi điểm số của mình. Bao gồm một kiểu nhập văn bản cho câu hỏi, người bạn đã hỏi và hai nút: Được chấp nhận và hoặc bị từ chối. Đối với các yêu cầu không đồng bộ như email hoặc tin nhắn, hãy ghi lại điểm số tại thời điểm bạn nhận được câu trả lời, không phải tại thời điểm bạn yêu cầu.

Sử dụng HTML + CSS và lưu trữ bản ghi dữ liệu trong bộ nhớ cục bộ.

Tiếp tục kiểm tra điểm số hiện tại của người dùng. Hãy nhớ rằng tổng số phụ của ngày cần phải được tính toán lại mỗi khi một câu hỏi được chấp nhận hoặc từ chối, vì vậy sẽ rất hữu ích khi giữ danh sách trong một mảng mà bạn có thể giảm với mỗi câu trả lời mới.

Mức giữa

  • Thêm API để lưu trữ dữ liệu bằng dịch vụ web và cơ sở dữ liệu.
  • Thêm xác thực và theo dõi nhiều người dùng. Gợi ý: Redis, Mongo hoặc RethinkDB sẽ là những ứng cử viên cơ sở dữ liệu tốt.
  • Đăng nhập xã hội như Facebook hoặc Twitter sẽ là các tùy chọn xác thực tốt (dễ dàng và an toàn hơn đăng nhập tên người dùng / mật khẩu).

Trình độ cao

  • Chia sẻ điểm số của bạn và cạnh tranh với bạn bè của bạn trên Facebook.
  • Đối với mỗi người dùng, hãy giữ một bảng thành tích từ vòng tròn bạn bè của họ.

Tín dụng thêm

  • Thêm ứng dụng di động

Thực hiện:

  1. Ngã ba repo
  2. Thực hiện giải pháp của bạn.
  3. Mở một vấn đề với một liên kết đến ngã ba của bạn.

Để có được tín dụng, bạn phải mở một vấn đề với một liên kết đến ngã ba của bạn.

Xem dự án trên GitHub.

Học JavaScript với Eric Elliott

Eric Elliott là tác giả của chương trình ứng dụng JavaScript lập trình trực tuyến (O LờiReilly), và học Tìm hiểu JavaScript với Eric Elliott. Ông đã đóng góp vào trải nghiệm phần mềm cho Adobe Systems, Zumba Fitness, Tạp chí Phố Wall, ESPN, BBC và các nghệ sĩ thu âm hàng đầu bao gồm Usher, Frank Ocean, Metallica, và nhiều hơn nữa.

Anh dành phần lớn thời gian ở Khu vực Vịnh San Francisco với người phụ nữ đẹp nhất thế giới.