В чем я ошибаюсь насчет своего проекта и этих Javascript Framework?


107

Во-первых, основная часть проекта, который я хочу создать, - это вики-движок, реализованный как одностраничное веб-приложение. Я планирую иметь набор функций, доступных с самого начала, и множество дополнительных функций в будущем.

Основные характеристики

  • создание страницы (создает как вики-статью, так и дискуссионный форум для этой статьи)
  • разметка и WYSIWYG ala разметка
  • преобразование на лету между разметкой / html / WYSIWYG
  • боковая панель для быстрой навигации
  • верхняя панель инструментов для выбора редактирования / просмотра

Расширенные возможности

  • настраиваемая боковая панель для навигации по другому методу
  • настраиваемая панель инструментов (можно добавить язык разметки по выбору)
  • теги
  • редактируемые задачи
  • перетаскивание загрузки файлов и прикрепленных изображений

Первоначально движок состоял из самого простого создания страницы, разметки, редактирования и сохранения WYSIWYG. В конечном итоге я хотел бы расширить этот базовый движок, добавив в него поддержку перетаскивания изображений, загрузку файлов, графики данных в реальном времени и боковую панель для настройки представлений.

Я провел довольно обширный поиск достойного проекта, на котором можно было бы основать свой проект, но кроме TiddlyWiki, похоже, нет никаких хороших вики-движков на основе javascript. Я также рассматривал возможность применения JQuery поверх существующих вики-движков, но я считаю, что в конечном итоге все равно его переписываю (плюс еще интереснее добавлять функции, которые мне нужны, по ходу). В любом случае я пришел к реализации этого зверя с помощью библиотеки + фреймворка javascript.

Я знаю, что нельзя сравнивать некоторые из этих фреймворков друг с другом, потому что они совсем не похожи на яблоки. Я попытался сопоставить любые сравнительные комментарии / вопросы с сопоставимыми частями соответствующих фреймворков, но я открыт для исправления.

Итак, начнем:

Основываясь на моем собственном исследовании и мнениях, я сузил список до пунктов ниже. Я намеренно исключил такие вещи, как SproutCore, corMVC, YUI и другие, поскольку я, в силу своих ограниченных возможностей, думал, что следующие элементы будут лучше.

Мои параметры


jquery / UI + backbonejs

В общем и целом

Из того, что я прочитал, эта комбинация используется и любима многими, она очень гибкая и расширяемая. Меня больше всего беспокоит то, что эта комбинация - просто не лучшая отправная точка для разработки интерфейса пользовательского интерфейса, более ориентированного на рабочий стол.

UI

Хотя jQueryUI или jqueryTools могут быть конкурентоспособными, они, конечно, не соответствуют возможностям пользовательского интерфейса других фреймворков. В частности, они кажутся тяжелыми по эффектам, но не имеют достойной поддержки нарезки макета.

javascriptMVC

В общем и целом

Мне кажется, что JavascriptMVC представляет собой расширения jquery + MVC (jqueryMX), а также несколько других приложений для документирования (documentJS), функциональных тестов (funcUnit) и управления кодом и зависимостями (stealJS). Помимо преимуществ дополнительного модуля, я думаю, что функциональные дебаты действительно сводятся к backbonejs и jqueryMX. Прав ли я в этом вопросе, и кто-нибудь работал или сравнивал оба?

UI

JavascriptMVC добавляет элементы MXUI поверх всего, что доступно для JQuery, поэтому я думаю, что, по крайней мере, это небольшая победа в этой категории.

knockoutjs

В общем и целом

Мои мысли и опасения по этому поводу очень похожи на комментарии jquery + backbone. Кажется, что они оба предлагают схожие функции, но только с другой точки зрения. Часто упоминаемый недостаток заключается в том, что knockoutjs слишком тесно связывает бизнес-логику и представление с привязкой данных и что этот метод привязки может не работать при сложном взаимодействии пользовательского интерфейса, но я хотел бы услышать, почему это не проблема.

UI

Пока пусто

Додзё и ExtJS

В общем и целом

Я собираюсь объединить обсуждение Dojo и ExtJS, потому что я знаю о них меньше всего, и, похоже, они играют почти в одном пространстве. Большая часть информации о stackoverflow об этих двух, кажется, устарела. Из того, что я видел, так это то, что обе они представляют собой большие фреймворки, которые подходят для реализации приложений настольного калибра. Dojo упрекали за плохую документацию, но, похоже, это уже не так. ExtJS, конечно, имеет коммерческую лицензию, но она действительно разумна для того, что вы получаете, и я бы не стал возражать против этого. Виджеты в ExtJS кажутся несколько более профессиональными, чем Dojo, но меня, безусловно, можно исправить. Мне было бы интересно услышать мнение любого, у кого есть опыт в обоих направлениях.

UI

Dojo имеет библиотеку пользовательского интерфейса dijit. ExtJS имеет функции пользовательского интерфейса, но их нет в ядре Ext. Вот документация и их демонстрации

Капучино

В общем и целом

А еще есть капучино. Нет CSS, нет html, но также может быть сложно использовать существующие библиотеки javascript. Objective-J не кажется страшным, особенно если учесть, что они также рекламируют возможность писать простой javascript. Демоверсии впечатляют и, кажется, близко подходят к пользовательскому интерфейсу движка вики. API на основе какао - это непростая задача для тех, кто с ним не знаком, но, возможно, оно того стоит. Я слышал, что с механизмом компоновки не всегда легко работать, но у такой молодой и, возможно, прорывной технологии, безусловно, будут некоторые недостатки.

UI

Пока пусто

Я прошу прощения за то, что написал так много, но, по крайней мере, это не вопрос ax vs y vs z, надеясь на тонны дешевых ответов. Так что ты думаешь? Что должно быть основой для моего рабочего стола, такого как вики-движок, который, надеюсь, со временем станет более многофункциональным (читать сложным)?


9
+1 за невероятно подробный и продуманный вопрос!
Шон Виейра

8
Не уверен в ваших сроках и ресурсах, но когда я пытаюсь выбрать между несколькими фреймворками / средами, я просто иду вперед и пытаюсь быстро создать прототип. Даже если это всего лишь одна или две основные функции, я считаю, что все исследования и документация в мире никогда не будут соответствовать попыткам создать что-то с помощью инструментов. Я говорю, уделите день каждому и посмотрите, как далеко вы продвинетесь. Это даст вам довольно хорошее представление о том, какие инструменты подходят для данной задачи и наиболее удобны для вас.
Брайан Фланаган,

1
@Brian Flanagan Перейдите к ответу - даже если "мета".

1
Вы смотрели tiddlywiki.com , я думаю, что это чистая самодостаточная вики, сделанная на JavaScript
Бернхард

Да, я смотрел тиддливики. Во многих смыслах это вдохновение для этого проекта, но у меня есть собственная база и направление, в котором я нахожу этот проект.
funkyeah 03

Ответы:


4

Я бы посоветовал сначала сформулировать конкретные требования к пользовательскому интерфейсу для вашего проекта. Какие из опробованных вами фреймворков вы попробовали?

Лично я занялся разработкой ExtJS, потому что проекты, над которыми я работаю, требуют большой настройки элементов управления / виджетов. В ExtJS их масса прямо из коробки, и их всегда можно расширить, скомбинировать или превратить в любую чудовищность, которая требуется вашему бизнесу.

ExtJS 4 также позволяет «обшить» свой пользовательский интерфейс для дальнейшей настройки внешнего вида.

Если вы новичок в JavaScript и знакомы с Java, вы можете даже изучить серверное решение, такое как GWT , JSF или даже Vaadin.


19

Не уверен в ваших сроках и ресурсах, но когда я пытаюсь выбрать между несколькими фреймворками / средами, я просто иду вперед и пытаюсь быстро создать прототип. Даже если это всего лишь одна или две основные функции, я считаю, что все исследования и документация в мире никогда не будут соответствовать попыткам создать что-то с помощью инструментов. Я говорю, уделите день каждому и посмотрите, как далеко вы продвинетесь. Это даст вам довольно хорошее представление о том, какие инструменты подходят для данной задачи и наиболее удобны для вас.


6

в настоящее время в моде ( самый популярный полнофункциональный JavaScript-фреймворк на GitHub и Meteorpedia - это вики-движок, написанный на Meteor.

Запуск видео познакомит вас зацепили 1:28.

Это агностик в отношении пользовательского интерфейса, и было протестировано с Bootstrap и Famo.us . Он также создает мобильные приложения из той же кодовой базы.


1
И есть интеграции с React, но это только для людей, которые на 100% увлечены этим. Также нет проблем с использованием плагинов jquery и библиотек рисования svg / canvas без большого количества знаний о Meteor.
imslavko 02

1

Ваш выбор фреймворка может не так сильно ограничивать ваш выбор пользовательского интерфейса, как вы можете себе представить. Эта недавняя статья Анри Берджиуса о разделении управления контентом иллюстрирует эту мысль намного лучше, чем я, и, кстати, содержит ссылку на довольно симпатичный редактор контента на чистом JavaScript (независимый от фреймворка) .


Я конечно копаю редактор алоха для WYSIWYG. Я бы определенно закрепил его в верхней части экрана и добавил вкладки для просмотра текстового поля в разметке некоторого формата. Другой мой основной вариант - это немного markItUp .
funkyeah 08

1

Ты не одинок!

VanillaJS и Ampersand .. - отличные примеры серьезного стремления к более простому и модульному JavaScript.

Об этом даже есть книга .

Простота обусловлена ​​недооцененной функцией es6: модулями и стандартом реализации SystemJS . Его можно использовать даже в системах, отличных от ES6.

Как это круто!


1

Я бы сказал, что вы ошиблись в своем общем выборе кандидатов, поскольку вы опускаете Angular и Ember, которые подходят лучше, чем любые другие перечисленные фреймворки.

В целом, я бы сказал, что Angular.js - это фреймворк для этого.

Акцент на маршрутизации

Многое из того, о чем вы говорите (несколько боковых панелей для навигации, одностраничное приложение), является функциями маршрутизации или того, как внешний интерфейс интерпретирует текст в панели навигации URL-адреса.

И Angular.js, и Ember имеют отличные маршрутизаторы, которые позволяют выполнять все, что вам нужно, без дополнительного кода.

Для вашего удобства, вот краткое описание функций Angular, которые можно использовать для создания вашей одностраничной вики.

Сама структура сайта

В Angular есть замечательная библиотека под названием UI router, которая позволяет вам как создавать настраиваемую навигацию, так и настраивать дружественную для SEO структуру раскрытия вашего контента. Несколько представлений также позволят использовать верхнюю панель инструментов.

Учебник по маршрутизатору пользовательского интерфейса: http://cacodaemon.de/index.php?id=57

Редактор WYSIWYG

Angular построен на живом двустороннем связывании (когда вы что-то меняете где-то, он автоматически меняется везде). Поэтому он поставляется с множеством функций, которые хорошо работают с этим типом редактора. Несколько хороших уже сделано, и вам только нужно их реализовать.

http://textangular.com/

Графики и другие полезные вещи

Директивы Angular предназначены для таких вещей, как создание компонентов Chart, которые можно использовать повторно. Они не полностью отличаются от виджетов Wordpress. Многие из них уже разработаны и могут быть добавлены в ваш проект Angular.

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

Что касается Ember, я мало о нем знаю, поэтому не могу говорить о его особенностях.


0

Одно предложение по поводу Backbone: если вы решите использовать его, вам следует выбрать Marionnete, поскольку это Backbone, но с лучшей архитектурной структурой и более самоуверенным (я лично считаю, что Backbone не устанавливает никаких рекомендаций, и это похоже на обратную сторону в больших приложениях) .

Я работал с ним в течение нескольких месяцев, комбинируя разные js-библиотеки, и он не мешает вам, как другие фреймворки, а конвейер сообщений - действительно хороший способ соединить компоненты через приложение, но сохранить их разъединенными.

Вот вам отличный доклад, который заставил меня принять решение: https://www.youtube.com/watch?v=qWr7x9wk6_c

И здесь у вас есть демонстрационный прототип, в котором также есть элемент перетаскивания и другие подключенные библиотеки js. Хотел бы услышать, что вы думаете о моем коде, так как я 1,5 года работаю над веб-разработкой ... Я все еще новичок: https://github.com/Drasky-Vanderhoff/marionette-demo/

Что касается Knockout, это действительно хорошо, если вы хотите взаимодействовать с уже имеющимся у вас контентом, и вы не будете постоянно подключаться к бэкэнду. Я работал с ним в течение 6 месяцев, и в итоге мне пришлось использовать множество других js-библиотек для маршрутизации; плюс я в конечном итоге повторяю множество структур, которые в конечном итоге имеют Backbone и другие JS Framework. Что я скажу, так это то, что это вообще не будет мешать вам и будет скорее инструментом, чем ограничением. Также это было почти год назад, поэтому кое-что изменилось.

Во-первых, если вы найдете Knockback (Knockout + Backbone) ... избегайте этого, документация не так хороша, как должна быть, и вам потребуется гораздо больше времени, чтобы ее изучить. Если вы хотите пойти на это, сначала сделайте быстрый прототип, чтобы убедиться, что вы хотите.


Прошел год с тех пор, как вы разместили это. Сейчас, когда я собираюсь начать новую разработку, остается ли Marionette вашим лучшим выбором для разработки Javascript?
AlVaz 08

Вовсе нет, сейчас лучше использовать Angular.js или React.js (вы можете комбинировать оба, если хотите). Если вы хотите использовать как мобильную, так и веб-версию приложения, я настоятельно рекомендую вам использовать React.js, поскольку React Native используется для создания собственных приложений для iOS и Android. И React.js, и native используют одни и те же концепции, структуры и парадигму (выучить один раз, использовать везде, знать React.js == React Native, да, я не использую тройное равенство: P)
DraskyVanderhoff

Также есть веб-компоненты, использующие полимер, которые я настоятельно рекомендую вам проверить, если вы хотите работать, вероятно, будет самой популярной структурой в следующем году. Наконец, Meteor - отличный вариант, если вам нужна 100% синхронизация данных в реальном времени / трехсторонняя привязка данных, особенно потому, что если вы пишете валидаторы для параметров, он будет запускать один и тот же валидатор как в бэкэнде, так и во внешнем интерфейсе, избегайте необходимости иметь 2 кода базы одинаковые.
DraskyVanderhoff

Одно уточнение: я никогда не говорил, что Marionette был моим лучшим выбором (к тому времени это был Angular). Я сказал, что ЕСЛИ вы собираетесь использовать Backbone.js, они используют Marionette.js.
DraskyVanderhoff
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.