Arsitektur aplikasi web JavaScript satu halaman?

Bagaimana seharusnya aplikasi web JS satu halaman yang kompleks disusun di sisi klien? Secara khusus saya ingin tahu tentang cara menyusun aplikasi dengan rapi dalam hal objek modelnya, komponen UI, pengontrol apa pun, dan objek yang menangani persistensi server.

MVC sepertinya cocok pada awalnya. Namun dengan komponen UI yang bersarang di berbagai kedalaman (masing-masing dengan caranya sendiri untuk bertindak pada / bereaksi terhadap data model, dan masing-masing menghasilkan peristiwa yang mungkin atau mungkin tidak mereka tangani secara langsung), tampaknya MVC tidak dapat diterapkan dengan rapi. (Tapi tolong perbaiki saya jika bukan itu masalahnya.)

-

( Pertanyaan ini menghasilkan dua saran tentang penggunaan ajax, yang jelas diperlukan untuk hal lain selain aplikasi satu halaman yang paling sepele.)

Arsitektur MVC PureMVC / JS adalah IMO paling elegan. Saya belajar banyak dari hal itu. Saya juga menemukan Arsitektur Aplikasi JavaScript yang Dapat Diskalakan oleh Nicholas Zakas membantu dalam meneliti opsi arsitektur sisi klien.

Dua tips lainnya

1. Saya telah menemukan tampilan, fokus, dan manajemen input adalah area yang membutuhkan perhatian khusus dalam aplikasi web satu halaman
2. Saya juga merasa terbantu untuk mengabstraksi perpustakaan JS, membiarkan pintu terbuka untuk mengubah pikiran tentang apa yang Anda gunakan, atau mencampur & mencocokkan jika diperlukan.

Presentasi Nicholas Zakas seperti yang dibagikan oleh Dean adalah tempat yang sangat baik untuk memulai. Saya juga kesulitan menjawab pertanyaan yang sama untuk sementara waktu. Setelah melakukan beberapa produk Javascript skala besar, pikirkan untuk berbagi pembelajaran sebagai arsitektur referensi jika seseorang membutuhkannya. Lihat di:

http://boilerplatejs.org/

Ini membahas masalah umum pengembangan Javascript seperti:

• Penataan solusi
• Membuat hierarki modul yang kompleks
• Komponen UI mandiri
• Komunikasi antar modul berbasis acara
• Perutean, Riwayat, Bookmarking
• Pengujian Unit
• Lokalisasi
• Pembuatan Dokumen

dll.

Cara saya membangun aplikasi:

• Kerangka kerja ExtJS, aplikasi satu halaman, setiap komponen ditentukan dalam file JS terpisah, dimuat sesuai permintaan
• Setiap komponen menghubungi layanan web khusus (terkadang lebih dari satu), mengambil data ke penyimpanan ExtJS atau struktur data tujuan khusus
• Rendering menggunakan komponen ExtJS standar, jadi saya dapat mengikat penyimpanan ke kisi, memuat formulir dari catatan, ...

Cukup pilih kerangka kerja javascript, dan ikuti praktik terbaiknya. Favorit saya adalah ExtJS dan GWT, tetapi YMMV.

JANGAN menggulung solusi Anda sendiri untuk ini. Upaya yang diperlukan untuk menduplikasi apa yang dilakukan kerangka javascript modern terlalu besar. Selalu lebih cepat untuk mengadaptasi sesuatu yang ada daripada membangun semuanya dari awal.

Question - What makes an application complex ? 

Jawaban - Penggunaan kata 'kompleks' dalam pertanyaan itu sendiri. Oleh karena itu, kecenderungan umum adalah mencari solusi kompleks sejak awal.

Question - What does the word complex means ?

Jawaban - Segala sesuatu yang tidak diketahui atau dipahami sebagian. Contoh: Teori Gravitasi bahkan sampai hari ini LENGKAP bagi saya tetapi tidak bagi Sir Isaac Newton yang menemukannya pada tahun 1655.

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

Jawaban - Pemahaman dan kesederhanaan.

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

Jawaban - Pikirkan dua kali, karena pemahaman dan kompleksitas tidak berdampingan. Jika Anda memahami aplikasi besar yang sangat besar, saya yakin Anda akan setuju bahwa itu tidak lain adalah integrasi unit kecil dan sederhana.

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

Jawaban - Karena,

-> SPA bukanlah jenis teknologi inti yang baru ditemukan sehingga kita perlu menciptakan kembali roda untuk banyak hal yang kita lakukan dalam pengembangan aplikasi.

-> Ini adalah konsep yang didorong oleh kebutuhan akan kinerja, ketersediaan, skalabilitas, dan pemeliharaan aplikasi web yang lebih baik.

-> Ini adalah pola desain yang cukup baru diidentifikasi, sehingga pemahaman tentang SPA sebagai pola desain sangat membantu dalam mengambil keputusan berdasarkan informasi tentang arsitektur SPA.

-> Pada level root tidak ada SPA yang rumit, karena setelah memahami kebutuhan aplikasi dan pola SPA, Anda akan menyadari bahwa Anda masih membuat aplikasi, hampir sama dengan yang Anda lakukan sebelumnya dengan beberapa modifikasi dan pengaturan ulang dalam pendekatan pembangunan.

Question - What about the use of Frameworks ?

Jawaban - Kerangka kerja adalah kode / solusi pelat boiler untuk beberapa pola umum dan umum, sehingga dapat melepas beban x% (variabel, berdasarkan aplikasi) dari pengembangan aplikasi, tetapi tidak banyak yang diharapkan darinya, khususnya untuk yang berat dan aplikasi yang terus berkembang. Itu selalu merupakan kasus yang baik untuk memiliki kendali penuh atas struktur dan alur aplikasi Anda, tetapi yang terpenting adalah kode untuk itu. Tidak boleh ada area abu-abu atau hitam dalam kode aplikasi.

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

Jawaban - Pikirkan kerangka kerja Anda sendiri berdasarkan sifat aplikasi Anda. Kategorikan komponen aplikasi. Carilah framework yang sudah ada yang dekat dengan framework turunan kamu, jika kamu menemukannya maka gunakanlah, jika kamu tidak menemukannya maka saya sarankan untuk melanjutkan dengan milik kamu sendiri. Membuat kerangka kerja merupakan upaya yang cukup sulit tetapi menghasilkan hasil yang lebih baik dalam jangka panjang. Beberapa komponen dasar dalam kerangka SPA saya adalah:

• Sumber Data: Model / Koleksi Model

• Mark Up untuk menyajikan data: Template

• Interaksi dengan aplikasi: Acara

• Penangkapan status dan navigasi: Perutean

• Utilitas, widget, dan plug-in: perpustakaan

Beri tahu saya jika ini membantu dengan cara apa pun dan semoga berhasil dengan arsitektur SPA Anda !!

Hal terbaik yang harus dilakukan adalah melihat contoh penggunaan framework lain:

TodoMVC menampilkan banyak kerangka SPA.

Anda dapat menggunakan kerangka MVC javascript http://javascriptmvc.com/

Aplikasi web yang sedang saya kerjakan menggunakan JQuery dan saya tidak akan merekomendasikannya untuk aplikasi web satu halaman besar. Kebanyakan framework seperti Dojo, yahoo, google dan lainnya menggunakan namespace di perpustakaan mereka tetapi JQuery tidak dan ini merupakan kelemahan yang signifikan.

Jika situs web Anda dimaksudkan untuk menjadi kecil maka JQuery akan baik-baik saja tetapi jika Anda bermaksud membangun situs besar maka saya akan merekomendasikan untuk melihat semua kerangka Javascript yang tersedia dan memutuskan mana yang paling memenuhi kebutuhan Anda.

Dan saya akan merekomendasikan menerapkan pola MVC ke javascript / html Anda dan mungkin sebagian besar model objek Anda untuk javascript dapat dilakukan sebagai json yang sebenarnya Anda kembalikan dari server melalui ajax dan javascirpt menggunakan json untuk membuat html.

Saya akan merekomendasikan membaca buku Ajax in action karena mencakup sebagian besar hal yang perlu Anda ketahui.

Saya menggunakan Samm.js di beberapa aplikasi satu halaman dengan sukses besar

Saya akan menggunakan jQuery MVC

Lihat http://bennadel.com/projects/cormvc-jquery-framework.htm Ben cukup tajam dan jika Anda menggali di blognya dia memiliki beberapa posting bagus tentang bagaimana CorMVC disatukan dan mengapa.

Alternatif: lihat ItsNat

Pikirkan dalam JavaScript tetapi kode yang sama di Java di server dengan API DOM yang sama, di server jauh lebih mudah untuk mengelola aplikasi Anda tanpa klien / jembatan khusus karena UI dan data digabungkan.

Atau lihat di https://github.com/flosse/scaleApp

NikaFramework memungkinkan Anda membuat aplikasi satu halaman. Juga memungkinkan Anda untuk menulis HTML , CSS ( SASS ), JavaScript ke dalam file terpisah dan menggabungkannya menjadi hanya satu file output pada akhirnya.

Saya akan merekomendasikan untuk menjelajahi Yeoman . Ini memungkinkan Anda untuk menggunakan "praktik terbaik" yang ada untuk proyek baru Anda.

Sebagai contoh:

jika Anda memutuskan untuk menggunakan Angular.js, ada generator Yeoman , yang memberi Anda struktur untuk perutean, tampilan, layanan, dll. Juga memungkinkan Anda untuk Menguji, memperkecil kode Anda, dll.

Jika Anda memutuskan untuk menggunakan Backbone, periksa generator ini