Анатомия веб-сервиса

Андрей Смирнов

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

Какую часть я называю веб-сервисом, бэкендом, application-сервером? В классической архитектуре это то, что стоит за http rеverse proxy или load-балансировщиком, а с другой стороны у него находятся база данных, memcached и др. Вот только об этом бэкенде и будет идти речь.

Давайте сначала разберемся, зачем нужен вебпак (webpack), и какие проблемы он пытается решить, а потом научимся работать с ним. Webpack позволяет избавиться от bower и gulp/grunt в приложении, и заменить их одним инструментом. Вместо bower'а для установки и управления клиентскими зависимостями, можно использовать стандартный Node Package Manager (npm) для установки и управления всеми фронтэнд-зависимостями. Вебпак также может выполнять большинство задач grunt/gulp'а.

Bower это пакетный менеджер для клиентской части. Его можно использовать для поиска, установки, удаления компонентов на JavaScript, HTML и CSS. GruntJS это JavaScript-утилита командной строки, помогающая разработчикам автоматизировать повторяющиеся задачи. Можно считать его JavaScript-альтернативой Make или Ant. Он занимается задачами вроде минификации, компиляции, юнит-тестирования, линтинга и пр.

Допустим, мы пишем простую страницу профиля пользователя в веб-приложении. Там используется jQuery и библиотеки underscore. Один из способов — включить оба файла в HTML:

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

Все пользуются таск раннерами в той или иной мере: кто-то старинным грантом, кто-то постепенно уходящим с арены галпом и многими другими, а кто-то уже во всю использует npm-скрипты.

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

Товарищи инженеры, докладываю вам об успехах в подготовке научно-технических кадров в области программной инженерии в Киевском политехническом институте и публикую интересные примеры кода, которые были написаны для учебного курса, но будут, надеюсь, интересны и с практической точки зрения. Идея, внедрить JavaScript и Node.js в учебный процесс, вызревала у меня уже несколько лет. Но для освоения базовых вещей в программировании мне больше нравится C, чтобы люди прочувствовали машину, научились контролировать себя и свой код. А вот для прикладных задач, в которых уровень абстракции C уже не достаточно иллюстративен, мультипарадигменный и гибкий JavaScript прижился. При помощи мощного и простого API Node.js можно писать концептуальный код прямо на паре. Кроме того, знания JavaScript обязательно пригодятся на практике любому инженеру, работающему в ИТ. Часть кода, разработанного студентами курса, уже попала в серьезные Open Source проекты и это прекрасная практика, которую может повторить каждый, ведь лабораторные работы мы постепенно выкладываем на github и будем делать это и дальше, снабжая их методическими указаниями и не заботясь о том, что студенты будут списывать из форков, ведь все это нужно в первую очередь им самим. Эти материалы были использованы при подготовке порядка 300 студентов политехнического ВУЗа за 2015-2016 учебный год. Примеры я еще раз разложу по полочкам на летней школе, которая проходит с 9 по 26 августа 2016 года в Киеве, и расписание которой можно найти тут. Итак, переходим к самым показательным примерам кода.