Лучшие практики для разработки больших приложений JavaScript

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

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

  • Развитие окружающей среды
  • Методы отладки
  • Модульное тестирование
  • профилирование
  • приборостроение
  • Системный дизайн
  • Дизайн интерфейса
  • Дизайн кода

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

Источник

9 ответов

Решение

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

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

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

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

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

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

  • Проверяйте и рассчитывайте все на стороне сервера
  • Предотвратить XXS

дизайн

Заявка--------------------------------

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

Фреймворк----------------------------------

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

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

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

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

Существует несколько сред MVC/MVVM для javascript (например, http://knockoutjs.com/).

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

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

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

Источник

Я принимал участие в написании большого 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 IDE Xcode, даже для разработки пользовательского интерфейса (что очень круто).

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

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

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

Модульное тестирование

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

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

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

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

Системный дизайн

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

Это отличный учебник для SproutCore, а также для backbone.js.

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

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

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

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

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

Дизайн кода

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

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

Источник

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

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

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

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

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

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

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

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

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

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

И еще пара ссылок.

Источник

Вы можете проверить библиотеку Google Closure и компилятор. Они также пишут довольно большие Javascript-приложения.

Источник

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

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

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

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

Источник

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

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

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

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

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

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

Модульное тестирование

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

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

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

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

Дизайн (Система / Код / Интерфейс)

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

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

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

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

Источник

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

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

Источник

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

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

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

Источник

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

Источник
Другие вопросы по тегам