Инструменты и ресурсы для полноценного опыта работы с JavaScript — обзор

Когда многие люди думают о сети, они представляют себе страницы PHP, которые подпрыгивают каждый раз, когда они нажимают кнопку. Традиционно Интернет не ассоциировался с разработкой высокопроизводительных приложений, и люди медленно осознают прогресс JavaScript за последние 6–10 лет.

В этот период времени стал доступен взрыв инструментов и ресурсов, что сделало веб-разработку тяжеловесом. NodeJS является наиболее важным катализатором разработки JavaScript, позволяя запускать JavaScript на вашем рабочем столе или сервере без браузера. Разработка с открытым исходным кодом также взлетела, буквально миллионы вкладов в репозиторий NPM. Технологические гиганты, такие как Google и Facebook, произвели революцию в сфере фронтенда. Наконец, благодаря облачным вычислениям серверные и вычислительные ресурсы никогда не были такими доступными и экономичными.

Представьте себе, что вы пишете все компоненты подключенного приложения на JavaScript вместе с API, взаимодействием с базой данных и пользовательским интерфейсом. Это не только возможно, но и достигается очень небольшим количеством кода! Мы рассмотрим этот сценарий во второй и третьей частях этого поста.

Недисциплинированный Дикий Запад? (Развеять миф)

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

Проблема больше не в инструментах, а в решениях и управлении. С появлением TypeScript стало возможным иметь строго типизированный код и проверку ошибок во время разработки. Такие инструменты, как Webpack, позволяют вам писать очень сложные кодовые базы с глубокими цепочками ссылок. NPM позволяет публиковать и использовать высококачественные библиотеки с открытым исходным кодом, а также модифицировать их в соответствии с вашими потребностями.

Язык JavaScript даже добился успехов в том, чтобы сделать ООП-разработчиков более удобными в использовании этого языка. Например, вы можете написать «класс» в JavaScript, используя ключевое слово new class, а также наследовать от других классов, используя ключевое слово extends. Я признаю, хотя они выглядят и ощущаются как классы, важно отметить, что JavaScript продолжает использовать объектную систему на основе прототипов. Это одна из тех деталей, которые не важны, пока не станут важными. Для этого обсуждения можно с уверенностью думать о классах JavaScript как о традиционных классах.

Безопасность типов и TypeScript?

Для многих, таких как я, написание кода на нетипизированном языке может быть затруднено. Может быть, даже кощунственно! Нетипизированный код может быть очень неэффективным для написания и подвержен ошибкам в средних и крупных проектах. Любой, кому приходилось выискивать ошибку 1+"1" = "11", может убедиться в преимуществах проверки ваших типов при кодировании. Это еще более очевидно в проектах с несколькими разработчиками и командами.

TypeScript отлично справляется с созданием моста между этими двумя мирами. За редкими исключениями, TypeScript — это просто JavaScript с определениями/аннотациями типов — не более того. Когда я начал использовать TypeScript, я уже давно не использовал JavaScript. Я думал, что TypeScript сделал мой JavaScript более похожим на C#. Позже я узнал, что эти функции на самом деле были более новыми функциями JavaScript. Вы буквально остаетесь с содержимым JavaScript, удаляя типы из вашего файла TypeScript.

Конечно, TypeScript позволяет улучшить рабочий процесс за счет улучшения завершения кода, а также проверки ошибок во время разработки. Даже простые разработчики JavaScript извлекают выгоду из типов, определенных в сторонних библиотеках. Многие IDE по-прежнему будут использовать определения типов в ванильных проектах JavaScript. На заметку, библиотека, полностью написанная на JavaScript, может и обычно имеет доступные для них определения типов. Если определения типов не включены в пакет, они обычно доступны в виде отдельного пакета. Используя NPM, вы обычно можете установить их, используя «npm install @types/package-name».

Ключевое слово import: Склеивание файлов вместе

Если вы знакомы только со скриптами в HTML, то вы, вероятно, знаете, что теги ‹script› — это основной способ загрузки JavaScript в ваш код. Кроме того, если один файл зависит от другого, вам необходимо убедиться, что они загружаются в правильном порядке, чтобы избежать ошибок.

Современная разработка JavaScript идет другим путем. Теперь вы можете ссылаться на зависимости файлов в своих файлах JavaScript/TypeScript, «импортируя» зависимости в другие файлы. Это улучшение устраняет необходимость создания сложных структур тегов скриптов в вашем HTML.

Кроме того, ключевое слово import (и ключевое слово require в Node) является одним из основных механизмов, позволяющих создавать сложные приложения.

ПРИМЕЧАНИЕ. Ключевое слово import появилось в браузерах относительно недавно и может быть реализовано не во всех браузерах. Однако, когда мы обсудим Webpack позже, вы увидите, что ключевое слово import имеет важное значение для разработки внешнего интерфейса.

NodeJS и NPM

NodeJS и NPM сегодня являются ключевыми элементами разработки JavaScript как для серверного, так и для внешнего кода. Когда я пошел по пути разработки JavaScript/TypeScript, я начал с Angular (популярный интерфейсный фреймворк). В рабочих процессах Angular активно использовались NPM и NodeJS, но я изо всех сил пытался понять их роли и то, что они делают.

NodeJS — это просто движок JavaScript, который работает на вашем компьютере или сервере. Во фронтенд-разработке Node обычно используется для запуска процесса или скрипта, например, для компиляции SASS в CSS или для упаковки вашего приложения в один файл JavaScript. Однако помимо разработки ваш внешний интерфейс по-прежнему требует только браузера, как и следовало ожидать. На сервере вы можете использовать Node в качестве своего веб-сервера и кодировать его на JavaScript. Вы можете использовать узел как простой веб-сервер или разрабатывать сложные API, которые взаимодействуют с базой данных, файлами или другими внешними API для обслуживания вашего приложения.

NPM расшифровывается как Node Package Manager. Любой, кто знаком с Nuget, имеет хорошее представление о том, что такое NPM. NPM обычно используется для установки и/или обновления зависимостей вашего проекта. Кроме того, его можно использовать для установки приложений системного уровня, таких как typescript, без необходимости загрузки/запуска программы установки. Например, TypeScript можно установить в вашей системе, запустив «npm install -g typescript», где «-g» указывает NPM установить его глобально.

Хотя NPM работает как установщик пакетов, он также используется как удобный способ запуска скриптов. Многие проекты имеют сценарии, определенные в файле package.json, что позволяет выполнять их с помощью такой команды, как «npm start» или «npm run my-script».

Для начала вы можете найти установки Node на их сайте по адресу: https://nodejs.org.

Webpack (объединение для Интернета)

Итак, мы обсудили, как все файлы связаны в коде сервера/ПК, но как насчет браузера? Теги ‹script› по-прежнему нужны, но использовать их для загрузки файлов для большого проекта JavaScript нецелесообразно. Вы можете обойтись новой функцией «импорт» в браузере, но что, если вам нужно, чтобы ваш проект запускался в старом браузере, таком как Internet Explorer? «импорт» просто не будет работать, и в лучшем случае загрузка отдельных файлов для большого проекта может быстро привести к зависанию браузера.

Здесь на помощь приходит Webpack. Webpack позволяет вам писать интерфейсный JavaScript/TypeScript так же, как в Node, и объединять все в один пакет. Webpack делает разработку Node и браузера настолько похожей, что новички склонны путать эти две среды.

Большинство людей, использующих Webpack, даже не подозревают об этом, потому что многие интерфейсные фреймворки, такие как React и Angular, используют их прозрачно. Инструменты командной строки, используемые с этими фреймворками (такие как create-react-app и AngularCLI), управляют настройкой и выполнением Webpack, так что вы почти не знаете, что он есть. Однако важно знать о наличии Webpack, потому что это один из ключевых инструментов, который делает возможной современную разработку на JavaScript/TypeScript. В частности, возможность писать интерфейсный код, как вы это делаете для Node, не требуя от браузера загрузки тысяч библиотечных файлов, от которых зависят ваши проекты.

Вывод

Надеюсь, это помогло вам понять некоторые компоненты, используемые в современной разработке JavaScript/TypeScript. Во второй части мы будем работать над созданием реализации сервера и базы данных простого приложения чата. В части 3 будет обсуждаться интерфейс этого приложения.

Первоначально опубликовано на https://www.intertech.com 22 сентября 2020 г.