Di mana saya salah tentang proyek saya dan Kerangka Javascript ini?


107

Pertama, tulang paling sederhana dari proyek yang ingin saya buat adalah mesin wiki yang diimplementasikan sebagai aplikasi web satu halaman. Saya berencana untuk memiliki satu set fitur yang tersedia sejak awal dengan banyak penambahan fitur di masa mendatang.

Fitur dasar

  • pembuatan halaman (membuat artikel wiki dan forum diskusi untuk artikel itu)
  • markup dan WYSIWYG ala markitup
  • konversi on-the-fly antara markup / html / WYSIWYG
  • bilah samping untuk navigasi cepat
  • toolbar atas untuk memilih edit / view

Fitur lanjutan

  • bilah samping yang dapat dikonfigurasi untuk menavigasi melalui metode yang berbeda
  • toolbar yang dapat dikonfigurasi (mungkin menambahkan bahasa markup pilihan)
  • tag
  • rencana yang dapat diedit
  • seret dan lepas unggahan file dan lampiran gambar

Mesin awalnya terdiri dari pembuatan halaman paling dasar, markup dan pengeditan WYSIWYG, serta penyimpanan. Saya akhirnya ingin memperluas mesin dasar ini dengan dukungan gambar seret dan lepas, unggahan file, grafik data langsung, dan bilah sisi untuk menyesuaikan tampilan.

Saya telah melakukan pencarian yang cukup ekstensif untuk proyek yang layak untuk mendasarkan proyek saya, tetapi selain TiddlyWiki tampaknya tidak ada mesin wiki berbasis javascript yang bagus. Saya juga mempertimbangkan untuk menerapkan Jquery di atas mesin wiki yang ada, tetapi saya yakin pada akhirnya saya akan menulis ulang juga (Ditambah lagi hanya lebih menarik untuk menambahkan fitur yang saya inginkan saat saya pergi). Either way saya telah sampai pada mengimplementasikan binatang ini dengan javascript library + framework.

Saya tahu bahwa seseorang tidak dapat benar-benar membandingkan beberapa kerangka kerja ini satu sama lain karena mereka sangat berbeda dengan apel. Saya telah mencoba untuk membingkai komentar / pertanyaan perbandingan apa pun terhadap bagian-bagian yang sebanding dari kerangka kerja masing-masing tetapi saya terbuka untuk dikoreksi.

Jadi ini dia:

Berdasarkan penelitian dan pendapat saya sendiri, saya telah mempersempit daftarnya menjadi item di bawah ini. Saya sengaja meninggalkan hal-hal seperti SproutCore, corMVC, YUI, dan lainnya karena saya, dalam kapasitas saya yang terbatas, mengira item di bawah ini akan lebih cocok.

Pilihan Saya


jquery / UI + backbonejs

Secara keseluruhan

Dari apa yang saya baca, kombinasi ini digunakan dan dicintai oleh banyak orang serta sangat fleksibel dan dapat diperluas. Perhatian utama saya adalah bahwa kombinasi ini bukanlah titik lompatan terbaik untuk mengembangkan antarmuka UI yang lebih berorientasi desktop.

UI

Meskipun jQueryUI atau jqueryTools mungkin kompetitif, mereka tampaknya tidak setara dengan kemampuan UI framework lain. Secara khusus mereka tampaknya berat pada efek tetapi kurang pada dukungan pemotongan tata letak yang layak.

javascriptMVC

Secara keseluruhan

JavascriptMVC bagi saya terlihat seperti ekstensi jquery + MVC (jqueryMX), bersama dengan beberapa aplikasi lain untuk mendokumentasikan (documentJS), tes fungsional (funcUnit), dan kode dan manajemen ketergantungan (stealJS). Di luar manfaat modul tambahan, saya pikir debat fungsional benar-benar bermuara pada backbonejs vs. jqueryMX Apakah saya benar dalam hal ini dan apakah ada yang bekerja dengan atau membandingkan keduanya?

  • Fitur: ikhtisar jupiter (pembuat jMVC) tentang fitur mereka
  • Tautan ke jqueryMX

UI

JavascriptMVC menambahkan item MXUI di atas apa pun yang tersedia untuk Jquery jadi saya pikir setidaknya itu adalah sedikit kemenangan dalam kategori itu.

knockoutjs

Secara keseluruhan

Pemikiran dan perhatian saya tentang hal ini sangat mirip dengan komentar jquery + backbone. Keduanya tampaknya menawarkan fitur serupa tetapi hanya dari perspektif yang berbeda. Kelemahan yang sering dikutip adalah bahwa knockoutjs memasangkan logika bisnis dan presentasi terlalu erat dengan data-bind's dan bahwa metode pengikatan ini dapat rusak untuk interaksi UI yang kompleks, tetapi saya ingin sekali mendengar mengapa itu bukan masalah.

UI

Kosong saat ini

Dojo & ExtJS

Secara keseluruhan

Saya akan menggabungkan diskusi Dojo dan ExtJS karena saya tahu sedikit tentang mereka dan mereka tampaknya bermain di ruang yang hampir sama. Sebagian besar informasi tentang stackoverflow tentang keduanya tampaknya sudah kedaluwarsa. Dari apa yang saya lihat adalah bahwa keduanya adalah kerangka kerja besar yang bagus untuk implementasi aplikasi kaliber desktop. Dojo telah dimarahi karena dokumentasi yang buruk tetapi tampaknya tidak lagi demikian. ExtJS tentu saja memiliki lisensi komersial, tetapi sangat masuk akal untuk apa yang Anda dapatkan dan saya tidak akan terlalu menentangnya. Widget di ExtJS tampaknya dibuat lebih profesional daripada Dojo, tapi saya pasti bisa memperbaikinya di sana. Saya akan tertarik untuk mendengar dari siapa saja yang memiliki pengalaman di keduanya.

UI

Dojo memiliki perpustakaan UI dijit ExtJS memiliki fitur UI tetapi mereka tidak dalam inti Ext. Berikut dokumentasi dan demo mereka

Cappuccino

Secara keseluruhan

Dan kemudian ada Cappuccino. Tanpa CSS, tanpa html, tetapi juga sulit untuk menggunakan pustaka javascript yang ada. Objective-J sepertinya tidak menakutkan, terutama mengingat mereka juga bisa menulis javascript biasa. Demo sangat mengesankan dan tampaknya mendekati kebutuhan UI untuk mesin wiki. API berbasis kakao banyak diterima oleh seseorang yang tidak terbiasa dengannya, tetapi mungkin itu sepadan. Saya telah mendengar mesin tata letak tidak selalu mudah untuk dikerjakan tetapi teknologi muda dan mungkin mengganggu seperti ini pasti akan memiliki beberapa kekurangan.

UI

Kosong saat ini

Saya minta maaf karena telah menulis begitu banyak tapi hei, setidaknya itu bukan pertanyaan ax vs y vs z berharap banyak jawaban murah. Jadi apa yang Anda pikirkan? Apa yang harus menjadi dasar desktop saya seperti mesin wiki, yang diharapkan akan menjadi lebih kaya fitur (baca kompleks) dari waktu ke waktu?


9
1 untuk pertanyaan yang sangat mendetail dan dipikirkan dengan matang!
Sean Vieira

8
Tidak yakin dengan garis waktu dan sumber daya Anda, tetapi ketika saya mencoba untuk memutuskan antara beberapa kerangka kerja / lingkungan, saya langsung saja dan mencoba dengan cepat membangun prototipe. Meskipun itu hanya satu atau dua fungsi utama, saya menemukan bahwa semua penelitian dan dokumentasi di dunia tidak akan pernah cocok untuk mencoba membangun sesuatu dengan alat. Saya katakan luangkan satu hari dengan masing-masing dan lihat seberapa jauh Anda bisa. Itu akan memberi Anda indikasi yang cukup bagus tentang alat mana yang sesuai dengan tugas dan merasa paling nyaman untuk Anda.
Brian Flanagan

1
@ Brian Flanagan Pindah ke jawaban - meskipun "meta".

1
Pernahkah Anda melihat tiddlywiki.com , saya pikir itu adalah wiki mandiri murni yang dilakukan dalam JavaScript
Bernhard

Ya, saya telah melihat tiddlywiki. Dalam banyak hal ini adalah inspirasi untuk proyek ini tetapi saya memiliki basis dan arahan saya sendiri yang dibayangkan untuk proyek ini.
funkyeah

Jawaban:


4

Saya sarankan pertama-tama buat persyaratan UI khusus untuk proyek Anda. Manakah dari kerangka kerja yang Anda coba yang telah Anda coba?

Secara pribadi, saya masuk ke pengembangan ExtJS karena proyek yang saya kerjakan membutuhkan banyak penyesuaian kontrol / widget. ExtJS memiliki banyak fitur langsung di luar kotak dan selalu dapat diperluas, digabungkan, atau disesuaikan menjadi monstrositas apa pun yang dibutuhkan bisnis Anda.

ExtJS 4 juga memungkinkan Anda untuk "mengatur" UI Anda untuk menyesuaikan tampilan dan nuansa lebih lanjut.

Jika Anda baru mengenal JavaScript, dan sudah terbiasa dengan Java, Anda bahkan mungkin melihat solusi sisi server seperti GWT , JSF , atau bahkan Vaadin


19

Tidak yakin dengan garis waktu dan sumber daya Anda, tetapi ketika saya mencoba untuk memutuskan antara beberapa kerangka kerja / lingkungan, saya langsung saja dan mencoba dengan cepat membangun prototipe. Meskipun itu hanya satu atau dua fungsi utama, saya menemukan bahwa semua penelitian dan dokumentasi di dunia tidak akan pernah cocok untuk mencoba membangun sesuatu dengan alat. Saya katakan luangkan satu hari dengan masing-masing dan lihat seberapa jauh Anda bisa. Itu akan memberi Anda indikasi yang cukup bagus tentang alat mana yang sesuai dengan tugas dan merasa paling nyaman untuk Anda.


6

adalah hal yang populer saat ini ( kerangka kerja JavaScript full-stack paling berbintang di GitHub dan Meteorpedia adalah mesin wiki yang ditulis dalam Meteor.

The Video Peluncuran akan membuat Anda ketagihan oleh 01:28.

Ini agnostik berkaitan dengan UI, dan telah diuji secara luas dengan Bootstrap dan Famo.us . Ini juga menghasilkan aplikasi seluler dari basis kode yang sama.


1
Dan ada integrasi dengan React tetapi itu hanya untuk orang-orang yang 100% menyukainya. Juga tidak ada masalah menggunakan plugin jquery dan pustaka gambar svg / kanvas tanpa banyak pengetahuan tentang Meteor.
imslavko

1

Pilihan kerangka kerja Anda mungkin tidak membatasi pilihan UI Anda sebanyak yang Anda bayangkan. Artikel Henri Bergius baru-baru ini tentang decoupling manajemen konten mengilustrasikan poin yang jauh lebih baik daripada yang saya bisa - dan, secara kebetulan, menautkan ke editor konten di tempat JavaScript murni (tanpa kerangka kerja) yang tampak cantik .


Saya pasti sedang menggali editor aloha untuk WYSIWYG. Saya pasti akan memasangnya di bagian atas layar dan menambahkan tab untuk melihat area teks dalam markup dari beberapa format juga. Pilihan utama saya yang lain adalah beberapa rasa markItUp .
funkyeah

1

Anda tidak sendiri!

VanillaJS dan Ampersand .. adalah contoh yang bagus dari drive serius untuk JavaScript yang lebih sederhana dan lebih modular.

Bahkan ada Buku tentang itu.

Kesederhanaan didorong oleh fitur es6 yang dinilai rendah: Modul dan standar implementasi SystemJS . Bahkan dapat digunakan pada sistem non-es6.

Betapa kerennya itu!


1

Saya akan mengatakan Anda salah dalam pilihan keseluruhan kandidat karena Anda menghilangkan Angular dan Ember yang keduanya lebih cocok daripada kerangka kerja lain yang terdaftar.

Secara keseluruhan, menurut saya Angular.js adalah kerangka kerja untuk yang satu ini.

Penekanan pada Perutean

Sebagian besar yang Anda bicarakan (beberapa bilah sisi untuk navigasi, aplikasi satu halaman) adalah fungsi perutean, atau bagaimana ujung depan menafsirkan teks di bilah navigasi URL Anda.

Baik Angular.js dan Ember memiliki perute luar biasa yang memungkinkan Anda menyelesaikan semua yang Anda butuhkan tanpa kode tambahan.

Untuk keuntungan Anda, berikut adalah rincian singkat dari fitur-fitur di Angular yang dapat digunakan untuk membuat wiki halaman tunggal Anda

Struktur Situs Itu Sendiri

Angular memiliki pustaka luar biasa yang disebut router UI memungkinkan Anda membuat navigasi khusus dan menyiapkan struktur ramah SEO untuk mengungkapkan konten Anda. Beberapa tampilan akan memungkinkan toolbar atas juga.

Tutorial Ui router: http://cacodaemon.de/index.php?id=57

Editor WYSIWYG

Angular dibangun pada pengikatan dua arah langsung (ketika Anda mengubah sesuatu di suatu tempat, secara otomatis berubah di tempat lain.) Oleh karena itu, Angular dikemas dengan banyak fitur yang bekerja dengan baik dengan jenis editor ini. Beberapa yang bagus telah dibuat dan Anda hanya perlu menerapkannya.

http://textangular.com/

Grafik dan Barang Rapi Lainnya

Arahan sudut dirancang untuk melakukan hal-hal seperti membuat komponen Bagan yang dapat digunakan kembali. Mereka tidak jauh berbeda dari Widget Wordpress. Banyak dari ini telah dikembangkan dan dapat dimasukkan ke dalam proyek Angular Anda.

http://www.sitepoint.com/creating-charting-directives-using-angularjs-d3-js/

Mengenai Ember, saya tidak tahu banyak tentangnya jadi saya tidak bisa berbicara tentang fitur khususnya.


0

Satu saran tentang Backbone, jika Anda memutuskan untuk menggunakannya, Anda harus menggunakan Marionnete karena itu Backbone tetapi dengan struktur arsitektur yang lebih baik dan lebih beropini (saya pribadi merasa bahwa Backbone tidak menetapkan pedoman apa pun dan itu terasa seperti kerugian di aplikasi besar) .

Saya bekerja dengannya selama beberapa bulan menggabungkan js libs yang berbeda dan tidak menghalangi Anda seperti kerangka kerja lain dan pipeline pesan adalah cara yang sangat baik untuk menghubungkan komponen melalui aplikasi tetapi tetap memisahkannya.

Di sini Anda memiliki pembicaraan hebat yang membuat saya memutuskan untuk itu: https://www.youtube.com/watch?v=qWr7x9wk6_c

Dan di sini Anda memiliki prototipe demo yang juga memiliki elemen seret dan lepas plus js libs lain yang terhubung. Ingin sekali mendengar pendapat Anda tentang kode saya karena saya sudah 1,5 tahun mengerjakan pengembangan web ... saya masih pemula: https://github.com/Drasky-Vanderhoff/marionette-demo/

Tentang Knockout, sangat bagus jika Anda menginginkan interaksi dengan konten yang sudah Anda miliki dan Anda tidak akan terus-menerus terhubung dengan backend. Saya bekerja dengannya selama 6 bulan dan akhirnya saya perlu menggunakan banyak js libs lain untuk perutean; ditambah lagi saya akhirnya mengulangi banyak struktur yang dimiliki Backbone dan JS Frameworks lainnya. Apa yang akan saya katakan adalah bahwa itu tidak akan menghalangi Anda sama sekali dan menjadi alat alih-alih pembatas. Juga ini hampir setahun yang lalu jadi beberapa hal telah berubah.

Satu hal, jika Anda menemukan Knockback (Knockout + Backbone) ... hindari, dokumentasinya tidak sebaik yang seharusnya dan akan membutuhkan lebih banyak waktu untuk mempelajarinya. Jika Anda ingin melakukannya, buatlah prototipe cepat terlebih dahulu untuk melihat apakah itu yang Anda inginkan.


Sudah setahun sejak Anda memposting ini. Saat saya ingin memulai pengembangan baru sekarang, apakah Marionette masih menjadi pilihan utama Anda untuk pengembangan Javascript?
AlVaz

Tidak sama sekali, sekarang lebih baik menggunakan Angular.js atau React.js (Anda dapat menggabungkan keduanya jika Anda mau). Jika Anda ingin versi seluler dan web untuk suatu aplikasi, saya sangat menyarankan Anda untuk menggunakan React.js karena React Native digunakan untuk membuat aplikasi asli iOS dan Android. Baik React.js dan native berbagi konsep, struktur, dan paradigma yang sama (Belajar sekali, gunakan di mana saja, Mengetahui React.js == React Native, ya saya Tidak menggunakan triple sama dengan: P)
DraskyVanderhoff

Juga ada Komponen Web yang menggunakan Polymer yang saya sangat menyarankan Anda untuk memeriksanya jika ingin bekerja dengan kerangka kerja terpanas tahun depan. Terakhir, Meteor adalah opsi yang bagus jika Anda membutuhkan sinkronisasi data waktu nyata 100% / pengikatan data tiga arah, terutama karena jika Anda menulis validator untuk params, itu akan menjalankan validator yang sama baik di backend dan frontend, hindari kebutuhan memiliki 2 kode basis yang sama.
DraskyVanderhoff

Satu klarifikasi, saya tidak pernah mengatakan bahwa Marionette adalah pilihan utama saya (itu sebenarnya Angular pada saat itu) apa yang saya katakan adalah bahwa JIKA Anda akan menggunakan Backbone.js MEREKA menggunakan Marionette.js sebagai gantinya.
DraskyVanderhoff
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.