แนวทางสถาปัตยกรรมสำหรับ“ หน้าเว็บแอปเดียว”


12

ฉันจะเริ่มโครงการด้านข้างเพื่อสร้างแอปพลิเคชันเว็บ "หน้าเดียว" แอปพลิเคชันต้องเป็นแบบเรียลไทม์ส่งการอัปเดตไปยังลูกค้าเมื่อมีการเปลี่ยนแปลงเกิดขึ้น

มีแหล่งข้อมูลที่ดีสำหรับแนวทางการปฏิบัติที่ดีที่สุดหรือไม่สถาปัตยกรรมสำหรับการใช้งานประเภทนี้ แหล่งข้อมูลที่ดีที่สุดที่ฉันเคยพบคือบทความเกี่ยวกับสถาปัตยกรรม trello ที่นี่: http://blog.fogcreek.com/the-trello-tech-stack/

สำหรับฉันแล้วสถาปัตยกรรมนี้ถึงแม้ว่าจะเซ็กซี่มาก แต่ก็อาจจะเกินความต้องการเฉพาะของฉัน - แม้ว่าฉันจะมีข้อกำหนดที่คล้ายกัน ฉันสงสัยว่าฉันต้องรำคาญกับ sub / pub ที่ฝั่งเซิร์ฟเวอร์ฉันไม่เพียงแค่ผลักดันการอัปเดตจากเซิร์ฟเวอร์เมื่อมีบางอย่างเกิดขึ้น (เช่นเมื่อไคลเอ็นต์ส่งการอัปเดตไปยังเซิร์ฟเวอร์เขียนอัปเดตไปยัง db จากนั้นส่งการอัปเดตไปยังลูกค้า)

เป็นเรื่องที่ชาญฉลาดฉันอาจต้องการสร้างสิ่งนี้ใน Node.JS หรืออาจเป็น Ruby แม้ว่าแนวทางสถาปัตยกรรมควรมีผลบังคับใช้กับเทคโนโลยีเซิร์ฟเวอร์พื้นฐานใด ๆ

คำตอบ:


5

ฉันแน่นอนจะมองไปที่ฝั่ง MVC ของลูกค้าเช่น Backbone.js มันเบามาก แต่จะทำให้แอปพลิเคชั่นของคุณมีโครงสร้างที่จำเป็นมาก ฉันขอแนะนำ Peepcode screencast เป็นวิธีที่เร็วที่สุดในการเรียนรู้เพิ่มเติมเกี่ยวกับ Backbone

ประโยชน์ทางสถาปัตยกรรมที่ดีของ MVC ฝั่งไคลเอ็นต์เช่นนี้คือความจริงที่ว่าคุณสามารถย้ายไปยังการแลกเปลี่ยนข้อมูลกับฝั่งเซิร์ฟเวอร์ของคุณได้ง่ายขึ้นเช่นโครงสร้าง JSON ผ่าน REST

Backbone.js รองรับสิ่งนี้นอกกรอบ - คุณสามารถทำให้อนุกรมโมเดลของคุณระหว่างไคลเอนต์และเซิร์ฟเวอร์เป็น JSON ซึ่งสามารถปลดปล่อยเราจากการคิดในแง่ของการร้องขอ / การตอบสนอง

บางอย่างเช่น Node.js บนฝั่งเซิร์ฟเวอร์เป็นที่น่าสนใจภายใต้รูปแบบนี้ซึ่งคุณอาจมีคำขอแบบอะซิงโครนัสอายุสั้นจำนวนมากในการส่งและดึงข้อมูล

ทางเลือกหนึ่ง .... รูปแบบเช่นCometอาจเป็นวิธีที่ง่ายในการบรรลุ web pub / sub และมีเฟรมเวิร์กฝั่งเซิร์ฟเวอร์ที่รองรับสิ่งนี้


ไชโยฉันคิดอย่างแน่นอนว่าจะใช้ MV * FW สำหรับฝั่งไคลเอ็นต์และได้เรียนรู้เกี่ยวกับ Backbone .. เคล็ดลับดี ๆ
Matt Roberts

1

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

โซลูชันยอดนิยมอื่น ๆ ได้แก่ Ember.js และ Knockout.js ซึ่งมีฟังก์ชั่นการใช้งานที่มากขึ้น แต่คุณต้องปฏิบัติตามอนุสัญญาเหล่านั้นเพื่อใช้ประโยชน์จากฟังก์ชั่น thT (ซึ่งอาจหรืออาจไม่เหมาะกับคุณ)


1

นี่คือ IMO ที่ไม่มีเกมง่ายๆ AngularJS สำหรับส่วนหน้าเพราะมันยอดเยี่ยม NodeJS / express / SocketIO สำหรับแบ็กเอนด์แบบไดนามิกและเซ็กซี่ที่มีผับ / ดีย่อยและเอะอะขั้นต่ำ และเป็นโบนัสคุณสามารถใช้ภาษาเดียวสำหรับด้านหน้าและด้านหลัง!

ลองใช้https://github.com/hackify/hackify-serverเดียวกันสำหรับตัวอย่าง

One caveat, folks บางคนแนะนำ NodeJS ทางเลือกให้กับ socketio ที่เรียกว่า sockjs แต่ฉันยังไม่ได้ตรวจสอบสิ่งนี้ดังนั้นฉันไม่สามารถแนะนำได้


0

ฟังดูเหมือนสิ่งที่คุณกำลังดูคือApache 2.2พร้อมแอพพลิเคชันเซิร์ฟเวอร์PHPหรือTomcatพร้อม servlet แบบง่ายที่จัดการคำขอ มันเทียบเท่าค้อนและตะปูของช่างไม้ ไม่มีอะไรซับซ้อน แต่ทำให้งานเสร็จ หากคุณต้องการขยายฟังก์ชันการทำงานคุณสามารถทำได้ตลอดเวลาเนื่องจาก Tomcat สามารถรองรับ jsp และ jsf หากคุณต้องการ

สำหรับสิ่งที่เกี่ยวข้องกับส่วนหน้าฉันสามารถใช้jQuery ( $ .post , $ .load , $ .ajax ) ได้อย่างสะดวกสบายเนื่องจากมันมีประโยชน์สองเท่าในการเพิ่มฟังก์ชันการทำงานให้กับหน้าเว็บร่วมกับjQuery UI


0

หากคุณต้องการการอัปเดตไคลเอนต์แบบเรียลไทม์คุณจะต้องใช้การโทร "AJAX" แบบบล็อกยาวหรือใช้เว็บซ็อกเก็ตที่ทันสมัยกว่า สิ่งเหล่านี้ช่วยให้คุณสามารถอัปเดตไปยังไคลเอนต์ที่เชื่อมต่อซึ่งจะได้รับการจัดการโดยจาวาสคริปต์

ฉันเข้าใจว่าสถานะปัจจุบัน (หรือแฟชั่นล่าสุด) คือ AngularJS โดย Google มันออกแบบมาบางส่วนเพื่อให้การเขียน SPA ง่ายขึ้น


0

ถ้าคุณต้องการสิ่งที่ใกล้เคียงกับสแต็คค่าเฉลี่ย (Node.js, Mongo ... ) สำหรับการสร้างแอพลิเคชันหน้าเดียวที่จะต้องมีปฏิกิริยาผมเลือกดาวตก โดยเฉพาะถ้าคุณกำลังสร้างต้นแบบและเริ่มต้นจากศูนย์

Rails ที่มีส่วนหน้าเชิงมุมจะเป็นตัวเลือกที่ใช้ได้ แต่คุณจะมีเวลาที่ยากขึ้น "ส่งการอัปเดตไปยังลูกค้าเมื่อมีการเปลี่ยนแปลงเกิดขึ้น" เนื่องจากคุณจะต้องติดตั้งอัญมณีเฉพาะเจาะจงรวมเข้าด้วยกัน .

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