JavaScript — это огромная экосистема с библиотеками, фреймворками, механизмами шаблонов и менеджерами пакетов, предоставляющая решения для всевозможных проблем, с которыми сталкиваются разработчики. Хотя для опытного разработчика наличие различных вариантов — это здорово, новичку, только что вышедшему на сцену, это может быть сложно.
В этой статье я попытаюсь составить глоссарий терминов, наиболее часто используемых в отрасли. Я надеюсь, что это облегчит «введение» новичкам, начинающим работать с JavaScript и вообще с вебом.
Ванильный JS
Vanilla JS относится к простому JavaScript, в котором вы не используете никаких дополнительных библиотек или фреймворков, кроме встроенных методов и инструментов, предоставляемых вашей средой разработки, такой как браузер.
Большинство новичков бомбардируются множеством фреймворков, когда они впервые начинают свое обучение, и иногда чувствуют себя обязанными использовать хотя бы одну из этих библиотек. Обязанности возрастают, когда вы работаете джуниором в компании, которая сильно зависит от определенного фреймворка.
Я думаю, за исключением некоторых особых случаев, когда вам было поручено создать компоненты более высокого уровня с использованием определенной среды, будет справедливо сказать, что лучше всего при изучении любого языка начинать с основ и сначала понимать основы. Может показаться заманчивым начать сразу, но изучение основных аспектов языка очень поможет вам в долгосрочной перспективе, особенно когда речь идет об устранении ошибок и понимании концепций оптимизации.
JS-фреймворки/библиотеки
Короче говоря, это широкий спектр инструментов, которые помогут вам сэкономить время. Они, конечно, отличаются тем, как и где они это делают, но в целом можно сказать, что все они созданы, чтобы помочь разработчикам хотя бы в одной из этих областей:
- Предоставляйте абстракции сложному коду. Как правило, они предлагают более структурированную систему, построенную поверх существующего кода JS.
- Соберите коллекцию часто используемых служебных функций в одной библиотеке.
- Обеспечить ярлыки, вводя более простые и / или более простые способы выполнения определенных задач.
- Решить проблемы совместимости
- Увеличьте скорость процессов кодирования и отгрузки
- Помогите разработчикам больше сосредоточиться на качестве своего кода
- Расширение сотрудничества между разработчиками
По мере продвижения по пути изучения JavaScript вы, несомненно, будете использовать многие из этих вспомогательных инструментов. Вы можете получить определенный кайф от написания всего с нуля или создания собственных повторно используемых библиотек, но для разработчика становится все более важным знать и использовать правильный инструмент для решения правильной проблемы, когда у вас мало времени.
Аякс
Хорошо, если вы только начинаете, вы, вероятно, много об этом не услышите, но в свое время Ajax был большим событием. Ajax — это название, данное группе технологий, позволяющих создавать асинхронные запросы к серверу.
В качестве простого примера подумайте о веб-форме. Без Ajax каждый раз, когда пользователь заполняет форму и нажимает кнопку отправки, веб-страница будет обновляться, чтобы показать результат отправки формы, независимо от того, было ли оно успешным или нет. Однако с помощью Ajax вы можете просто скрыть форму и показать результат, не покидая активной веб-страницы.
Теперь концепция Ajax в значительной степени встроена в библиотеки и процессы веб-разработки, так что вам как разработчику даже не нужно много думать об этом.
jQuery
jQuery — широко популярная библиотека JS (хотя, вероятно, уже не так популярна, как раньше), которая предоставляет ярлыки для часто используемых операций JS. Другими словами, это помогает разработчикам использовать стандартизированный синтаксис, не слишком беспокоясь о проблемах совместимости. Чтобы обрисовать пару, это особенно упростило манипулирование DOM и оборачивало запросы Ajax в более простой синтаксис функций.
Было время, когда компании специально искали опыт работы с jQuery при приеме на работу. Однако теперь это сильно изменилось из-за увеличения количества альтернатив и улучшений совместимости браузеров.
ES5/ES6
Согласно Википедии, ECMAScript (ES) — это стандарт JavaScript, предназначенный для обеспечения взаимодействия веб-страниц в разных веб-браузерах. Проще говоря, он определяет свойства Vanilla JS, о которых мы говорили ранее. Эти стандарты постоянно разрабатываются и обновляются с каждым изданием. Однако разработчики сред JS (конечно, в основном веб-браузеров) должны решить, какие из этих новых функций они будут поддерживать. В настоящее время выпуски ES5 и ES6 широко поддерживаются, но вы можете проверить, что происходит помимо этих здесь.
Полифиллы
Как вы уже знаете, не все браузеры поддерживают одинаковый набор функций JavaScript. Таким образом, полифилл — это часть кода, используемая для того, чтобы ваш код JavaScript работал одинаково в разных средах. Обычно это происходит двумя способами. Он либо предоставляет современные функции в старых браузерах, либо решает проблемы, когда браузеры реализуют одни и те же функции по-разному.
Компиляторы/транспиляторы
Чаще всего это Babel, компиляторы или транспилеры JS используются для преобразования кода JS в функционально эквивалентную версию, совместимую с определенной версией ES. Например, если ваш JS-код использует функции, появившиеся в ES6, но вы хотите, чтобы он работал в браузерах, поддерживающих только функции ES5, вы можете использовать транспилятор.
Бандлеры
С годами разработка JS усложнялась с добавлением новых библиотек, модульных систем, фреймворков, сред выполнения и т. д. Поэтому по таким причинам, как оптимизация, стандартизация, совместимость, нам теперь нужны сборщики, такие как Webpack, Rollup, Parcel. » и многое другое для управления нашей кодовой базой. Большинство из этих сборщиков становятся важной частью процессов сборки, позволяя выполнять различные задачи (оптимизация ресурсов, разделение кода, совместимость с браузерами, генерация модулей, документация, отложенная загрузка и т. д.) с помощью плагинов или встроенных функций.
Можно так много узнать о сборщиках и о том, что они могут делать, но это, вероятно, выходит за рамки этой статьи. Не волнуйтесь, даже если вы не очень их понимаете сейчас, они обязательно найдут вас, когда вы начнете работать в команде.
движок JavaScript
Я хотел бы кратко упомянуть основные концепции, которые позволяют работать JavaScript как языку. Неудивительно, что должен быть интерпретатор, который понимает и выполняет код JavaScript. Эти интерпретаторы обычно встречаются в веб-браузерах, движки JavaScript, включая V8 в Chrome, SpiderMonkey в Firefox и Chakra в Edge.
Возможно, вы также слышали о среде выполнения JavaScript. Среда выполнения — это хост-среда, в которой размещается механизм JavaScript и предоставляются хост-объекты, доступные JavaScript для манипулирования. В случае веб-приложений, в то время как веб-браузеры являются хостами, которые предоставляют HTML-документы для изменения, веб-серверы (например, Node.js) — это хосты, которые предоставляют ресурсы, такие как файловая система, для использования JavaScript.
В начале можно знать о движках и времени выполнения только по определению. По мере того, как вы будете больше узнавать о JavaScript и практиковаться на примерах из реальной жизни, эти концепции будут более прочно укореняться в вашей карте ума.
Использование вне браузера
Как вы видели выше, хотя JavaScript в основном известен как язык сценариев для улучшения веб-сайтов в среде веб-браузера, он работает в любой среде, в которой размещен движок JS. Например, Node.js — это популярное веб-серверное приложение, использующее JS, а Electron, React Native и Cordova — это лишь некоторые из сред приложений, которые позволяют разрабатывать JS для мобильных устройств и настольных компьютеров. А совсем недавно мы начали видеть, как JS работает во встроенных системах и устройствах IoT.
Сообщество JavaScript огромно, и этот масштаб приводит к его появлению в нетрадиционных областях. Можно сказать, что это прекрасное время для изучения JavaScript, так как он не показывает никаких признаков того, что он никуда не денется, и, наоборот, он растет с каждым днем.
Я знаю, что для новичка в JavaScript это очень много, и, конечно же, есть гораздо более подробные ресурсы. Надеюсь, эта небольшая статья поможет некоторым из вас, новичков, разобраться в основных понятиях и терминах. Спасибо за прочтение, и если вы хотите продолжить обсуждение, вы можете связаться со мной здесь.