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

แล้วทำไม Ractive.js เหรอ?

ไม่เหมือนกับเครื่องมืออื่น ๆ ที่สร้าง HTML เฉื่อย Ractive จะแปลงเทมเพลตเป็นพิมพ์เขียวสำหรับแอปที่เป็น เชิงโต้ตอบ โดยค่าเริ่มต้น. และในขณะที่ใคร ๆ ก็สามารถโต้แย้งได้อย่างแน่นอนว่าการมีส่วนร่วมของ Ractive นั้นมีวิวัฒนาการมากกว่าการปฏิวัติ แต่คุณค่าของมันก็มีนัยสำคัญ

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

ในบทความนี้เราจะอธิบายขั้นตอนการสร้างแอปการค้นหา Ractive แบบง่ายๆโดยแสดงให้เห็นถึงคุณสมบัติหลักบางประการของ Ractive และวิธีที่ช่วยลดความซับซ้อนของแอปและการพัฒนาเว็บ

Ractive.js คืออะไร?

เดิม Ractive ถูกสร้างขึ้นเพื่อจัดการกับปัญหาการผูกข้อมูลด้วยวิธีที่สวยงามยิ่งขึ้น ในตอนท้ายนั้นจะใช้เทมเพลตและเปลี่ยนเป็นการนำเสนอเสมือนจริงที่มีน้ำหนักเบาของ DOM ดังนั้นเมื่อข้อมูลเปลี่ยนแปลง DOM จริงจะได้รับการอัปเดตอย่างชาญฉลาดและมีประสิทธิภาพ

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

คุณสมบัติหลัก ๆ เช่นการเชื่อมสองทางภาพเคลื่อนไหวและการรองรับ SVG มีให้พร้อมใช้งานและสามารถเพิ่มฟังก์ชันการทำงานที่กำหนดเองได้อย่างง่ายดายผ่านปลั๊กอิน

ในขณะที่เครื่องมือและเฟรมเวิร์กบางอย่างบังคับให้คุณเรียนรู้คำศัพท์ใหม่และจัดโครงสร้างแอปของคุณในลักษณะเฉพาะ Ractive เหมาะสำหรับคุณไม่ใช่วิธีอื่น ๆ นอกจากนี้ยังทำงานร่วมกับห้องสมุดอื่น ๆ ได้เป็นอย่างดี

แอปตัวอย่างของเรา

แอปตัวอย่างของเราจะใช้เพื่อค้นหาไฟล์ ฐานข้อมูล ApeeScape ของนักพัฒนา ขึ้นอยู่กับทักษะ แอพของเราจะมีสองมุมมอง:

• ค้นหา: รายการทักษะพร้อมช่องค้นหาแบบอินไลน์
• ผลลัพธ์: มุมมองทักษะรวมถึงรายชื่อผู้พัฒนา

สำหรับนักพัฒนาแต่ละคนเราจะแสดงชื่อรูปภาพคำอธิบายสั้น ๆ และรายการทักษะ (แต่ละทักษะจะเชื่อมโยงไปยังมุมมองทักษะที่เกี่ยวข้อง)

(หมายเหตุ: ลิงก์ไปยังอินสแตนซ์การทำงานออนไลน์ของแอปพลิเคชันและที่เก็บซอร์สโค้ดมีให้ในตอนท้ายของบทความนี้)

เพื่อรักษาโฟกัสหลักของเราไว้ที่เฟรมเวิร์ก Ractive เราจะใช้การปรับลดความซับซ้อนหลายอย่างที่ปกติควรจะเป็น ไม่ ดำเนินการผลิต:

• ธีมเริ่มต้น เราจะใช้ Bootstrap กับธีมเริ่มต้นในการจัดแต่งทรงผมแทนที่จะปรับแต่งธีมให้เข้ากับสไตล์แอพของคุณ
• การพึ่งพา เราจะเพิ่มการอ้างอิงของเราเป็นสคริปต์แยกที่กำหนดตัวแปรส่วนกลาง (แทนที่จะใช้โมดูล ES6 หรือ CommonJS หรือ AMD พร้อมตัวโหลดที่เหมาะสมสำหรับการพัฒนาและขั้นตอนการสร้างสำหรับการผลิต)
• ข้อมูลคงที่ เราจะใช้ข้อมูลคงที่ที่ฉันเตรียมไว้โดยการขูดหน้าสาธารณะบนไซต์ ApeeScape
• ไม่มีการกำหนดเส้นทางฝั่งไคลเอ็นต์ ซึ่งหมายความว่า URL จะยังคงเหมือนเดิมเมื่อเราสลับระหว่างมุมมอง คุณไม่ควรทำเช่นนั้นสำหรับ SPA อย่างแน่นอนแม้ว่าส่วนประกอบแบบโต้ตอบขนาดเล็กอาจใช้ได้ Ractive ไม่มีการใช้งานเราเตอร์ในตัว แต่สามารถใช้กับเราเตอร์ของบุคคลที่สามได้ดังที่แสดงใน ตัวอย่างนี้ .
• เทมเพลตที่กำหนดภายในแท็กสคริปต์ใน HTML นี่ไม่ใช่ความคิดที่ไม่ดีโดยเฉพาะอย่างยิ่งสำหรับแอปพลิเคชันขนาดเล็กและมีข้อดีบางประการ (ทำได้ง่ายและคุณสามารถประมวลผลเทมเพลตฝั่งไคลเอ็นต์เหล่านี้ร่วมกับเทมเพลตฝั่งเซิร์ฟเวอร์ของคุณได้เช่นสำหรับการทำให้เป็นสากล) แต่สำหรับแอปที่ใหญ่กว่าคุณจะได้รับประโยชน์จากการคอมไพล์ล่วงหน้า (a.k.a. , การแยกวิเคราะห์ล่วงหน้า เทมเพลตสำหรับการแสดง JS ภายใน

มาเริ่มต้นกับ Web Apps กันเลย

ตกลงตามที่กล่าวมาเริ่มสร้างกันเลย แอป . เราจะทำในลักษณะซ้ำ ๆ โดยเพิ่มคุณสมบัติที่เล็กลงทีละรายการและสำรวจแนวคิดเมื่อเราพบเจอ

เริ่มต้นด้วยการสร้างโฟลเดอร์ที่มีสองไฟล์ภายใน: index.html และ script.js. แอพของเราจะเรียบง่ายมากและจะทำงานจาก file:// โปรโตคอลเพื่อหลีกเลี่ยงความจำเป็นในการเริ่มต้นเซิร์ฟเวอร์การพัฒนา (แม้ว่าคุณจะทำได้หากต้องการ)

หน้าค้นหา

เราจะเริ่มต้นด้วยการใช้งานหน้าการค้นหาที่ผู้ใช้สามารถเลือกทักษะที่จะค้นหานักพัฒนาที่ตรงกันในฐานข้อมูล ApeeScape

HTML โครงกระดูก

เริ่มต้นด้วยหน้า HTML ที่ไม่สำคัญนี้:

กำลังโหลดการค้นหา ApeeScape ...

แล้วความมหัศจรรย์ของที่นี่คืออะไร? จริงๆแล้วมันค่อนข้างง่าย ฉันเพิ่มเนื้อหาบางส่วน (เป็นแถบความคืบหน้าแบบเคลื่อนไหว Bootstrap แต่อาจเป็น GIF แบบเคลื่อนไหวหรืออะไรก็ได้) ตรงไปยังองค์ประกอบรากของเรา ฉันคิดว่ามันค่อนข้างฉลาด - ในขณะที่สคริปต์ของเรากำลังโหลดผู้ใช้จะเห็นตัวบ่งชี้การโหลด (เนื่องจากไม่มีการพึ่งพา JavaScript ใด ๆ จึงสามารถแสดงได้ทันที) อย่างไรก็ตามทันทีที่เริ่มต้นแอป Ractive Ractive จะเขียนทับเนื้อหาขององค์ประกอบราก (และลบภาพเคลื่อนไหวที่โหลดไว้ล่วงหน้า) ด้วยเทมเพลตที่แสดงผล ด้วยวิธีนี้เราสามารถบรรลุผลนี้ได้เพียงแค่ส่วนของ HTML คงที่และตรรกะ 0 บรรทัด ฉันคิดว่ามันเจ๋งมาก

สรุป

ลองนึกถึงสิ่งที่เราประสบความสำเร็จที่นี่และเราทำสำเร็จได้ง่ายเพียงใด เรามีแอพที่ค่อนข้างครอบคลุม: มันแสดงรายการทักษะช่วยให้ค้นหาผ่านพวกเขาได้อย่างรวดเร็ว (และยังรองรับการอัปเดตรายการทักษะแบบโต้ตอบตามประเภทผู้ใช้ในช่องค้นหา) ช่วยให้สามารถนำทางไปยังทักษะเฉพาะและย้อนกลับและรายการ นักพัฒนาสำหรับแต่ละทักษะที่เลือก นอกจากนี้เราสามารถคลิกที่ทักษะใด ๆ ที่แสดงโดยผู้พัฒนาใด ๆ เพื่อนำเราไปยังรายชื่อนักพัฒนาที่มีทักษะนั้น และทั้งหมดนั้นมี HTML น้อยกว่า 80 บรรทัดและ JavaScript น้อยกว่า 40 บรรทัด ในความคิดของฉันมันค่อนข้างน่าประทับใจและพูดถึงพลังความสง่างามและความเรียบง่ายของ Ractive

แอปเวอร์ชันที่ใช้งานได้มีให้บริการทางออนไลน์ ที่นี่ และซอร์สโค้ดแบบเต็มเป็นแบบสาธารณะและพร้อมใช้งาน ที่นี่ .

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