Projem ve bu Javascript Çerçeveleri hakkında nerede yanılıyorum?


107

Öncelikle, oluşturmak istediğim projenin en çıplak kemikleri, tek sayfalık bir web uygulaması olarak uygulanan bir wiki motorudur. Yol boyunca pek çok özellik ilavesi ile hareket halindeyken bir dizi özelliğe sahip olmayı planlıyorum.

Temel özellikler

  • sayfa oluşturma (o makale için hem wiki makalesi hem de tartışma forumu oluşturur)
  • biçimlendirme ve WYSIWYG ala biçimlendirme
  • biçimlendirme / html / WYSIWYG arasında anında dönüşüm
  • hızlı gezinmek için bir yan çubuk
  • düzenleme / görüntüleme seçimi için üst araç çubuğu

Gelişmiş özellikler

  • farklı yöntemlerle gezinmek için yapılandırılabilir yan çubuk
  • yapılandırılabilir araç çubuğu (muhtemelen tercih ettiğiniz biçimlendirme dilini ekleyin)
  • etiketleri
  • düzenlenebilir yapılacaklar
  • dosya yüklemelerini ve resim eklerini sürükle ve bırak

Motor başlangıçta en temel sayfa oluşturma, işaretleme ve WYSIWYG düzenleme ve kaydetme işlemlerinden oluşacaktı. Sonunda bu temel motoru sürükle ve bırak görüntü desteği, dosya yüklemeleri, canlı veri grafikleri ve görünümleri özelleştirmek için bir kenar çubuğu ile genişletmek istiyorum.

Projemi temel alacağım iyi bir proje için oldukça kapsamlı bir araştırma yaptım, ancak TiddlyWiki dışında herhangi bir iyi javascript tabanlı wiki motoru görünmüyor. Ayrıca mevcut wiki motorlarının üstüne Jquery uygulamayı düşündüm, ancak sonunda onu yeniden yazacağıma inanıyorum (Ayrıca, giderken istediğim özellikleri eklemek daha heyecan verici). Her iki durumda da bu canavarı bir javascript kütüphanesi + çerçevesi ile uygulamaya başladım.

Bu çerçevelerden bazılarının birbirleriyle karşılaştırılamayacağını biliyorum çünkü bunlar elma ile elma değildir. Herhangi bir karşılaştırma yorumunu / sorusunu ilgili çerçevelerin karşılaştırılabilir parçalarıyla çerçevelemeye çalıştım, ancak düzeltilmeye açığım.

İşte başlıyoruz:

Kendi araştırmalarıma ve görüşlerime dayanarak listeyi aşağıdaki maddelere indirdim. SproutCore, corMVC, YUI ve diğerleri gibi şeyleri kasıtlı olarak dışarıda bıraktım, çünkü sınırlı kapasitemde aşağıdaki öğelerin daha uygun olacağını düşündüm.

Seçeneklerim


jquery / UI + backbonejs

Genel

Okuduğum kadarıyla bu kombinasyon birçok kişi tarafından kullanılıyor ve seviliyor ve çok esnek ve genişletilebilir. En büyük endişem, bu kombinasyonun daha masaüstü odaklı UI arayüzünü geliştirmek için en iyi atlama noktası olmamasıdır.

UI

JQueryUI veya jqueryTools rekabet edebilirken, diğer çerçevelerin UI yetenekleriyle kesinlikle eşit görünmüyorlar. Spesifik olarak, etkileri ağır gibi görünüyorlar, ancak düzgün düzen dilimleme desteğinden yoksunlar.

javascriptMVC

Genel

Bana göre JavascriptMVC, aslında jquery + MVC (jqueryMX) uzantıları, belgeleme (documentJS), fonksiyonel testler (funcUnit) ve kod ve bağımlılık yönetimi (stealJS) için birkaç başka uygulama gibi görünüyor. Ek modülün faydalarının ötesinde, işlevsel tartışmanın gerçekten de jqueryMX'e karşı backbonejs ile ilgili olduğunu düşünüyorum. Bu konuda haklı mıyım ve herhangi biri her ikisiyle çalıştı mı veya karşılaştırdı mı?

UI

JavascriptMVC, MXUI öğelerini Jquery için mevcut olanların üstüne ekler, bu yüzden en azından bu kategoride küçük bir kazanç olduğunu düşünüyorum.

nakavt

Genel

Bununla ilgili düşüncelerim ve endişelerim jquery + omurga yorumlarına çok benziyor. Her ikisi de benzer özellikler sunuyor gibi görünüyor, ancak sadece farklı bir açıdan. Sıklıkla belirtilen bir dezavantajı, nakavtların iş mantığını ve sunumu veri bağlarıyla çok sıkı bir şekilde birleştirmesi ve bu bağlama yönteminin karmaşık UI etkileşimi için bozulabileceği, ancak bunun neden bir sorun olmadığını duymak isterim.

UI

Şu anda boş

Dojo ve ExtJS

Genel

Dojo ve ExtJS tartışmasını birleştireceğim çünkü onlar hakkında en az şey biliyorum ve neredeyse aynı alanda oynuyorlar gibi görünüyorlar. Bu ikisi hakkında yığın akışı hakkındaki bilgilerin çoğu güncel değil gibi görünüyor. Gördüğüm kadarıyla ikisi de masaüstü calibre uygulaması uygulaması için iyi olan büyük çerçevelerdir. Dojo, yetersiz dokümantasyon nedeniyle suçlanmıştı, ancak artık durum böyle değil. ExtJS elbette ticari lisansa sahip, ancak aldığınız şey için gerçekten makul ve bunu buna çok fazla karşı tutmam. ExtJS'deki widget'lar Dojo'dan biraz daha profesyonelce yapılmış gibi görünüyor, ancak kesinlikle orada düzeltilebilirim. Her ikisinde de deneyimi olan herkesten haber almak isterim.

UI

Dojo, dijit UI kitaplığına sahiptir ExtJS, UI özelliklerine sahiptir, ancak bunlar Ext çekirdeğinde değildir. İşte belgeler ve işte demoları

Cappuccino

Genel

Ve bir de Cappuccino var. CSS yok, html yok ama aynı zamanda mevcut javascript kitaplıklarını kullanmak da zor olabilir. Objective-J korkutucu görünmüyor, özellikle de düz javascript yazabildiklerini düşünürsek. Demolar etkileyici ve wiki motoru için kullanıcı arayüzü ihtiyaçlarına yakından yaklaşıyor gibi görünüyor. Kakao bazlı API, aşina olmayan biri için çok şey kabul edilebilir, ancak buna değer olabilir. Düzen motoruyla çalışmanın her zaman kolay olmadığını duydum, ancak bunun gibi genç ve muhtemelen yıkıcı bir teknolojinin kesinlikle bazı eksiklikleri olacak.

UI

Şu anda boş

Bu kadar çok yazdığım için özür dilerim ama hey, en azından bir sürü ucuz cevap umuduyla axe vs y vs z sorusu değil. Yani ne düşünüyorsun? Wiki motoru gibi masaüstümün temeli ne olmalı, umarım zamanla daha zengin özellikli (karmaşık okuma) hale gelir?


9
İnanılmaz derecede ayrıntılı ve iyi düşünülmüş bir soru için +1!
Sean Vieira

8
Zaman çizelgeniz ve kaynaklarınız hakkında emin değilim, ancak birden fazla çerçeve / ortam arasında karar vermeye çalışırken, sadece devam ediyorum ve hızlı bir şekilde bir prototip oluşturmaya çalışıyorum. Sadece bir veya iki temel işlev olsa bile, dünyadaki tüm araştırma ve belgelerin aslında araçlarla bir şeyler inşa etmeye çalışmakla asla eşleşmeyeceğini görüyorum. Her biri için bir gün ayırın ve ne kadar ilerlediğinizi görün derim. Bu size hangi araçların göreve hazır olduğuna dair oldukça iyi bir fikir verecek ve sizin için en rahat hissedecek.
Brian Flanagan

1
@Brian Flanagan Bir cevaba gidin - "meta" olsa bile.

1
Tiddlywiki.com'a baktınız mı , sanırım bu JavaScript ile yapılmış tamamen kendi kendini içeren bir wiki
Bernhard

Evet, tiddlywiki'ye baktım. Birçok yönden bu proje için ilham kaynağı ama bu proje için kendi temelim ve yönüm var.
funkyeah

Yanıtlar:


4

Öncelikle projeniz için belirli UI gereksinimleri bulmanızı öneririm. Denediğin çerçevelerden hangisini denedin?

Kişisel olarak, ExtJS geliştirmeye girdim çünkü üzerinde çalıştığım projeler, kontrollerin / widget'ların çok fazla özelleştirilmesini gerektiriyor. ExtJS, kutusundan çıkar çıkmaz bir ton içerir ve işletmenizin gerektirdiği her ne olursa olsun, her zaman genişletilebilir, birleştirilebilir veya parçalanabilir.

ExtJS 4 ayrıca görünüş ve hissi daha da özelleştirmek için kullanıcı arayüzlerinizin "dış görünümüne" izin verir.

JavaScript konusunda yeniyseniz ve Java konusunda rahatsanız , GWT , JSF ve hatta Vaadin gibi sunucu tarafı çözümlerine bile bakabilirsiniz.


19

Zaman çizelgeniz ve kaynaklarınız hakkında emin değilim, ancak birden fazla çerçeve / ortam arasında karar vermeye çalışırken, sadece devam ediyorum ve hızlı bir şekilde bir prototip oluşturmaya çalışıyorum. Sadece bir veya iki temel işlev olsa bile, dünyadaki tüm araştırma ve belgelerin aslında araçlarla bir şeyler inşa etmeye çalışmakla asla eşleşmeyeceğini görüyorum. Her biri için bir gün ayırın ve ne kadar ilerlediğinizi görün derim. Bu size hangi araçların göreve hazır olduğuna dair oldukça iyi bir fikir verecek ve sizin için en rahat hissedecek.


6

bugünlerde tüm öfke var ( GitHub ve Meteorpedia'daki en çok yıldızlı tam yığın JavaScript çerçevesi, Meteor ile yazılmış bir wiki motorudur.

Fırlatma Video Eğer 1:28 tarafından bağımlısı alacak.

UI açısından agnostiktir ve Bootstrap ve Famo.us ile kapsamlı bir şekilde test edilmiştir . Aynı kod tabanından mobil uygulamalar da oluşturur.


1
Ve React ile entegrasyonlar var ama bu sadece% 100 içinde olan insanlar içindir. Meteor hakkında çok fazla bilgi olmadan jquery eklentilerini ve svg / canvas çizim kitaplıklarını kullanmakta da sorun yoktur.
imslavko

1

Çerçeve seçiminiz, kullanıcı arabirimi seçimlerinizi hayal ettiğiniz kadar kısıtlamayabilir. İçerik yönetiminin ayrıştırılması hakkındaki bu son Henri Bergius makalesi , konuyu benim yapabileceğimden çok daha iyi gösteriyor - ve bu arada, oldukça tatlı görünümlü, saf JavaScript (çerçeveden bağımsız) yerinde içerik düzenleyicisine bağlanıyor .


Kesinlikle WYSIWYG için aloha düzenleyicisini araştırıyorum. Bunu kesinlikle ekranın üst kısmına yerleştiririm ve metin alanını bazı biçimlerde işaretlemede görüntülemek için sekmeler eklerdim. Diğer ana seçeneğim biraz markItUp tadı olabilir .
funkyeah

1

Yalnız değilsin!

VanillaJS ve Ampersan .. daha basit, daha modüler JavaScript için ciddi sürücünün harika örnekleridir.

Hatta bir kitap ilgili var.

Sadelik, düşük derecelendirilmiş bir es6 özelliği tarafından yönlendiriliyor: Modüller ve SystemJS uygulama standardı. Hatta es6 olmayan sistemlerde de kullanılabilir.

Ne kadar serin!


1

Her ikisi de listelenen diğer çerçevelerin herhangi birinden daha uygun olan Angular ve Ember'ı ihmal ettiğiniz için genel aday seçiminizde yanlış olduğunuzu söyleyebilirim .

Genel olarak, Angular.js'nin bunun için çerçeve olduğunu söyleyebilirim.

Yönlendirmeye Vurgu

Bahsettiğiniz şeylerin çoğu (gezinme için birkaç kenar çubuğu, tek bir sayfa uygulaması) yönlendirme işlevleridir veya ön ucun URL gezinme çubuğunuzdaki metni nasıl yorumladığıdır.

Hem Angular.js hem de Ember, ihtiyacınız olan her şeyi ek kod olmadan gerçekleştirmenize izin veren mükemmel yönlendiricilere sahiptir.

Yararınız için, tek sayfalı wiki'nizi oluşturmak için kullanılabilecek Angular'daki özelliklerin hızlı bir dökümünü burada bulabilirsiniz.

Sitenin Yapısı Kendisi

Angular, hem özel gezinme oluşturmanıza hem de içeriğinizi ortaya çıkarmak için SEO dostu bir yapı oluşturmanıza olanak tanıyan UI yönlendirici adı verilen harika bir kitaplığa sahiptir. Birden çok görünüm de üst araç çubuğuna izin verir.

Ui yönlendirici eğitimi: http://cacodaemon.de/index.php?id=57

WYSIWYG Düzenleyici

Angular, canlı iki yönlü ciltleme üzerine inşa edilmiştir (bir yerde bir şeyi değiştirdiğinizde, otomatik olarak başka her yerde değişir.) Bu nedenle, bu tür bir düzenleyiciyle iyi çalışan birçok özellikle birlikte gelir. Birkaç iyi uygulama zaten yapıldı ve yalnızca bunları uygulamanız gerekiyor.

http://textangular.com/

Grafikler ve Diğer Güzel Şeyler

Açısal yönergeler, yeniden kullanılabilen Grafik bileşenleri oluşturmak gibi şeyler yapmak için tasarlanmıştır. Wordpress Widget'larından tamamen farklı değiller. Bunların çoğu zaten geliştirildi ve Angular projenize bırakılabilir.

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

Ember ile ilgili olarak, onun hakkında fazla bir şey bilmiyorum, bu yüzden onun belirli özelliklerinden bahsedemiyorum.


0

Backbone hakkında bir öneri, kullanmaya karar verirseniz, Marionnete için gitmelisiniz, çünkü daha iyi bir mimari yapıya sahiptir ve daha kararlıdır (kişisel olarak Backbone'un herhangi bir kılavuz belirlemediğini ve bu büyük uygulamalarda bir dezavantaj gibi hissettirdiğini düşünüyorum) .

Birkaç ay boyunca farklı js lib'lerini birleştirerek çalıştım ve diğer çerçeveler gibi size engel olmadı ve mesaj hattı, bileşenleri uygulama üzerinden birbirine bağlamak, ancak onları birbirinden ayırmak için gerçekten iyi bir yol.

Burada karar vermemi sağlayan harika bir konuşma var: https://www.youtube.com/watch?v=qWr7x9wk6_c

Ve burada, sürükle ve bırak elemanına ve diğer js kütüphanelerine bağlı bir demo prototipiniz var. 1,5 yıldır web geliştirme üzerinde çalıştığım için kodum hakkında ne düşündüğünüzü duymak isterim ... Hâlâ acemiyim: https://github.com/Drasky-Vanderhoff/marionette-demo/

Knockout Hakkında, zaten sahip olduğunuz içerikle etkileşim kurmak istiyorsanız ve arka uçla sürekli bağlantı kurmayacaksınız. 6 ay boyunca onunla çalıştım ve sonunda yönlendirme için çok sayıda başka js lib kullanmaya ihtiyacım oldu; artı Backbone ve diğer JS Framework'lerin sahip olduğu birçok yapıyı tekrar ediyorum. Söyleyeceğim şey, hiçbir şekilde yolunuza çıkmayacağı ve bir kısıtlamadan çok bir araç olacağıdır. Ayrıca bu neredeyse bir yıl önceydi, bu yüzden birkaç şey değişti.

Bir şey, Geri İtme (Nakavt + Omurga) bulursanız ... ondan kaçının, dokümantasyon olması gerektiği kadar iyi değildir ve onu öğrenmeniz çok daha fazla zaman alacaktır. Eğer gitmek istiyorsanız, önce hızlı bir prototip yapın ve istediğiniz şeyin olup olmadığını görün.


Bunu göndereli bir yıl oldu. Şimdi yeni bir geliştirmeye başlamak istediğim için, Marionette hala Javascript geliştirme için en iyi seçiminiz mi?
AlVaz

Hiç de değil, şu anda Angular.js veya React.js ile daha iyidir (isterseniz ikisini birden birleştirebilirsiniz). Bir uygulama için hem mobil hem de web sürümünü istiyorsanız, React Native iOS ve Android yerel uygulamaları yapmak için kullanıldığından React.js kullanmanızı şiddetle tavsiye ederim. Hem React.js hem de yerel aynı kavramları, yapıları ve paradigmayı paylaşır (Bir kez öğrenin, her yerde kullanın, Knowing React.js == React Native, evet üçlü eşitleri kullanmıyorum: P)
DraskyVanderhoff

Ayrıca Polymer kullanan Web Bileşenleri de var, eğer birlikte çalışmak isteyip istemediğinize bakmanızı şiddetle tavsiye ediyorum, muhtemelen önümüzdeki yıl en sıcak çerçeve olacak. Son olarak,% 100 gerçek zamanlı veri senkronizasyonu / üç yollu veri bağlamaya ihtiyacınız varsa Meteor harika bir seçenektir, çünkü özellikle parametreler için doğrulayıcılar yazarsanız, hem arka uçta hem de ön uçta aynı doğrulayıcıyı çalıştırır, 2 koda sahip olma ihtiyacını ortadan kaldırır. aynı olan bazlar.
DraskyVanderhoff

Bir açıklama, Marionette'in en iyi seçimim olduğunu asla söylemedim (o zamana kadar Angular'dı) dediğim şey, Backbone.js'yi kullanacaksanız THEM'in Marionette.js'yi kullanmasıydı.
DraskyVanderhoff
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.