codefo May 29 2013 at 12:38

Развиваем фронтенд Дневник.ру. Часть первая. Сборка и проверка JavaScript кода

9 min

15K

Дневник.ру corporate blogJavaScript*Website development*

+16

Comments 19

imbeat May 29 2013 at 14:05

Молодцы. Надо взять ваш подход на вооружение. Мне давно уже пора в своем проекте «навести порядок» в скриптах.

PS Небольшой баг-репорт. На главной странице ошибки JS:
1) в браузере Chrome — «Uncaught TypeError: Cannot call method 'split' of null» — файл static.dnevnik.ru/content/scripts/common.1f485c85.js
2) в Firefox — «TypeError: IM.page.urls.whiteListSite is null» — файл static.dnevnik.ru/content/scripts/common.1f485c85.js

codefo May 29 2013 at 14:18

Спасибо за баг-репорт, мы уже знаем об этой проблеме, в ближайшее время исправим.

imbeat May 29 2013 at 14:11

Еще очень интересна небольшая статистика на вашей главной странице «Уже подключено 28 150 школ, 4 451 499 учеников, 562 165 учителей, 2 329 504 родителей». Неужто родителей почти в два раза меньше, чем учеников?

Dnevnik_ru May 29 2013 at 14:33

Добрый день!
Да, такова статистика подключенных к нашей системе участников. Подключение родителей может несколько смещаться относительно подключения детей, поскольку это более, скажем так, «добровольное» дело — в том смысле, что учебный процесс без учителей и учеников никак не сможет быть реализован, в то время как родитель, — если школа его ребенка подключена к Дневник.ру, — решает самостоятельно, когда именно подключаться к Дневник.ру.

imbeat May 30 2013 at 07:16

Спасибо за развернутый ответ.

Dnevnik_ru May 30 2013 at 12:55

Всегда рады!
Более подробная информация о нашем проекте есть на сайте в разделе «О проекте» — company.dnevnik.ru/about/

sunnybear May 29 2013 at 15:08

Если вы использовали бы CDN, то пассаж про динамическую нагрузку от сборки JS кода можно было бы опустить. CDN сам все кэширует под любым именем.

codefo May 29 2013 at 15:25

Дело в том, что мы собираемся использовать в качестве CDN Windows Azure, который в свою очередь для этого использует BLOB-storage поэтому запустить какое-либо приложение не представляется возможным.

sunnybear May 29 2013 at 17:37

Возможно, CDN Windows Azure настолько хорош, что не позволяет кэшировать внешние ресурсы в статику. Тогда прошу прощения.

codefo May 29 2013 at 19:27

Насколько мне известно он не может напрямую обращаться за внешними ресурсами, в BLOB-storage все самим нужно складывать.

eme May 29 2013 at 15:59

Не так давно на работе перевел систему сборки front-end части на grunt, со steal js. На данный момент это примерно 230 js файлов с логикой приложения, 7 js файлов библиотек и около 40 файлов со стилями. В итоге все собирается в три файла: main.js, lib.js, style.css. Время сборки js и css файлов изменилось с 10 минут на 10 секунд, при том степень сжатия увеличилась примерно на 10%. Мой радости не было предела.

По дефолту grunt просто выводит список возможных команд. Можно отдельно запустить валидацию, по отдельности собрать модули, или же например перезапустить дополнительную оптимизацию статики. Плюс есть команда полной сборки всего и вся, запуская которую я просто сижу и наслаждаюсь, жаль все это происходит за примерно 10 секунд )

codefo May 30 2013 at 02:10

Нас тоже приятно радует скорость работы Grunt. В среднем (без скачивания модулей) на TeamCity она составляет 2-3 секунды при проверке кода синтаксическим анализатором и 10-12 секунд при построении deployament package.

LostSenSS May 30 2013 at 00:51

«Для того чтобы запустить Grunt, необходимо выполнить следующую команду в консоли относительно корневой директории приложения: > .\node_modules\.bin\grunt.cmd»

По-моему, чтобы запустить Grunt, достаточно команды «grunt» :)
Или я вас как-то не так понял?

codefo May 30 2013 at 01:59

Это так, если модуль grunt-cli, будет установлен глобально, то есть с помощью команды:

> npm install -g grunt-cli

В таком случае команда grunt будет добавлена в PATH, мы же в свою очередь устанавливаем все пакеты локально и поэтому используем для запуска этот .cmd файл.

Taritsyn May 30 2013 at 14:34

Как разработчик Bundle Transformer, я хочу отметить, что обработка кода (трансляция, минимизация, преобразование относительный путей в абсолютные (только для CSS-кода) и объединение кода в один файл) производится только при первом обращении к бандлу. Затем обработанный код кэшируется в памяти сервера и все остальные запросы уже читают код из кэша. Также стоит отметить, что предварительно минимизированные файлы (файлы с расширениями *.min.js and *.min.css) в Bundle Transformer не подвергаются повторной минимизации, что существенно экономит ресурсы сервера.

Ваше замечание по поводу синтаксического анализа кода справедливо лишь отчасти. В некоторых модулях-минимизаторах Bundle Transformer (BundleTransformer.MicrosoftAjax, BundleTransformer.Yui, BundleTransformer.Closure и BundleTransformer.UglifyJs) можно включить синтаксический анализ кода средствами самого минимизатора. Для этих целей служит свойство severity. Единственный недостаток текущей реализации в том, что предупреждения выводятся c помощью exception`ов. Но в будущих версиях я планирую переписать данный механизм под использование логгеров, т.е. сделать его похожим на систему вывода ошибок и предупреждений из другого моего проекта Web Markup Minifier.

codefo May 30 2013 at 15:09

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

Taritsyn May 30 2013 at 15:48

Полностью согласен с Вами по поводу статических файлов. Но в данном случае, просто некорректно сравнивать Web Optimization + Bundle Transformer с Grunt, потому что это принципиально разные продукты.

Более логично было бы сравнивать Grunt с его аналогами на платформе Microsoft: WebGrease, Cassette.MSBuild, Web Essentials и Chirpy.

Web Optimization + Bundle Transformer относятся к совершенно другой категории ПО, в которую также входят: Cassette.Aspnet, Combres и SquishIt.

Главное преимущество Bundle Transformer – это быстрое развертывание в проектах на базе ASP.NET. C Grunt`ом же Вам пришлось изрядно повозиться.

maksimr Jun 6 2013 at 01:57

Есть очень полезный (по крайней мере для меня) npm модуль «matchdep». Который позволяет
заргужать grunt модули разом (ну и не только grunt).

    // load all grunt tasks
    require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

codefo Jun 6 2013 at 14:31

Спасибо, не знал о таком. У нас уже это сделано своими силами: каждый task выглядит как отдельный модуль содержащий в себе вызов функции grunt.loadNpmTask и возвращающий после выполнения объект с опциями. Таким образом нам остается только взять все файлы из папки и выполнить их, а результат отдать в функцию grunt.initConfig.