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.
- Dyskusja na temat koncepcji szkieletu vs knockoutJS
- Funkcje knockoutjs
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)?
źródło
Odpowiedzi:
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
źródło
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.
źródło
meteorjest 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.
źródło
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 .
źródło
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!
źródło
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.
źródło
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.
źródło