Классы и наследование, транспиляция в Babel и TypeScript

Содержание

Слайд 2

Почему JavaScript?

большое комьюнити;
мало аналогов;
много примеров и уже готовых решений;

Почему JavaScript? большое комьюнити; мало аналогов; много примеров и уже готовых решений;

быстрый темп роста популярности вэба;
низкий порог вхождения(справится даже не специалист);
много библиотек;
нет нужды в компиляторе(для старта достаточно блокнота и браузера).

Слайд 3

https://insights.stackoverflow.com/survey/2016

https://insights.stackoverflow.com/survey/2016

Слайд 4

Понятие транспиляции

Транспиляция - процесс преобразования кода, написанного с помощью следующих версий языка

Понятие транспиляции Транспиляция - процесс преобразования кода, написанного с помощью следующих версий
или на диалектах JavaScript в некий стандартный вариант, понимаемый всеми браузерами.
Транспиляция - компиляция из одного языка в другой язык с таким же набором абстракций, либо в другую версию того же языка.
ECMAScript — это встраиваемый расширяемый не имеющий средств ввода-вывода язык программирования, используемый в качестве основы для построения других скриптовых языков
Зачем:
Использование ECMAScript6(ES6)
Желание писать для вэба не на JS

Слайд 5

Babel(6to5)

Запуск кода на платформе, не поддерживающей новый синтаксис, приведет к синтаксической ошибке.

Babel(6to5) Запуск кода на платформе, не поддерживающей новый синтаксис, приведет к синтаксической
Закономерным решением этой проблемы стало появление Babel — программы, которая берет указанный код и возвращает тот же код, но транслированный в старую версию JS.
Состоит из двух частей:
1. Транспайлер, который переписывает код.
2. Полифилл, который добавляет методы.
«Полифилл» (англ. polyfill) – это библиотека, которая добавляет в старые браузеры поддержку возможностей, которые в современных браузерах являются встроенными. Работает она через модификацию стандартных объектов и их прототипов. 

Слайд 6

Прототипы объектов

В JavaScript не используется традиционная система наследования, основанная на классах. Для

Прототипы объектов В JavaScript не используется традиционная система наследования, основанная на классах.
решения схожих задач используются прототипы.
Каждый объект связан с ещё одним объектом — со своим прототипом. Когда вы пытаетесь обратиться к свойству или методу объекта, поиск того, что вам нужно, сначала выполняется в самом объекте. Если поиск не увенчался успехом, он продолжается в прототипе объекта.

Слайд 7

Babel(6to5)

Принцип действия:
Загрузка JS на новом стандарте или на старом стандарте со

Babel(6to5) Принцип действия: Загрузка JS на новом стандарте или на старом стандарте
странными спецификациями;
Вызов транспилятора (передача параметров);
Получение JS другого стандарта(чаще ES5).

Слайд 8

Лексический анализ

На шаге лексического анализа происходит разбор текста на логические сущности

Лексический анализ На шаге лексического анализа происходит разбор текста на логические сущности
– токены:
числа;
строк;
идентификаторы;
строки и т.д.

Слайд 9

Синтаксический анализ

На шаге синтаксического анализа происходит создание абстрактного синтаксического дерева(AST) из потока

Синтаксический анализ На шаге синтаксического анализа происходит создание абстрактного синтаксического дерева(AST) из потока токенов. https://astexplorer.net/
токенов.

https://astexplorer.net/

Слайд 10

Синтаксический анализ

Синтаксический анализ

Слайд 11

Синтаксический анализ

Синтаксический анализ

Слайд 12

Трансформация

Преобразование одного синтаксического дерева в другое

Трансформация Преобразование одного синтаксического дерева в другое

Слайд 13

Генерация

Перевод готовой AST обратно в текст

Генерация Перевод готовой AST обратно в текст

Слайд 14

TypeScript

TypeScript — язык программирования, позиционируемый как средство разработки веб-приложений, расширяющее возможности JavaScript.
TypeScript отличается от JavaScript:
возможностью явного статического назначения

TypeScript TypeScript — язык программирования, позиционируемый как средство разработки веб-приложений, расширяющее возможности
типов;
поддержкой использования полноценных классов (как в традиционных объектно-ориентированных языках);
поддержкой подключения модулей.
TypeScript это расширение языка ECMAScript 5.

Слайд 15

TypeScript

TypeScript предлагает новый синтаксис для написания JS-приложений. Он использует аннотации типов, чтобы

TypeScript TypeScript предлагает новый синтаксис для написания JS-приложений. Он использует аннотации типов,
избавиться от некоторых проблем с типизацией в JavaScript.

TypeScript

ES5

Слайд 16

Почему это не понадобится в ближайшее время?

Почему это не понадобится в ближайшее время?

Слайд 17

Почему это не понадобится в ближайшее время?

Поддержка классов появилась в браузере Chrome

Почему это не понадобится в ближайшее время? Поддержка классов появилась в браузере
в 2014 году. Это позволяет браузеру работать с объявлениями классов без применения транспиляции или каких-либо вспомогательных библиотек.
На самом деле, поддержка этих механизмов браузерами — не более чем «синтаксический сахар». Эти конструкции преобразуются в те же базовые структуры, которые уже поддерживаются языком. В результате, даже если пользоваться новым синтаксисом, на более низком уровне всё будет выглядеть как создание конструкторов и манипуляции с прототипами объектов.
Имя файла: Классы-и-наследование,-транспиляция-в-Babel-и-TypeScript.pptx
Количество просмотров: 28
Количество скачиваний: 0