Разработка на JavaScript в 2018 для начинающих - часть 1.
Введение
На дворе 2018 год. Казалось бы все что связано с программированием досконально разобрано и разложено по полочкам в виде парадигм и патернов, "лучших практик" и "соглашений", готовых реализаций и методологий. По логике - все просто: если Вы знаете основы программирования и уже писали "десктопные" приложения на C++, Java, C#, то вы легко сможете навоять веб-приложение, которое будет работать "как часы" на JS... Как бы не так.
Все что вы знали о ООП (полиморфности), Процедурах и функциональщине в нашем "любимом" JS извращено в максимально-негативном смысле этого слова. И именно по-этому, если вы решили посветить свое время карьере программиста на JavaScript, вы должны осознать, что многое в JavaScript работает не так, как называется (например - "Асинхронность", очередь) и Вам стоит разобраться в этом - чем раньше, тем лучше! И так, приступим!
JavaScript и EcmaScript
Нельзя разделить эти два языка программирования для web. Да-да, EcmaScript(ES) - это язык программирование, который не имеет своего input и output для взаимодействия со средой разработки (Как тебе такое, Илон макс Алан Кей?). Но тогда для чего он нужен? А именно ES определяет стандарт построения кода нашего любимого JavaScript(JS) и является конном этого скриптового языка.
Стандартов для JS в виде ES было очень много, но не будем углубляться в его историю становления от вредоносного-заблокированного в популярный незаменимый(ну почти).
Начнем сразу c актуальных его реализаций, которые применимы на текущий момент.
с ES6 по ES9 - Именно эти стандарты активно применяются в современных веб приложениях. Используют все его возможности на полную катушку... c маленьким отступлением... С преобразованием всего написанного кода в ES5 (если точнее 5.1) c помощью транспиляции\интерпритации (пожалуй оба этих термина будут применимы с маленькими оговорками).
Вы спросите - "Для чего более позднюю, принятую и утвержденную стандартизацию специально преобразовывать в более раннюю, ты где учился парень? Как ты будешь использовать новые методы этого языка, если их в более ранней версии, попросту нет? "
А ответ гораздо интереснее, чем вы рассчитываете!
Многие старые браузеры, которые все еще живут по каким-то причинам (как правило операционные системы) могут интерпритировать только es5. По-тому, и приходится для некоторых проектов учитывать этот момент.
А как же новые возможности стандарта ES?
И тут все просто - есть такие полезные наборы методов, называемые полифилы, которые и реализуют в старом стандарте возможности нового!
И тут возникает вопрос - А в чем тогда весь смысл новых стандартов, если они могут быть описаны в старом стандарте?
Ответ банален, но не исчерпывающий - В скорости выполнения кода и отзывчивости приложения, ну и самом собой сокращение, количества написанного кода.
И тут тоже возникает вопрос - Скорости выполнения? Ты, мужик загнался!
На что ответ будет очень невнятный (по началу) но, cука, очень загадочный! И этот ответ - Event Loop.
Цикл событий в JavaScript, он же Event loop
Да именно цикл и процесс выполнения этого цикла зависит от вашего кода и порядок его исполнения основан на Основном потоке, задачах выполнения в очереди (Таски или как их называют - Макро-таски) и подзадачах (Микро-таски) в этом потоке.
Все в этой цепочке исполнения начинается с основного потока в котором нет асинхронного выполнения задач, т.е одновременно в javscript может выполнятся лишь одна процедура и как только она будет исполнена, будет исполняться следующая и так далее - в порядке очереди.
И именно из-за неправильного описания исполнения кода в потоке и приводит к лагам, тормозам, глюкам, при отображении результата вашего кода в браузере.
и тут снова каверзный вопрос - "Но все мы знаем асинхронные XMLHTTRequest, Promise, Asycn Await, Асинхронныt итераторы, Асинхронные импорты модулей!!! Мужик, куда не плюнь есть слово асинхронность! А воркеры? Что ты нам тут навыдумывал? Быдло кодер, хть-фу!"
продолжение следует...