Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 Это перевод статьи Питера<a>Янга Modern JavaScript Explained For Dinosaurs</a>. Она познакомит вас с инфраструктурой современной фронтэнд-разработки.

2 Наш курс<a>JS: Настройка окружения</a>выполняет схожую задачу, но чуть глубже, последовательно и без привязки только к фронтэнду. Этим темам также посвящена значительная часть<a>первого проекта в JS Backend и JS Frontend</a>. Там мы на деле устанавливаем и настраиваем среду для разработки, проверки, публикации, сборки и запуска своих приложений.

3 Изучать современный JavaScript - болезненно, если вы не знакомы с ним с самого его рождения. Экосистема разрастается и меняется с такой скоростью, что сложно разобраться с тем, какие проблемы пытаются решить разные инструменты. Я начал программировать в 1998 году, но к серьёзному изучению JavaScript приступил только в 2014. В то время я помню как анализировал<a>Browserify</a>и изумлённо смотрел на его слоган:

4 <blockquote>Browserify позволяет запрашивать (require) модули в браузере, объединяя все зависимости.

5 </blockquote>Можно сказать, я не понимал ни слова в этом предложении, и с трудом осознавал, насколько это может быть полезно мне, как разработчику.

6 Цель этой статьи - показать исторический контекст развития инструментов JavaScript до их уровня в 2017. Начнём с самых первых моментов и построим шаблон веб-сайта, как бы это сделали динозавры - без инструментов, чистый HTML и JavaScript. Затем мы будем пошагово вводить различные инструменты, чтобы на практике видеть, какие задачи они решают - поочерёдно. Благодаря историческому контексту у вас будет больше возможностей изучить и лучше адаптироваться к бесконечно меняющемуся JavaScript. Давайте начнём!

7 <h3>Использование JavaScript старомодным способом</h3>

8 Давайте начнём со старомодного веб-сайта, написанного на HTML и JavaScript, что включает загрузку и помещение ссылок на файлы вручную. Вот простой index.html файл, который ссылается на JavaScript файл:

9 Строчка <script src="index.js"></script> ссылается на отдельный JavaScript-файл с названием index.js в той же директории:

10 Это всё, что вам нужно, чтобы сделать веб-сайт!

11 <blockquote><h3>Продолжайте углублять свои знания</h3>

12 На Хекслете есть<a>блок "Треки"</a>, где собраны курсы для опытных разработчиков, которые хотят новых знаний про разработку.

13 </blockquote>Теперь давайте предположим, что вы хотите добавить библиотеку, которую написал кто-то другой, вроде<a>moment.js</a>(библиотеку, которая помогает превращать даты в понятные для чтения человеком). Например, вы можете использовать функцию moment в JavaScript вот так:

14 Но только при условии, что вы включите moment.js в код своего веб-сайта! На<a>домашней странице moment.js</a>вы найдёте такие инструкции:

15 Хмм, как много всего происходит в секцииInstallсправа. Но давайте пока проигнорируем это - мы можем добавить moment.js на веб-сайт, загрузив файл moment.min.js в ту же директорию и включив его в файл index.html.

16 Заметьте, что moment.min.js загружается перед index.js, а это значит вы можете использовать функцию moment в index.js таким способом:

17 И вот таким образом мы раньше делали веб-сайты с JavaScript-библиотеками! Положительный момент в том, что всё было достаточно легко понимать. Отрицательный - было муторно искать и загружать новые версии библиотек каждый раз, когда они обновлялись.

18 <h3>Использование пакетного менеджера JavaScript (npm)</h3>

19 Начиная примерно с 2010 появилось несколько конкурирующих пакетных менеджеров JavaScript для автоматизации процесса загрузки и обновления библиотек из центрального репозитория.<a>Bower</a>был, возможно, самым популярным в 2013, но в итоге, примерно в 2015 его настиг<a>npm</a>. (Стоит отметить, что с конца 2016<a>yarn</a>привлёк много внимания, как альтернатива интерфейсу npm, но он всё ещё использует npm пакеты).

20 Заметьте, что npm был изначально пакетным менеджером, созданным специально для<a>node.js</a>- среды исполнения JavaScript, предназначенной для запуска на сервере, а не во фронтенде. Что делает его очень странным выбором для фронтенд-пакетного менеджера JavaScript библиотек, предназначенных запускаться в браузере.

21 Заметьте: Использование пакетного менеджера обычно требует работы с командной строкой, что в прошлом никогда не требовалось от фронтенд-разработки. Если вы никогда ей не пользовались, можете прочитать<a>этот туториал</a>, чтобы составить представление о том, как начать. Так или иначе, умение пользоваться командной строкой - важная часть современного JavaScript (и ещё она открывает двери в другие области разработки).

22 На Хекслете как раз есть бесплатный курс<a>Bash: Основы командной строки</a>, - прим. ред.

23 Давайте взглянем как использовать npm, чтобы установить пакет moment.js автоматически, вместо того, чтобы загружать его вручную. Если у вас установлен node.js, у вас уже есть и npm, а это значит, что вы можете через командную строку перейти к папке, в которой находится файл index.html и ввести:

24 $ npm init

25 Будет выведено несколько вопросов (можно оставить умолчания: нажимать "Enter" после каждого вопроса) и сгенерируется новый файл с именем package.json. Это конфигурационный файл, который npm использует, чтобы хранить всю информацию о проекте. С настройками по умолчанию содержимое package.json должно выглядеть подобно этому:

26 { "name": "your-project-name", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }

27 Чтобы установить JavaScript-пакет moment.js, мы теперь можем следовать инструкциям npm на их домашней странице, введя в командную строку:

28 $ npm install moment --save

29 Эта команда выполняет две задачи: в начале она загружает весь код из<a>пакета moment.js</a>в папку, называемую node_modules. Потом автоматически модифицирует файл package.json, чтобы мониторить moment.js как зависимость (зависимости - это пакеты и библиотеки, от которых зависит наше приложение).

30 { "name": "modern-javascript-example", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "moment": "^2.19.1" } }

31 Это будет полезно в будущем, когда вместо расшаривания проекта с остальными - а именно папки node_modules (которая может сильно разрастись) - вам понадобится расшарить только файл package.json, и другие разработчики смогут установить необходимые пакеты автоматически с помощью команды npm install.

32 <blockquote><h3>Читайте также</h3>

33 Как устроен функциональный диалект Лиспа Clojure и почему использующие его программисты<a>восхищаются им</a>

34 </blockquote>Теперь мы больше не должны загружать moment.js вручную с веб-сайта, потому что можем сделать это автоматически и обновить, используя npm. Заглянув внутрь папки node_modules можно увидеть файл moment.min.js в директории node_modules/moment/min. Это значит, мы можем сослаться на npm загружаемую версию moment.min.js в файле index.html, как видно ниже:

35  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript Example</title> <script src="node_modules/moment/min/moment.min.js"></script> <script src="index.js"></script> </head> <body> <h1>Hello from HTML!</h1> </body> </html>

36 Хорошие новости в том, что теперь мы можем использовать npm, чтобы загружать и обновлять пакеты с помощью командной строки. Плохие в том, что прямо сейчас мы обшариваем папку node_modules в поисках местоположения каждого пакета и вручную включаем их в HTML. Это достаточно неудобно, и следующее, что мы сделаем, это посмотрим как автоматизировать и этот процесс.

37 <h3>Использование модульного упаковщика JavaScript (webpack)</h3>

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

39 Это именно то, что мы делаем в приведенном выше примере с moment.js - весь moment.min.js файл загружается в HTML, что определяет глобальную переменную moment, которая становится доступна любому файлу, загруженному после moment (независимо от того, нужен ли к нему доступ).

40 В 2009 году был запущен проект CommonJS, определяющий экосистему для JavaScript за пределами браузера. Большая часть CommonJS была спецификацией для модулей и она, наконец, позволила JavaScript делать импорт и экспорт между файлами, как в большинстве языков программирования, без использования глобальных переменных. Самая известная реализация модулей CommonJS - это node.js.

41 Как говорилось ранее, node.js - это среда выполнения JavaScript, предназначенная для запуска на сервере. Вот как выглядел более ранний пример с использованием модулей node.js. Вместо того, чтобы загружать все moment.min.js с помощью HTML script тега, вы можете загрузить его напрямую в файле JavaScript вот так:

42 // index.js var moment = require('moment'); console.log("Hello from JavaScript!"); console.log(moment().startOf('day').fromNow());

43 Опять же, так работает загрузка модуля в node.js, и это здорово, поскольку node.js - это серверный язык с доступом к файловой системе компьютера. Node.js также знает расположение каждого пути модуля npm, поэтому вместо необходимости писать require('./node_modules/moment/min/moment.min.js), можно использовать require('moment') - чудно.

44 Всё это подходит для node.js, но если вы попытаетесь использовать написанный выше код в браузере, вы получите сообщение об ошибке, в котором будет указано require not defined (не определено). Браузер не имеет доступа к файловой системе, это значит, что загрузка модулей таким способом очень проблематична - загрузка файлов должна выполняться динамически, синхронно (что замедляет исполнение), или асинхронно (что может вызвать проблемы с синхронизацией).

45 Тут вступает в действие упаковщик модулей. Упаковщик модулей JavaScript - это инструмент, который решает задачу с помощью этапа сборки (он имеет доступ к файловой системе) для создания конечно результата, совместимого с браузером (уже не нужен доступ к файловой системе). В этом случае нам нужен упаковщик модулей для поиска всех утверждений require (а это недопустимый синтаксис JavaScript для браузера) и замены их актуальным содержимым каждого требуемого файла. Конечный результат - один бандл (упакованный файл) JavaScript (без инструкций require)!

46 Самым популярным упаковщиком модулей был<a>Browserify</a>, он вышел в 2011 году и первым использовал стиль node.js для require во фронтенде (что, по сути, помогло npm стать самым используемым менеджером пакетов для фронтенда). Примерно в 2015 году более популярным стал упаковщик модулей<a>webpack</a>(его подпитывала популярность фронтенд-фреймворка React, который максимально пользовался различными функциями webpack).

47 Давайте посмотрим, как использовать webpack, чтобы заставить показанный выше пример с require('moment') работать в браузере. Сначала нам нужно установить webpack в проект. Сам webpack - это npm-пакет, поэтому мы можем установить его из командной строки:

48 $ npm install webpack --save-dev

49 Обратите внимание на аргумент --save-dev, он сохраняется как development-зависимость. Это означает, что это пакет вам нужен в среде разработки, но не на production-сервере. Это можно наглядно увидеть в файле package.json, который был автоматически обновлен:

50 { "name": "modern-javascript-example", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "moment": "^2.19.1" }, "devDependencies": { "webpack": "^3.7.1" } }

51 Теперь у нас есть webpack, установленный в папку node_modules, как один из пакетов. Вы можете вызывать webpack из командной строки:

52 $ ./node_modules/.bin/webpack index.js bundle.js

53 Эта команда запустит инструмент webpack, который был установлен в папке node_modules, начнет с файла index.js, найдет любые require утверждения и заменит их соответствующим кодом, чтобы создать один выходной файл с именем bundle.js.

54 Это значит, что мы больше не будем использовать index.js в браузере, так как в нем содержатся недопустимые require утверждения. Вместо этого мы будем использовать вывод bundle.js в браузере, что должно будет отразиться в файле index.html:

55  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript Example</title> <script src="bundle.js"></script> </head> <body> <h1>Hello from HTML!</h1> </body> </html>

56 Если вы обновите браузер, увидите, что всё работает, как работало раньше!

57 Обратите внимание, что нам нужно будет запускать команду webpack каждый раз, когда мы будем менять index.js. Это утомительно и станет ещё утомительней, когда мы станем использовать более сложные фичи webpack (например,<a>генерацию source maps</a>, чтобы помочь отлаживать исходный код из преобразованного кода). Webpack может считывать параметры из файла конфигурации в корневом каталоге проекта с именем webpack.config.js, который в нашем случае будет выглядеть так:

58 // webpack.config.js module.exports = { entry: './index.js', output: { filename: 'bundle.js' } };

59 Теперь каждый раз, когда мы меняем index.js, мы можем запускать webpack с помощью команды:

60 $ ./node_modules/.bin/webpack

61 Нам больше не нужно указывать параметры index.js и bundle.js, так как webpack загружает эти параметры из файла webpack.config.js. Уже лучше, но все же утомительно вводить эту команду при каждом изменении кода - позже мы сделаем этот процесс более плавным.

62 В целом, может казаться, что тут нет ничего особенного, но в этой рабочей последовательности есть несколько огромных плюсов. Мы больше не загружаем внешние скрипты через глобальные переменные. Любые новые библиотеки JavaScript будут добавляться через require в JavaScript, в отличие от добавления новых тегов <script> в HTML. Наличие одного бандла часто лучше для производительности. И теперь, когда мы добавили шаг сборки, мы можем добавить несколько мощных фич в процесс разработки!

63 <blockquote><h3>Также полезно:</h3>

64 Стоит ли<a>учить JavaScript</a>перспективы, ситуация на рынке труда, мнения экспертов

65 </blockquote><h3>Transpiling для новых фич языка (babel)</h3>

66 "Transpiling" кода - преобразование исходного кода на одном языке в исходный код на другом схожем языке. Это важный сегмент frontend-разработки: поскольку браузеры медленно добавляют новые фичи, были созданы новые языки с экспериментальными функциями, которые преобразуются (transpile) в совместимый с браузерами код.

67 Для CSS есть<a>Sass</a>,<a>Less</a>и<a>Stylus</a>. Для JavaScript самым популярным транспайлером какое-то время был<a>CoffeeScript</a>(вышел где-то в 2010 году), а в настоящее время большинство людей используют<a>babel</a>или<a>TypeScript</a>. CoffeeScript - это язык, ориентированный на улучшение JavaScript, через значительное его изменение - опциональные круглые скобки, отступы и т. д.

68 Babel - это не новый язык, а транспайлер, который преобразует JavaScript нового поколения с фичами, недоступными всем браузерам (<a>ES2015</a>и выше) в старшую, более совместимую версию JavaScript (ES5). TypeScript - это язык, который практически идентичен JavaScript нового поколения, но в него добавлена опциональная статическая типизация. Многие люди предпочитают использовать babel, потому что он ближе всего к чистому JavaScript.

69 Давайте рассмотрим пример использования babel с нашим существующим этапом сборки webpack. Сначала мы устанавливаем babel (а это npm-пакет) в проект из командной строки:

70 $ npm install babel-core babel-preset-env babel-loader --save-dev

71 Обратите внимание, что мы устанавливаем 3 отдельных пакета как dev зависимости - babel-core - основная часть babel, babel-preset-env - пресет, определяющий, какие новые фичи JavaScript преобразовывать, а babel-loader - это пакет, позволяющий babel работать с webpack. Мы можем настроить webpack для использования babel-loader, отредактировав файл webpack.config.js, как показано ниже:

72 // webpack.config.js module.exports = { entry: './index.js', output: { filename: 'bundle.js' }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['env'] } } } ] } };

73 Этот синтаксис может ломать мозг (к счастью, это не то, что мы будем часто редактировать). Мы просим webpack искать любые .js-файлы (исключая те, что в папке node_modules) и применять преобразование babel с помощью babel-loader через пресет babel-preset-env.<a>Здесь</a>вы можете узнать больше о конфигурационном синтаксисе webpack.

74 У нас есть пример полностью настроенного пакета со всеми описанными штуками -<a>Hexlet Boilerplates: nodejs</a>, - прим. ред.

75 Теперь, когда все настроено, мы можем начать писать фичи ES2015 в JavaScript! Ниже пример<a>ES2015 template string</a>в файле index.js:

76 Мы также можем использовать<a>импорты ES2015</a>вместо require для загрузки модулей. Это то, что вы сегодня увидите во многих базах кода:

77 // index.js import moment from 'moment'; console.log("Hello from JavaScript!"); console.log(moment().startOf('day').fromNow()); var name = "Bob", time = "today"; console.log(`Hello ${name}, how are you ${time}?`);

78 В этом примере синтаксис import не сильно отличается от синтаксиса require, но import имеет дополнительную гибкость для более сложных случаев. Поскольку мы изменили index.js, нам нужно снова запустить webpack в командной строке:

79 $ ./node_modules/.bin/webpack

80 Теперь вы можете обновить index.html в браузере. На момент написания этой статьи большинство современных браузеров поддерживают все фичи ES2015, поэтому иногда трудно определить, выполнил ли свою работу babel. Вы можете протестировать его в браузере более старой версии, вроде IE9, или покопаться в bundle.js и найти строку транспайлированного кода:

81 // bundle.js // ... console.log('Hello ' + name + ', how are you ' + time + '?'); // ...

82 Здесь видно, как babel преобразовал интерполированную строку ES2015 в обычную конкатенацию чтобы сохранить совместимость с браузером. Хотя этот пример не слишком захватывающий, способность преобразовать код - очень мощный инструмент. В JavaScript есть некоторые интересные языковые фичи, вроде<a>async/await</a>, которые вы можете начать использовать прямо сейчас, чтобы писать код лучше. И хотя transpilation иногда выглядит утомительным и болезненным занятием, оно привело к резким улучшениям в языке за последние несколько лет, так как сегодня люди тестируют завтрашние фичи.

83 Мы почти закончили, но в нашем воркфлоу все еще есть неотполированные грани. Если нас беспокоит производительность, мы должны<a>минимизировать</a>бандл-файл, что должно быть уже достаточно лёгкой задачей, поскольку этап сборки уже встроен. Нам также нужно повторно запускать команду webpack каждый раз, когда мы меняем JavaScript. Поэтому следующее, что мы рассмотрим - это несколько удобных инструментов для решения этих проблем.

84 <blockquote><h3>Также полезно:</h3>

85 С чего<a>начать изучение JavaScript</a>и как это делать эффективно

86 </blockquote><h3>Использование task runner (скрипты npm)</h3>

87 Теперь, когда мы вложились в использование этапа сборки для работы с модулями JavaScript, имеет смысл использовать task runner, инструмент, который автоматизирует различные части процесса сборки. Для фронтенд разработки в задачи включена минимизация кода, оптимизация изображений, прогон тестов и т.д.

88 В 2013 году Grunt был самым популярным таск-раннером во фронтенде, чуть позже появился Gulp. Оба полагаются на плагины, которые охватывают другие инструменты командной строки. Сегодня более популярный выбор - использовать возможности скриптов, встроенных в сам менеджер пакетов npm, который не использует плагины, а напрямую работает с другими инструментами командной строки.

89 Давайте напишем несколько npm-скриптов, чтобы упростить использование webpack. Это простое изменение файла package.json как в примере ниже:

90 { "name": "modern-javascript-example", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --progress -p", "watch": "webpack --progress --watch" }, "author": "", "license": "ISC", "dependencies": { "moment": "^2.19.1" }, "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-env": "^1.6.1", "webpack": "^3.7.1" } }

91 Здесь мы добавили два новых скрипта, build и watch. Чтобы запустить скрипт сборки, вы можете ввести в командной строке:

92 $ npm run build

93 Это запустит webpack (используя конфигурацию из webpack.config.js, которую мы сделали ранее) с опцией --progress, чтобы показать прогресс в процентах и опцию -p, чтобы минимизировать код для production. Чтобы запустить сценарий watch:

94 $ npm run watch

95 Используется опция -watch для автоматического перезапуска webpack каждый раз, когда изменяется любой JavaScript-файл, что отлично подходит для разработки.

96 Обратите внимание, что скрипты в package.json могут запускать webpack без указания полного пути ./node_modules/.bin/webpack, так как node.js знает расположение каждого пути модуля npm. Это круто! Мы можем всё сделать ещё круче, установив webpack-dev-server, отдельный инструмент, который предоставляет простой веб-сервер с живой перезагрузкой. Чтобы установить его как зависимость, введите команду:

97 $ npm install webpack-dev-server --save-dev

98 Затем добавьте скрипт npm в package.json:

99 { "name": "modern-javascript-example", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --progress -p", "watch": "webpack --progress --watch", "server": "webpack-dev-server --open" }, "author": "", "license": "ISC", "dependencies": { "moment": "^2.19.1" }, "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-env": "^1.6.1", "webpack": "^3.7.1" } }

100 Теперь вы можете запустить свой dev-сервер выполнив команду:

101 $ npm run server

102 Это автоматически откроет сайт index.html в вашем браузере с адресом localhost: 8080 (по умолчанию). Каждый раз, когда вы будете менять JavaScript в index.js, webpack-dev-server будет перестраивать собственный упакованный JavaScript и автоматически обновлять браузер. Это удивительно полезная экономия времени, поскольку у вас есть возможность сосредоточиться на коде, а не на постоянном переключении контекстов между кодом и браузером, чтобы увидеть изменения.

103 И это только верхушка, есть еще много вариантов с webpack и webpack-dev-server (о которых вы можете прочитать<a>здесь</a>). Конечно, вы можете создавать npm-скрипты для выполнения других задач, таких как преобразование Sass в CSS, сжатие изображений, прогон тестов всего, к чему имеет доступ инструмент командной строки - всё имеет смысл. Также есть несколько отличных расширенных опций и манёвров с самими скриптами npm. Это<a>выступление</a>Кейт Хадсон - отличное начало.

104 <h3>Вывод</h3>

105 Вот, что представляет из себя современный JavaScript в двух словах. Мы перешли с простого HTML и JS кменеджеру пакетов, чтобы автоматически загружать сторонние пакеты,упаковщику модулейдля создания единого скрипт-файла,транспайлерудля использования будущих фич JavaScript итаск раннерудля автоматизации различных частей процесса сборки. Определенно тут много движимых частей, особенно для новичков. Веб-разработка когда-то была отличным стартом для новичков в программировании, именно потому что было легко начать работать; сейчас это довольно сложно, особенно потому, что различные инструменты склонны к быстрым изменениям.

106 Тем не менее, всё не так плохо, как кажется. Всё уравновешивается, особенно после внедрениея экосистемы node, как стабильного способа работы с фронтендом. Довольно приятно использовать npm в качестве менеджера пакетов, require или import для модулей, и npm-скрипты для запуска задач. Это значительно упрощает рабочий процесс по сравнению с тем, что было год или два назад!

107 Дополнительная польза и для начинающих, и для опытных разработчиков в том, что фреймворки сегодня содержат инструменты, которые упрощают процесс и начать теперь намного легче. У Ember есть<a>ember-cli</a>, что очень сильно повлияло на<a>angular-cli</a>от Angular,<a>create-react-app</a>от React,<a>vue-cli</a>от Vue и т. д. Все эти инструменты создают проект с полным набором того, что вам нужно - всё, что вам нужно сделать, это начать писать код. Тем не менее, эти инструменты не волшебные, они просто задают правильную базовую структуру, но вы можете оказаться в ситуации, когда вам потребуется выполнить дополнительную настройку с помощью webpack, babel и т.д. Поэтому очень важно понять, что делает каждый из этих инструментов, что мы и сделали в этой статье.

108 Работа с современным JavaScript - не всегда самая приятная штука, потому что он постоянно меняется и развивается со скоростью звука. Но, хоть иногда некоторые моменты и кажутся изобретением колеса, быстрая эволюция JavaScript продвинула инновации вроде горячей перезагрузки, инструмента статического анализа и отладки в контексте времени. Сегодня быть разработчиком - захватывающе, и я надеюсь, что эта информация может послужить путеводителем, который поможет вам в вашем путешествии!