Gdzie mylę się co do mojego projektu i tych ram Javascript?


107

Po pierwsze, najważniejszym elementem projektu, który chciałbym stworzyć, jest silnik wiki zaimplementowany jako pojedyncza strona internetowa aplikacji. Planuję mieć zestaw funkcji dostępnych od samego początku z wieloma dodatkami w przyszłości.

Podstawowe funkcje

  • tworzenie strony (tworzy artykuł wiki i forum dyskusyjne dla tego artykułu)
  • markup i WYSIWYG ala markitup
  • konwersja w locie między znacznikami / html / WYSIWYG
  • boczny pasek do szybkiej nawigacji
  • górny pasek narzędzi do wyboru edycji / widoku

Zaawansowane funkcje

  • konfigurowalny pasek boczny do nawigacji inną metodą
  • konfigurowalny pasek narzędzi (ewentualnie dodaj wybrany język znaczników)
  • tagi
  • edytowalne todo's
  • przeciągnij i upuść przesłane pliki i załączniki graficzne

Silnik pierwotnie składał się z najbardziej podstawowych funkcji tworzenia stron, oznaczania oraz edycji i zapisywania w trybie WYSIWYG. Ostatecznie chciałbym rozszerzyć ten podstawowy silnik o obsługę obrazów metodą przeciągnij i upuść, przesyłanie plików, wykresy danych na żywo i pasek boczny do dostosowywania widoków.

Przeprowadziłem dość obszerne poszukiwania przyzwoitego projektu, na podstawie którego mógłbym oprzeć swój projekt, ale poza TiddlyWiki nie wydaje się, aby istniał żaden dobry silnik wiki oparty na javascript. Rozważałem również zastosowanie Jquery na istniejących silnikach wiki, ale wydaje mi się, że i tak w końcu mógłbym go przepisać (dodatkowo dodawanie funkcji, które chcę na bieżąco, jest po prostu bardziej ekscytujące). Tak czy inaczej, udało mi się zaimplementować tę bestię z biblioteką javascript + frameworkiem.

Wiem, że tak naprawdę nie można porównywać niektórych z tych frameworków ze sobą, ponieważ nie są one jabłkami do jabłek. Próbowałem ułożyć wszelkie komentarze / pytania porównawcze z porównywalnymi fragmentami odpowiednich ram, ale jestem otwarty na poprawianie.

Więc zaczynamy:

Na podstawie własnych badań i opinii zawęziłem listę do poniższych pozycji. Celowo pominąłem takie rzeczy, jak SproutCore, corMVC, YUI i inne, ponieważ, mając ograniczone możliwości, uważałem, że poniższe elementy będą lepiej pasować.

Moje opcje


jquery / UI + backbonejs

Ogólny

Z tego, co przeczytałem, ta kombinacja jest używana i uwielbiana przez wielu i jest bardzo elastyczna i rozszerzalna. Moim głównym zmartwieniem jest to, że ta kombinacja po prostu nie jest najlepszym punktem wyjścia do tworzenia interfejsu użytkownika bardziej zorientowanego na komputery.

UI

Chociaż jQueryUI lub jqueryTools mogą być konkurencyjne, z pewnością nie wydają się być na równi z możliwościami interfejsu użytkownika innych platform. W szczególności wydają się być ciężkie pod względem efektów, ale brakuje im przyzwoitej obsługi krojenia układu.

javascriptMVC

Ogólny

Wydaje mi się, że JavascriptMVC jest zasadniczo rozszerzeniem jquery + MVC (jqueryMX), wraz z kilkoma innymi aplikacjami do dokumentowania (documentJS), testów funkcjonalnych (funcUnit) oraz zarządzania kodem i zależnościami (stealJS). Poza korzyściami płynącymi z dodatkowego modułu, myślę, że debata funkcjonalna naprawdę sprowadza się do kwestii backbonejs vs. jqueryMX. Czy mam rację i czy ktoś pracował z obydwoma lub je porównywał?

UI

JavascriptMVC dodaje elementy MXUI do wszystkiego, co jest dostępne dla Jquery, więc myślę, że przynajmniej jest to niewielka wygrana w tej kategorii.

knockoutjs

Ogólny

Moje przemyślenia i obawy na ten temat są bardzo podobne do komentarzy w jquery + backbone. Oba wydają się oferować podobne funkcje, ale tylko z innej perspektywy. Często przytaczanym minusem jest to, że knockoutjs zbyt ściśle łączy logikę biznesową i prezentację z powiązaniem danych oraz że ta metoda wiązania może zepsuć się w przypadku złożonych interakcji z interfejsem użytkownika, ale chciałbym usłyszeć, dlaczego nie jest to problem.

UI

W tej chwili puste

Dojo i ExtJS

Ogólny

Mam zamiar połączyć dyskusję Dojo i ExtJS, ponieważ wiem o nich najmniej i wydają się grać w niemal tej samej przestrzeni. Większość informacji na temat przepełnienia stosów dotyczących tych dwóch wydaje się nieaktualna. Z tego, co widziałem, wynika, że ​​oba są dużymi frameworkami, które są dobre do implementacji aplikacji kalibru komputerowego. Dojo zostało zbesztane za kiepską dokumentację, ale wydaje się, że już tak nie jest. ExtJS ma oczywiście licencję komercyjną, ale jest to naprawdę rozsądne, jeśli chodzi o to, co dostajesz i nie miałbym tego zbytnio zarzucać. Widżety w ExtJS wydają się być trochę bardziej profesjonalnie wykonane niż Dojo, ale z pewnością dałbym się tam poprawić. Chciałbym usłyszeć od każdego, kto ma doświadczenie w obu.

UI

Dojo ma bibliotekę interfejsu użytkownika dijit. ExtJS ma funkcje interfejsu użytkownika, ale nie ma ich w rdzeniu Ext. Oto dokumentacja, a tutaj ich dema

Cappuccino

Ogólny

Jest jeszcze Cappuccino. Bez CSS, bez html, ale również może być trudne użycie istniejących bibliotek javascript. Objective-J nie wydaje się być przerażające, zwłaszcza biorąc pod uwagę, że zachwalają również możliwość pisania zwykłego javascript. Dema są imponujące i wydają się być bardzo zbliżone do potrzeb interfejsu użytkownika silnika wiki. API oparte na kakao to dużo do przyjęcia dla kogoś, kto go nie zna, ale może warto. Słyszałem, że praca z silnikiem układu graficznego nie zawsze jest łatwa, ale taka młoda i prawdopodobnie rewolucyjna technologia z pewnością będzie miała pewne wady.

UI

W tej chwili puste

Przepraszam, że tak dużo pisałem, ale hej, przynajmniej nie jest to pytanie ax vs y vs z, licząc na mnóstwo tanich odpowiedzi. Więc co o tym myślisz? Jaka powinna być podstawa mojego silnika typu wiki na komputery stacjonarne, który, miejmy nadzieję, z czasem stanie się bardziej bogaty w funkcje (kompleksowy odczyt)?


9
+1 za niezwykle szczegółowe i przemyślane pytanie!
Sean Vieira

8
Nie jestem pewien co do osi czasu i zasobów, ale kiedy próbuję wybrać między wieloma frameworkami / środowiskami, po prostu idę dalej i próbuję szybko zbudować prototyp. Nawet jeśli to tylko jedna lub dwie główne funkcje, stwierdzam, że wszystkie badania i dokumentacja na świecie nigdy nie będą pasować do faktycznej próby zbudowania czegoś za pomocą narzędzi. Mówię: weź dzień z każdym i zobacz, jak daleko zajdziesz. To daje całkiem dobre wskazanie, które narzędzia są w stanie sprostać zadaniu i które są dla Ciebie najwygodniejsze.
Brian Flanagan

1
@Brian Flanagan Przejdź do odpowiedzi - nawet jeśli jest to „meta”.

1
Czy spojrzałeś na tiddlywiki.com , myślę, że to czysta samodzielna wiki wykonana w JavaScript
Bernhard

Tak, spojrzałem na tiddlywiki. Pod wieloma względami jest inspiracją dla tego projektu, ale mam własne podstawy i kierunek, które przewidziałem dla tego projektu.
funkyeah

Odpowiedzi:


4

Sugerowałbym najpierw wymyślenie konkretnych wymagań dotyczących interfejsu użytkownika dla twojego projektu. Które z ram, które wypróbowałeś, wypróbowałeś?

Osobiście zająłem się rozwojem ExtJS, ponieważ projekty, nad którymi pracuję, wymagają wielu dostosowań kontrolek / widżetów. ExtJS ma ich mnóstwo od razu po wyjęciu z pudełka i zawsze można je rozszerzyć, połączyć lub wtopić w jakąkolwiek potworność, której potrzebuje Twoja firma.

ExtJS 4 pozwala również na „skin” interfejsu użytkownika, aby jeszcze bardziej dostosować wygląd i styl.

Jeśli jesteś nowy w JavaScript i dobrze znasz Javę, możesz nawet zajrzeć do rozwiązania po stronie serwera, takiego jak GWT , JSF lub nawet Vaadin


19

Nie jestem pewien co do osi czasu i zasobów, ale kiedy próbuję wybrać między wieloma frameworkami / środowiskami, po prostu idę dalej i próbuję szybko zbudować prototyp. Nawet jeśli to tylko jedna lub dwie główne funkcje, stwierdzam, że wszystkie badania i dokumentacja na świecie nigdy nie będą pasować do faktycznej próby zbudowania czegoś za pomocą narzędzi. Mówię: weź dzień z każdym i zobacz, jak daleko zajdziesz. To daje całkiem dobre wskazanie, które narzędzia są w stanie sprostać zadaniu i które są dla Ciebie najwygodniejsze.


6

jest obecnie w modzie ( najpopularniejszy framework JavaScript z pełnym stosem na GitHub i Meteorpedia to silnik wiki napisany w Meteor.

Film z premiery przyciągnie Cię do 1:28.

To agnostykiem w odniesieniu do interfejsu użytkownika i został przetestowany z bootstrap i Famo.us . Generuje również aplikacje mobilne z tej samej bazy kodu.


1
Istnieją integracje z React, ale to tylko dla ludzi, którzy są w 100% zaangażowani. Nie ma również problemów z używaniem wtyczek jquery i bibliotek rysunków svg / canvas bez dużej wiedzy o Meteorze.
imslavko

1

Twój wybór frameworka może nie ograniczać możliwości wyboru interfejsu użytkownika tak bardzo, jak możesz sobie wyobrazić. Ten ostatni artykuł Henri Bergiusa na temat rozdzielania zarządzania treścią ilustruje ten punkt znacznie lepiej niż ja mogłem - i, nawiasem mówiąc, linki do całkiem ładnie wyglądającego, czystego JavaScript (niezależnego od frameworka) edytora treści w miejscu .


Z pewnością kopie edytor aloha dla WYSIWYG. Zdecydowanie zadokowałbym go u góry ekranu i dodałbym karty, aby wyświetlić obszar tekstu również w znacznikach jakiegoś formatu. Moją inną główną opcją byłby jakiś smak markItUp .
funkyeah

1

Nie jesteś sam!

VanillaJS i Ampersand .. są świetnymi przykładami poważnych napędów dla prostszego, bardziej modułowego JavaScript.

Jest nawet książka .

Prostota jest napędzana niedocenianą funkcją es6: modułami i standardem implementacji SystemJS . Może być nawet używany w systemach innych niż ES6.

Jakie to jest świetne!


1

Powiedziałbym, że nie masz racji w swoim ogólnym wyborze kandydatów, ponieważ pomijasz Angular i Ember, z których oba są lepiej dopasowane niż inne wymienione frameworki.

Ogólnie rzecz biorąc, powiedziałbym, że Angular.js jest ramą dla tego.

Nacisk na routing

Wiele z tego, o czym mówisz (kilka pasków bocznych do nawigacji, aplikacja na jednej stronie) to funkcje routingu lub to, jak interfejs użytkownika interpretuje tekst na pasku nawigacji adresu URL.

Zarówno Angular.js, jak i Ember mają doskonałe routery, które pozwalają osiągnąć wszystko, czego potrzebujesz, bez dodatkowego kodu.

Dla twojej korzyści, oto krótkie zestawienie funkcji w Angular, które mogą być użyte do stworzenia twojej pojedynczej strony wiki

Struktura samej witryny

Angular ma niesamowitą bibliotekę o nazwie Router UI, która pozwala zarówno tworzyć niestandardową nawigację, jak i konfigurować przyjazną dla SEO strukturę ujawniania treści. Wiele widoków pozwoliłoby również na górny pasek narzędzi.

Samouczek dotyczący routera interfejsu użytkownika: http://cacodaemon.de/index.php?id=57

Edytor WYSIWYG

Angular jest oparty na dwukierunkowym wiązaniu na żywo (kiedy coś zmieniasz, zmienia się automatycznie wszędzie indziej). Dlatego jest dostarczany z wieloma funkcjami, które dobrze współpracują z tego rodzaju edytorem. Kilka dobrych zostało już wykonanych i wystarczy je wdrożyć.

http://textangular.com/

Wykresy i inne fajne rzeczy

Dyrektywy kątowe są przeznaczone do wykonywania takich czynności, jak tworzenie składników wykresu, które są wielokrotnego użytku. Nie różnią się one całkowicie od widżetów Wordpress. Wiele z nich zostało już opracowanych i można je wrzucić do projektu Angular.

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

Jeśli chodzi o Ember, to niewiele o nim wiem, więc nie mogę mówić o jego szczególnych cechach.


0

Jedna sugestia dotycząca Backbone, jeśli zdecydujesz się go użyć, powinieneś wybrać Marionnete, ponieważ jest to Backbone, ale z lepszą strukturą architektoniczną i bardziej uparty (osobiście uważam, że Backbone nie ustala żadnych wytycznych i jest to wada w dużych aplikacjach) .

Pracowałem z nim przez kilka miesięcy, łącząc różne biblioteki js i nie przeszkadzając Ci tak jak inne frameworki, a potok komunikatów to naprawdę dobry sposób na łączenie komponentów przez aplikację, ale utrzymywanie ich odseparowanych.

Masz świetną rozmowę, która skłoniła mnie do podjęcia decyzji: https://www.youtube.com/watch?v=qWr7x9wk6_c

Tutaj masz prototyp demonstracyjny, który ma również element przeciągnij i upuść oraz inne podłączone biblioteki js. Chciałbym usłyszeć, co myślisz o moim kodzie, ponieważ od 1,5 roku pracuję nad tworzeniem stron internetowych ... Nadal jestem nowicjuszem: https://github.com/Drasky-Vanderhoff/marionette-demo/

Jeśli chodzi o Knockout, jest naprawdę dobry, jeśli chcesz mieć interakcję z zawartością, którą już masz, i nie będziesz stale łączyć się z zapleczem. Pracowałem z nim przez 6 miesięcy i ostatecznie muszę użyć wielu innych bibliotek js do routingu; plus powtarzam wiele struktur, które mają Backbone i inne ramy JS. Powiem tylko, że w ogóle nie stanie ci na drodze i będzie raczej narzędziem niż ograniczeniem. Było to również prawie rok temu, więc kilka rzeczy się zmieniło.

Jedna rzecz, jeśli znajdziesz Odrzucenie (Knockout + Backbone) ... unikaj go, dokumentacja nie jest tak dobra, jak powinna być, a jej opanowanie zajmie ci dużo więcej czasu. Jeśli chcesz to zrobić, najpierw zrób szybki prototyp, aby zobaczyć, czy tego chcesz.


Minął rok, odkąd to opublikowałeś. Ponieważ teraz chcę rozpocząć nowy rozwój, czy Marionette nadal jest najlepszym wyborem do programowania w Javascript?
AlVaz

Wcale nie, teraz lepiej jest z Angular.js lub React.js (możesz połączyć oba, jeśli chcesz). Jeśli chcesz mieć zarówno wersję mobilną, jak i internetową dla aplikacji, zdecydowanie sugeruję użycie React.js, ponieważ React Native jest używany do tworzenia natywnych aplikacji na iOS i Androida. Zarówno React.js, jak i natywny mają te same koncepcje, struktury i paradygmat (to Dowiedz się raz, używaj wszędzie, Znając React.js == React Native, tak, nie używam potrójnego równa się: P)
DraskyVanderhoff

Istnieją również komponenty sieciowe wykorzystujące Polymer, które zdecydowanie sugeruję, abyś je sprawdził, jeśli chcesz pracować z prawdopodobnie najgorętszym frameworkiem w przyszłym roku. Wreszcie, Meteor jest świetną opcją, jeśli potrzebujesz 100% synchronizacji danych w czasie rzeczywistym / trójdrożnego wiązania danych, szczególnie dlatego, że jeśli napiszesz walidatory dla parametrów, uruchomi ten sam walidator zarówno na zapleczu, jak i na interfejsie, unikaj konieczności posiadania 2 kodu zasady, które są takie same.
DraskyVanderhoff

Jedno wyjaśnienie: nigdy nie powiedziałem, że Marionette jest moim najlepszym wyborem (w tamtym czasie był to właściwie Angular), powiedziałem, że JEŚLI zamierzasz używać Backbone.js, zamiast tego używają Marionette.js.
DraskyVanderhoff
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.