Обычно при веб-разработке на всех уровнях стека используются разные языки программирования. База данных MongoDB, фреймворки Express и AngularJS и технология Node.js вместе образуют стек MEAN — мощную платформу, на всех уровнях которой применяется всего один язык: JavaScript. Стек MEAN привлекателен для разработчиков и бизнеса благодаря простоте и экономичности, а конечные пользователи любят MEAN-приложения за их скорость и отзывчивость.

JavaScript достиг зрелости. Благодаря ему теперь можно создать веб-приложение от начала до конца с помощью всего одного языка программирования. Стек MEAN включает в себя лучшие в своем классе технологии в данной области. В качестве БД вы получаете MongoDB, в качестве серверного фреймворка веб-приложений — Express, в качестве клиентского фреймворка — AngularJS, а в качестве серверной платформы — Node.

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

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

Эта книга не учит тому, как использовать HTML, CSS или базовый JavaScript, — предполагается, что читатель уже знаком с ними. Она включает очень краткое изложение основ CSS-фреймворка Twitter Boo tstrap. Кроме того, бонусом к ней идет отличное приложение по JavaScript — его теории, рекомендуемым решениям, советам и глюкам. Не помешает заглянуть туда пораньше.

Дорожная карта

Эта книга приглашает вас в путешествие по 11 главам.
Глава 1 рассматривает преимущества изучения разработки full-stack и анализирует компоненты стека MEAN.
Глава 2 основывается на приобретенном знании компонентов и обсуждает варианты их совместного использования для создания различных вещей.
Глава 3 знакомит с Express и помогает быстро освоить создание и настройку проекта MEAN.
Глава 4 дает более глубокие познания в Express посредством построения статической версии приложения.
Глава 5 использует уже имеющиеся знания о приложении и применяет MongoDB и Mongoose для проектирования и построения требующейся нам модели данных.
Глава 6 охватывает преимущества и процессы создания API данных. Мы создадим API REST с помощью Express, MongoDB и Mongoose.
Глава 7 связывает API REST с приложением путем его получения из нашего статического приложения Express.
Глава 8 является введением в стек AngularJS: мы увидим, как использовать его в создании компонентов для существующей веб-страницы, в том числе как обращаться к API REST для получения данных.
Глава 9 излагает основы создания одностраничных приложений с помощью Angular, демонстрируя разработку удобного в сопровождении модульного масштабируемого приложения.
Глава 10 базируется на материале главы 9, в ней продолжается разработка одностраничного приложения. При этом излагаются некоторые важные концепции и повышается сложность приложения Angular.
Глава 11 затрагивает все части стека MEAN, так как связана с добавлением в приложение аутентификации, позволяющей пользователям регистрироваться и заходить в приложение.

Отрывок из книги
2.3. Разработка гибкой архитектуры MEAN

Если работа с AngularJS похожа на обладание Porsche, то остальная часть стека соответствует наличию в гараже дополнительного Audi RS6. Множество людей обратят внимание на спортивную машину перед домом и не заметят автомобильуниверсал в гараже. Но если все-таки зайти в гараж и полюбопытствовать, то окажется, что под его капотом двигатель Lamborghini V10. Этот автомобиль-универсал может предложить гораздо больше, чем кажется на первый взгляд!

Использование MongoDB, Express и Node.js вместе только для создания API REST подобно использованию Audi RS6 лишь для того, чтобы возить ребенка в школу. И они и он обладают отличными возможностями и выполнят эту работу очень хорошо, но при этом способны на большее.

Мы уже кратко обсуждали, что можно получить с помощью этих технологий, в главе 1, но вот несколько отправных точек.

— MongoDB может хранить и обрабатывать потоковым образом двоичную информацию.
— Node.js особенно хорош для подключений в режиме реального времени с помощью веб-сокетов.
— Express — фреймворк веб-приложений со встроенными применением шаблонов,
маршрутизацией и управлением сеансами.

Это далеко не полный список, и я определенно не смогу рассмотреть все возможности всех этих технологий в данной книге. Мне бы понадобилось несколько книг для этого! Все, что я могу сделать, — привести простой пример и показать, как можно соединить воедино части стека MEAN для проектирования наилучшего решения.

2.3.1. Требования к движку блога

Взглянем на уже знакомую нам идею движка блога и посмотрим, как можно наилучшим образом спроектировать стек MEAN для его создания.

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


Глядя на списки на рис. 2.2, легко увидеть высокий уровень конфликтования между характеристиками этих двух частей. Вам нужна насыщенная контентом и слабоинтерактивная среда для статей блогов и богатая возможностями высокоинтерактивная среда для административного интерфейса. Статьи блога должны быть быстрозагружаемыми — для снижения показателя отказов, тогда как административная область должна быстро реагировать на действия пользователя и вводимые им данные. Наконец, пользователи обычно задерживаются на записи в блоге ненадолго, но могут захотеть поделиться ею с другими, тогда как административный интерфейс необщедоступен и отдельный пользователь может работать в нем длительное время.

Принимая во внимание обсуждавшиеся ранее потенциальные проблемы со SPA и глядя на характеристики записей в блоге, вы можете обнаружить немало совпадений. Вполне вероятно, что с учетом этого вы решите не использовать SPA для выдачи своих записей в блоге читателям. В то же время SPA отлично подходит для административного интерфейса.

Так что же делать? Возможно, самым важным будет удержание читателей блога — если их впечатления от вашего блога были негативными, они просто не вернутся и не будут делиться записями. Если блог не привлекает, то блогер просто прекратит в него писать или перейдет на другую платформу. Опять-таки медленный и плохо реагирующий административный интерфейс станет причиной того, что владельцы блогов начнут «убегать с корабля». Как можно добиться того, чтобы все были довольны, а движок блога был при деле?

2.3.2. Архитектура движка блога

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

Административный интерфейс: SPA на AngularJS

Мы уже обсуждали, что для административного интерфейса идеально подходило бы SPA, построенное на основе AngularJS. Так что архитектура этой части движка будет выглядеть очень знакомо: API REST, построенный на MongoDB, Express и Node.js, с одностраничным приложением на AngularJS в интерфейсной части. Рисунок 2.3 демонстрирует, как это будет выглядеть.

Записи в блоге: что делать?

Если задуматься о записях в блоге, то все оказывается несколько сложнее.

Представьте себе стек MEAN только как одностраничное приложение на AngularJS, обращающееся к API REST, и вы окажетесь в дураках. Вы можете в любом случае создать интерфейсную часть в виде SPA, раз хотите использовать JavaScript и стек MEAN. Но это не лучшее решение. Вы можете счесть, что стек MEAN просто не подходит для данного случая, и выбрать другой стек технологий. Но вам ведь этого не надо! Вам нужен просто сплошной JavaScript.

Так что взглянем на стек MEAN повнимательнее и подумаем обо всех его компонентах. Вы знаете, что Express — фреймворк веб-приложений. Вы знаете, что Express может использовать шаблонизаторы для создания HTML-кода на сервере. Вы знаете, что Express может использовать маршрутизацию URL и паттерны MVC. Вам стоит задуматься: а не в Express ли заключается ответ?

Записи в блоге: используем Express

В данном сценарии с блогом доставка HTML-кода и контента непосредственно с сервера — именно то, что вам нужно. Express выполняет это особенно хорошо, даже с самого начала обеспечивает выбор шаблонизаторов. HTML-содержимое потребует данные из БД, так что вы снова используете для этого API REST (подробнее мы рассмотрим, почему это наилучший подход, в следующем подразделе). Основу такой архитектуры демонстрирует рис. 2.4.


Вы получаете подход, при котором можете использовать стек MEAN или по крайней мере его часть для доставки основанного на базе данных контента непосредственно от сервера к браузеру. Но этим дело не ограничивается. Стек MEAN еще более гибок.

Записи в блоге: используем стек полнее

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

Можно также рядом с вашими сообщениями в блоге динамически отображать какие-либо данные, например связанные сообщения или поисковое поле с автодополнением, опережающим ввод с клавиатуры. Их можно реализовать с помощью AngularJS. Помните: AngularJS предназначен не только для SPA, его можно использовать также для добавления каких-нибудь интерактивных данных на страницу, которая иначе была бы статической. Рисунок 2.5 показывает, как эти необязательные части MEAN добавляются в архитектуру компонента блога.


Теперь вы можете организовать взаимодействие приложения, выдающего посетителям контент и основанного на полном стеке MEAN, с вашим API REST.

Движок блога: гибридная архитектура

На этой стадии у нас имеется два отдельных приложения, использующих API REST. Если немного спланировать, это может быть общий API REST, применяемый обеими частями приложения. Целостность архитектуры с одним API REST, взаимодействующим с двумя приложениями клиентской части, демонстрирует рис. 2.6.


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

» Более подробно с книгой можно ознакомиться на сайте издательства
» Оглавление
» Отрывок

Для Хаброжителей скидка 25% по купону — Стек