Разработка на 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 итераторы, Асинхронные импорты модулей!!! Мужик, куда не плюнь есть слово асинхронность! А воркеры? Что ты нам тут навыдумывал? Быдло кодер, хть-фу!"

продолжение следует...