ดาวน์โหลด vugu - ดาวน์โหลดซอร์สโค้ด vugu

vugu

ข้อมูลเว็บไซต์

1.0.0

ดาวน์โหลด

Vugu

Vugu เป็นไลบรารีทดลองสำหรับเว็บ UIs ที่เขียนใน GO และกำหนดเป้าหมายไปที่ WebAssembly คำแนะนำและเอกสารที่ https://www.vugu.org Godoc ที่ https://godoc.org/github.com/vugu/vugu

หากคุณเคยอยากเขียน UI ที่ไม่ได้อยู่ใน JS แต่ Pure Go ... และเรียกใช้ในเบราว์เซอร์ของคุณตอนนี้ ... นั่นคือ (ทดลอง;) อนาคตอยู่ที่นี่!

แนะนำ vugu (ออกเสียง /ˈvuː.ɡuː/), ห้องสมุดที่ได้รับแรงบันดาลใจจาก Vuejs ในการกำหนดเป้าหมาย WASM

ไม่มีโหนด ไม่มี JS. ไม่มี NPM ไม่มีโฟลเดอร์ Node_Modules แข่งขันกับห้องสมุดเพลงของคุณสำหรับพื้นที่ดิสก์

อัปเดต♨

2024-05-25 ย้ายไปยังกระบวนการสร้างที่ใช้ Mage เข้าร่วมการสนทนา: Gophers on Slack, Channel #VUGU

ไฮไลท์

ทำงานในเบราว์เซอร์โดยใช้ webAssembly
ส่วนประกอบไฟล์เดียว
ไวยากรณ์มาร์กอัป Vue
เขียนรหัส GO สำนวน
การสร้างต้นแบบอย่างรวดเร็ว
การตั้งค่า ~ 3 นาที
เครื่องมือสร้างมาตรฐาน GO

เริ่ม

เริ่มต้นใช้งาน: http://www.vugu.org/doc/start

ยังคงเป็นงานที่อยู่ระหว่างดำเนินการ แต่มีหลายสิ่งหลายอย่างที่ใช้งานได้แล้ว บางงานทำงานได้ดีจริงๆ

คุณต้องมี GO v1.22.3 เป็นขั้นต่ำที่จะใช้ vugu เราต้องการการเปลี่ยนแปลงลูปที่แนะนำใน GO v1.22 และ v1.22.3 เป็นครั้งสุดท้ายในการเขียน

การสร้าง `vugu` สำหรับผู้มีส่วนร่วม

ตอนนี้ vugu ใช้ Mage เพื่อจัดการ Build ของเครื่องมือ vugu - vugugen , vugufmt และ vgfrom ผู้วิเศษยังใช้ในการจัดการกระบวนการทดสอบ

โปรดดูคำแนะนำการสร้างที่อัปเดตในคู่มือผู้ร่วมให้ข้อมูล

รันตัวอย่าง

ในการเรียกใช้ตัวอย่างคุณต้องติดตั้งเครื่องมือ mage , docker และ goimports ที่ติดตั้ง vugu ใช้ mage เพื่อจัดการกระบวนการสร้าง

วิธีที่ง่ายที่สุดในการติดตั้ง mage คือ:

 git clone https://github.com/magefile/mage
cd mage
go run bootstrap.go

คุณต้องเรียกใช้ mage จากรูทโมดูลของ vugu นี่คือไดเรกทอรีที่มีระดับสูงสุด go.mod แล้ว

คุณจะต้องติดตั้งเครื่องมือ goimports เป็นไปได้มากที่คุณได้ติดตั้งสิ่งนี้แล้วโดยปกติแล้วเป็นส่วนหนึ่งของปลั๊กอินตัวแก้ไข ถ้าไม่สามารถติดตั้งได้ด้วย:

 go install golang.org/x/tools/cmd/goimports@latest

ในการเรียกใช้ตัวอย่างคุณจะต้องติดตั้ง docker หากคุณไม่ได้ติดตั้ง docker ให้ทำตามคำแนะนำการติดตั้ง Docker แต่ละตัวอย่างจะเสิร์ฟโดยคอนเทนเนอร์ nginx ท้องถิ่น

ตัวอย่างทั้งหมดอยู่ในไดเรกทอรี examples ตัวอย่างย่อยแต่ละ examples มีตัวอย่างเดียว แต่ละตัวอย่างเป็นโมดูล GO ของตัวเอง

การสร้างและให้บริการตัวอย่างทั้งหมดเป็นเรื่องง่ายเหมือน:

 cd path/to/vugu
mage examples

หรือ

 cd path/to/vugu
mage -v examples

แต่ละตัวอย่างจะเสิร์ฟที่ URL ของแบบฟอร์ม

 http://localhost:8888/<name-of-example-directory>

ตัวอย่างเช่นเพื่อดูตัวอย่าง fetch-and-display URL จะเป็น:

 http://localhost:8888/fetch-and-display

หรือถ้าคุณต้องการเรียกใช้ตัวอย่างเดียวเท่านั้น:

 cd path/to/vugu
mage singleExample <name-of-example-module>

ตัวอย่างเช่นการให้บริการเพียงตัวอย่าง fetch-and-display คำสั่งจะเป็น:

 cd path/to/vugu
mage singleExample github.com/vugu/vugu/example/fetch-and-display

การสร้างตัวอย่างใหม่

หากคุณต้องการสร้างตัวอย่างใหม่กระบวนการค่อนข้างตรงไปตรงมา จุดวิกฤติคือการยึดไว้กับตัวอย่างการทำงาน

ตัวอย่างเช่น

 cd /path/to/vugu
cp -r ./examples/fetch-and-display/ ./examples/my-new-example

cp จะคัดลอกทุกอย่างในไดเรกทอรีรวมถึงไฟล์ .gitignore ที่สำคัญในท้องถิ่นไปยังไดเรกทอรีตัวอย่างใหม่ โปรดทำให้ Sire .gitignore มีอยู่เพื่อให้แน่ใจว่า VUGU ที่สร้างไฟล์จะไม่ถูกส่งไปยังที่เก็บ

จากนั้นคุณต้องแก้ไข ./examples/my-new-example/go.mod เพื่อเปลี่ยนชื่อโมดูล ขั้นตอนนี้มีความสำคัญ

ชื่อโมดูลจะต้องเปลี่ยนเพื่อให้ตรงกับตัวอย่างดังนั้นในกรณีนี้ชื่อโมดูลจะถูกเปลี่ยนเป็น github.com/vugu/vugu/examples/my-new-example

จากนั้นคุณสามารถแก้ไข root.vugu , root.go ได้ตามต้องการเพื่อรองรับตัวอย่างหรือเพิ่มไฟล์ *.vugu และ *.go เพิ่มเติมตามความจำเป็น

ไม่ควรแก้ไขไฟล์ main_wasm.go และ wasm_exec.js

ตัวอย่าง index.html ไฟล์จะต้องแก้ไขในสองสถานที่ที่แตกต่างกัน ครั้งแรกคือเส้นรอบที่ 11

 <script src="/fetch-and-display/wasm_exec.js"></script>

ในการเปลี่ยนเส้นทางเพื่อสะท้อนชื่อของตัวอย่าง ในกรณีนี้:

 <script src="/my-new-example/wasm_exec.js"></script>

การเปลี่ยนแปลงครั้งที่สองนั้นคล้ายคลึงกัน แต่สะท้อนถึงเส้นทางของ main.wasm Binary นี่คือเส้นประมาณ 29

 WebAssembly.instantiateStreaming(fetch("/fetch-and-display/main.wasm"), go.importObject).then((result) => {

ซึ่งในกรณีนี้จะเปลี่ยนเป็น:

 WebAssembly.instantiateStreaming(fetch("/my-new-example/main.wasm"), go.importObject).then((result) => {

ตัวอย่างใหม่สามารถสร้างและเสิร์ฟพร้อม:

 cd /path/to/vugu
mage examples

หรือเป็นรายบุคคลเช่นนี้:

 cd /path/to/vugu
mage singleExample github.com/vugu/vugu/example/my-new-example

แผนงานย่อ

หมายเหตุ

มันสร้างขึ้น เหมือนห้องสมุดมากกว่ากรอบงาน ในขณะที่ Vugu ทำการสร้างรหัสสำหรับไฟล์. vugu Component ของคุณ (และจะส่งออก main_wasm.go เริ่มต้นสำหรับโครงการใหม่และสร้างโปรแกรมของคุณโดยอัตโนมัติเมื่อรีเฟรชหน้า) โดยพื้นฐานแล้วคุณยังคงควบคุมได้ การไหลของโปรแกรมโดยรวมการเดินสายแอปพลิเคชันและการเริ่มต้นลูปเรนเดอร์ที่ทำให้หน้าซิงค์กับส่วนประกอบของคุณ - คุณสามารถควบคุมได้ทั้งหมด เฟรมเวิร์กโทรรหัสของคุณ Vugu เป็นไลบรารีรหัสของคุณเรียกมันว่า (แม้ว่า Vugu จะสร้างสิ่งนั้นให้คุณในตอนต้นเพื่อทำให้สิ่งต่าง ๆ ง่ายขึ้น) หนึ่งในเป้าหมายหลักสำหรับ Vugu เมื่อพูดถึงนักพัฒนาที่พบเจอครั้งแรกคือการทำให้เร็วและง่ายต่อการเริ่มต้น แต่ไม่มีข้อ จำกัด ที่ไม่จำเป็นเกี่ยวกับวิธีการจัดโครงสร้างโครงการ ไปสร้างเครื่องมือ (และตอนนี้ระบบโมดูล) นั้นยอดเยี่ยม แนวคิดคือการใช้ประโยชน์จากขอบเขตที่ไกลที่สุดเท่าที่จะเป็นไปได้แทนที่จะเขียนโปรแกรมใหม่

ดังนั้นคุณจะไม่พบเครื่องมือบรรทัดคำสั่ง VUGU ที่เรียกใช้เซิร์ฟเวอร์การพัฒนา แต่คุณจะพบรหัสตัวอย่างที่เหมาะสมในเอกสารที่คุณสามารถวางในไฟล์และ go run ด้วยตัวเอง สำหรับการสร้างรหัสในขณะที่มี http.handler ที่สามารถทำได้เมื่อรีเฟรชหน้าคุณยังสามารถ (และควร!) เรียกใช้ vugugen ผ่าน go generate มีการตัดสินใจเล็กน้อยใน Vugu ซึ่งเป็นไปตามปรัชญานี้: ทุกที่ที่เป็นไปได้เพียงแค่ใช้กลไกที่มีอยู่แทนที่จะคิดค้นใหม่ และทำเช่นนั้นต่อไปจนกว่าจะมีข้อพิสูจน์ว่ามีสิ่งอื่นที่จำเป็นจริงๆ จนถึงตอนนี้มันทำงานได้ดี และช่วยให้ Vugu มุ่งเน้นไปที่สิ่งที่เฉพาะเจาะจงที่นำมาสู่ตาราง