Рекомендации по разработке более крупных приложений JavaScript

Имея сильный фон в Java/С++, я задаюсь вопросом, возможно ли разработать несколько более крупное приложение JavaScript без необходимости сокращать качество.

Любые намеки приветствуются в отношении:

  • Развитие окружающей среды
  • Методы отладки
  • Тестирование устройств
  • Профилирование
  • Инструменты
  • Дизайн системы
  • Дизайн интерфейса
  • Дизайн кода

Мне также интересно, как такие проекты, как JavaScript PC Emulator и JavaScript Game Engine обрабатывал эти проблемы в случае, если некоторые из вас знают.

Ответ 1

Среда разработки Ну, вам нужен веб-сервер (в зависимости от архитектуры на стороне сервера), такой как Apache или IIS для имитации связи AJAX. Иногда редактор для javascript включен в редактор языка разработки на стороне сервера.

Интересный вопрос о javascript IDE: https://stackoverflow.com/questions/209126/good-javascript-ide-with-jquery-support


Методы и профилирование отладки Используйте встроенные инструменты для отладки и профилирования браузера, такие как Firebug.

Вы также можете посмотреть этот инструмент для профилирования.


Тестирование устройств Если используется jQuery, я бы рекомендовал http://docs.jquery.com/Qunit. В версии разработки приложения javascrit загружаются тестовые файлы javascript. Когда приложение опубликовано, тестовые файлы не загружаются.


Безопасность

  • Подтвердить и рассчитать все на стороне сервера
  • Предотвращение XXS


Дизайн

Применение --------------------------------

  • Компоненты приложения
  • Пользовательские виджеты

Framework ----------------------------------

  • Базовые виджеты
  • Связь с базой AJAX
  • UI Core (вспомогательные методы...)

Структура обеспечивает базовые функции. Например, базовая структура jQuery и knockoutjs. И в дополнение к этой структуре приложение построено. Конечно, вы можете создать свою собственную инфраструктуру для своего приложения. Но, например, при выборе jQuery вам больше не нужно иметь дело с кросс-браузерными ошибками, потому что jQuery делает это для вас.


Связь с сервером: Это хорошая идея предоставить RESTful Service для общения. Вы также должны выбирать между JSON и XML. JSON более легкий, чем XML, поэтому часто выбирается JSON.


Шаблоны проектирования: Если приложение javascript действительно велико, рекомендуется реализовать шаблоны проектирования, такие как MVC или MVVM.

Существуют некоторые рамки MVC/MVVM для javascript (knockoutjs).

Это действительно полезная статья о шаблонах проектирования в javascript: http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/


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

И не забывайте, что производительность - это большое дело при использовании javascript. Поэтому сжатие и объединение файлов javascript - хорошая идея: http://code.google.com/intl/de/speed/articles/. В этот момент Lazy Loading также может помочь.

Ответ 2

Я участвовал в написании большого приложения JavaScript с SproutCore и Cappuccino и без каких-либо "макропрограмм". Вот что я думаю:

Прежде всего, все те же принципы "хорошего дизайна", которые вы приобрели в своей работе с Java, по-прежнему применяются: не пишите код спагетти, инкапсулируйте, отдельные проблемы и используйте MVC.

Множество людей начинают писать приложение "web 2.0" или "web 3.0" (что бы это ни значило), просто добавьте jQuery к нему и спуститесь по пути боли и страдания, так как их код становится все больше и больше и полностью незаметным,

"Большие" рамки, такие как Cappuccino или SproutCore, помогут вам избежать этого. Cappuccino отлично подходит для настольных приложений, в то время как SproutCore сместил фокус в 2.0 на "веб-стиль" приложений, таких как New Twitter, все еще предоставляя вам отличные способы структурирования ваших приложений и вашего кода.

Теперь по вашим конкретным областям или интересам:

Развитие окружающей среды

Я лично использую MacVim. Я хорошо слышал о Cloud9IDE, встроенной в IDE для разработки JS. Для Cappuccino вы можете использовать Apple Xcode IDE, даже для разработки пользовательских интерфейсов (что очень круто).

Оба приложения Cappuccino и SproutCore могут быть протестированы прямо в браузере без необходимости использования веб-сервера. Если вам нужно поговорить с веб-сервером (что вы, вероятно, захотите), Ruby on Rails или node.js обычно используются для быстрого запуска бэкэнда.

Методы отладки

Отладка по-прежнему является своего рода болезненным местом, когда дело доходит до разработки JavaScript. инструменты разработчика Google Chrome являются лучшими на данный момент. Вы можете установить точки останова прямо в браузере и всевозможные аккуратные вещи. Это инструмент, который вы хотите использовать.

Тестирование устройств

SproutCore использует QUnit, Cappuccino поставляется с OJUnit/OJSpec. Тогда есть проекты типа JSDOM и env.js которые позволяют моделировать браузер на сервере и дать вам среду для запуска автоматических тестов без браузера.

Также такие проекты, как Selenium или Jasmine стоит проверить.

Профилирование/Инструменты

Вы можете выполнить профилирование с помощью инструментов Chrome Dev. YSlow отлично подходит для общего профилирования веб-приложений (включая загрузку активов и т.п.).

Конструкция системы

Использовать MVC из get-go. Многие люди начинают с небольшого приложения и добавляют сюда JavaScript, чтобы прочитать значение из поля и еще немного JavaScript для обновления метки. Они делают это снова. И опять. И ужин сервируется: код спагетти. Используйте фреймворк, например SproutCore или backbone.js, чтобы предотвратить это и структурировать ваш код.

Это отличный учебник для SproutCore, это один для магистрали .js.

То же самое касается Cappuccino, здесь учебник, который я написал около года назад. Он немного устарел, но дает вам общую идею. Здесь последнее демо-приложение Я сделал для статьи, которую я написал для журнала MacTech в мае.

Так структурируйте свой код так же, как и в любой другой среде разработки. Возможно, прочитайте эту книгу или эту книгу. Эти видео также являются отличным ресурсом.

Дизайн интерфейса

Для Cappuccino вы можете использовать Apple Xcode Interface Builder для графического отображения пользовательского интерфейса. Для большинства других систем вы создадите свой интерфейс со стандартными HTML и CSS.

Если вы хотите разработать для мобильных устройств, вы должны прочитать эту статью.

Дизайн кода

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

JavaScript - это захватывающая среда для развития, и у нее очень яркое сообщество! Вы должны присоединиться к веселью! Надеюсь, мои мнения были полезны для вас.

Ответ 3

Об инструментах:

  • JSLint - онлайн-инструмент, разработанный Дугласом Крокфордом в http://www.jslint.com/. Это говорит вам, почему, даже если вероятность невозможна, ваш код может сломаться.
  • JSMin - это однофайловый javascript minifier, написанный на C. Скомпилируйте его, поместите в $PATH и используйте его для создания скриптов сборки для своего приложения. Миниатюрный javascript считается быстрее нагрузки. Получите его на http://www.crockford.com/javascript/jsmin.html.
  • Наличие JS Read-Eval-Print Loop всегда удобен. Самый загруженный - node.js, REPL на основе V8, механизма JavaScript javascript. Это позволяет вам интерактивно тестировать фрагменты javascript. Он также функционирует как один из самых мощных веб-серверов с помощью остроумной системы событий-циклов. Вам предлагается использовать его таким образом!
  • Приветствие JS - это хорошо, но вам нужен отличный веб-инспектор. Он обеспечивает широкую отладку и лучшее понимание вашего кода. В этой области как Google Chrome, так и Firebug считаются первоклассными. Разница в том, что Google Chrome встроен. Щелкните правой кнопкой мыши > проверить, и все готово.
    Но лучшие функции там могут быть обнаружены в этом красочном чит-текте.
  • JSFiddle - это онлайн-инструмент для тестирования фрагментов.
  • @mathias с гордостью поддерживает jsPerf, набор элементов которые проверяют фрагменты JS и могут сказать, кросс-браузер, какой алгоритм является самым быстрым.
  • YSlow - еще один действительно точный инструмент, чтобы рассказать вам, быстро ли ваш сайт, и как вы можете его улучшить, с остроумными советами.

Что касается IDE, нет единой среды разработки, которая окажется более эффективной. Лучшие люди в этой области используют только текстовый редактор, который им больше всего нравится (@phoboslab, человек, стоящий за ImpactJS, использует KomodoEdit, например. Paul Irish использует TextMate, что хорошо, но только для Mac. Многие люди используют Vim. Фабрис Беллард, парень позади JSLinux, использует свою версию Emacs, я думаю, это не имеет значения ни на один бит).

Модульное тестирование важно, но это никогда не проблема. Javascript достаточно мощный, чтобы вы могли создать более подходящее программное обеспечение для тестирования модулей в нескольких строках, чем что-либо там. Важно то, что благодаря node.js(предложению JS, которое я рекомендую выше), вы можете автоматизировать эти тесты, поместив их в файл *.js script и запустить все тесты с помощью одной строки: $ node test.js.

Что действительно считается эффективным, так это наличие mdn документации javascript под подушкой, а спецификация html всегда открыта. Имейте в виду, версия, на которую я указываю вам, не широко известна, но она, безусловно, лучшая! Он даже использует манифест кэша, чтобы вы могли перечитать страницы, которые вы уже загрузили, когда находитесь в автономном режиме! Не говоря уже о выдающейся функции поиска!

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

В конце концов, вопрос, который действительно нацелен на то, что вам интересно, - можете ли вы сделать огромное приложение в javascript?
Ответ - да. У Javascript действительно есть то, что Крокфорд называет "плохими частями", но использование JSLint предупреждает вас о них. С другой стороны, Javascript обладает мощным оружием:

  • Закрытие: вы можете определить функцию внутри другой функции, и она будет иметь доступ к переменным ouside даже после выполнения внешней функции.
  • Первоклассные функции: вы можете создавать массивы функций, передавать функции как параметры другим функциям, возвращать функцию из другой функции, все это бесплатно!
  • Объектные литералы, литералы массивов: это основа JSON. Он очень прост в использовании. Все javascript-движки теперь имеют встроенный объект JSON.parse(aString) и JSON.stringify(anObject).
  • Прототипирование: объекты могут наследоваться от любой переменной, которую вы уже определили.

Это делает работу эффективной и легкой. Есть несколько конкретных шаблонов, которые можно использовать в Javascript. Я позволю Paul Irish просветит вас.

Последний совет при использовании javascript в браузере: никогда не используйте <script>/* some javascript here */</script>. Всегда используйте <script src="javascript-file.js"></script>.

И еще несколько ссылок.

Ответ 5

Вы должны изучить альтернативы JavaScript, которые по-прежнему позволяют развертывать в среде, подобной JavaScript.

У многих приложений для написания больших приложений есть целая цепочка инструментов, которая позволяет отдельным людям и командам работать вместе, не имея необходимости общаться со всеми, проблема O (n ** 2).

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

GWT также работает с возможностями модульного тестирования Java, а именно junit, и многие команды java уже имеют опыт интегрирования junit в системы непрерывной сборки и тестовых панелей.

Ответ 6

Обратите внимание, что этот пост больше ориентирован на Интернет, так как именно там я в первую очередь работаю

Среда разработки

Если вы предпочитаете IDE, JetBrains имеет действительно хороший веб-редактор WebStorm, что значительно упрощает работу с javascript. Aptana - еще один хороший вариант. В противном случае текстовые редакторы всегда являются отличным вариантом (TextMate - мое предпочтение).

Методы отладки

Упомянутые выше инструменты браузера DOM, такие как firebug, являются обязательными. Вы должны иметь возможность объявлять и оценивать свой код в среде, где он используется, без необходимости постоянно сохранять и перезагружать.

Еще один момент, который стоит упомянуть здесь, - jslint, который является строгой проверкой вашего javascript. Это эквивалентно ошибкам времени компилятора и может быть неоценимым при устранении проблем в javascript.

Тестирование устройств

Лучшая модульная структура тестирования для javascript jasmine (основанная на тестах стиля rspec). Некоторым людям не нравятся объявления стиля BDD, хотя большинство людей, использующих TDD, принимают BDD, это просто TDD, сделанный правильно. Лично я считаю, что стиль BDD помогает сосредоточить людей на том, что они пытаются проверить. Он имеет обширную поддержку утверждения и много работы было сделано для обработки асинхронного характера javascript, не становясь слишком грязным.

Профилирование/Инструменты

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

Это, безусловно, пространство, которое увидит большой рост за пределами браузеров с растущей популярностью nodejs.

Дизайн (система/код/​​интерфейс)

Любое крупное приложение javascript будет работать во всех проблемах, которые будет иметь любой динамически типизированный язык. Кроме того, javascript также имеет очень длинную историю, в которой много плохого кода было и написано каждый день. Javascript не делает ничего, чтобы подтолкнуть вас к успеху, поэтому такие книги, как "Javascript, хорошие части".

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

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

Создание крупномасштабных приложений jQuery

Ответ 7

По-прежнему можно использовать Java как инструменты при разработке с JS. В компании, в которой я работаю, есть приложение 500K + loc, и мы используем такие инструменты, как Maven для работы с библиотечными зависимостями. Мы также используем Eclipse для разработки JS с использованием плагина WTP.

Мы используем JS Test Driver для UnitTests и селена для AT. Для деградации и профилирования мы обычно используем Firebug и отладчик IE, встроенные в VS Web Express.

Для компиляции кода мы используем закрытие Google и Java Servlet для обслуживания JS во время процесса разработки, который может загружать каждый JS файл и его зависимости в порядке, гарантирующем наличие зависимостей классов.

Ответ 8

На большинство ваших вопросов уже был дан ответ, однако я очень удивлен тем, что никто не упоминал DynaTrace Ajax как инструмент профилирования, так как он далеко лучший инструмент, доступный на рынке прямо сейчас для профилирования приложений в браузере.

Для отладки вам придется полагаться на встроенные отладчики браузера (инструменты разработчика в Chrome/Safari, панель инструментов разработчика в IE, Firebug в Firefox), но самым мощным инструментом отладки все еще является IE + Visual Studio, очень удобно время от времени.

Ответ 9

Эта статья может помочь в понимании Шаблон стратегии в JavaScript