Приложение для визуализации JavaScript — организация кода, магистральный mvc, настольная версия и т. д.

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

Традиционно (и не написав JS в течение некоторого времени) я бы попробовал какой-то модульный подход JS:

src   
   data
   chart
       chartType1
       chartType2
       chartType3
   layoutManager
   stateManager
   utils
lib
   d3?
   backbone?
   jquery?

... разбивка обработки данных, некоторых служебных функций, менеджера состояний и компоновки и т. д.

Но при наличии множества библиотек, возможно, мне стоит придержать своих лошадей и попробовать новый подход?

Организация кода?
 – Как указано выше или больше похоже на MVC?
 – Какие-нибудь конкретные шаблоны, которые были бы полезны?
(псевдокод приветствуется)

Обработка состояния/Модели?
— Backbone.js
— JavaScriptMVC

Представления?
 – Есть ли хорошие примеры JS-приложений, использующих библиотеки SVG (D3, Raphaël и т. д.) вместе с инфраструктурой mvc?

Компилятор/минимификатор?
 – Google Closure Compiler
 – Jammit

IDE?
- Aptana Studio 3
- Netbeans
- Другое?

Настольная версия? (критерии: хранение данных, возможность обновления и т. д.)
- AIR
- Chromium Embedded
- XULrunner
- Приложение Titanium Appcelerator
- другие варианты?

Мне жаль, что объем этого вопроса довольно широк, но я буду считать его ответом, если будет получено представление о какой-либо из этих областей. Так что помогите выбрать...


javascript web-applications javascript-framework code-organization backbone.js
person dani    schedule 03.05.2011    source источник
comment
Это больше похоже на философскую отправную точку, чем на вопрос :) В любом случае - мне это нравится. Я использовал backbone.js и raphäel.js вместе в проекте, размещенном на appengine с python: ichbinadrian.ch/blog/2011/04/29/maps-a-decentralised-mindmap — весь код также находится на github, возможно, это поможет.   -  person thgie    schedule 04.05.2011
comment
Я могу сказать вам, что backbone.js — это действительно основа. Это самая голая среда Javascript MVC без каких-либо причудливых виджетов и прочего. И он делает то, что он делает очень хорошо.   -  person thgie    schedule 04.05.2011
comment
Спасибо, что поделились монки - я скачаю проект с github и обязательно узнаю много нового. Моя главная проблема заключается в том, должен ли я полностью изменить подход JS, пытаясь соответствовать выбранной структуре mvc?   -  person dani    schedule 04.05.2011
comment
Если вы используете backbone.js и jQuery, у вас будет все в одном файле. Данные и состояние будут покрыты магистралью. Макет и утилиты jQuery. Я не мастер js-кодирования, но я смог довольно быстро разобраться во всем этом, и я доволен этим. Здесь чисто и аккуратно.   -  person thgie    schedule 04.05.2011
comment
Обязательно ознакомьтесь с raphäel.js 2.0: raphaeljs.com/2.0 и источником здесь: github.com/DmitryBaranovskiy/raphael/tree/2.0, поскольку в нем есть несколько приятных новых функций.   -  person thgie    schedule 04.05.2011
comment
backbone и raphael будут хорошо работать вместе. Представления в магистрали не зависят от пользовательского интерфейса, поэтому вы можете легко подключить Raphael.   -  person Raynos    schedule 15.06.2011
comment
@dani разве нет ответа, который можно было бы назвать правильным ответом?   -  person Daniele B    schedule 24.02.2012

Ответы (2)


arrow_upward
1
arrow_downward

Если вы уже хорошо знакомы с MVC, Backbone отлично подойдет вам. Было так много неизвестных, как организовать интерфейсный javascript, мы выбрали JavascriptMVC, который принимает многие решения за вас.

Не уверен, почему я буду использовать IDE. TextMate и консоль отлично работают для меня. NetBeans выглядел хорошо, когда я играл с ним. JetBrains RubyMine — это самая качественная и лучшая IDE, но она коммерческая.

РЕДАКТИРОВАТЬ Да, JMVC не стоит того, что он предоставляет. Магистраль элегантна и проста. Единственная проблема, если вы новичок в структурировании кода, поскольку вы должны определить структуру своего кода. Если вы используете rails, просто скопируйте организацию вашего приложения rails: routers/views/templates/models/

И отдельный файл для каждого класса, конечно. Затем используйте что-то, чтобы потребовать все, Sprockets, если вы используете Rails 3.1 или вам это действительно нравится, или Jammit, если вы используете 3.0.x.

Если вы используете coffeescript, просто помните, что ваш код, вероятно, заключен в замыкание верхнего уровня, поэтому, если вам придется либо добавить свои классы в хэш верхнего уровня, либо объявить их как window.Classname.

(На самом деле «это» — это «окно» на верхнем уровне, поэтому вы можете объявить его как: class @Classname )

Удачи!

person Duke    schedule 15.06.2011
comment
Я бы также рекомендовал JetBrains WebStorm, если вам не нужен Ruby или RoR. - person Raynos; 15.06.2011
comment
Поработав какое-то время с JavascriptMVC, я могу однозначно сказать, что лучше использовать backbone, если вы используете серверную систему с приличным управлением активами js. В итоге я взломал StealJS, чтобы он не работал, и вручную включил все библиотеки JMVC с помощью Jammit, потому что компилятор JMVC на основе Java принимает forEVER, а его плагин coffeescript прерывается после определенного количества файлов. - person Duke; 28.07.2011
comment
это должно быть пересмотренное редактирование / обновление вашего ответа, рассказывающее нам о вашем опыте через месяц. - person Raynos; 28.07.2011

arrow_upward
0
arrow_downward

Организация кода? - Я делаю MVC, как в рельсах (приложение/представления, помощники, контроллеры, модель) - фреймворк должен быть сгруппирован вместе IMO

Обработка состояния/модели? - Backbone.js однозначно.

Просмотры? - Я не знаю о вис-библиотеке. Для общих представлений магистрали и шаблонов я создал этот https://github.com/juggy/backrub, который заботится о обновления представлений на основе событий из вашей модели/представлений. Это экономит много связующего кода.

Компилятор/минификатор? - Google Closure Compiler - Jammit

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

IDE? На ваше усмотрение, чем легче, тем лучше.

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

person Julien    schedule 05.05.2011