Kerangka kerja JavaScript untuk membangun aplikasi satu halaman [ditutup]

101

Tujuan saya adalah untuk memigrasi aplikasi web yang ada ke aplikasi satu halaman RESTful (SPA). Saat ini, saya sedang mengevaluasi beberapa framework aplikasi web Javascript.


Persyaratan saya adalah sebagai berikut:

  • Lapisan data tenang (seperti ember-data)
  • MV * -struktur
  • Rute dinamis
  • Pengujian-dukungan
  • Pengkodean dengan konvensi
  • Dukungan SEO
  • Dukungan-Sejarah-Browser
  • Dokumentasi yang baik (API-)
  • Siap produksi
  • Komunitas yang hidup

Tulang punggung

Aplikasi saat ini menggunakan backbone.js. Secara keseluruhan, backbone.jsini adalah proyek yang bagus, tetapi saya kehilangan struktur yang terdefinisi dengan baik yang menentukan di mana apa yang harus terjadi dan bagaimana hal-hal harus dilaksanakan. Bekerja dalam tim yang lebih besar dengan pengembang yang berubah-ubah, hal ini mengarah pada semacam kode yang tidak terstruktur, sulit dipelihara, dan sulit dipahami. Inilah mengapa saya sekarang mencari kerangka kerja, yang sudah mendefinisikan semua hal ini.

Bara

Saya melihat ke ember.jshari-hari terakhir. Pendekatannya tampaknya sangat menjanjikan bagi saya. Tapi, sayangnya, kodenya berubah hampir setiap hari. Jadi, saya tidak akan menyebutnya siap produksi. Dan, sayangnya, kami tidak sabar menunggu ini menjadi versi 1.0. Tapi saya sangat menyukai ide di balik kerangka ini.

Angular

Angular.jsjuga merupakan kerangka kerja yang tersebar luas, dikelola oleh Google. Tapi saya tidak bisa terbiasa dengan sudut. Bagi saya, strukturnya tampak agak tidak jelas, penjelasan yang hilang tentang tanggung jawab keseluruhan dari setiap bagian kerangka, dan implementasinya terasa berputar-putar. Hanya untuk meluruskan ini: ini hanya kesan pribadi saya dan mungkin didasarkan pada pengetahuan yang hilang.

Batman dan Meteor

Seperti yang saya pahami, kedua kerangka kerja membutuhkan bagian server juga. Dan karena kami hanya menginginkan backend yang tenang - tidak peduli bahasa, teknik, atau perangkat lunaknya, ini bukanlah yang kami inginkan. Selanjutnya, API backend sudah ada (RoR).

Knockout , CanJS dan Spine

Saya tidak membahas lebih dalam tentang ketiga kandidat ini. Mungkin ini akan menjadi langkah saya selanjutnya.


Jadi pertanyaan saya sekarang:

  • Apakah saya melewatkan SPA-framework yang bagus?
  • Kerangka apa yang akan Anda sarankan / rekomendasikan?
  • Apakah Anda akan menghindari salah satu kerangka kerja yang disebutkan?
  • Apa pengalaman Anda dalam aplikasi SP yang lebih besar?

NB: Saya ingin merekomendasikan posting blog yang bagus dari Steven Anderson (pengembang inti dari Knockout.js) tentang konferensi "Tahta JS" (dari 2012) dan kerangka kerja javascript secara umum.

PS: Ya saya tahu sudah ada beberapa pertanyaan tentang SO. Namun karena perkembangan yang begitu pesat dan pesat untuk SPA, kebanyakan dari mereka sudah ketinggalan zaman.

Christopher Will
sumber
Lihat kerangka SPA berbasis sistem gugur yang baru saja saya buka: knockout-spa github.com/onlyurei/knockout-spa
onlyurei

Jawaban:

81

Saya baru-baru ini harus memutuskan kerangka kerja SPA JavaScript pada sebuah proyek juga.

  • Bara

    Melihat Ember sejak awal dan memiliki pemikiran yang sama dengan Anda - saya sangat menyukainya tetapi rasanya masih terlalu dini untuk digunakan ... sekitar setengah dari tutorial yang saya baca tidak berfungsi dengan versi saat ini karena ada sesuatu yang baru-baru ini berubah dalam cara kerja template.

  • Tulang punggung

    Backbone adalah kerangka kerja pertama yang kami perhatikan dengan serius. Saya tidak yakin saya mengerti mengapa menurut Anda tidak ada "struktur yang terdefinisi dengan baik"? Backbone cukup jelas tentang bagaimana membagi kode Model dan View. Mungkin maksud Anda tidak ada semacam template aplikasi? Bagaimanapun, Backbone tampaknya benar-benar fokus pada model / bagian pengikat REST, tetapi tidak benar-benar meresepkan apa pun untuk pengikatan tampilan. Jika pengikatan model penting bagi Anda dan Anda menggunakan Rails, akan sangat mudah melakukannya. Sayangnya, layanan web untuk aplikasi saya tidak benar-benar cocok, dan saya harus menulis sendiri .syncdan .parsemetode saya untuk semuanya. Pemisahan kode Model dan View bagus, tetapi karena kita harus menulis semua binding dari awal, itu tidak sepadan.

  • Pukulan knockout

    Knockout seperti Yin to Backbone's Yang. Dimana Backbone difokuskan pada Model, Knockout adalah kerangka kerja MVVM dan difokuskan pada View. Ini memiliki observablepembungkus untuk properti objek JavaScript dan menggunakan data-bindatribut untuk mengikat properti ke HTML Anda. Pada akhirnya kami pergi dengan Knockout karena view binding terutama yang kami butuhkan untuk aplikasi kami. (... ditambah lainnya, seperti yang akan dibahas nanti ...) Jika Anda menyukai tampilan Knockout yang mengikat dan ikatan model Backbone, ada juga KnockBack yang menggabungkan kedua kerangka kerja.

  • Angular

    Melihat ini setelah Knockout - sayangnya kami semua tampak cukup senang dengan bagaimana Knockout memang memandang mengikat. Tampaknya jauh lebih kompleks dan lebih sulit untuk dimasuki daripada Knockout. Dan itu menggunakan banyak atribut HTML khusus untuk melakukan pengikatan, yang saya tidak yakin saya suka ... Saya dapat melihat lagi di Angular nanti, karena saya telah menemukan banyak orang yang sangat menyukai kerangka itu - mungkin kita hanya melihatnya terlambat untuk proyek ini.

  • Batman , Meteor , CanJS , Spine

    Tidak terlalu memperhatikan semua ini. Meskipun saya tahu Spine adalah kerangka kerja yang mirip dengan Backbone dengan objek Controller eksplisit, dan ditulis dalam CoffeeScript.

  • Kata Penutup

    Seperti yang saya sebutkan, kami akhirnya menggunakan Knockout karena, untuk proyek kami, fokus pada pengikatan tampilan lebih penting. Kami juga akhirnya menggunakan RequireJS untuk modularisasi, persimpangan dan Hasher untuk menangani perutean dan riwayat, Jasmine untuk pengujian, serta JQuery , Twitter Bootstrap , dan Underscore.js (dan mungkin lebih banyak pustaka yang saya lupakan saat ini).

    Pengembangan aplikasi Javascript lebih seperti ekosistem Java daripada ekosistem Rails. Rails menyediakan inti yang solid dari hal-hal yang akan Anda gunakan untuk setiap aplikasi (framework Rails), dan komunitas menyediakan banyak penyesuaian di atasnya (permata). Java menyediakan ... bahasa. Dan kemudian Anda dapat memilih Java EE atau Spring atau Play atau Struts atau Tapestry. Dan pilih JDBC atau Hibernate atau TopLink atau Ibatis untuk berbicara ke database. Lalu Anda dapat menggunakan Ant atau Maven atau Gradle untuk membuatnya. Dan memilih Tomcat atau Jetty atau JBoss atau WebLogin untuk menjalankannya di. Jadi ada lebih menekankan pada memilih apa yang Anda perlu dan apa yang bekerja bersama-sama daripada memilih THE kerangka kerja untuk digunakan.

Nate
sumber
Terima kasih banyak atas jawaban rinci Anda. Beberapa pertanyaan tentang knockout.js: 1) Apakah ini menyediakan semacam lapisan data untuk menjaga model di frontend / backend sinkron? 2) Bagaimana dukungan untuk memasukkan satu template ke template lainnya (mungkin bersama dengan requireJS)? 3) Apakah mudah untuk meletakkan semua file (model, view, controller, helper dll) secara terpisah dan di folder yang berbeda? Di samping pertanyaan-pertanyaan ini saya menetapkan jawaban Anda untuk diterima, karena Anda memberi banyak informasi.
Christopher Will
@ChristopherWill Terima kasih! 1.) Sama seperti Backbone menyerahkannya kepada Anda untuk view binding, Knockout menyerahkannya kepada Anda untuk REST-> Model binding. Ada beberapa contoh dalam dokumentasi - knockoutjs.com/documentation/json-data.html atau Anda dapat menggunakan KnockBack untuk menggabungkan REST-> Model populasi Backbone.
Nate
2.) Itu tergantung pada apa yang Anda maksud - Knockout memiliki pengikatan data bawaan yang memungkinkan Anda mengambil koleksi dari model, mengikat ke tag daftar atau tag tabel dan untuk masing-masing merender template yang ditentukan. Untuk hal-hal skala besar, seperti bagaimana Anda membangun tampilan keseluruhan dan menukarnya - itu masih agak manual (setidaknya bagaimana saya melakukannya, masih belajar) - RequireJS dengan plugin teks membuatnya sedikit lebih mudah untuk melakukan ini, tetapi Anda masih harus menentukan logika dan menukar div - Saya hanya melakukan ini dalam metode yang merespons rute saya. Anda mungkin bisa memasang acara Knockout untuk melakukan ini.
Nate
3.) RequireJS adalah apa yang memungkinkan Anda melakukan ini.
Nate
Terima kasih Nate. Saya pikir saya akan mencoba KnockBack .. kedengarannya menjanjikan. Dan, tentu saja, dengan perpustakaan yang Anda sebutkan juga (requireJS, persimpangan jalan, dll.)
Christopher Will
8

Sudah setahun sejak kami memulai pengembangan pada proyek layanan Cloud kami dengan banyak SPA, jadi itu adalah keputusan besar, kerangka kerja javascript mana yang akan digunakan untuk UI kami guna memenuhi kebutuhan arsitektur RESTful kami. dan setelah banyak penelitian kami akhirnya menggunakan kerangka Dojo .

fitur utama yang akan Anda sukai:

  1. komunitas terpelajar dan tim yang menghasilkan pola desain yang sempurna. konvensi hebat dan arsitektur modular / berorientasi objek. dengan sikap pemrograman CrossBrowser :)
  2. Struktur MV *. buat widget UI dengan template .htm eksternal dan untuk produksi, buat semua javascript & template Anda menjadi satu .js yang diperkecil dan kecil
  3. membangun kelas dengan warisan. penyetel properti, banyak alat fungsi.
  4. mekanisme pub / sub (topik bernama di dojo)
  5. banyak kontrol UI, dari kontrol form validasi, dialog / tooltips hingga solusi grafik & data-grid berfitur berat, sangat dapat disesuaikan (tapi ringan).
  6. sistem pengujian unit yang baik bernama DOH. itu juga memiliki robot untuk mereproduksi gerakan mouse / keyboard.
  7. alat kueri (seperti JQuery) bernama NodeList dengan semua fitur jquery dan bahkan banyak pluginnya.
  8. dan bagian yang bagus tapi tidak begitu lengkap. itu memiliki modul JsonRest untuk digunakan dengan layanan REST Anda. ini adalah alat yang berguna tetapi tidak memiliki banyak fitur.

untuk mengatasi masalah ini, kami mengembangkan poller AJAX, penanganan kesalahan dan solusi universal, pemuatan & pemberitahuan. kami melakukannya dengan sangat mudah menggunakan konvensi dan struktur kerangka kerja dojo. Jika Anda tidak ingin melakukan itu, mungkin Anda harus menggunakan framework lain untuk bagian ini.

melihat SPA-SPA hebat di seluruh web, Anda akan mengetahui semuanya disesuaikan dan menggunakan banyak kerangka kerja. tapi pengalaman kami dengan Dojo saja luar biasa. dan oleh karena itu saya menyarankan Anda untuk tidak memikirkan kerangka kerja lain karena semuanya tidak lengkap untuk SPA. tetapi pada akhirnya Anda juga memiliki opsi lain (yang tidak saya rekomendasikan dan tidak memiliki informasi detail). gunakan kerangka kerja JAVA yang mampu membangun SPA, dengan menghasilkan UI & javascript secara otomatis.

Unicornist
sumber
Halo! Apakah Anda menggunakan Dojo sekarang? Sudahkah Anda membuat blog tentang Dojo?
Dunaevsky Maxim
Hai! Ya, kami masih menggunakannya untuk produk yang sama dan kami memeliharanya. kerangka kerja in-house ditulis di atas dojo, dan kami menambahkannya setiap hari .. tidak, saya tidak punya blog untuk itu. jika Anda akan memulainya, sekarang ini dianggap sebagai alat lama. Mereka masih mengerjakan Dojo 2.0 tetapi untuk saat ini mungkin lebih baik menggunakan opsi lain. kami memiliki React / Angular di bagian atas daftar.
Unicornist