Psst! นี่คือเหตุผลที่ ReasonReact เป็นวิธีที่ดีที่สุดในการเขียน React

คุณใช้ React เพื่อสร้างส่วนต่อประสานกับผู้ใช้หรือไม่? ฉันก็เช่นกัน และตอนนี้คุณจะได้เรียนรู้ว่าทำไมคุณควรเขียนแอปพลิเคชันตอบโต้ของคุณโดยใช้ ReasonML

React เป็นวิธีเขียนอินเทอร์เฟซผู้ใช้ที่ยอดเยี่ยม แต่เราสามารถทำให้มันเย็นลงได้หรือไม่? ดีขึ้นหรือไม่

เพื่อให้ดีขึ้นเราต้องระบุปัญหาก่อน ดังนั้นปัญหาหลักของ React เป็นไลบรารี JavaScript คืออะไร

ตอบโต้ไม่ได้รับการพัฒนาเริ่มแรกสำหรับ JavaScript

หากคุณพิจารณาอย่างใกล้ชิดถึงการตอบสนองคุณจะเห็นว่าหลักการสำคัญบางประการนั้นเป็นกฎของ JavaScript พูดคุยเกี่ยวกับความไม่สามารถเปลี่ยนแปลงได้หลักการการเขียนโปรแกรมใช้งานได้และระบบพิมพ์โดยเฉพาะ

Immutability เป็นหนึ่งในหลักการสำคัญของ React คุณไม่ต้องการที่จะกลายเป็นอุปกรณ์ประกอบฉากหรือรัฐของคุณเพราะถ้าคุณทำคุณอาจได้รับผลกระทบที่คาดเดาไม่ได้ ใน JavaScript เราไม่มีความไม่สามารถเปลี่ยนแปลงได้ทันที เรากำลังรักษาโครงสร้างข้อมูลของเราไม่เปลี่ยนรูปแบบโดยการประชุมหรือเราใช้ห้องสมุดเช่น immutableJS เพื่อให้บรรลุ

React นั้นขึ้นอยู่กับหลักการของฟังก์ชั่นการเขียนโปรแกรมเนื่องจากแอพพลิเคชั่นเป็นองค์ประกอบของฟังก์ชั่น แม้ว่า JavaScript มีคุณสมบัติเหล่านี้บางอย่างเช่นฟังก์ชั่นชั้นหนึ่ง แต่ไม่ใช่ภาษาโปรแกรมที่ใช้งานได้ เมื่อเราต้องการเขียนโค้ดการประกาศที่ดีเราจำเป็นต้องใช้ไลบรารีภายนอกเช่น Lodash / fp หรือ Ramda

แล้วเกิดอะไรขึ้นกับระบบประเภท? ในการตอบสนองเรามี PropTypes เราใช้มันเพื่อเลียนแบบประเภทใน JavaScript เนื่องจากไม่ใช่ภาษาที่พิมพ์แบบคงที่เอง เพื่อใช้ประโยชน์จากการพิมพ์แบบสแตติกขั้นสูงเราจำเป็นต้องใช้การอ้างอิงภายนอกเช่น Flow และ TypeScript อีกครั้ง

ตอบสนองและเปรียบเทียบ JavaScript

อย่างที่คุณเห็น JavaScript ไม่เข้ากันกับหลักการหลักของ React

มีภาษาโปรแกรมอื่นที่เข้ากันได้กับ React มากกว่า JavaScript หรือไม่

โชคดีที่เรามี ReasonML

ด้วยเหตุผลเราไม่สามารถเปลี่ยนแปลงได้ออกจากกล่อง เนื่องจากมันใช้ OCaml ซึ่งเป็นภาษาการเขียนโปรแกรมที่ใช้งานได้เราจึงมีคุณสมบัติดังกล่าวในภาษานั้นเช่นกัน เหตุผลยังทำให้เรามีระบบประเภทที่แข็งแกร่งด้วยตัวเอง

การตอบสนอง, จาวาสคริปต์และการเปรียบเทียบเหตุผล

เหตุผลเข้ากันได้กับหลักการหลักของ React

เหตุผล

มันไม่ใช่ภาษาใหม่ มันเป็นทางเลือกที่เหมือนไวยากรณ์และ toolchain สำหรับ OCaml ซึ่งเป็นภาษาโปรแกรมที่ใช้งานได้ซึ่งมีมานานกว่า 20 ปี เหตุผลที่สร้างโดยนักพัฒนา Facebook ที่ใช้ OCaml ในโครงการของพวกเขา (Flow, Infer)

เหตุผลที่มีไวยากรณ์คล้าย C ทำให้ OCaml เข้าถึงได้สำหรับผู้ที่มาจากภาษาหลักเช่น JavaScript หรือ Java มันให้เอกสารที่ดีกว่า (เทียบกับ OCaml) และชุมชนที่เติบโตรอบ ๆ มัน นอกจากนี้ยังทำให้การรวมกับ codebase JavaScript ที่มีอยู่ของคุณง่ายขึ้น

OCaml ทำหน้าที่เป็นภาษาสำรองสำหรับเหตุผล เหตุผลมีความหมายเช่นเดียวกับ OCaml - เฉพาะไวยากรณ์แตกต่างกัน ซึ่งหมายความว่าคุณสามารถเขียน OCaml โดยใช้ไวยากรณ์เหมือน JavaScript ของเหตุผล ดังนั้นคุณสามารถใช้ประโยชน์จากคุณสมบัติที่ยอดเยี่ยมของ OCaml เช่นระบบประเภทที่แข็งแกร่งและการจับคู่รูปแบบ

ลองดูตัวอย่างของไวยากรณ์ของเหตุผล

ให้ fizzbuzz = (i) =>
  สวิตช์ (i mod 3, i mod 5) {
  | (0, 0) => "FizzBuzz"
  | (0, _) => "Fizz"
  | (_, 0) => "Buzz"
  | _ => string_of_int (i)
  };
สำหรับ (ฉันใน 1 ถึง 100) {
  Js.log (FizzBuzz (i))
};

แม้ว่าเราจะใช้การจับคู่รูปแบบในตัวอย่างนี้มันก็ยังค่อนข้างคล้ายคลึงกับ JavaScript ใช่ไหม

อย่างไรก็ตามภาษาที่ใช้ได้เฉพาะสำหรับเบราว์เซอร์ยังคงเป็น JavaScript ซึ่งหมายความว่าเราจำเป็นต้องรวบรวมมัน

BuckleScript

หนึ่งในคุณสมบัติที่มีประสิทธิภาพของเหตุผลคือคอมไพเลอร์ BuckleScript ซึ่งใช้รหัสเหตุผลของคุณและรวบรวมไปยัง JavaScript ที่สามารถอ่านได้และมีประสิทธิภาพด้วยการกำจัดรหัสที่ยอดเยี่ยม คุณจะขอบคุณความสามารถในการอ่านหากคุณกำลังทำงานกับทีมที่ทุกคนไม่คุ้นเคยกับเหตุผลเพราะพวกเขาจะยังสามารถอ่านรหัส JavaScript ที่คอมไพล์ได้

ความคล้ายคลึงกันกับ JavaScript นั้นใกล้เคียงกันมากและบางส่วนของเหตุผลไม่จำเป็นต้องมีการเปลี่ยนแปลงโดยคอมไพเลอร์เลย ดังนั้นคุณสามารถเพลิดเพลินกับประโยชน์ของภาษาที่พิมพ์แบบคงที่โดยไม่มีการเปลี่ยนแปลงโค้ดใด ๆ

ให้เพิ่ม = (a, b) => a + b;
เพิ่ม (6, 9);

นี่เป็นรหัสที่ถูกต้องทั้งในเหตุผลและ JavaScript

BuckleScript มาพร้อมกับสี่ไลบรารี: ไลบรารีมาตรฐานที่เรียกว่า Belt (ไลบรารีมาตรฐาน OCaml ไม่เพียงพอ) และเชื่อมโยงกับ JavaScript, Node.js และ DOM APIs

เนื่องจาก BuckleScript ขึ้นอยู่กับคอมไพเลอร์ OCaml คุณจะได้รับการรวบรวมอย่างรวดเร็วที่เร็วกว่า Babel และเร็วกว่า TypeScript หลายเท่า

มารวบรวม FizzBuzz อัลกอริทึมของเราที่เขียนด้วยเหตุผลจาวาสคริปต์

การรวบรวมรหัสเหตุผลของ JavaScript ผ่าน BuckleScript

อย่างที่คุณเห็นรหัส JavaScript ที่อ่านได้นั้นสามารถอ่านได้ ดูเหมือนว่ามันถูกเขียนโดยนักพัฒนา JavaScript

เหตุผลไม่เพียง แต่รวบรวม JavaScript เพื่อ แต่ดั้งเดิมและ bytecode เช่นกัน ดังนั้นคุณสามารถเขียนแอปพลิเคชันเดียวโดยใช้เหตุผลไวยากรณ์และสามารถเรียกใช้ในเบราว์เซอร์บนโทรศัพท์ MacOS, Android และ iOS มีเกมชื่อ Gravitron โดย Jared Forsyth ซึ่งเขียนด้วยเหตุผลและสามารถทำงานได้บนทุกแพลตฟอร์มที่ฉันเพิ่งพูดถึง

การทำงานร่วมกันของ JavaScript

BuckleScript ยังให้การทำงานร่วมกันกับ JavaScript แก่เรา ไม่เพียง แต่คุณสามารถวางรหัส JavaScript ที่ใช้งานได้ในฐานเหตุผลของคุณ แต่รหัสเหตุผลของคุณสามารถโต้ตอบกับ JavaScript ได้ ซึ่งหมายความว่าคุณสามารถรวมรหัสเหตุผลเข้ากับ codebase JavaScript ที่คุณมีอยู่ได้อย่างง่ายดาย นอกจากนี้คุณสามารถใช้แพคเกจ JavaScript ทั้งหมดจากระบบนิเวศ NPM ในรหัสเหตุผลของคุณ ตัวอย่างเช่นคุณสามารถรวม Flow, TypeScript และเหตุผลเข้าด้วยกันในโครงการเดียว

อย่างไรก็ตามมันไม่ง่ายอย่างนั้น ในการใช้ไลบรารี JavaScript หรือรหัสในเหตุผลคุณต้องย้ายพอร์ตไปยังเหตุผลก่อนผ่านการเชื่อมโยงเหตุผล กล่าวอีกนัยหนึ่งคุณต้องมีประเภทสำหรับรหัส JavaScript ที่ไม่ได้พิมพ์ของคุณเพื่อให้สามารถใช้ประโยชน์จากระบบประเภทที่แข็งแกร่งของเหตุผล

เมื่อใดก็ตามที่คุณต้องการใช้ไลบรารี JavaScript ในรหัสเหตุผลของคุณให้ตรวจสอบว่าไลบรารีได้รับการย้ายไปยังเหตุผลแล้วหรือไม่โดยเรียกดูฐานข้อมูลเหตุผลแพ็คเกจดัชนี (Redex) เป็นเว็บไซต์ที่รวบรวมห้องสมุดและเครื่องมือต่าง ๆ ที่เขียนในห้องสมุดเหตุผลและ JavaScript ด้วยการผูกเหตุผล หากคุณพบห้องสมุดของคุณที่นั่นคุณสามารถติดตั้งมันเพื่ออ้างอิงและใช้ในแอปพลิเคชันเหตุผลของคุณ

อย่างไรก็ตามหากคุณไม่พบห้องสมุดของคุณคุณจะต้องเขียนเหตุผลผูกมัดตัวเอง หากคุณเพิ่งเริ่มต้นด้วยเหตุผลโปรดจำไว้ว่าการเขียนการผูกไม่ใช่สิ่งที่คุณต้องการเริ่มต้นเนื่องจากเป็นสิ่งที่ท้าทายมากในระบบนิเวศของเหตุผล

โชคดีที่ฉันเพิ่งเขียนโพสต์เกี่ยวกับการเขียนการผูกเหตุผลโปรดติดตาม!

เมื่อคุณต้องการฟังก์ชั่นบางอย่างจากไลบรารี JavaScript คุณไม่จำเป็นต้องเขียนเหตุผลการเชื่อมโยงสำหรับไลบรารีโดยรวม คุณสามารถทำได้เฉพาะฟังก์ชั่นหรือส่วนประกอบที่คุณต้องใช้

ReasonReact

บทความนี้เกี่ยวกับการเขียน React in Reason ซึ่งคุณสามารถทำได้ด้วยการขอบคุณ ReasonReact library

บางทีคุณอาจกำลังคิดว่า "ฉันยังไม่รู้ว่าทำไมฉันจึงควรใช้การตอบโต้ด้วยเหตุผล"

เราได้พูดถึงเหตุผลหลักแล้ว - เหตุผลเข้ากันได้กับ React มากกว่า JavaScript ทำไมมันเข้ากันได้มากขึ้น? เนื่องจาก React ได้รับการพัฒนาด้วยเหตุผลหรือมากกว่านั้นอย่างแม่นยำสำหรับ OCaml

ถนนสู่เหตุผล

ต้นแบบตัวแรกของ React ได้รับการพัฒนาโดย Facebook และเขียนใน Standard Meta Language (StandardML) ลูกพี่ลูกน้องของ OCaml จากนั้นมันก็ถูกย้ายไปที่ OCaml ตอบสนองถูกคัดลอกไปยัง JavaScript

เนื่องจากทั้งเว็บใช้ JavaScript และอาจไม่ฉลาดที่จะพูดว่า "ตอนนี้เรากำลังสร้าง UI ใน OCaml" และใช้งานได้ - การตอบสนองใน JavaScript ได้รับการยอมรับอย่างกว้างขวาง

ดังนั้นเราจึงคุ้นเคยกับ React เป็นห้องสมุด JavaScript ทำปฏิกิริยาร่วมกับไลบรารีและภาษาอื่น ๆ - Elm, Redux, Recompose, Ramda และ PureScript - การเขียนโปรแกรมที่ใช้งานได้ใน JavaScript ได้รับความนิยม และด้วยการเพิ่มขึ้นของ Flow และ TypeScript การพิมพ์แบบสแตติกจึงเป็นที่นิยมเช่นกัน เป็นผลให้กระบวนทัศน์การเขียนโปรแกรมการทำงานกับประเภทคงที่กลายเป็นกระแสหลักในโลกของส่วนหน้า

ในปี 2559 บลูมเบิร์กได้พัฒนาและเปิดใช้ BuckleScript ซึ่งเป็นคอมไพเลอร์ที่แปลง OCaml เป็น JavaScript สิ่งนี้ทำให้พวกเขาสามารถเขียนรหัสที่ปลอดภัยบน front-end โดยใช้ระบบที่แข็งแกร่งของ OCaml พวกเขาใช้คอมไพเลอร์ OCaml ที่ได้รับการปรับให้เหมาะสมและรวดเร็วที่สุดและสลับการสร้างโค้ดเนทีฟแบ็กเอนด์สำหรับ JavaScript ที่สร้างขึ้น

ความนิยมของการเขียนโปรแกรมการทำงานพร้อมกับการเปิดตัว BuckleScript สร้างบรรยากาศที่เหมาะสำหรับ Facebook เพื่อกลับไปที่แนวคิดดั้งเดิมของ React ซึ่งเริ่มเขียนด้วยภาษา ML

ReasonReact

พวกเขาใช้ความหมายของ OCaml และไวยากรณ์ JavaScript และสร้างเหตุผล พวกเขายังสร้างเครื่องห่อเหตุผลรอบ ๆ React - ReasonReact library - ด้วยฟังก์ชันเพิ่มเติมเช่นการห่อหุ้มหลักการ Redux ในองค์ประกอบ stateful โดยการทำเช่นนั้นพวกเขากลับไปทำปฏิกิริยากับรากดั้งเดิมของมัน

พลังของการตอบสนองด้วยเหตุผล

เมื่อ React เข้ามาใน JavaScript เราได้ปรับ JavaScript ให้ตอบสนองความต้องการของ React โดยแนะนำไลบรารีและเครื่องมือต่างๆ สิ่งนี้ยังหมายถึงการพึ่งพามากขึ้นสำหรับโครงการของเรา ไม่ต้องพูดถึงว่าห้องสมุดเหล่านี้ยังอยู่ในระหว่างการพัฒนาและมีการเปลี่ยนแปลงอย่างต่อเนื่อง ดังนั้นคุณต้องรักษาความไว้วางใจเหล่านี้ด้วยความระมัดระวังในโครงการของคุณ

สิ่งนี้เพิ่มความซับซ้อนอีกระดับหนึ่งให้กับการพัฒนา JavaScript

แอปพลิเคชัน React ทั่วไปของคุณจะมีการขึ้นต่อกันอย่างน้อย:

  • การพิมพ์แบบคงที่ - Flow / TypeScript
  • immutability - ไม่เปลี่ยนรูป JS
  • การกำหนดเส้นทาง - ReactRouter
  • การจัดรูปแบบ - Prettier
  • ผ้าสำลี - ESLint
  • ฟังก์ชั่นผู้ช่วย - Ramda / Lodash

ตอนนี้มาแลกเปลี่ยน JavaScript React สำหรับ ReasonReact

เรายังต้องการการพึ่งพาเหล่านี้ทั้งหมดหรือไม่?

  • พิมพ์คงที่ - ในตัว
  • เปลี่ยนแปลงไม่ได้ - ในตัว
  • เส้นทาง - ในตัว
  • การจัดรูปแบบ - ในตัว
  • ผ้าสำลี - ในตัว
  • ฟังก์ชั่นผู้ช่วย - ในตัว

คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับคุณสมบัติในตัวเหล่านี้ในโพสต์อื่นของฉัน

ในแอปพลิเคชัน ReasonReact คุณไม่จำเป็นต้องพึ่งพาสิ่งเหล่านี้และการพึ่งพาอื่น ๆ มากมายเนื่องจากคุณสมบัติที่สำคัญมากมายที่ทำให้การพัฒนาของคุณง่ายขึ้นรวมอยู่ในภาษาของตัวเองแล้ว ดังนั้นการดูแลรักษาบรรจุภัณฑ์ของคุณจะกลายเป็นเรื่องง่ายขึ้นและคุณจะไม่เพิ่มความซับซ้อนในช่วงเวลาหนึ่ง

ขอบคุณ OCaml ซึ่งมีอายุมากกว่า 20 ปี เป็นภาษาที่ครบกำหนดพร้อมกับหลักการสำคัญทั้งหมดที่มีและมีเสถียรภาพ

สรุป

ในตอนแรกผู้สร้างเหตุผลมีสองตัวเลือก เพื่อใช้ JavaScript และทำให้ดีขึ้น ด้วยการทำเช่นนั้นพวกเขาจำเป็นต้องจัดการกับภาระทางประวัติศาสตร์ด้วย

อย่างไรก็ตามพวกเขาไปเส้นทางที่แตกต่าง พวกเขาใช้ภาษา OCaml เป็นภาษาที่สมบูรณ์พร้อมประสิทธิภาพที่ยอดเยี่ยมและปรับเปลี่ยนให้คล้ายกับ JavaScript

ปฏิกิริยาจะขึ้นอยู่กับหลักการของ OCaml นั่นเป็นเหตุผลที่คุณจะได้รับประสบการณ์ที่ดีขึ้นของนักพัฒนาเมื่อคุณใช้มันด้วยเหตุผล React in Reason แสดงถึงวิธีที่ปลอดภัยกว่าในการสร้างส่วนประกอบ React เนื่องจากระบบประเภทที่แข็งแกร่งได้กลับมาแล้วและคุณไม่จำเป็นต้องจัดการกับปัญหา JavaScript (ดั้งเดิม) ส่วนใหญ่

อะไรต่อไป?

หากคุณมาจากโลกแห่ง JavaScript คุณจะสามารถเริ่มต้นได้ง่ายขึ้นด้วยเหตุผลเนื่องจากความคล้ายคลึงกันทางไวยากรณ์กับ JavaScript หากคุณกำลังเขียนโปรแกรมใน React มันจะง่ายยิ่งขึ้นสำหรับคุณเนื่องจากคุณสามารถใช้ความรู้ทั้งหมดของ React เพราะ ReasonReact มีรูปแบบจิตเดียวกับ React และเวิร์กโฟลว์ที่คล้ายกันมาก ซึ่งหมายความว่าคุณไม่จำเป็นต้องเริ่มจากศูนย์ คุณจะได้เรียนรู้เหตุผลขณะพัฒนา

วิธีที่ดีที่สุดในการเริ่มใช้เหตุผลในโครงการของคุณคือการทำแบบเพิ่มหน่วย ฉันได้กล่าวแล้วว่าคุณสามารถใช้รหัสเหตุผลและใช้ใน JavaScript และวิธีอื่น ๆ คุณสามารถทำสิ่งเดียวกันกับ ReasonReact คุณใช้ส่วนประกอบ ReasonReact ของคุณและใช้ในแอปพลิเคชัน React JavaScript ของคุณและในทางกลับกัน

วิธีการที่เพิ่มขึ้นนี้ได้รับการคัดเลือกโดยนักพัฒนา Facebook ที่ใช้เหตุผลอย่างกว้างขวางในการพัฒนาแอพ Facebook Messenger

หากคุณต้องการสร้างแอปพลิเคชันโดยใช้ React in Reason และเรียนรู้พื้นฐานของ Reason ในทางปฏิบัติให้ตรวจสอบบทความอื่นของฉันที่เราจะสร้างเกม Tic Tac Toe ด้วยกัน

หากคุณมีคำถามวิจารณ์วิจารณ์หรือเคล็ดลับในการปรับปรุงอย่าลังเลที่จะเขียนความคิดเห็นด้านล่างหรือติดต่อฉันผ่านทาง Twitter หรือบล็อกของฉัน