สถาปัตยกรรมของเว็บแอปพลิเคชัน JavaScript หน้าเดียว?


99

เว็บแอปพลิเคชัน JS แบบหน้าเดียวที่ซับซ้อนควรมีโครงสร้างอย่างไรในฝั่งไคลเอ็นต์ โดยเฉพาะอย่างยิ่งฉันอยากรู้เกี่ยวกับวิธีการจัดโครงสร้างแอปพลิเคชันอย่างหมดจดในแง่ของโมเดลอ็อบเจ็กต์ส่วนประกอบ UI คอนโทรลเลอร์และอ็อบเจ็กต์ที่จัดการกับความคงอยู่ของเซิร์ฟเวอร์

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

-

( คำถามนี้ส่งผลให้มีคำแนะนำสองข้อในการใช้ ajax ซึ่งจำเป็นอย่างยิ่งสำหรับสิ่งอื่นนอกเหนือจากแอปหน้าเดียวที่ไม่สำคัญที่สุด)


คุณสามารถลองangularJSหรือbackboneJS
Romain

2
คุณสามารถให้ข้อมูลเชิงลึกของคุณเองสำหรับคำถามนี้ได้หรือไม่ เป็นเวลานานแล้วที่คุณถามคำถามนี้และฉันสนใจที่จะรู้ว่าอะไรคือประเด็นที่สำคัญที่สุดที่คุณได้เรียนรู้จากประสบการณ์ของคุณกับ Javascript SPAs
Adrian Moisa

คำตอบ:


35

สถาปัตยกรรม MVC ของPureMVC / JSเป็น IMO ที่สง่างามที่สุด ฉันได้เรียนรู้มากมายจากมัน ฉันยังพบว่าสถาปัตยกรรมแอปพลิเคชัน JavaScript ที่ปรับขนาดได้โดย Nicholas Zakas มีประโยชน์ในการค้นคว้าตัวเลือกสถาปัตยกรรมฝั่งไคลเอ็นต์

เคล็ดลับอื่น ๆ อีกสองข้อ

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

13

การนำเสนอของ Nicholas Zakas ซึ่งแบ่งปันโดย Dean เป็นจุดเริ่มต้นที่ดีมาก ฉันยังดิ้นรนที่จะตอบคำถามเดิมอยู่พักหนึ่ง หลังจากทำผลิตภัณฑ์ Javascript ขนาดใหญ่สองสามชิ้นแล้วให้นึกถึงการแบ่งปันสิ่งที่เรียนรู้เป็นสถาปัตยกรรมอ้างอิงในกรณีที่มีคนต้องการ มองไปที่:

http://boilerplatejs.org/

กล่าวถึงปัญหาทั่วไปเกี่ยวกับการพัฒนา Javascript เช่น:

  • การจัดโครงสร้างโซลูชัน
  • การสร้างลำดับชั้นของโมดูลที่ซับซ้อน
  • ส่วนประกอบ UI ในตัว
  • การสื่อสารระหว่างโมดูลตามเหตุการณ์
  • การกำหนดเส้นทางประวัติบุ๊กมาร์ก
  • การทดสอบหน่วย
  • การแปล
  • การสร้างเอกสาร

เป็นต้น


10

วิธีสร้างแอป:

  • เฟรมเวิร์ก ExtJS แอปหน้าเดียวทุกองค์ประกอบที่กำหนดในไฟล์ JS แยกกันโหลดตามความต้องการ
  • ทุกส่วนประกอบติดต่อบริการเว็บเฉพาะของตัวเอง (บางครั้งมากกว่าหนึ่งรายการ) ดึงข้อมูลไปยังร้านค้า ExtJS หรือโครงสร้างข้อมูลที่มีวัตถุประสงค์พิเศษ
  • การเรนเดอร์ใช้ส่วนประกอบ ExtJS มาตรฐานดังนั้นฉันจึงสามารถผูกร้านค้ากับกริดโหลดฟอร์มจากเรกคอร์ด ...

เพียงแค่เลือกกรอบงานจาวาสคริปต์และปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุด รายการโปรดของฉันคือ ExtJS และ GWT แต่เป็น YMMV

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


10
Question - What makes an application complex ? 

คำตอบ - การใช้คำว่า 'ซับซ้อน' ในคำถามนั้นเอง ดังนั้นแนวโน้มทั่วไปที่จะมองหาวิธีแก้ปัญหาที่ซับซ้อนตั้งแต่แรกเริ่ม

Question - What does the word complex means ?

คำตอบ - สิ่งที่ไม่รู้หรือเข้าใจเพียงบางส่วน ตัวอย่าง: ทฤษฎีแรงโน้มถ่วงแม้ในปัจจุบันจะซับซ้อนสำหรับฉัน แต่ไม่ใช่สำหรับเซอร์ไอแซกนิวตันผู้ค้นพบในปี 1655

Question - What tools can I use to deal with complexity ?

คำตอบ - ความเข้าใจและความเรียบง่าย

Question - But I understand my application . Its still complex ?

คำตอบ - คิดให้ดีเพราะความเข้าใจและความซับซ้อนไม่ได้อยู่ร่วมกัน หากคุณเข้าใจแอปพลิเคชันขนาดใหญ่ฉันแน่ใจว่าคุณจะยอมรับว่ามันไม่มีอะไรนอกจากการรวมหน่วยขนาดเล็กและเรียบง่าย

Question - Why all of the above philosophical discussion for a question on 
           Single Page Application (SAP)?

คำตอบ - เพราะ

-> สปาไม่ใช่เทคโนโลยีหลักบางประเภทที่คิดค้นขึ้นใหม่ซึ่งเราจำเป็นต้องสร้างวงล้อขึ้นมาใหม่สำหรับหลายสิ่งที่เรากำลังทำในการพัฒนาแอปพลิเคชัน

-> เป็นแนวคิดที่ขับเคลื่อนด้วยความต้องการประสิทธิภาพที่ดีขึ้นความพร้อมใช้งานความสามารถในการปรับขนาดและการบำรุงรักษาของเว็บแอปพลิเคชัน

-> เป็นรูปแบบการออกแบบที่ค่อนข้างระบุใหม่ดังนั้นความเข้าใจเกี่ยวกับสปาในฐานะรูปแบบการออกแบบจึงไปได้ไกลในการตัดสินใจอย่างชาญฉลาดเกี่ยวกับสถาปัตยกรรมของสปา

-> ในระดับรูทไม่มี SPA ที่ซับซ้อนเพราะหลังจากทำความเข้าใจกับความต้องการของแอปพลิเคชันและรูปแบบสปาแล้วคุณจะรู้ว่าคุณยังคงสร้างแอปพลิเคชันอยู่ในลักษณะเดียวกับที่คุณเคยทำก่อนหน้านี้ด้วยการปรับเปลี่ยนและจัดเตรียมใหม่ ในแนวทางการพัฒนา

Question - What about the use of Frameworks ?

คำตอบ - เฟรมเวิร์กคือรหัส / โซลูชันสำหรับหม้อไอน้ำสำหรับรูปแบบทั่วไปและรูปแบบทั่วไปดังนั้นจึงสามารถถอด x% (ตัวแปรตามแอปพลิเคชัน) จากการพัฒนาแอปพลิเคชัน แต่ไม่ควรคาดหวังให้มากเป็นพิเศษสำหรับงานหนัก และการใช้งานที่เพิ่มมากขึ้น เป็นกรณีที่ดีเสมอที่จะสามารถควบคุมโครงสร้างและโฟลว์แอปพลิเคชันของคุณได้อย่างสมบูรณ์ แต่ที่สำคัญที่สุดคือรหัส ไม่ควรมีพื้นที่สีเทาหรือสีดำในรหัสแอปพลิเคชัน

Question - Can you suggest one of the many approaches to SPA architecture ?

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

  • แหล่งข้อมูล: Models / Collections of Models

  • มาร์กอัปสำหรับการนำเสนอข้อมูล: เทมเพลต

  • การโต้ตอบกับแอปพลิเคชัน: เหตุการณ์

  • การจับภาพและการนำทาง: การกำหนดเส้นทาง

  • ยูทิลิตี้วิดเจ็ตและปลั๊กอิน: ไลบรารี

แจ้งให้เราทราบหากสิ่งนี้ช่วยได้บ้างและขอให้โชคดีกับสถาปัตยกรรมสปาของคุณ !!


1
สิ่งนี้เพิ่มมุมมองที่ยอดเยี่ยม (โดยปกติจะหายาก) ขอบคุณ!
Cody

4

สิ่งที่ดีที่สุดที่ต้องทำคือดูตัวอย่างการใช้กรอบงานอื่น ๆ :

TodoMVCนำเสนอกรอบงาน SPA มากมาย



1

เว็บแอปพลิเคชันที่ฉันกำลังทำงานอยู่ใช้ JQuery และฉันไม่แนะนำให้ใช้กับแอปพลิเคชันบนเว็บหน้าเดียวขนาดใหญ่ เฟรมเวิร์กส่วนใหญ่เช่น Dojo, yahoo, google และอื่น ๆ ใช้เนมสเปซในไลบรารีของตน แต่ JQuery ไม่ทำและนี่เป็นข้อเสียเปรียบที่สำคัญ

หากเว็บไซต์ของคุณมีขนาดเล็ก JQuery ก็โอเค แต่ถ้าคุณตั้งใจจะสร้างไซต์ขนาดใหญ่ฉันขอแนะนำให้ดูเฟรมเวิร์ก Javascript ทั้งหมดที่มีอยู่และตัดสินใจว่าอันไหนตรงกับความต้องการของคุณมากที่สุด

และฉันขอแนะนำให้ใช้รูปแบบ MVC กับ javascript / html ของคุณและโมเดลอ็อบเจ็กต์ส่วนใหญ่ของคุณสำหรับจาวาสคริปต์สามารถทำได้ในรูปแบบ json ที่คุณส่งคืนจากเซิร์ฟเวอร์ผ่าน ajax และ javascirpt ใช้ json เพื่อแสดงผล html

ฉันขอแนะนำให้อ่านหนังสือ Ajax ในการดำเนินการเนื่องจากครอบคลุมเนื้อหาส่วนใหญ่ที่คุณจำเป็นต้องรู้


jQuery สามารถเขียน (เช่น JS ใด ๆ ) ในรูปแบบเนมสเปซโดยใช้ต้นแบบ ฉันไม่แน่ใจว่ามันเป็นคุณสมบัติที่ใหญ่หรือคลุมเครือเพียงพอที่จะรับประกันการเป็นนามธรรมหลังกรอบงาน - ฉันชอบเรียนรู้ว่า JS กำลังทำอะไรอยู่ stackoverflow.com/questions/881515/…
SimplGy

4
JQuery ไม่ได้มีวัตถุประสงค์เพื่อเป็นกรอบงานแอปพลิเคชันฝั่งไคลเอ็นต์ มีเป้าหมายที่ "ระดับล่าง" มากกว่านั้น JQuery ออกแบบมาเพื่อลดความซับซ้อนในการข้ามเอกสาร HTML การจัดการเหตุการณ์การเคลื่อนไหวและการดำเนินการ Ajax และเพื่อแยกความแตกต่างระหว่างเบราว์เซอร์ออกไป สำหรับแอปขนาดใหญ่คุณควรใช้กรอบงานแอปพลิเคชันฝั่งไคลเอ็นต์เช่นสิ่งที่น่าพิศวงหรือกระดูกสันหลังในการเชื่อมต่อกับ JQuery
Sam Shiles

ดังนั้นประเด็นของฉันยังคงยืนอยู่หากไม่รวมสิ่งที่น่าพิศวงหรือกระดูกสันหลังการข้ามเอกสารการจัดการเหตุการณ์ ฯลฯ ก็ไม่มีค่ามาก YUI3 App Framework ทำและไม่จำเป็นต้องใช้ JQuery หากคุณใช้งาน
eaglestorm

1
jquery เก็บวิธีการทั้งหมดไว้ในตัวแปร jQuery และตัวแปร $ หากคุณใช้ตัวเลือกไม่มีข้อขัดแย้งเฉพาะชื่อ jQuery เท่านั้นที่ถูกสร้างขึ้นในเนมสเปซส่วนกลาง jQuery ไม่ใช่เฟรมเวิร์กเป็นเพียงไลบรารีไม่ได้บอกวิธีการทำสิ่งต่าง ๆ เพียงแค่ให้ทางลัดเพื่อทำสิ่งต่างๆทั่วไป การเปรียบเทียบ jQuery กับ Dojo / YUI และอื่น ๆ นั้นผิด
Hoffmann

1
@eaglestorm คำสั่ง if ของคุณประเมินว่าเป็นเท็จ
John Lehmann




0

ทางเลือก: ลองดูItsNat

คิดใน JavaScript แต่โค้ดเหมือนกันใน Java ในเซิร์ฟเวอร์ที่มี DOM API เดียวกันในเซิร์ฟเวอร์เป็นวิธีที่ง่ายกว่าในการจัดการแอปพลิเคชันของคุณโดยไม่ต้องใช้ไคลเอ็นต์ / บริดจ์ที่กำหนดเองเนื่องจาก UI และข้อมูลอยู่ด้วยกัน



0

NikaFrameworkช่วยให้คุณสร้างแอปพลิเคชันหน้าเดียว ยังช่วยให้คุณสามารถเขียน HTML , CSS ( SASS ), JavaScriptลงในไฟล์แยกต่างหากและรวมเป็นไฟล์เอาต์พุตเดียวในตอนท้าย


0

ฉันจะแนะนำในการสำรวจเสรีชน ช่วยให้คุณสามารถใช้ "แนวทางปฏิบัติที่ดีที่สุด" ที่มีอยู่สำหรับโครงการใหม่ของคุณ

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

หากคุณตัดสินใจที่จะใช้ Angular.js จะมีไฟล์ Yeomanที่ให้โครงสร้างสำหรับการกำหนดเส้นทางมุมมองบริการและอื่น ๆ แก่คุณนอกจากนี้ยังช่วยให้คุณทดสอบย่อขนาดโค้ดของคุณ ฯลฯ

หากคุณตัดสินใจที่จะใช้ Backbone ให้ชำระเงินตัวสร้างนี้

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.