## Резюме Frontend-разработчика в 2025 году
Слайды доступны по ссылке
frontend.tech-mail.ru

## Развитие web-технологий

## Новые WEB API, на которые стоит
обратить внимание

- Payment Request API — cross-browser standard for Payment transaction process
- Web Bluetooth API — communications over GATT with nearby user-selected Bluetooth devices
- MediaRecorder API — MediaStream Recording
- WebRTC — Real-time Peer-to-peer Communications Between Browsers
- Credential Management API — store and retrieve user, federated , and public key credentials
- Permissions-Policy — mechanism to allow and deny the use of browser features
- Trusted-types API🧪 — allows applications to lock down DOM XSS injection sinks to only accept non-spoofable, typed values in place of strings
- Page Lifecycle API — supports browsers' ability to manage lifecycle of web pages

## Payment Request API

## Payment Request API — caniuse

## Payment Request API

> Payment Request API — позволяет организовать оплату на сайте, используя нативный UI устройства, с указанием деталей карты, вариантами доставки, адресами и контактными данными — developers.google.com

## Payment Request API

    		// Поддерживаемые способы оплаты
    		const methodData = [{
    		    supportedMethods: ['visa', 'mastercard'],
    		}];
    		// Детали платежа
    		const details = {
    		    total: {
    		        label: 'Покупка слона',
    		        amount: { currency: 'RUB', value: '99.99' },
    		    },
    		};
    		// Настройки
    		const options = { requestShipping: false, requestPayerEmail: true };

## Payment Request API

    		// Начинаем процесс
    		const paymentRequest = new PaymentRequest(methodData, details, options);
    		paymentRequest.show() // возвращает промис
    		    .then(function(paymentResponse) {
    		        console.log(paymentResponse);
    		        // { methodName: 'mastercard',
    		        //   payerEmail: 'a.ostapenko@mail.ru',
    		        //   details: {
    		        //      cardNumber: '1234567890000000',
    		        //      cardholderName: 'OSTAPENKO ANATOLIY',
    		        //      cardSecurityCode: '000'
    		        //   }}
    		    })

## Web Bluetooth API

## Web Bluetooth API — caniuse

## Web Bluetooth API

> Web Bluetooth API — предоставляет методы взаимодействия браузера с удалёнными Bluetooth LE устройствами — developers.google.com

## MediaRecorder API

## MediaRecorder API — caniuse

## MediaRecorder API

> MediaRecorder API — позволяет получать доступ к камере и микрофону компьютера через JavaScript API — developers.google.com

## MediaRecorder API

    		navigator.mediaDevices.getUserMedia(constraints)
    		    .then(function (stream) {
    		        const recordedBlobs = [];
    		        const mediaRecorder = new MediaRecorder(stream, {
    		            mimeType: 'video/webm',
    		        });
    		        mediaRecorder.ondataavailable = function (event) {
    		            recordedBlobs.push(event.data);
    		        };
    		        mediaRecorder.start(1000);         // для сохранения видео
    		        videoElement.srcObject = stream;   // для вывода
    		        // ...
    		        mediaRecorder.stop();
    		    });

## WebRTC

## WebRTC — caniuse

## WebRTC

> WebRTC (RTCPeerConnection API) — API, предоставляемое браузером и позволяющее организовать P2P соединение и передачу данных напрямую между браузерами — codelabs.developers.google.com

Применения: медиа-стриминг, видео-общение, онлайн-игры, чаты, распределённые файловые системы, снижение нагрузки на сервера при передаче данных

## WebRTC

Для установления peer-to-peer оба клиента должны знать адрес и порт, по которому его оппонент слушает и может получить входящие данные. Для передачи этой информации необходим вспомогательный сервер — signalling-сервер

Также кроме адресов и портов, клиенты должны договориться о параметрах устанавливаемой сессии. Например об использовании тех или иных кодеков и их параметров в случае аудио- и видеосвязи. Формат данных, описывающих всевозможные свойства соединения, называется SDP — Session Description Protocol

## WebRTC — определение адреса и
проверка доступности

Для определения адреса клиента для WebRTC соединений используются дополнительные сервера STUN — Session Traversal Utilities for NAT. Задачу взаимодействия со STUN и задачу проверки доступности берет на себя ICE (Interactive Connectivity Establishment) фреймворк, встроенный в браузер

## WebRTC

    		const iceServers = [{ url: 'stun:stun.l.google.com:19302' }];
    		const peerConnection = new RTCPeerConnection({iceServers}, constraints);

    		peerConnection.setConfiguration(configuration);
    		peerConnection.onicecandidate = function (event) {
    		    // функция, с помощью которой RTCPeerConnection отправляет на сервер
    		    // сообщения, которые сервер должен вернуть другому браузеру
    		};
    		peerConnection.onaddstream = function (event) {
    		    // вызывается, когда удалённая сторона присылает новый stream с данными
    		};
    		const rtpSender = RTCPeerConnection.addTrack(track, stream...);

## WebTransport

> WebTransport — новое API для двунаправленного клиент-серверного взаимодействия с низкими задержками — web.dev

## Credential Management API

## Credential Management — caniuse

## Credential Management API

> Credential Management API — позволяет сохранять и получать данные для аутентификации — developers.google.com

## Credential Management API

    		navigator.credentials.get({
    		  password: true
    		}).then(function(credential) {
    		  if (credential) {
    		    // данные для аутентификации
    		    console.log(`Username: ${credential.id}`);
    		    console.log(`Password: ${credential.password}`);
    		  }
    		});

## Permissions-Policy

## Permissions-Policy — caniuse

## Permissions-Policy

> HTTP-заголовок Permissions-Policy — позволяет разрешать или запрещать браузеру выполнение определенных функций и API для улучшения приватности— developers.google.com

    		Permissions-Policy: <feature> <allow list origin(s)>

Standardized Features:

accelerometer, ambient-light-sensor, autoplay, camera, document-domain, fullscreen, gyroscope, magnetometer, microphone, midi, payment, picture-in-picture, sync-xhr, usb, wake-lock, xr2

## Permissions-Policy – Пример

    		Permissions-Policy: geolocation=()

    		document.featurePolicy.allowedFeatures(); // список разрешенных фич
    		// ["geolocation", "midi",  "camera", "usb", "autoplay",...]

    		document.featurePolicy.allowsFeature('geolocation');
    		// true

    		// список разрешенных фич, независимо от того, действуют ли они
    		document.featurePolicy.features();
    		// ["geolocation", "midi",  "camera", "usb", "autoplay",...]

## Trusted-types 🧪

## Trusted-types – предпоссылки

    		const templateId = location.hash.match(/tplid=([^;&]*)/)[1];
    		// ...
    		document.head.innerHTML +=
    		  `<link rel="stylesheet" href="./templates/${templateId}/style.css">`

    		// какие есть проблемы у этого кода?

## Trusted-types – предпосылки

    		https://example.com#tplid="><img src=x onerror=alert(1)>

## Trusted-types 🧪

> Trusted-types — экспериментальное API, которое запрещает присвоение "небезопасных" строк в методах, которые подвержены XSS — developers.google.com

- TrustedHTML (.innerHTML)
- TrustedURL (a.href)
- TrustedScriptURL (script.src)
- TrustedScriptURL (el.onlick)

## Trusted-types – пример

    		Content-Security-Policy: trusted-types *

    		const templateId = location.hash.match(/tplid=([^;&]*)/)[1];
    		// typeof templateId == "string"
    		document.head.innerHTML += templateId // Throws a TypeError.

## Trusted-types – пример

    		const templatePolicy = TrustedTypes.createPolicy('template', {
    		  createHTML: (templateId) => {
    		    const tpl = templateId;
    		    if (/^[0-9a-z-]$/.test(tpl)) { // magic!
    		      return `<link rel="stylesheet"
    		        href="./templates/${tpl}/style.css">`;
    		    }
    		    throw new TypeError();
    		  }
    		});
    		const html =
    		  templatePolicy.createHTML(location.hash.match(/tplid=([^;&]*)/)[1]);
    		// html instanceof TrustedHTML
    		document.head.innerHTML += html;

## Page Lifecycle API

> Page Lifecycle API — позволяет отслеживать жизненный цикл страницы и реагировать на его изменения— developers.google.com

## Page Lifecycle API – пример

    		document.addEventListener('freeze', (event) => {
    		  // страница "заморожена"
    		});

    		document.addEventListener('resume', (event) => {
    		  // страница "разморожена"
    		});

    		// Типы событий:
    		// focus, blur, visibilitychange, freeze,
    		// resume, pageshow, pagehide, beforeunload, unload

## Нужно еще больше API!

## Как находить новые API

- https://developers.google.com/web/ - официальный сайт Google для web-разработчиков
- https://github.com/tc39 - комитет, принимающий изменения в Ecma-262
- https://wicg.io - объединение, которое создает и публикует предложения по новым API
- https://t.me/juliarderity - канал Сергея Рубанова и Романа Дворнова об ECMAScript, WebAssembly, Web APIs, specs

## Как стать профессионалом?

## Теория

- Знать про протоколы WEB'а: HTTP/1 (HTTP/1.1), HTTP/2, HTTP/3, HTTPS, WebSocket
- Знание JavaScript — причём, полезно знать как es6+, так и es5. TypeScript
- Знание возможностей браузеров (HTML5, CSS), уметь в кроссбраузерность, понимать, как браузеры работают внутри
- Вопросы, связанные с безопасностью web-приложений (что такое XSS, как работают cookie, что такое CORS...)
- Понимать вопросы, связанные с инфраструктурой, деплоем статики
- Иметь представление о UX
- Иметь представление о server-side
- Всё, что связанно с программированием в целом

## Инструменты

- Инструменты разработки: Node.js
- Инструменты сборки: Webpack, grunt, gulp
- Инструменты работы с CSS: PostCSS
- Модульные системы: ES6-модули, AMD, UMD, commonjs
- DevTools браузеров

## Библиотеки/фреймворки

- Библиотеки для сборки
  - require.js
  - SystemJS
- Фреймворки
  - React*
  - Angular
  - VueJS
  - Prototype
  - Svelte

## Новые подходы/концепции

- rx.js — реактивное программирование на js
- rambda.js — функциональное программирование на js

## Как развиваться?

- Много практики — пробуйте новое, старайтесь развиваться всесторонне
- Читайте статьи — например на Habrahabr, Medium, по тегам `JavaScript`, `Frontend`
- Посещайте и смотрите конференции:
  - Веб-стандарты
  - Фронтенд-субботники: тут и тут от Яндекса
  - HolyJS
  - MoscowJS
  - Доклады Вадима Макеева и Алексея Охрименко

## Как писать резюме?

## Не пишите резюме

##
Верстайте его!
Например — как тут, живой пример

## Перерыв

## Frontend-разработка — это не только web

## Server-side

## Node.JS

> Node или Node.js — программная платформа, основанная на движке V8 (транслирующем JavaScript в машинный код), превращающая JavaScript из узкоспециализированного языка в язык общего назначения

## Node.JS

- Локальные и консольные утилиты
  - Сборщики, трансляторы, компиляторы
  - Скриптинг, CLI, генерация документации, тесты
- Серверы
  - API, dev-сервера, бекенды для SPA
  - Highload & real-time системы: игры, чаты
  - Заплаты в узкие места уже готовых систем
- Клиентские приложения
  - Кравлеры, сборщики данных, анализаторы логов, статистики
  - Desktop приложения (nw.js, Electron)
- Железо
  - Работа на микроконтроллерах (Tessel, Espruino...)

## Производительность Node.js

Дано:

- Core i7-2600 Quad, 16Gb RAM
- Ubuntu 12.04 LTS
- Node.js v0.8.3 (!!!)

Результат:

### Миллион одновременных соединений

http://node.green

## Node.JS

- `os` — информация о ОС, в которой запускается программа
- `child_process` — методы для запуска и управления дочерними процессами
- `assert` — набор простых методов тестирования
- `process` — информация о текущем процессе
- `net` (`dgram`) — создание tcp (и udp) серверов и клиентов
- `http` (`http2`, `https`) — модули для работы с http
- `fs` — работа с файловой системой
- `path` — методы для парсинга и работы с путями в file system
- `url` — методы для парсинга и работы с url-адресами
- `crypto` — модуль, предоставляющий криптографические методы
- `stream` — модуль для потоковой обработки файлов
- `cluster` — модуль для запуска многопроцессорных приложений

## npm

npm — менеджер пакетов, входящий в состав Node.js

- `express` — веб-сервер
- `koa` — веб-сервер
- `babel` — бабель
- `webpack` — вебпак
- `pm2` — production-демон для запуска node.js приложений
- `typescript` — компилятор typescript
- `debug` — модуль для логирования node.js приложений
- `socket.io` — библиотека для работы с веб-сокетами
- and more...

## MongoDB

## Desktop

## Chromium

> Chromium — веб-браузер с открытым исходным кодом, разрабатываемый сообществом The Chromium Authors, компанией Google и некоторыми другими компаниями

## Desktop applications

## Отличия

- Различная точка входа
- Разный принцип построения билдов (Asar Archive vs. V8 Snapshot)
- Использование Chromium
- Разный контекст
- Различия в процессе сборки

## Популярность

Несмотря на то, что NW.js существует дольше Electron, на Electron разработано гораздо больше популярных приложений

- Atom
- Slack
- Visual Studio Code
- GitHub Desktop
- Hyper
- Discord
- Spotify

## Доклад про Electron by Stefan Judis

## Mobile

- PWA
- React Native
- Native Script
- ReactXP
- PhoneGap (Apache Cordova)
- more...

## Кто есть кто?

> React Native — фреймворк для построения нативных мобильных приложений с использованием React

> ReactXP — новомодная поделка от Microsoft

> Native Script — библиотека, позволяющая делать кросс-платформенные приложения, используя XML, CSS, JavaScript

> PhoneGap (Apache Cordova) — платформа для разработки мобильных приложений, запускающихся в webview, и имеющих доступ к системным API устройства

## Кто есть кто?

- Facebook
- Instagram
- Airbnb
- Walmart
- Sberbank

## Например:

    		import React, { Component } from 'react';
    		import { Text, View, ProgressBar } from 'react-native';
    		import { TheNativeComponent } from './your-native-code';
    		class SomeComponent extends Component {
    		    render() {
    		        return (<View>
    		            <Text>Loading</Text>
    		            <ProgressBar />
    		            <TheNativeComponent />
    		        </View>)
    		    }
    		}

## OS & SmartTV

> WebOS — веб-приложение, организующее платформу (операционную среду с набором готовых функций API) для выполнения других веб-приложений

> Tizen — открытая операционная система на базе ядра Linux, предназначенная для широкого круга устройств, включая смартфоны, интернет-планшеты, компьютеры, автомобильные информационно-развлекательные системы, «умные» телевизоры и цифровые камеры

> Chrome OS — ОС от компании Google. Главной особенностью является доминирование веб-приложений над обычными функциями ОС

## Конец?

## Конец.

## Что нас ждёт дальше?

## РК4

- Проверка деплоя
- Проверка выполнения всего проекта
- Финальные советы, которые можно поправить до защиты
- Возможность досдать предыдущие РК

## Защита проектов — 25 декабря

## Защита проектов — 1 июня

Регламент

- Начало 1 июня (суббота), в офисе VK, в 11:00
- Накануне вам необходимо будет получить допуск:
  - по-максимуму поправить все критические баги в ваших проектах
  - задеплоить ваш проект
  - заполнить README в репозитории
  - подготовить хотя бы черновой вариант презентации и задеплоить её
  - заполнить небольшую табличку с командами
- На защите будут присутствовать все преподаватели и гости

## Защита проектов — 1 июня

Регламент

- Все должны подготовить презентацию, показ будет производиться с одного устройства
- Порядок команд мы определим самостоятельно (рандомом 😉)
- О чём стоит рассказать во время выступления (примерный план, 5–7 минут):
  - О команде, о распределении ролей, о командном взаимодействии
  - О том, что у вас за проект (демонстрация: один человек рассказывает, а другой параллельно показывает)
  - Наиболее интересные технические решения вашего проекта
  - Обратная связь по итогам семестра, благодарности преподавателям
  - Ответы на вопросы из зала (2–3 минуты от всего выступления)

## Обратная связь

Для нас действительно очень важна ваша обратная связь по итогам семестра. Пожалуйста, если вас не затруднит, напишите отзыв в ЛС, либо на почту, либо в общем чатике, либо менторам, либо в форме обратной связи на Портале Технопарка. Мы все отзывы читаем и принимаем во внимание.

Негативная обратная связь, обычно, более полезна. Не стесняйтесь сообщать о недочётах!

В конце семестра будут проводиться итоговые встречи в офисе по результатам 2 семестра Технопарка. Приходите на них обязательно.

## Менторство

Многих из вас мы будем рады увидеть в рядах наших менторов в следующем семестре!

Пишите Диме Пешкову, если вы хотите стать одним из менторов и делиться своими знаниями и опытом со следующими поколениями студентов

##
Спасибо вам за этот семестр
Успехов в дальнейшем изучении frontend'а!