Слайд 1ФГБОУ ВО «Пермский национальный
исследовательский государственный университет»
Физический факультет
Кафедра компьютерных систем
и телекоммуникаций
Классы и наследование, транспиляция в Babel и TypeScript.
Работу выполнила
студентка 2 курса
Направление «Радиофизика»
Профиль магистратуры «Информационные процессы и системы»
Дегтянникова Дарья Александровна
Пермь, 2019
Слайд 2Почему JavaScript?
большое комьюнити;
мало аналогов;
много примеров и уже
готовых решений;
быстрый темп роста популярности вэба;
низкий порог вхождения(справится
даже не специалист);
много библиотек;
нет нужды в компиляторе(для старта достаточно блокнота и браузера).
Слайд 3https://insights.stackoverflow.com/survey/2016
Слайд 4Понятие транспиляции
Транспиляция - процесс преобразования кода, написанного с помощью следующих
версий языка или на диалектах JavaScript в некий стандартный вариант,
понимаемый всеми браузерами.
Транспиляция - компиляция из одного языка в другой язык с таким же набором абстракций, либо в другую версию того же языка.
ECMAScript — это встраиваемый расширяемый не имеющий средств ввода-вывода язык программирования, используемый в качестве основы для построения других скриптовых языков
Зачем:
Использование ECMAScript6(ES6)
Желание писать для вэба не на JS
Слайд 5Babel(6to5)
Запуск кода на платформе, не поддерживающей новый синтаксис, приведет к
синтаксической ошибке. Закономерным решением этой проблемы стало появление Babel —
программы, которая берет указанный код и возвращает тот же код, но транслированный в старую версию JS.
Состоит из двух частей:
1. Транспайлер, который переписывает код.
2. Полифилл, который добавляет методы.
«Полифилл» (англ. polyfill) – это библиотека, которая добавляет в старые браузеры поддержку возможностей, которые в современных браузерах являются встроенными. Работает она через модификацию стандартных объектов и их прототипов.
Слайд 6Прототипы объектов
В JavaScript не используется традиционная система наследования, основанная на
классах. Для решения схожих задач используются прототипы.
Каждый объект связан с ещё
одним объектом — со своим прототипом. Когда вы пытаетесь обратиться к свойству или методу объекта, поиск того, что вам нужно, сначала выполняется в самом объекте. Если поиск не увенчался успехом, он продолжается в прототипе объекта.
Слайд 7Babel(6to5)
Принцип действия:
Загрузка JS на новом стандарте или на старом
стандарте со странными спецификациями;
Вызов транспилятора (передача параметров);
Получение JS
другого стандарта(чаще ES5).
Слайд 8Лексический анализ
На шаге лексического анализа происходит разбор текста на
логические сущности – токены:
числа;
строк;
идентификаторы;
строки и т.д.
Слайд 9Синтаксический анализ
На шаге синтаксического анализа происходит создание абстрактного синтаксического дерева(AST)
из потока токенов.
https://astexplorer.net/
Слайд 12Трансформация
Преобразование одного синтаксического дерева в другое
Слайд 13Генерация
Перевод готовой AST обратно в текст
Слайд 14TypeScript
TypeScript — язык программирования, позиционируемый как средство разработки веб-приложений, расширяющее возможности JavaScript.
TypeScript отличается от
JavaScript:
возможностью явного статического назначения типов;
поддержкой использования полноценных классов (как в традиционных
объектно-ориентированных языках);
поддержкой подключения модулей.
TypeScript это расширение языка ECMAScript 5.
Слайд 15TypeScript
TypeScript предлагает новый синтаксис для написания JS-приложений. Он использует аннотации
типов, чтобы избавиться от некоторых проблем с типизацией в JavaScript.
TypeScript
ES5
Слайд 16Почему это не понадобится в ближайшее время?
Слайд 17Почему это не понадобится в ближайшее время?
Поддержка классов появилась в
браузере Chrome в 2014 году. Это позволяет браузеру работать с
объявлениями классов без применения транспиляции или каких-либо вспомогательных библиотек.
На самом деле, поддержка этих механизмов браузерами — не более чем «синтаксический сахар». Эти конструкции преобразуются в те же базовые структуры, которые уже поддерживаются языком. В результате, даже если пользоваться новым синтаксисом, на более низком уровне всё будет выглядеть как создание конструкторов и манипуляции с прототипами объектов.
Слайд 18Почему это не понадобится в ближайшее время?
https://kangax.github.io/compat-table/es6/