Создание полного стека JavaScript: основы 
В мире JavaScript очень легко построить свой технологический стек, используя набор небольших пакетов, каждый из которых решает определенную проблему.
И это с одной стороны хорошо, но с другой стороны, у вас особо нет выбора — фреймворки, выполняющие широкий спектр задач на JavaScript, не пользуются популярностью.
В этой серии статей я хочу поделиться своим практическим опытом построения JS-стека.
- Статья 1: Основы
- Статья 2: Сервер
- Статья 3: Клиент
NET. И после того, как я освоил основы Node, мне пришлось потратить много времени на создание базового стека технологий и способа организации кода.
К сожалению, примеров готовых приложений на JS, показывающих, как решать основные задачи для большинства проектов, такие как обработка ошибок, доступ к базе данных, организация кода, авторизация и т. д., не так много.
Чтобы всегда иметь под рукой пример использования базовых технологий, я написал Контосо Экспресс , пример полнофункционального приложения на JS. В нашей команде мы используем этот проект как стартовый шаблон для других проектов, поэтому в будущем он будет поддерживаться и обновляться.
Github: Contoso Express Контосо Экспресс Это ремейк знаменитого учебника Microsoft по обучению основам разработки веб-проектов .
NET. Оригинальный университет Контосо Для многих частей стека трудно остановиться на одной альтернативе.
Поэтому для некоторых технологий существуют альтернативные реализации.
См.
ветки ALT в репозитории Contoso Express. Эти статьи предназначены для тех, кто уже знает основы; если вам нужно улучшить свои знания в какой-то области, ищите то, что вам нужно, в список дополнительных ресурсов .
Давайте начнем!
Почему JavaScript
Причин может быть много, вот мой главный список:- Простота : В целом библиотеки Node имеют простые API, которые легко понять и которые работают интуитивно.
Если с одной библиотекой у вас не получается, обычно нетрудно найти хорошую альтернативу.
- Контроль : Программист сам строит инфраструктуру проекта, подбирая и комбинируя небольшие модули под конкретные задачи.
Это займет больше времени, но результат того стоит. Разобравшись однажды, полученный опыт легко применить в дальнейшем.
- Универсальность : Изначально JavaScript работал только на клиенте.
Сначала вместе с Node он переехал на сервер, а с недавних пор на нем стало возможно успешно писать десктопные (Eletctron) и мобильные приложения.
Более того, для мобильных приложений есть вариант гибридных приложений (с использованием оболочки над браузером (Cordova)) или приложений с нативным интерфейсом (ReactNative, NativeScript).
Для Node существует огромное количество библиотек и она легко интегрируется с другими технологиями, базами данных, облачными технологиями, различными форматами и протоколами, есть все.
- Простое развертывание : Node очень легко развернуть на сервере: как Linux, так и Windows. После многих лет работы с .
NET для меня развертывание всегда было неприятным занятием, но на Node этот процесс даже приятен.
Вам просто нужно попробовать.
- Производительность : Node является асинхронным и не блокирует процесс выполнения во время длительных операций, таких как чтение файла или доступ к базе данных.
Это позволяет достичь высокого уровня производительности при использовании однопоточной среды.
С другой стороны, вычисления в JavaScript выполняются медленнее, чем в статически типизированных языках.
Для большинства проектов это не проблема.
Если вам нужны расчеты, а не просто преобразования данных, то лучше написать отдельный сервис на чем-то другом.
- Один язык на сервере и клиенте : Это удобно, поскольку позволяет без особых усилий передавать код между клиентом и сервером, упрощая его разработку и поддержку.
- язык JavaScript : JavaScript очень гибкий и простой в использовании, многие недостатки языка исправлены в последней версии ES6, при желании можно добавить типизацию с помощью TypeScript.
Параметры языка JS
Современный JavaScript может быть написан в нескольких вариантах:- ES5
- ES6/ES7 следующий
- Языки, скомпилированные в JS (TypeScript и другие)
Стандарты JavaScript
- ES5 — это версия JavaScript 2009 года, полностью поддерживаемая всеми современными браузерами и Node.
- ES6 - недавно одобренное языковое обновление.
Разработка поддержки стандарта для всех JS-движков пока находится в стадии разработки.
- ES7/Далее — новые функции JS, которые еще не одобрены.
Таким образом, в ближайшее время разработка клиентской части непосредственно на ES6 невозможна, поскольку поддержки пока нет во всех браузерах.
Node использует движок V8, текущая стабильная версия LTS (4.x) не поддерживает все новые функции ES6. LTS (долгосрочная поддержка) — это версия NodeJ, рекомендуемая для использования в производстве.
Следующий узел LTS ожидается в октябре 2016 года и уже поддерживает большинство функций ES6.
Транспиляция
Чтобы использовать функции ES6/ES7, существует несколько транспиляторов, которые преобразуют код, написанный на ES6, в ES5. Обратите внимание на разницу между транспиляцией и компиляцией: здесь .
Babel — самый популярный транспилятор от ES6/Next до ES5.
Машинопись
TypeScript — это языковое расширение JavaScript, которое добавляет возможности статической типизации.Типы в TypeScript используются для проверки правильности кода и предоставления дополнительных возможностей рефакторинга и автоподсказок.
Когда TypeScript транспилируется в JS, все определения типов опускаются.
TypeScript поддерживает множество функций ES6/ESNext и может использоваться в качестве транспилятора (вместо Babel).
Кроме того, в TypeScript есть дополнительные конструкции, которых нет в JS — перечисления, наследование и полиморфизм в классах и т. д. Они транспилируются в JS с помощью вспомогательного кода JS. Не все функции TypeScript одинаково полезны; вот основные категории:
- Транспиляция ES6/ESNext — TS хорошо с этим справляется, хотя в некоторых аспектах уступает Babel, например, async/await в TypeScript всё ещё доступен только при транскрипции в ES6-версию.
Подробнее об этом в следующей статье.
- Статическая типизация кода приложения - это основная причина использования TS, типы в TS необязательны, если тип не указан, предполагается тип "любой", а значит любые поля можно записывать и читать из этого типа, это делает перевод существующего JS кодировать в TS гораздо проще, типы добавлять не нужно везде, а только там, где это имеет смысл.
Более того, даже если вы не описываете типы в TS, у вас есть множество дополнительных проверок, которые помогают обнаружить тривиальные опечатки еще до запуска приложения.
Кроме того, подсказки в коде хорошо для вас работают и вам не нужно лишний раз смотреть, какие методы есть у модуля и какие у них сигнатуры.
- Ввод сторонних библиотек — TS позволяет описывать структуру сторонних библиотек (например lodash или express), это позволяет контролировать, что вы вызываете методы с правильными параметрами и позволяет видеть методы и их сигнатуры без использования документации.
К сожалению, качество таких описаний часто оставляет желать лучшего, и когда описание не содержит необходимой подписи, его приходится добавлять вручную.
Иногда проще не использовать сторонние объявления (относиться к библиотеке как к «любому» типу).
Проблема в том, что сейчас описания библиотек в ТС и сами библиотеки чаще всего пишут разные люди.
Скорее всего, ситуация улучшится по мере роста популярности TS.
- Функции TS, которых нет в JS — Я бы не рекомендовал использовать это без необходимости или если вы не используете фреймворки, написанные непосредственно на TS (например Angular2).
Использование таких функций делает TS<-> Преобразование JS намного сложнее, и они чаще меняются между разными версиями TS.
Что выбрать
Я бы рекомендовал выбирать между ES6 и TypeScript. В ES6 есть много полезных дополнений, которые делают разработку проще и приятнее, а на первоначальную настройку стоит потратить больше времени.Я перешел на TypeScript в своих проектах, потому что он действительно улучшает процесс разработки, хотя требует гораздо больше усилий для настройки и интеграции.
Что бы вы ни выбрали, хорошо, если вы сделаете осознанный выбор после работы с обоими.
Среда разработки
ВебШторм - умная среда разработки со множеством встроенных функций.Хорошая поддержка TypeScript. Оплаченный.
Подробности настройки contoso express на странице вики-страница проект. WebStorm — основная IDE в нашей команде.
Код Visual Studio это бесплатная среда от Microsoft. Лучшая поддержка TypeScript появилась лишь недавно, но некоторые привычные функции отсутствуют. Он быстро развивается, полностью сделан и поддерживает плагины на JavaScript. Другие — вы можете использовать другие IDE JavaScript, такие как Atom, Sublime, Brackets. TypeScript везде поддерживается в той или иной степени.
Выбор пакетов npm
Работать с npm очень просто.Легко установить и легко опубликовать ваши пакеты.
В результате на npm имеется очень много пакетов (на данный момент их более 330 000).
Найти подходящую упаковку довольно сложно.
Для любого запроса на npmjs.com будет много пакетов, но не факт, что там будут предоставлены основные пакеты для решения нужной задачи.
При выборе пакета следует обратить внимание на: количество загрузок (популярность) и то, как часто пакет обновляется (фиксируется в репозитории GitHub).
Найдя нужный вам пакет, вы можете поискать информацию в Интернете, чтобы найти и другие пакеты, выполняющие аналогичные задачи.
Есть сайт с альтернативным поиском npm npms.io , там сразу просчитываются такие характеристики, как популярность и регулярность поддержки.
В будущих статьях я опишу основные варианты пакетов для основных задач разработки.
Если имя пакета взято в кавычки (например, «bluebird»), это означает, что под этим именем пакет зарегистрирован в npm и его можно посмотреть здесь.
https://www.npmjs.com/package/{package_name } (т.е.
в этом случае https://www.npmjs.com/package/bluebird ).
База данных
SQL или NoSQL?
На этот вопрос нельзя ответить однозначно; это зависит от конкретной ситуации.
Наиболее популярные варианты SQL/NoSql — PostgreSQL/MongoDb. Недавнее добавление полей JSON в PostgreSQL делает его очень привлекательным вариантом, сочетающим в себе лучшее из мира SQL/NoSql. Но, несмотря на это, MongoDb по-прежнему остается самой популярной базой данных для Node, и с ней проще работать, особенно для тех, у кого нет опыта работы с базами данных SQL.
Доступ к базе данных
При работе с базой данных вы можете использовать доступ напрямую, используя драйвер базы данных или некоторую абстракцию ORM более высокого уровня.Если у вас не так много взаимодействий с базой данных, лучше использовать прямой доступ или низкоуровневую абстракцию, например Knex (для баз данных SQL).
ОРМ
секвелизировать — самая популярная ORM для баз данных SQL. Он обеспечивает высокий уровень абстракции схемы базы данных и поддерживает основные диалекты SQL (PostgreSQL, MySQL, SQLite и MSSQL).Используется в Contoso Express. Кнекс представляет собой абстракцию более низкого уровня.
Больше похоже на построитель запросов, чем на полноценный ORM. Поддерживает больше диалектов и дает больше контроля над генерируемым SQL. Есть функции для построения схемы базы данных и ее миграции.
Книжная полка — еще один популярный ORM на базе Knex, уровень абстракции ниже, чем в Sequelize и многие вещи нужно определять вручную.
Мангуста — Самый популярный ORM для самой популярной JS базы данных MongoDB.
Прямая связь
Для всех основных баз данных имеются качественные драйверы для прямого подключения.Для Postgres используйте пакеты «pg» или «pg-promise».
Что дальше
В следующей статье я расскажу о работе с JS на сервере.Он будет более практичным и охватит такие вещи, как выбор веб-фреймворка, организацию структуры проекта, работу с конфигами, авторизацию, ведение журналов, обработку ошибок и многое другое.
Буду рад комментариям, особенно непосредственно по коду проекта Contoso Express :) Спасибо всем, кто дочитал до конца! Следите за обновлениями! Теги: #typescript #node.js #Express.js #полные приложения #contoso-express #react #vue.js #postgresql #sequelize #JavaScript #проектирование и рефакторинг #node.js #react.js
-
Цитрусовые
19 Oct, 24 -
Пол Грэм: Что Я Узнал Из Hacker News
19 Oct, 24 -
Опенид 2.0
19 Oct, 24
