portaldacalheta.pt
  • หลัก
  • การจัดการวิศวกรรม
  • บุคลากรและทีมงานของผลิตภัณฑ์
  • อื่น ๆ
  • นวัตกรรม
ส่วนหน้าของเว็บ

Ractive.js - เว็บแอพที่ทำได้ง่าย



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

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



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



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



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

Ractive.js และเว็บแอป



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 มีให้

พิมพ์เขียวการจัดการโครงการตอนที่ 2: การเปรียบเทียบที่ครอบคลุมของ Waterfall, DAD, SAFe, LeSS และ [email protected]

ว่องไว

พิมพ์เขียวการจัดการโครงการตอนที่ 2: การเปรียบเทียบที่ครอบคลุมของ Waterfall, DAD, SAFe, LeSS และ [email protected]
Fastlane: iOS Automation บน Cruise Control

Fastlane: iOS Automation บน Cruise Control

มือถือ

โพสต์ยอดนิยม
แหล่งข้อมูลสำหรับธุรกิจขนาดเล็กสำหรับ COVID-19: เงินกู้เงินช่วยเหลือและสินเชื่อ
แหล่งข้อมูลสำหรับธุรกิจขนาดเล็กสำหรับ COVID-19: เงินกู้เงินช่วยเหลือและสินเชื่อ
วิธีออกแบบประสบการณ์ที่ยอดเยี่ยมสำหรับอินเทอร์เน็ตในทุกสิ่ง
วิธีออกแบบประสบการณ์ที่ยอดเยี่ยมสำหรับอินเทอร์เน็ตในทุกสิ่ง
กลยุทธ์การสื่อสารที่มีประสิทธิภาพสำหรับนักออกแบบ
กลยุทธ์การสื่อสารที่มีประสิทธิภาพสำหรับนักออกแบบ
เรียนรู้ Markdown: เครื่องมือการเขียนสำหรับนักพัฒนาซอฟต์แวร์
เรียนรู้ Markdown: เครื่องมือการเขียนสำหรับนักพัฒนาซอฟต์แวร์
แนวโน้มต่อไปนี้: การแสดงความเคารพกับการลอกเลียนแบบการออกแบบ
แนวโน้มต่อไปนี้: การแสดงความเคารพกับการลอกเลียนแบบการออกแบบ
 
คู่มือสไตล์ Sass: บทช่วยสอน Sass เกี่ยวกับวิธีการเขียนโค้ด CSS ที่ดีขึ้น
คู่มือสไตล์ Sass: บทช่วยสอน Sass เกี่ยวกับวิธีการเขียนโค้ด CSS ที่ดีขึ้น
ทำลายกระบวนการคิดเชิงออกแบบ
ทำลายกระบวนการคิดเชิงออกแบบ
การออกแบบเว็บไซต์ CMS: คู่มือการใช้งานเนื้อหาแบบไดนามิก
การออกแบบเว็บไซต์ CMS: คู่มือการใช้งานเนื้อหาแบบไดนามิก
ทำคณิตศาสตร์: การปรับขนาดแอปพลิเคชันไมโครเซอร์วิสด้วย Orchestrators
ทำคณิตศาสตร์: การปรับขนาดแอปพลิเคชันไมโครเซอร์วิสด้วย Orchestrators
การปฏิวัติหุ่นยนต์เชิงพาณิชย์ที่กำลังจะเกิดขึ้น
การปฏิวัติหุ่นยนต์เชิงพาณิชย์ที่กำลังจะเกิดขึ้น
โพสต์ยอดนิยม
  • c corp vs s corp 2018
  • ที่นั่น vs คนเดียว vs ฉัน
  • การเขียนโค้ดหมายความว่าอย่างไร
  • วิธีโค้ดเกมง่ายๆ
  • git flow เทียบกับ github flow
หมวดหมู่
  • การจัดการวิศวกรรม
  • บุคลากรและทีมงานของผลิตภัณฑ์
  • อื่น ๆ
  • นวัตกรรม
  • © 2022 | สงวนลิขสิทธิ์

    portaldacalheta.pt