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

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

Резюме Frontend-разработчика в 2018 году
Слайды доступны по ссылке
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

WebAssembly

WebAssembly — caniuse

WebAssembly

Во время создания WebAssembly решалась следующая задача: быстро исполнять код в браузере

WebAssembly (wasm) — эффективный низкоуровневый байт-код, предназначенный для исполнения в браузере. WebAssemblу представляет собой переносимое абстрактное синтаксическое дерево, обеспечивающее как более быстрый парсинг, так и более быстрое выполнение кода, чем JavaScript — developers.google.com

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

Что же такое WebAssembly?

WebAssembly

		// исходник на C
		int fib(int n) {
		    if (n == 0) { return 0; } else {
		        if ((n == -1) || (n == 1)) { return 1; } else  {
		            if (n > 0) { return fib(n - 1) + fib(n - 2); }
		            else { return fib(n + 2) - fib(n + 1); }
		        }
		    }
		}
		 
	

WebAssembly

		// текстовое представление WAST
		(module
		    (table 0 anyfunc)
		    (memory $0 1)
		    (data (i32.const 12) "\01\00\00\00\00\00\00\00\01\00\00\00")
		    (export "memory" (memory $0))
		    (export "fib" (func $fib))
		    (func $fib (param $0 i32) (result i32)
		        (local $1 i32)
		        (block $label$0
		            (br_if $label$0
		                (i32.ge_u
		                // ...
		 
	

WebAssembly

		// скомпилированный байт-код wasm
		const wasmCode = new Uint8Array(
		[0,97,115,109,1,0,0,0,1,134,128,128,128,0,1,96,1,127,1,127,3,130,128,128,
		128,0,1,0,4,132,128,128,128,0,1,112,0,0,5,131,128,128,128,0,1,0,1,6,129,
		128,128,128,0,0,7,144,128,128,128,0,2,6,109,101,109,111,114,121,2,0,3,102,
		105,98,0,0,10,203,128,128,128,0,1,197,128,128,128,0,1,1,127,2,64,32,0,65,1,
		106,34,1,65,3,79,13,0,32,1,65,2,116,65,12,106,40,2,0,15,11,2,64,32,0,65,1,
		72,13,0,32,0,65,127,106,16,0,32,0,65,126,106,16,0,106,15,11,32,0,65,2,106,
		16,0,32,1,16,0,107,11,11,146,128,128,128,0,1,0,65,12,11,12,1,0,0,0,0,0,0,0,
		1,0,0,0]
		);
		 
	

WebAssembly

		// запускаем wasm-модуль
		const wasmCode = new Uint8Array([...]);
		const wasmModule = new WebAssembly.Module(wasmCode);
		const wasmInstance = new WebAssembly.Instance(wasmModule, []);
		 
		console.log(wasmInstance.exports.fib(10));
		 
	

Демо — Танки

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

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

Теория

Теория

Инструменты

Инструменты

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

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

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

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

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

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

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

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

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

Перерыв

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

Server-side

Node.JS

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

Node.JS

Node.JS

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

Дано:

Результат:

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

http://node.green

Node.JS

Структура проекта

		app/
		    package.json
		    node_modules/
		    index.js
		    ...
		 
	

Node.JS

		// circle.js
		'use strict';
		const PI = 3.1415;
		 
		exports.PI = PI;    // module.exports.PI = ...
		 
		module.exports = function (radius) {
		    return 2 * PI * radius;
		};
		 
		

Node.JS

		(function (exports, require, module, __filename, __dirname) {
		    'use strict';
		    const PI = 3.1415;
		     
		    exports.PI = PI;    // module.exports.PI = ...
		     
		    module.exports = function (radius) {
		        return 2 * PI * radius;
		    };
		});
		 
	

Node.JS

		"use strict";
		const circle = require('./circle.js');
		const fs = require('fs');
		 
		const PI = circle.PI;
		 
		console.log('PI = ', PI);
		console.log('square = ', circle(2));
		 
	

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'а!