Psst! Tại đây, tại sao ReasonReact là cách tốt nhất để viết React

Bạn đang sử dụng React để xây dựng giao diện người dùng? Vâng, tôi cũng vậy. Và bây giờ, bạn sẽ tìm hiểu lý do tại sao bạn nên viết các ứng dụng React của mình bằng ReasonML.

React là một cách khá hay để viết giao diện người dùng. Nhưng, chúng ta có thể làm cho nó thậm chí mát hơn? Tốt hơn?

Để làm cho nó tốt hơn, chúng ta cần xác định vấn đề của nó trước. Vậy, vấn đề chính của React như một thư viện JavaScript là gì?

React wasn ban đầu được phát triển cho JavaScript

Nếu bạn xem xét kỹ hơn về React, bạn sẽ thấy rằng một số nguyên tắc chính của nó là xa lạ với JavaScript. Hãy nói về sự bất biến, các nguyên tắc lập trình chức năng và hệ thống loại nói riêng.

Tính bất biến là một trong những nguyên tắc cốt lõi của React. Bạn không muốn thay đổi đạo cụ hoặc trạng thái của mình vì nếu làm như vậy, bạn có thể gặp hậu quả khó lường. Trong JavaScript, chúng tôi không có bất biến nào. Chúng tôi đang giữ các cấu trúc dữ liệu của mình theo bất kỳ quy ước nào hoặc chúng tôi sử dụng các thư viện như bất biếnJS để đạt được nó.

React dựa trên các nguyên tắc lập trình chức năng vì các ứng dụng của nó là thành phần của các chức năng. Mặc dù JavaScript có một số tính năng này, chẳng hạn như các hàm hạng nhất, nhưng nó không phải là ngôn ngữ lập trình chức năng. Khi chúng ta muốn viết một số mã khai báo đẹp, chúng ta cần sử dụng các thư viện bên ngoài như Lodash / fp hoặc Ramda.

Vì vậy, những gì lên với hệ thống loại? Trong React, chúng tôi đã có PropTypes. Chúng tôi đã sử dụng chúng để bắt chước các loại trong JavaScript vì nó không phải là ngôn ngữ được gõ tĩnh. Để tận dụng kiểu gõ tĩnh nâng cao, một lần nữa chúng ta cần sử dụng các phụ thuộc bên ngoài, chẳng hạn như Flow và TypeScript.

Phản ứng và so sánh JavaScript

Như bạn có thể thấy, JavaScript không tương thích với các nguyên tắc cốt lõi của React.

Có ngôn ngữ lập trình nào khác tương thích với React hơn JavaScript không?

May mắn thay, chúng ta có ReasonML.

Trong Lý do, chúng tôi nhận được bất biến ra khỏi hộp. Vì nó dựa trên OCaml, ngôn ngữ lập trình chức năng, chúng tôi cũng có các tính năng như vậy được tích hợp vào ngôn ngữ. Lý do cũng cung cấp cho chúng ta một hệ thống loại mạnh trên chính nó.

So sánh React, JavaScript và Reason

Lý do tương thích với các nguyên tắc cốt lõi của React.

Lý do

Đó là một ngôn ngữ mới. Nó có một cú pháp và chuỗi công cụ giống như JavaScript thay thế cho OCaml, một ngôn ngữ lập trình chức năng mà Lọ đã tồn tại hơn 20 năm. Lý do được tạo ra bởi các nhà phát triển Facebook đã sử dụng OCaml trong các dự án của họ (Flow, Infer).

Lý do, với cú pháp giống như C, làm cho OCaml có thể tiếp cận được với những người đến từ các ngôn ngữ chính như JavaScript hoặc Java. Nó cung cấp cho bạn tài liệu tốt hơn (so với OCaml) và một cộng đồng đang phát triển xung quanh nó. Thêm vào đó, việc tích hợp với cơ sở mã JavaScript hiện tại của bạn dễ dàng hơn.

OCaml phục vụ như một ngôn ngữ ủng hộ cho Lý do. Lý do có cùng ngữ nghĩa với OCaml - chỉ có cú pháp là khác nhau. Điều này có nghĩa là bạn có thể viết OCaml bằng cú pháp giống như Lý do JavaScript. Do đó, bạn có thể tận dụng các tính năng tuyệt vời của OCaml, chẳng hạn như hệ thống loại mạnh và khớp mẫu.

Hãy cùng xem một ví dụ về cú pháp Reason.

hãy để fizzbuzz = (i) =>
  chuyển đổi (i mod 3, i mod 5) {
  | (0, 0) => "FizzBuzz"
  | (0, _) => "Fizz"
  | (_, 0) => "Buzz"
  | _ => chuỗi_of_int (i)
  };
cho (tôi trong 1 đến 100) {
  Js.log (fizzbuzz (i))
};

Mặc dù chúng tôi sử dụng phương thức khớp mẫu trong ví dụ này, nhưng nó vẫn khá giống với JavaScript, phải không?

Tuy nhiên, ngôn ngữ duy nhất có thể sử dụng cho các trình duyệt vẫn là JavaScript, có nghĩa là chúng ta cần biên dịch theo ngôn ngữ đó.

BuckleScript

Một trong những tính năng mạnh mẽ của Reason là trình biên dịch BuckleScript, lấy mã Reason của bạn và biên dịch nó thành JavaScript có thể đọc và biểu diễn với khả năng loại bỏ mã chết tuyệt vời. Bạn sẽ đánh giá cao khả năng đọc nếu bạn làm việc trong một nhóm mà không phải ai cũng quen thuộc với Reason, vì họ vẫn có thể đọc được mã JavaScript đã biên dịch.

Sự giống nhau với JavaScript rất gần đến nỗi một số mã Lý do không cần phải thay đổi bởi trình biên dịch. Vì vậy, bạn có thể tận hưởng những lợi ích của ngôn ngữ gõ tĩnh mà không thay đổi mã nào.

hãy thêm = (a, b) => a + b;
thêm (6, 9);

Đây là mã hợp lệ trong cả Lý do và JavaScript.

BuckleScript được cung cấp với bốn thư viện: thư viện tiêu chuẩn có tên Belt (thư viện chuẩn OCaml là không đủ) và các ràng buộc với JavaScript, Node.js và, API API.

Vì BuckleScript dựa trên trình biên dịch OCaml, bạn sẽ nhận được một trình biên dịch cực nhanh, nhanh hơn nhiều so với Babel và nhanh hơn nhiều lần so với TypeScript.

Hãy để biên dịch thuật toán FizzBuzz của chúng tôi được viết bằng Reason to JavaScript.

Lý do biên dịch mã thành JavaScript thông qua BuckleScript

Như bạn có thể thấy, mã JavaScript kết quả là khá dễ đọc. Có vẻ như nó được viết bởi một nhà phát triển JavaScript.

Reason không chỉ biên dịch thành JavaScript mà còn cả bản gốc và mã byte. Vì vậy, bạn có thể viết một ứng dụng bằng cú pháp Reason và có thể chạy nó trong trình duyệt trên điện thoại MacOS, Android và iOS. Có một trò chơi tên là Gravitron của Jared Forsyth, được viết bằng Reason và nó có thể chạy trên tất cả các nền tảng mà tôi đã đề cập.

JavaScript xen kẽ

BuckleScript cũng cung cấp cho chúng tôi khả năng tương tác JavaScript. Bạn không chỉ có thể dán mã JavaScript đang hoạt động vào cơ sở mã Lý do mà mã Lý do của bạn cũng có thể tương tác với mã JavaScript đó. Điều này có nghĩa là bạn có thể dễ dàng tích hợp mã Lý do vào cơ sở mã JavaScript hiện có của mình. Hơn nữa, bạn có thể sử dụng tất cả các gói JavaScript từ hệ sinh thái NPM trong mã Lý do của mình. Ví dụ: bạn có thể kết hợp Flow, TypeScript và Reason với nhau trong một dự án.

Tuy nhiên, nó không đơn giản. Để sử dụng các thư viện hoặc mã JavaScript trong Reason, trước tiên bạn cần chuyển nó sang Reason thông qua các ràng buộc Reason. Nói cách khác, bạn cần các loại cho mã JavaScript chưa được mã hóa của mình để có thể tận dụng lợi thế của hệ thống loại mạnh của Reason.

Bất cứ khi nào bạn cần sử dụng thư viện JavaScript trong mã Lý do, hãy kiểm tra xem thư viện đó đã được chuyển sang Lý do chưa bằng cách duyệt qua cơ sở dữ liệu Chỉ số gói lý do (Redex). Nó là một trang web tổng hợp các thư viện và công cụ khác nhau được viết trong các thư viện Reason và JavaScript với các ràng buộc Reason. Nếu bạn tìm thấy thư viện của mình ở đó, bạn có thể chỉ cần cài đặt nó như một phần phụ thuộc và sử dụng nó trong ứng dụng Reason của bạn.

Tuy nhiên, nếu bạn không tìm thấy thư viện của mình, bạn sẽ cần phải tự viết các ràng buộc Lý do. Nếu bạn chỉ bắt đầu với Reason, hãy nhớ rằng việc viết các ràng buộc không phải là một điều bạn muốn bắt đầu, vì nó là một trong những điều khó khăn hơn trong hệ sinh thái Reason.

May mắn thay, tôi chỉ viết một bài về viết Lý do ràng buộc, vì vậy hãy theo dõi!

Khi bạn cần một số chức năng từ thư viện JavaScript, bạn không cần phải viết các ràng buộc Lý do cho toàn bộ thư viện. Bạn chỉ có thể làm điều đó cho các chức năng hoặc thành phần bạn cần sử dụng.

Lý do

Bài viết này là về cách viết React in Reason, bạn có thể thực hiện nhờ thư viện ReasonReact.

Có lẽ bây giờ bạn đang nghĩ về tôi, tôi vẫn không biết vì sao tôi nên sử dụng React trong Reason.

Chúng tôi đã đề cập đến lý do chính để làm như vậy - Lý do tương thích với React hơn JavaScript. Tại sao nó tương thích hơn? Bởi vì React được phát triển cho Reason, hay chính xác hơn là cho OCaml.

Đường đến ReasonReact

Nguyên mẫu đầu tiên của React tựa được phát triển bởi Facebook và được viết bằng Standard Meta Language (StandardML), anh em họ của OCaml. Sau đó, nó đã được chuyển đến OCaml. React cũng được sao chép sang JavaScript.

Điều này là do toàn bộ web đã sử dụng JavaScript và có lẽ rất thông minh để nói rằng, Bây giờ chúng tôi sẽ xây dựng giao diện người dùng trong OCaml. Và nó đã hoạt động - React in JavaScript đã được áp dụng rộng rãi.

Vì vậy, chúng tôi đã trở nên quen với React như một thư viện JavaScript. Phản ứng cùng với các thư viện và ngôn ngữ khác - Elm, Redux, Recompose, Ramda và PureScript - khiến chương trình chức năng trong JavaScript trở nên phổ biến. Và với sự phát triển của Flow và TypeScript, kiểu gõ tĩnh cũng trở nên phổ biến. Kết quả là, mô hình lập trình chức năng với các kiểu tĩnh trở thành xu hướng chủ đạo trong thế giới của front-end.

Năm 2016, Bloomberg đã phát triển và BuckleScript có nguồn mở, trình biên dịch chuyển đổi OCaml thành JavaScript. Điều này cho phép họ viết mã an toàn ở mặt trước bằng hệ thống loại mạnh OCamlùi. Họ đã lấy trình biên dịch OCaml được tối ưu hóa và cực kỳ nhanh chóng và hoán đổi mã gốc tạo back-end của nó để tạo mã JavaScript.

Sự phổ biến của lập trình chức năng cùng với việc phát hành BuckleScript đã tạo ra môi trường lý tưởng cho Facebook để trở lại ý tưởng ban đầu về React, ban đầu được viết bằng ngôn ngữ ML.

Lý do

Họ đã sử dụng cú pháp ngữ nghĩa và JavaScript của OCaml và tạo ra Reason. Họ cũng tạo ra trình bao bọc Reason xung quanh thư viện React - ReasonReact - với các chức năng bổ sung như đóng gói các nguyên tắc Redux trong các thành phần trạng thái. Bằng cách đó, họ trả lại React về gốc rễ của nó.

Sức mạnh của React in Reason

Khi React đi vào JavaScript, chúng tôi đã điều chỉnh JavaScript theo nhu cầu React bằng cách giới thiệu các thư viện và công cụ khác nhau. Điều này cũng có nghĩa là phụ thuộc nhiều hơn cho các dự án của chúng tôi. Chưa kể rằng các thư viện này vẫn đang được phát triển và các thay đổi đột phá được giới thiệu thường xuyên. Vì vậy, bạn cần phải duy trì những phụ thuộc này một cách cẩn thận trong các dự án của bạn.

Điều này đã thêm một lớp phức tạp khác để phát triển JavaScript.

Ứng dụng React điển hình của bạn sẽ có ít nhất các phụ thuộc này:

  • gõ tĩnh - Flow / TypeScript
  • bất biến - bất biếnJS
  • định tuyến - ReactRouter
  • định dạng - đẹp hơn
  • linting - ESLint
  • chức năng trợ giúp - Ramda / Lodash

Hãy để ngay bây giờ trao đổi JavaScript React cho ReasonReact.

Chúng ta vẫn cần tất cả những phụ thuộc này?

  • gõ tĩnh - tích hợp
  • bất biến - tích hợp
  • định tuyến - tích hợp
  • định dạng - tích hợp
  • linting - tích hợp
  • chức năng trợ giúp - tích hợp

Bạn có thể tìm hiểu thêm về các tính năng tích hợp này trong bài đăng khác của tôi.

Trong ứng dụng ReasonReact, bạn không cần những thứ phụ thuộc này và nhiều phụ thuộc khác vì nhiều tính năng quan trọng giúp cho sự phát triển của bạn dễ dàng hơn đã được bao gồm trong chính ngôn ngữ. Vì vậy, việc duy trì các gói của bạn sẽ trở nên dễ dàng hơn và bạn không có sự phức tạp theo thời gian.

Điều này là nhờ OCaml, hơn 20 tuổi. Nó có một ngôn ngữ trưởng thành với tất cả các nguyên tắc cốt lõi và ổn định.

Gói (lại

Lúc đầu, những người tạo ra Reason có hai lựa chọn. Để có JavaScript và bằng cách nào đó làm cho nó tốt hơn. Bằng cách đó, họ cũng cần phải đối phó với gánh nặng lịch sử của nó.

Tuy nhiên, họ đã đi một con đường khác. Họ đã lấy OCaml làm ngôn ngữ trưởng thành với hiệu suất tuyệt vời và sửa đổi nó để nó giống với JavaScript.

React cũng dựa trên các nguyên tắc của OCaml. Đó là lý do tại sao bạn sẽ có được trải nghiệm nhà phát triển tốt hơn khi bạn sử dụng nó với Reason. React in Reason thể hiện một cách an toàn hơn để xây dựng các thành phần React, vì hệ thống loại mạnh đã quay trở lại và bạn không cần phải xử lý hầu hết các vấn đề về JavaScript (di sản).

Cái gì tiếp theo?

Nếu bạn đến từ thế giới JavaScript, bạn sẽ dễ dàng bắt đầu với Reason hơn, do tính tương tự cú pháp của nó với JavaScript. Nếu bạn đã lập trình trong React, nó sẽ dễ dàng hơn cho bạn vì bạn có thể sử dụng tất cả kiến ​​thức về React của mình vì ReasonReact có mô hình tinh thần giống như React và quy trình làm việc rất giống nhau. Điều này có nghĩa là bạn không cần phải bắt đầu lại từ đầu. Bạn học hỏi lý do khi bạn phát triển.

Cách tốt nhất để bắt đầu sử dụng Reason trong các dự án của bạn là tăng dần. Tôi đã đề cập rằng bạn có thể lấy mã Reason và sử dụng nó trong JavaScript và ngược lại. Bạn có thể làm điều tương tự với ReasonReact. Bạn lấy thành phần ReasonReact của mình và sử dụng nó trong ứng dụng React JavaScript của bạn và ngược lại.

Cách tiếp cận gia tăng này đã được lựa chọn bởi các nhà phát triển Facebook đang sử dụng rộng rãi Reason trong việc phát triển ứng dụng Facebook Messenger.

Nếu bạn muốn xây dựng một ứng dụng bằng React in Reason và tìm hiểu những điều cơ bản về Reason một cách thực tế, hãy kiểm tra bài viết khác của tôi, nơi chúng tôi sẽ cùng nhau xây dựng một trò chơi Tic Tac Toe.

Nếu bạn có bất kỳ câu hỏi, chỉ trích, quan sát hoặc mẹo để cải thiện, vui lòng viết bình luận bên dưới hoặc liên hệ với tôi qua Twitter hoặc blog của tôi.