Где я ошибаюсь в своем проекте и этих фреймворках Javascript? - PullRequest
107 голосов
/ 04 марта 2011

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

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

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

Расширенные функции

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

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

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

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

Итак, поехали:

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

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


jquery / UI + backbonejs

В целом

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

UI

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

javascriptMVC

В целом

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

UI

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

knockoutjs

В целом

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

UI

Бланк на данный момент

Dojo & ExtJS

В целом

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

UI

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

Капучино

В целом

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

UI

Бланк на данный момент

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

Ответы [ 7 ]

19 голосов
/ 04 марта 2011

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

6 голосов
/ 02 декабря 2014

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

Видео запуска подскажет вам 1: 28.

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

4 голосов
/ 04 марта 2011

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

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

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

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

1 голос
/ 08 октября 2014

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

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

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

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

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

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

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

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

Учебное пособие по маршрутизатору UI: http://cacodaemon.de/index.php?id=57

WYSIWYG Editor

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

http://textangular.com/

Графики и другие аккуратные вещи

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

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

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

1 голос
/ 28 сентября 2014

Вы не одиноки!

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

Есть даже Книга об этом.

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

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

1 голос
/ 04 марта 2011

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

0 голосов
/ 03 октября 2014

Одно предложение о 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 Frameworks.Что я скажу, так это то, что это не будет вам мешать и будет инструментом, а не ограничением.Кроме того, это было почти год назад, поэтому кое-что изменилось.

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...