Резюме Frontend-разработчика в 2019 году

Технопарк, весна, 2019 г.

Резюме Frontend-разработчика в 2019 году
Слайды доступны по ссылке
frontend-park-mailru.firebaseapp.com

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

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

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...);

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}`);
		  }
		});

Feature-Policy

Feature-Policy — caniuse

Feature-Policy

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

		Feature-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

Feature-Policy – Пример

		Feature-Policy: geolocation 'none'
	
		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

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

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

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

Теория

Теория

Инструменты

Инструменты

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

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

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

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

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

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

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

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

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

Перерыв

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

Server-side

Node.JS

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

Node.JS

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

Дано:

Результат:

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

http://node.green

Node.JS

npm

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

MongoDB

MongoDB

MongoDB

MongoDB

Desktop

Chromium

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

Desktop applications

Отличия

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

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

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

Mobile

Mobile

Кто есть кто?

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

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

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

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

Кто есть кто?

Например:

		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

OS & SmartTV

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

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

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

Конец?

Конец.

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

РК4

РК4

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

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

Регламент

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

Регламент

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

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

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

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

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

Менторство

Менторство

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

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

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