ในภูมิทัศน์ที่แพร่หลายอย่างรวดเร็วในปัจจุบันของ JavaScript เฟรมเวิร์กและไลบรารีการเลือกอันที่คุณต้องการเป็นฐานการพัฒนาของคุณอาจเป็นเรื่องที่ท้าทาย ท้ายที่สุดแล้วเมื่อคุณเดินไปตามเส้นทางของการใช้เฟรมเวิร์กเฉพาะการย้ายรหัสของคุณไปใช้งานอื่นเป็นงานที่ไม่สำคัญซึ่งคุณอาจไม่มีเวลาหรืองบประมาณในการดำเนินการ
แล้วทำไม Ractive.js เหรอ?
ไม่เหมือนกับเครื่องมืออื่น ๆ ที่สร้าง HTML เฉื่อย Ractive จะแปลงเทมเพลตเป็นพิมพ์เขียวสำหรับแอปที่เป็น เชิงโต้ตอบ โดยค่าเริ่มต้น. และในขณะที่ใคร ๆ ก็สามารถโต้แย้งได้อย่างแน่นอนว่าการมีส่วนร่วมของ Ractive นั้นมีวิวัฒนาการมากกว่าการปฏิวัติ แต่คุณค่าของมันก็มีนัยสำคัญ
สิ่งที่ทำให้ Ractive มีประโยชน์มากก็คือมันมีความสามารถที่ทรงพลัง แต่ทำในลักษณะที่เรียบง่ายสำหรับนักพัฒนาที่จะใช้ ยิ่งไปกว่านั้นมันค่อนข้างหรูหรารวดเร็วไม่สร้างความรำคาญและมีขนาดเล็ก
ในบทความนี้เราจะอธิบายขั้นตอนการสร้างแอปการค้นหา Ractive แบบง่ายๆโดยแสดงให้เห็นถึงคุณสมบัติหลักบางประการของ Ractive และวิธีที่ช่วยลดความซับซ้อนของแอปและการพัฒนาเว็บ
เดิม Ractive ถูกสร้างขึ้นเพื่อจัดการกับปัญหาการผูกข้อมูลด้วยวิธีที่สวยงามยิ่งขึ้น ในตอนท้ายนั้นจะใช้เทมเพลตและเปลี่ยนเป็นการนำเสนอเสมือนจริงที่มีน้ำหนักเบาของ DOM ดังนั้นเมื่อข้อมูลเปลี่ยนแปลง DOM จริงจะได้รับการอัปเดตอย่างชาญฉลาดและมีประสิทธิภาพ
แต่ในไม่ช้าก็เห็นได้ชัดว่าแนวทางและโครงสร้างพื้นฐานที่ใช้โดย Ractive สามารถใช้เพื่อทำสิ่งอื่น ๆ ได้อย่างมีประสิทธิภาพมากขึ้นเช่นกัน ตัวอย่างเช่นสามารถดูแลสิ่งต่างๆโดยอัตโนมัติเช่นการนำตัวจัดการเหตุการณ์กลับมาใช้ใหม่และยกเลิกการผูกมัดโดยอัตโนมัติเมื่อไม่จำเป็นอีกต่อไป การมอบหมายงานกลายเป็นสิ่งที่ไม่จำเป็น เช่นเดียวกับการผูกข้อมูลวิธีนี้จะช่วยป้องกันไม่ให้โค้ดดูเทอะทะเมื่อแอปเติบโตขึ้น
คุณสมบัติหลัก ๆ เช่นการเชื่อมสองทางภาพเคลื่อนไหวและการรองรับ SVG มีให้พร้อมใช้งานและสามารถเพิ่มฟังก์ชันการทำงานที่กำหนดเองได้อย่างง่ายดายผ่านปลั๊กอิน
ในขณะที่เครื่องมือและเฟรมเวิร์กบางอย่างบังคับให้คุณเรียนรู้คำศัพท์ใหม่และจัดโครงสร้างแอปของคุณในลักษณะเฉพาะ Ractive เหมาะสำหรับคุณไม่ใช่วิธีอื่น ๆ นอกจากนี้ยังทำงานร่วมกับห้องสมุดอื่น ๆ ได้เป็นอย่างดี
แอปตัวอย่างของเราจะใช้เพื่อค้นหาไฟล์ ฐานข้อมูล ApeeScape ของนักพัฒนา ขึ้นอยู่กับทักษะ แอพของเราจะมีสองมุมมอง:
สำหรับนักพัฒนาแต่ละคนเราจะแสดงชื่อรูปภาพคำอธิบายสั้น ๆ และรายการทักษะ (แต่ละทักษะจะเชื่อมโยงไปยังมุมมองทักษะที่เกี่ยวข้อง)
(หมายเหตุ: ลิงก์ไปยังอินสแตนซ์การทำงานออนไลน์ของแอปพลิเคชันและที่เก็บซอร์สโค้ดมีให้ในตอนท้ายของบทความนี้)
เพื่อรักษาโฟกัสหลักของเราไว้ที่เฟรมเวิร์ก Ractive เราจะใช้การปรับลดความซับซ้อนหลายอย่างที่ปกติควรจะเป็น ไม่ ดำเนินการผลิต:
ตกลงตามที่กล่าวมาเริ่มสร้างกันเลย แอป . เราจะทำในลักษณะซ้ำ ๆ โดยเพิ่มคุณสมบัติที่เล็กลงทีละรายการและสำรวจแนวคิดเมื่อเราพบเจอ
เริ่มต้นด้วยการสร้างโฟลเดอร์ที่มีสองไฟล์ภายใน: index.html
และ script.js
. แอพของเราจะเรียบง่ายมากและจะทำงานจาก file://
โปรโตคอลเพื่อหลีกเลี่ยงความจำเป็นในการเริ่มต้นเซิร์ฟเวอร์การพัฒนา (แม้ว่าคุณจะทำได้หากต้องการ)
เราจะเริ่มต้นด้วยการใช้งานหน้าการค้นหาที่ผู้ใช้สามารถเลือกทักษะที่จะค้นหานักพัฒนาที่ตรงกันในฐานข้อมูล ApeeScape
เริ่มต้นด้วยหน้า HTML ที่ไม่สำคัญนี้:
กำลังโหลดการค้นหา ApeeScape ...แล้วความมหัศจรรย์ของที่นี่คืออะไร? จริงๆแล้วมันค่อนข้างง่าย ฉันเพิ่มเนื้อหาบางส่วน (เป็นแถบความคืบหน้าแบบเคลื่อนไหว Bootstrap แต่อาจเป็น GIF แบบเคลื่อนไหวหรืออะไรก็ได้) ตรงไปยังองค์ประกอบรากของเรา ฉันคิดว่ามันค่อนข้างฉลาด - ในขณะที่สคริปต์ของเรากำลังโหลดผู้ใช้จะเห็นตัวบ่งชี้การโหลด (เนื่องจากไม่มีการพึ่งพา JavaScript ใด ๆ จึงสามารถแสดงได้ทันที) อย่างไรก็ตามทันทีที่เริ่มต้นแอป Ractive Ractive จะเขียนทับเนื้อหาขององค์ประกอบราก (และลบภาพเคลื่อนไหวที่โหลดไว้ล่วงหน้า) ด้วยเทมเพลตที่แสดงผล ด้วยวิธีนี้เราสามารถบรรลุผลนี้ได้เพียงแค่ส่วนของ HTML คงที่และตรรกะ 0 บรรทัด ฉันคิดว่ามันเจ๋งมาก
ลองนึกถึงสิ่งที่เราประสบความสำเร็จที่นี่และเราทำสำเร็จได้ง่ายเพียงใด เรามีแอพที่ค่อนข้างครอบคลุม: มันแสดงรายการทักษะช่วยให้ค้นหาผ่านพวกเขาได้อย่างรวดเร็ว (และยังรองรับการอัปเดตรายการทักษะแบบโต้ตอบตามประเภทผู้ใช้ในช่องค้นหา) ช่วยให้สามารถนำทางไปยังทักษะเฉพาะและย้อนกลับและรายการ นักพัฒนาสำหรับแต่ละทักษะที่เลือก นอกจากนี้เราสามารถคลิกที่ทักษะใด ๆ ที่แสดงโดยผู้พัฒนาใด ๆ เพื่อนำเราไปยังรายชื่อนักพัฒนาที่มีทักษะนั้น และทั้งหมดนั้นมี HTML น้อยกว่า 80 บรรทัดและ JavaScript น้อยกว่า 40 บรรทัด ในความคิดของฉันมันค่อนข้างน่าประทับใจและพูดถึงพลังความสง่างามและความเรียบง่ายของ Ractive
แอปเวอร์ชันที่ใช้งานได้มีให้บริการทางออนไลน์ ที่นี่ และซอร์สโค้ดแบบเต็มเป็นแบบสาธารณะและพร้อมใช้งาน ที่นี่ .
แน่นอนว่าเราแทบจะไม่ได้ขีดข่วนพื้นผิวในบทความนี้เกี่ยวกับสิ่งที่เป็นไปได้ด้วยกรอบงาน Ractive หากคุณชอบสิ่งที่คุณเห็นจนถึงตอนนี้เราขอแนะนำให้คุณเริ่มต้นใช้งาน การตั้งค่า 60 วินาทีของ Ractive และเริ่มสำรวจด้วยตัวคุณเองทั้งหมดที่ Ractive มีให้