Путешествие Javascript-самурая S01 E02 [Совместимость, транспиляторы, полифиллы]

Эта статья изначально была размещена в моем блоге

В предыдущем эпизоде ​​мы говорили о взаимосвязи между Javascript и Java, взаимосвязи между ECMAScript и Javascript, средах Javascript и их API, а также о том, чем они отличаются от основного языка Javascript. Мы завершили этот эпизод парадигмами программирования, используемыми в Javascript. Он отличный, поверьте мне 🤞🏽. Загляните здесь 😉

Двигаемся 🚀

В этой статье мы поговорим о совместимости языка Javascript с браузерами. Наши основные моменты

  • Что такое совместимость и типы, такие как прямая и обратная совместимость
  • К какой категории совместимости относится Javascript
  • Инструменты, используемые для решения проблем совместимости между Javascript и средой браузера.

Что такое совместимость

Согласно TechTarget, совместимость — это способность двух систем работать вместе без каких-либо изменений для этого. В нашем случае задействованы две системы: браузер и код Javascript, который мы пишем.

Прямая совместимость против обратной совместимости

Если мы описываем Javascript как совместимый вперед язык, это означает, что при появлении нового дополнения к спецификации языка Javascript и включении нового синтаксиса в наш код Javascript он должен без проблем работать в старом браузере. . Проще говоря, старые браузеры должны понимать новый синтаксис Javascript. например, синтаксис async-await должен работать в старых браузерах. С другой стороны, если мы описываем язык Javascript как обратно совместимый язык, то старый синтаксис Javascript всегда будет работать в новых браузерах. То есть, если сегодня будет выпущена новая версия chrome или firefox, синтаксис из старой спецификации Javascript, такой как ключевое слово var, должен по-прежнему работать в новом браузере.

К какой категории совместимости относится Javascript

Я думал, что Javascript совместим как с прямой, так и с обратной совместимостью, но это не так. Javascript обратно совместим (старый синтаксис ВСЕГДА работает в новых браузерах). Если сегодня в язык будет добавлена ​​новая функция, и мы включим ее в нашу кодовую базу, старый браузер выдаст ошибку, потому что еще не поддерживает эту функцию. Не крутой Javascript!!

Как программист, пишущий код Javascript, мы всегда хотим использовать новые блестящие функции языка, потому что в большинстве случаев они всегда короче и чище. Мы также не хотим, чтобы пользователи загружали последнюю версию Chrome или Firefox, чтобы наше приложение работало для них должным образом. Как мы можем гарантировать, что сможем использовать новый, более чистый синтаксис, не сталкиваясь с проблемами совместимости, когда пользователь со старым браузером пытается использовать приложение?

Транспиляторы спешат на помощь

Решением для нового и несовместимого синтаксиса является транспиляция. Транспилятор — это просто транслятор исходного кода. В нашем случае новый синтаксис переносится в старый синтаксис, чтобы старые браузеры понимали этот синтаксис. Самый распространенный транспилятор — Babel.

На изображении выше синтаксис слева использует ключевое слово const ES2015 для объявления переменной. Babel транспилирует код в старое ключевое слово var, как показано справа. Старая версия — это то, что мы загружаем на сервер, чтобы все браузеры (старые и новые) использовали наше приложение без проблем с совместимостью.

Иногда проблема не в Javascript

Иногда проблема может быть не в синтаксисе Javascript, среда Javascript может не поддерживать определенный API. Я описал разницу между синтаксисом Javascript и API окружения Javascript здесь. Мы можем столкнуться с проблемой, когда функциональность браузера доступна в Firefox, но не в Internet Explorer, тогда мы используем shim/polyfill, чтобы имитировать эту функцию, чтобы у нас было что-то, к чему можно вернуться для неподдерживающих браузеров.

Пример

При выполнении манипуляций с DOM с помощью ChildNode.replaceWith() это обычный синтаксис ниже.

Однако для выполнения того же действия в Safari или Internet Explorer 10+ и выше требуется полифилл и вот что мы должны сделать

Это обертка

Как всегда, спасибо, что зашли так далеко. Я ценю это. Основные моменты, которые мне нужно, чтобы вы вынесли из этой статьи:

  • Совместимость — это способность двух систем работать вместе без каких-либо изменений для этого.
  • Javascript обратно совместим, а не вперед, т. е. старый синтаксис всегда будет работать в новых браузерах.
  • Мы можем создать иллюзию прямой совместимости в Javascript (новый синтаксис, работающий в старых браузерах), используя транспилятор, такой как Babel.
  • Когда проблема связана с API среды Javascript, а не с языком, мы используем полифилл вместо транспилера.
  • Хорошее понимание разницы между основным синтаксисом Javascript и API-интерфейсом среды Javascript, как описано здесь, поможет вам понять, что вам нужно — полифилл или транспайлер.

Пожалуйста, свяжитесь со мной в LinkedIn или Twitter для вопросов, комментариев и отзывов. Я хотел бы услышать и узнать от вас тоже.

Продолжайте учиться 💪🏿.