Node js express пишем модуль. Основы Node JS & Express (III)
Как видно из заголовка, речь в нашей статье пойдет о выборе одного из трех фреймворков для Node.js: Express , Koa и Sails .
В конце статьи мы поделимся с вами выбором компании и объясним, почему выбранному нами фреймворку стоит уделить особое внимание.
Сразу подчеркнем, что задача достаточно сложная, и провозгласить один из вариантов как оптимальный и подходящий на все случаи жизни будет сложно.
В своей статье мы сначала опишем основные характеристики каждого фреймворка. И когда у вас сложится общее впечатление о них, сравним три фреймворка на основании нескольких ключевых критериев .
А сейчас давайте перенесемся в 2009г. , когда двухлетние эксперименты Райана Даля по созданию серверных веб-компонентов увенчались успехом и появилась принципиально новая технология.
Node.js – событийно-ориентированная платформа, применяемая для создания веб-приложений, которая обеспечивает возможность использовать JavaScript на стороне сервера.
Так как до появления Node.js язык JavaScript использовался только на стороне клиента, появление такой платформы было встречено разработчиками с энтузиазмом. По сути, это открывало новые возможности для создания приложений с высокой производительностью и масштабируемостью.
Нужно признать, что ожидания разработчиков оправдались, и на данный момент Node.js сохраняет популярность и продолжает двигаться вперед.
Чтобы убедиться в этом, достаточно отследить периодичность выхода обновлений и объем вносимых изменений .
Сообщество Node.js растет и развивается. Регулярно генерируются новые идеи, а в результате появляются новые инструменты и библиотеки.
Благодаря таким темпам развития разработчики получили в свое распоряжение широкий ассортимент фреймворков, а подобное многообразие, как правило, предполагает сложный выбор.
В своей с татье мы будем выбирать один из трех MVC фреймворков, которые используются для серверной части (бэкенда) приложений на Node.js.
MVC (англ. Model-View-Controller) – шаблон проектирования, включающий в себя три компонента: Модель, Представление и Контроллер. Изменение всех трех компонентов может производиться независимо друг от друга. При этом модель предоставляет данные и правила управляющей логики, представление отвечает за отображение данных на пользовательском интерфейсе, а контроллер обеспечивает взаимодействие между моделью и представлением.
Для сравнения в рамках этой статьи м ы выбрали:
- Express, как самый гибкий, простой и быстрый фреймворк
- Koa , как версию Express нового поколения, созданную той же командой разработчиков
- Sails , как созданный для быстрой разработки приложений на принципах Ruby on Rails и Express .
У каждого из этих фреймворков есть свои последователи и оппоненты, которые могут бесконечно спорить друг с другом, приводя собственные доводы за и против.
Но при этом все три варианта обладают определенными характеристиками и особенностями, обеспечивающими преимущество в той или иной конкретной ситу ации.
EXPRESS.JS
Начнем описание с самого простого фреймворка, используемого на платформе Node.js.
Express используется для разработки приложений достаточно давно и благодаря своей стабильности прочно занимает позицию одного из самых
Для этого фреймворка существует большое количество подробных инструкции и описаний, которые составлены разработчиками, проверившими его эффективность на практике. Поэтому именно с Express рекомендуется начинать работу, если вы намерены научиться создавать приложения на платформе Node.js.
Согласитесь, гораздо разумнее воспользоваться накопленным и проверенным опытом, чем заново изобретать велосипед.
Основная особенность этого фреймворка заключается в том, что для Express характерен небольшой объем базового функционала . Все остальные нужные вам функции нужно будет добирать за счет внешних модулей. По сути, Express в чистом виде – это сервер и у него может не быть ни одного модуля.
Благодаря такому минимализму разработчик изначально получает в свое распоряжение легкий и быстрый инструмент , который он может расширять и развивать.
При этом немаловажно, что выбор модулей для Express не связан ни с какими ограничениями: ни с количественными, ни с функциональными.
В результате, этот фреймворк обеспечивает разработчику возможность решать любые задачи, не ограничивая его при этом в выборе средств.
С одной стороны, не может не радовать тот факт, что отсутствие готовых универсальных решений фактически означает, что каждое создаваемое приложение будет уникальным.
С другой стороны, разработчику нужно самостоятельно отбирать и организовывать модули, а это предполагает большой объем работы и соответственно, требует от разработчика больше времени и усилий.
ПЛЮСЫ:
✓ простота
✓ гибкость
✓ хорошая масштабируемость
✓ развитое сообщество
✓ подробная документация
✓ широкий выбор подключаемых модулей
МИНУСЫ:
✗ большой объем ручной работы
✗ используется устаревший подход callbacks функций
KOA.JS
Koa был создан командой разработчиков, как вариант фреймворка Express в новом поколении . Такая улучшенная версия разрабатывалась для создания веб-приложений и API с повышенной производительностью. Соответственно, создатели стремились учесть все недостатки предшественника и сделать его более современным и удобным в использовании.
Посмотрим, насколько это удалось.
Koa обладает практически таким же функционалом и превосходит Express по легкости.
Характерной особенностью Koa является использование генераторов ES6.
Генераторы – тип функций, которые могут быть запущены, остановлены и возобновлены независимо от того, на каком этапе выполнения они находятся, и при этом сохраняют свой контент.
Применение генераторов ES6 в Koa позволяет исключить обратные вызовы (англ. callbacks ), уменьшает для разработчиков объем работы с кодом и снижает вероятность ошибок .
Благодаря тому, что создателями Koa уже были учтены минусы, выявленные в процессе работы с Express , этот фреймворк может похвастаться тем, что его применение существенно упрощает адаптацию под конкретные запросы клиентов (кастомизацию ). А такая характеристика может в итоге сыграть решающую роль в процессе выбора: сегодня в условиях высокой конкуренции любое приложение стремится к использованию своего собственного стиля.
Если говорить о недостатках, они, в основном, связаны с относительной молодостью Koa (появился в 2013 г. ). Фреймворк не пользуется поддержкой такого обширного сообщества, как Express , и еще не успел продемонстрировать все свои возможности.
ПЛЮСЫ:
✓ легкий
✓ гибкий
✓ быстрый
✓ генераторы ES6
✓ лучшая кастомизация
МИНУСЫ:
✗ недостаточная поддержка сообщества
SAILS.JS
Этот фреймворк разработан как полный готовый продукт , который уже включает в себя достаточный функционал для того, чтобы можно было начать работу, и при этом использует минимальное количество внешних модулей.
Соответственно, такой фреймворк изначально будет тяжелее, чем два предыдущих.
С одной стороны, от разработчика требуется минимальное количество усилий, так как для создания приложения используется собственный функционал фреймворка. Нет необходимости вникать в тонкости процесса – можно просто взять готовое проверенное решение.
С другой стороны, разработка приложения будет ограничена рамками имеющихся в наличии средств фреймворка, так как внешних модулей для Sails гораздо меньше, чем для Express или Koa .
Отличительной особенностью фреймворка является встроенная технология программирования Waterline ORM (англ. Object-Relational Mapping) , которая используется для обеспечения связи с различными базами данных.
Наличие такого компонента можно было бы отнести к преимуществам, но в процессе работы вы можете столкнуться с определенными ограничениями. Например, Waterline не поддерживает транзакции, новые фичи и исправления ошибок вносятся несвоевременно.
В целом, более медленное развитие до недавнего времени было характерно для всего сообщества Sails , особенно по сравнению с другими, поддерживающими описанные выше Express и Koa . Но следует отметить, что на данный момент сообщество Sails все же начало набирать обороты и развиваться более активно.
ПЛЮСЫ:
✓ богатый функционал
✓ поддержка Socket.io
✓ документация в одном месте
✓ легче найти специалиста с опытом работы на Sails
МИНУСЫ:
✗ тяжелый
✗ медленный
✗ ограничения Waterline
✗ недостаточно подробная документация
Мы описали основные свойства, характерные для трех фреймворков, которых вполне достаточно для составления о них объективного впечатления.
Если у вас остались вопросы, свяжитесь с нами прямо сейчас!
Чтобы помочь вам более наглядно сопоставить три фреймворка, исходя из указанных выше особенностей, компания предлагает небольшую сравнительную таблицу.
Попробуем сделать общий вывод из того, что мы уже знаем о трех рассматриваемых фреймворках. Определим для каких проектов, в целом, лучше подходит каждый из них:
Express.js подходит для:
- начинающих программистов, которые нацелены на профессиональный рост в Node JS;
- больших проектов, предполагающих кастомизацию;
- случаев, когда необходима долгосрочная поддержка приложения.
Sails.js подходит для:
- быстрого старта проекта;
- быстрых стартапов, которые не предполагают расширения в будущем;
- приложений реального времени, где требуется моментальная реакция;
- начинающих Node.js программистов;
- приложений, не требующих долгосрочной поддержки.
Справедливости ради отметим, что приложения реального времени можно создавать и при помощи Express. Однако при разработке такого приложения с использованием Sails на создание и настройку уйдет гораздо меньше времени и сил.
Koa.js подходит для:
- как небольших, так и крупных проектов, которые предполагают развитие в перспективе;
- для проектов с высокой степенью кастомизации;
- для облегчения долгосрочной поддержки приложений.
Теперь, когда мы подробно рассмотрели плюсы и минусы каждого из трех фреймворков, расскажем о том, какой фреймворк мы выбираем и почему.
Мы выбираем Koа, потому что:
- Как и Express, Koa не ограничивает разработчика в использовании встроенных модулей, а дает возможность выбрать из множества именно тот, который подходит лучше всего для конкретного проекта;
- Koa вобрал в себя достоинства проверенного и широко-используемого фреймворка Express;
- у создателей Koa была возможность проанализировать сложности, с которыми столкнулись разработчики, использовавшие Express;
- при создании Koa были учтены недостатки его предшественника;
- Koa основан на новых стандартах и соответствует современным тенденциям;
- Koa подходит для разработки самых разнообразных приложений любого объема, с любой степенью кастомизации и с любыми требованиями к поддержке;
… и самый главный аргумент – это собственный положительный опыт специалистов , приобретенный во время работы с этим фреймворком.
В любом случае, подойдите к решению с рациональной точки зрения и отдайте предпочтение тому фреймворку, который оснащен в соответствии с вашими конкретными требованиями.
Мы всегда готовы поддержать ваш выбор и помочь вам реализовать любой проект. Не откладывайте на завтра и прямо сейчас!
Основы Node JS & Express (III).
Разбираемся, что такое npm и для чего он нужен. Устанавливаем Express и шаблонизатор EJS. Делаем полную подготовительную работу и начинаем создавать свой собственный сайт на NodeJS.Теперь с параметрами, которые постоянно будут меняться.
Если нам нужно создать ссылку на некое значение, после /mews/значение . Оно будет меняться. Например: 23, part или любое др значение.App.get("/news/:id", function(req, res){ res.send("ID is - " + req.params.id); });
В зависимости от этого параметра мы можем брать данные из БД (базы данных) и выводить конкретную статью.
Нам нужен некий html файл куда мы будем передавать данные нашего id и в зависимости от этих данных выводить ту или иную информацию.
Нам нужен некий шаблонизатор .
Благодаря Express мы можем использовать несколько шаблонизаторов.
Поскольку EJS является дополнительным пакетом, то нам нужно его установить.
Нажать Enter
После этого он установится в наш проект.
Он позволяет передавать данные в различные шаблоны, причем эти шаблоны будут иметь расширение.ejs .
В этих шаблонах мы сможем выводить наш html код вместе с вставленным в него js кодом (переменными, выводить циклы и многое другое).
Будет такой шаблон страницы, который будет изменяться в зависимости от переданных в него данных.
Первое, что нам нужно сделать это указать какой view engine мы будем использовать.
View engine - по сути шаблонизатор.
Поскольку их существует огромное количество, а мы выбрали именно EJS, то мы должны его указать в нашем index.js файле.
Сразу после инициализации переменной app .
App.set("view-engine", "ejs");
Все файлы, которые мы будем отображать, по умолчанию будут искаться в папке views .
На том же уровне, где index.js создадим папку views .
В ней создадим новый файл news.ejs . Это будет некий шаблон, который мы будем наполнять.
В эти шаблоны мы можем помещать самый обычный html-код.
Новостная страница.
Для этого мне не нужно использовать метод.send или.sendFile , а мне потребуется метод render() .
Метод render() берет нужный файл (шаблон) в папке views и может отобразить его в браузере. Плюс в этот шаблон он может передать некие параметры.
Расширение в методе render() можно не указывать. Далее можно передать некие параметры в сам шаблон. Поэтому мы передаем вторым параметром - объект. В нем может быть большое количество свойств и значений.
Допустим, что мы решили передать некий параметр newsId со значением req.params.id - то есть значение будет как раз сам вызываемый id .
App.get("/news/:id", function(req, res){ render("news", {newsId: req.params.id}); });
Таким образом в шаблон news будет передано значение, которое будет называться newsId со значением id .
В файл news.ejs мы можем все это принять и отобразить.
Немного изменим наш файл news.ejs . В заголовок страницы будем выводить ID.
Все можно посмотреть в документации к шаблонизатору EJS (ссылка выше).
Новостная страница c ID = <%= newsId %>
Файл /views/news.ejs
Новостная страница c ID = <%= newsId %>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque numquam libero, veniam ipsum similique odit molestiae esse quia blanditiis magni debitis aliquam, pariatur nam quaerat quas nemo, facilis temporibus laboriosam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores enim vitae dolore nemo quas aliquam quia corrupti rerum ipsam ad nesciunt, architecto, pariatur officiis. Maxime iste ullam quibusdam, nobis voluptas!
Файл index.js
Let express = require("express"); let app = express(); app.set("view engine", "ejs"); app.get("/", function(req, res){ res.sendFile(__dirname + "/index.html"); }); app.get("/about", function(req, res){ res.sendFile(__dirname + "/about.html"); }); app.get("/news/:id", function(req, res){ res.render("news", {newsId: req.params.id}); }); app.listen(8080);
Мы можем передавать несколько параметров. Например:
App.get("/news/:id", function(req, res){ res.render("news", {newsId: req.params.id, newParam: 535 }); });
А в файле news.ejs выведем его на страницу, например так:
<%= newParam %>
Помимо этого мы можем передавать и собственные объекты. Например, создадим объект:
App.get("/news/:id", function(req, res){ let obj = { title:"Новость", id: 4}; res.render("news", {newsId: req.params.id, newParam: 535}); });
И этот объект мы тоже можем передавать. Вначале определяем название того, что будем передавать, а потом указываем что передаем.
Например:
App.get("/news/:id", function(req, res){ let obj = { title:"Новость", id: 4}; res.render("news", {newsId: req.params.id, newParam: 535, obj: obj }); });
Title = <%= obj.title %>
ID = <%= obj.id %>
<%= newParam %>
Передача в шаблон массива.
Создадим массив данных и выведем его с помощью цикла.App.get("/news/:id", function(req, res){ let obj = { title:"Новость", id: 4, paragraphs:["Параграф", "Обычный текст", "Числа: 3, 7, 24", 476] }; res.render("news", {newsId: req.params.id, newParam: 535, obj: obj}); });
Теперь в самом шаблоне мы просто выведем этот массив циклом:
-
<% obj.paragraphs.forEach(function(item) { %>
- <%= item %> <% }); %>
Статические файлы и промежуточное ПО.
Файлы, которые можно включить в другие файлы.
Сейчас у нас есть один шаблон - news.ejs , а представьте. что их много. Десятки. И вам потребуется внести изменения в какую-то часть кода, который встречается во всех этих файлах. Придется вносить множество изменений.Чтобы этого избежать, можно использовать файлы, которые можно включать в другие файлы. Например. Есть файл с шапкой сайта. И если нужно что-то изменить, то достаточно внести изменения только в один файл, так как к другим он просто подключается.
В папке шаблонов views создадим папку blocks , а в ней файл hrader.ejs .
Файл hrader.ejs
- На главную
- Про нас
- Новости
Теперь нам нужно этот файл подключить во всех шаблонах. Идем в файл news и сразу после открывающего тега body записываем:
<% include blocks/header.ejs %>
Путь указывается от папки views , поскольку шаблонизатор всегда начинает искать там.
Статические файлы.
Создадим новую папку на уровне index.js с названием public . В ней будут находиться все статические файлы. Это css-файлы, картинки, документы и пр. Все те файлы. которые будут вызываться с различных страниц нашего сайта.В этой папке создадим еще одну папку - css и уже в ней создадим файл style.css .
В него перенесем весь код стилей из файла index.ejs
В файлах.ejs подключаем стили:
Если теперь проверить, то ничего не произойдет. Стили не подключатся.
Для подключения статических файлов нам нужно использовать промежуточное программное обеспечение:
В файле index.js вверху, сразу за app.set , мы должны написать:
App.use("/public",);
И теперь, если мы где то будем использовать ссылку начинающуюся с /public сам NodeJS и Express будет понимать, что мы используем статические файлы и будет подключать все верно.
Вторым - где мы их ищем express.static("public") т. есть в папке /public .
Если обобщить, то в коде app.use("/public", express.static("public")); мы отслеживаем ту ссылку, которую прописываем в
Если бы у на было бы вот так:
То и в этом коде было бы:
App.use("/assets", express.static("public"));
В данном случае public указывает на папку!
Если так и оставить, то никаких изменений не произойдет. Файл подключится, потому что мы будем отслеживать ссылку assets .
App.use("/assets ", express.static("public "));
Для того, чтобы не путаться, обычно, делают ссылку и папку одного имени. Чаще всего это именно public .
Промежуточное ПО - это то, что мы делаем до того пока отправим какие-то данные на страницу (сервер).
В данном случае это и есть наше промежуточное ПО.
Создание HTML-формы и получение данных
Первое, что мы сделаем это добавим саму форму на наш сайт.Открываем файл about.ejs и сюда мы будем добавлять форму используя технологию bootstrap.
В окно поиска вводим Forms и на найденной странице копируем первую форму сверху.
Сохраним и запустим.
POST -запрос.
Так так мы будем выполнять POST -запрос, то нам необходимо добавить в форму несколько атрибутов.Method="post" - т.к POST -запрос
И action="" - это то куда нужно перенаправить пользователя после того,как он нажмет "Отправить". В нашем случае это: