แผนที่เดียวกัน สามวิธี: SVG, Rust และ Flutter

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

ดังนั้นเราจึงทำการทดลอง เรานำแผนที่บนหน้าแรกของเราและสร้างใหม่สองครั้ง: ครั้งหนึ่งใน Rust ที่คอมไพล์เป็น WebAssembly และอีกครั้งใน Flutter บทความนี้นำทั้งสามมาไว้ในหน้าเดียวและเปรียบเทียบกัน

1. ของเดิม: SVG, CSS และ JavaScript เล็กน้อย

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

มันเป็นการวาดภาพ SVG เพียงภาพเดียว เบราว์เซอร์จะรันแอนิเมชันส่วนใหญ่จาก CSS และสคริปต์เล็ก ๆ จะจัดการส่วนที่เหลือ

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

ต้นทุนคือขนาดในหน้า แผนที่มีมาร์กอัปประมาณ 107 KB (ประมาณ 30 KB เมื่อบีบอัด) และเมื่อรันแล้วจะมีองค์ประกอบประมาณ 670 ชิ้นและแอนิเมชัน CSS ประมาณ 200 รายการ ตรรกะยังทดสอบได้ยาก: การจับเวลาจะอยู่ภายใน keyframes ของ CSS และสคริปต์ในหน้า ดังนั้นการทดสอบเดียวคือการดูมันเท่านั้น

2. Rust และ WebAssembly

ในคำง่ายๆ: Rust คือภาษาการเขียนโปรแกรมที่รู้จักกันดีในเรื่องความเร็วและการจับข้อผิดพลาดหลายอย่างก่อนที่โปรแกรมจะทำงาน ที่นี่เราเขียน “สมอง” ของแผนที่ด้วย Rust บรรจุเป็นรูปแบบกะทัดรัดที่เบราว์เซอร์สามารถรันได้ (เรียกว่า WebAssembly) และปล่อยให้มันวาดแผนที่ทั้งหมดเอง เหมือนจิตรกรที่วาดภาพซ้ำบนผืนผ้าใบหลายครั้งต่อวินาที สำหรับคุณมันดูเหมือนเดิม

แผนที่ทั้งหมดถูกวาดบนผืนผ้าใบเดียวโดย Rust ที่ถูกคอมไพล์เป็น WebAssembly โค้ด Rust ควบคุมพฤติกรรมทั้งหมดของแผนที่และวาดใหม่ทุกเฟรม

ส่วนที่เราชอบคือตรรกะเป็น Rust ธรรมดาโดยไม่มีอะไรจากเบราว์เซอร์เลย: คณิตศาสตร์สำหรับตำแหน่งของสิ่งต่างๆ และเวลาที่เปลี่ยนแปลง และตัวแยกวิเคราะห์ที่อ่านเส้นขอบของแผ่นดิน มีการทดสอบ 13 รายการที่รันในเวลาสั้นมาก และถ้าการจับเวลาของรอบผิดพลาด การทดสอบจะล้มเหลวแทนที่จะให้ใครสังเกตเห็นว่ามันดูแปลก ประมาณหนึ่งในสามของโค้ด Rust ประมาณ 1,070 บรรทัดเป็นแกนกลางที่ผ่านการทดสอบ (พร้อมกับการทดสอบ) ส่วนที่เหลือใช้วาดบนผืนผ้าใบและจัดการเหตุการณ์เมาส์

หน้าสุดท้ายเบามาก: มีแค่ element ผืนผ้าใบเดียว แต่การดาวน์โหลดจะใหญ่กว่า โมดูลที่คอมไพล์มีขนาดประมาณ 254 KB (ประมาณ 92 KB เมื่อบีบอัด) บวกกับ JavaScript glue ประมาณ 28 KB ที่เครื่องมือสร้างสร้างขึ้น และมีต้นทุนที่เรารู้สึกเมื่อทำงานกับมัน:

• ชุดเครื่องมือ. การสร้างต้องใช้ Rust, เป้าหมาย WebAssembly และเครื่องมือบรรทัดคำสั่งที่เวอร์ชันต้องตรงกับไลบรารีอย่างแม่นยำ สคริปต์การสร้างของเราจะรันการทดสอบก่อนและหยุดหากพบว่าการทดสอบใดล้มเหลว
• ไม่มีการเข้าถึงด้วยแป้นพิมพ์หรือโปรแกรมอ่านหน้าจอสำหรับเมืองแต่ละเมือง. แคนวาสคือภาพ ภาพ SVG ที่มีจุดโฟกัสได้ 44 จุดหายไปแล้ว
• ภาษาอังกฤษเท่านั้น. ป้ายกำกับถูกเขียนลงในโปรแกรม
• เบลอ. ขอบเงานุ่มใช้ฟิลเตอร์เบลอของแคนวาส ซึ่งไม่ใช่ทุกเบราว์เซอร์จะรองรับ เราไม่ได้ทดสอบ Safari ซึ่งขอบอาจจะแข็งได้

3. Flutter

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

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

มันเป็นตรรกะเดียวกับแผนที่ Rust ที่ถูกพอร์ตไปยัง Dart พร้อมกับการทดสอบ 11 ครั้ง ประมาณ 1,100 บรรทัดรวมถึงการทดสอบ Flutter ส่งแต่ละเมืองให้กับโปรแกรมอ่านหน้าจอในรูปแบบปุ่มที่มีป้ายกำกับ ซึ่งเวอร์ชันแคนวาสไม่มี (เรายังไม่ได้ตรวจสอบว่ามันทำงานได้ดีแค่ไหนกับโปรแกรมอ่านหน้าจอจริง) นอกจากนี้ยังเป็นการดาวน์โหลดที่ใหญ่ที่สุด: แอปมีขนาดประมาณ 1.8 MB (ประมาณ 535 KB เมื่อบีบอัด) เครื่องยนต์วาดภาพของ Flutter เป็นการดาวน์โหลดเพิ่มเติม แต่เว็บไซต์ได้แชร์สำเนาหนึ่งกับเครื่องคิดเลขแล้ว ดังนั้นผู้เยี่ยมชมที่เปิดเครื่องคิดเลขจะไม่ดาวน์โหลดซ้ำ ข้อความของมันถูกตั้งค่าในฟอนต์ของเว็บไซต์ Merriweather ซึ่งเบราว์เซอร์จะดึงมาในเวลารันไทม์

สิ่งที่เราพบ

หมายเหตุเพิ่มเติมเกี่ยวกับความเร็ว ในการตรวจสอบของเรา แผนที่ SVG และแผนที่ Rust ทั้งคู่ทำงานที่อัตราการรีเฟรชหน้าจอ (ประมาณ 120 เฟรมต่อวินาทีบนจอทดสอบ) ดังนั้นอัตราเฟรมจึงไม่สามารถแยกความแตกต่างได้ เราไม่ได้วัดอัตราเฟรมของ Flutter และไม่ได้วัดการใช้แบตเตอรี่หรือ CPU ดังนั้นจึงไม่สามารถบอกได้ว่าอันไหนเบากว่าบนโทรศัพท์

สิ่งที่ทำให้เราประหลาดใจ

รายละเอียดบางอย่างง่ายต่อการผิดพลาด โคลนแรกของเราวาดกุญแจและนาฬิกาที่ส่วนแบ่งคงที่ของแผนที่ ดังนั้นมันจึงหดตัวบนหน้าจอขนาดเล็กและดูเล็กมากเมื่อเทียบกับต้นฉบับ ต้นฉบับกำหนดขนาดโดยใช้หน่วยฟอนต์ของหน้า (rem ซึ่งเปลี่ยนแปลงตามความกว้างของหน้าจอ) โคลนตอนนี้อ่านขนาดนั้นจากหน้า นาฬิกาก็แตกต่างกันด้วย: เข็มของต้นฉบับเคลื่อนที่เป็นขั้นตอนละ 15 นาที ในขณะที่เวอร์ชัน Rust และ Flutter หมุนอย่างต่อเนื่อง

โซนเวลายังไม่ได้ถูกสร้างไว้ในตัว ทั้ง Rust ที่คอมไพล์เป็น WebAssembly และ Dart ไม่มีฐานข้อมูลโซนเวลาที่รู้จัก “Asia/Dubai” ทั้งสองจึงถามเบราว์เซอร์แทน ผ่านบริการ Intl ที่ติดตั้งมาในตัว ซึ่งยังจัดการเรื่องเวลาประหยัดแสงได้ถูกต้อง

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

Flutter web จำข้อมูลได้ Flutter web ติดตั้งแคชของตัวเอง ดังนั้นหลังจากสร้างใหม่ เราจึงยังเห็นเวอร์ชันเก่าจนกว่าเราจะล้างแคชนั้น

ข้อสรุปของเรา

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

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

สิ่งที่ผู้ก่อตั้งของเรากำลังสร้างต่อไป

แพลตฟอร์มที่มั่นคงช่วยให้มีเวลาสำหรับไอเดียอื่น ๆ นอกจาก EVnSteven แล้ว ผู้ก่อตั้งของเรากำลังทำงานในโครงการเหล่านี้:

บริการเรียกรถ, กำลังจะเปิดตัวเร็ว ๆ นี้ Kimem ↗ (opens in a new tab) บริการเรียกรถสำหรับเมือง Bahir Dar ประเทศเอธิโอเปีย จากผู้ก่อตั้ง Mekonnen Alemu ผู้โดยสารจะเห็นการประมาณค่าโดยสารก่อนจอง ดูคนขับที่ใกล้ที่สุดเคลื่อนที่บนแผนที่ และจ่ายค่าโดยสารตามมิเตอร์เป็นเงินสดเมื่อสิ้นสุดการเดินทาง

องค์กรไม่แสวงหากำไร, โอเพนซอร์ส StrayCats ↗ (opens in a new tab) โครงการจาก David เพื่อช่วยเหลือผู้ที่ดูแลแมวจรจัด แมวจร หรือแมวใด ๆ แม้แต่ถ้าแมวนั้นบังเอิญเป็นสุนัข โครงการยังอยู่ในขั้นตอนแนวคิด ยังไม่มีแอป และ David ยินดีรับไอเดียและความคิดเห็นของคุณ อุทิศให้กับ Saibo, 2010–2026

ติดตามเงินสด, ฟรี, กำลังจะเปิดตัวเร็ว ๆ นี้ Effectivo ↗ (opens in a new tab) การบัญชีที่ไม่สมบูรณ์แบบแต่มีลูกเล่น สำหรับผู้ที่ใช้เงินสด บันทึกการซื้อเพียงไม่กี่ครั้ง แตะนับเงินในกระเป๋า และย้อนดูสิ่งที่คุ้มค่า ลูกเล่นคือทุกคนที่ยังใช้เงินสดช่วยรักษาการใช้เงินสดไว้สำหรับทุกคน ฟรีและไม่มีโฆษณา กำลังจะมาบน Android และ iPhone พร้อมรุ่นเบต้าและเดโมเว็บที่กำลังใช้งานอยู่ตอนนี้