Как выглядит современный фронтенд

Что такое современныйфронтенд?Тимофей Чаптыков

tim.chaptykov@gmail.com @chaptykov

Начало1

3

11 лет

4

Я могу такИ такИ даже так

<!-- Мой первый гипертекстовый документ из 2004 -->

h1< > h1</ >h2< > h2</ >p<> p</>

Технологии

—  HTML для разметки;

—  CSS для оформления;

—  JavaScript для логики.

6

JavaScript в 2005

7

Взрыв2

8

Взрыв → Организация кода

9

Фреймворки

—  GWT

—  ExtJS

—  Knockout

—  Backbone

—  Angular

—  React �

10

Что такое фреймворк?

11

Пакетные менеджеры

—  bower

—  npm �

13

Зачем нужен пакетный менеджер?

14

// Менеджмент зависимостей в npm

{"name":"Application","dependencies":{"babel":"̂5.8.19","express":"̂4.3.2","superagent":"̂1.3.0"

}}

Модульные системы

—  CommonJS �

—  amd

—  ECMAScript 2015 modules �

17

Системы сборки

—  Grunt

—  Gulp �

—  Browserify

—  Webpack �

18

Языки и транспиллеры

—  Dart от Google

—  TypeScript от Microsoft

—  flow или JSX от Facebook �

—  ECMAScript 2015 �

—  ECMAScript 2016 �

19

r length MathPI r s MathPI r r

circle

// Пример кода с использованием ECMAScript 2015

classCircleextendsFigure{constructor(){super();this. =2* . * ;this. = . * * ;

}}

var =newCircle(10);

_get _x _x2 _x3 _again _function _again object _x property _x2 receiver _x3 _again object object Functionprototype desc Object object property desc undefined parent Object object parent undefined _x parent _x2 property _x3 receiver _again desc parent undefined _function desc descvalue getter desc getter undefined undefined getter receiver

instance Constructor instance

subClass superClass superClass superClass superClass subClassprototype Object superClass superClassprototype constructor value subClass enumerable writable configurable superClass ObjectsetPrototypeOf Object subClass superClass subClass__proto__ superClass

Circle _Figure Circle _Figure

r Circle

Object Circleprototype length MathPI r s MathPI r r

CircleFigure

circle

"use strict";

var =functionget( , , ){var =true;

:while( ){var = ,

= ,= ;

=false;if( ===null) = . ;var = .getOwnPropertyDescriptor( , );if( === ){

var = .getPrototypeOf( );if( ===null){

return ;}else{

= ;= ;= ;=true;

= = ;continue ;

}}elseif("value"in ){

return . ;}else{

var = .get;if( === ){

return ;}return .call( );

}}

};

function_classCallCheck( , ){if(!( instanceofConstructor)){

thrownewTypeError("Cannot call a class as a function");}

}

function_inherits( , ){if(typeof !=="function"&& !==null){

thrownewTypeError("Super expression must either be null or a function, not "+typeof );}

. = .create( && . ,{:{

: ,:false,

:true,:true

}});if( ) . ? .setPrototypeOf( , ): . = ;

}

var =(function( ){_inherits( , );

functionCircle(){_classCallCheck(this, );

_get( .getPrototypeOf( . ),"constructor",this).call(this);this. =2* . * ;this. = . * * ;

}

return ;})( );

var =newCircle(10);

Взрыв → API

22

Количество API на ProgrammableWeb

23

32 2005

~3000 8 марта 2011

~4000 8 марта 2011

~14300 2015

Картографические API

—  API Карт от 2ГИС

—  API Карт от Яндекс

—  Google Maps API

—  OpenStreetMap API

24

API социальных сетей

—  vk.com/dev

—  developers.facebook.com

—  dev.twitter.com

—  instagram.com/developer

—  apiok.ru

—  core.telegram.org

—  developer.foursquare.com

26

Погода

—  Yahoo! Weather

—  Gismeteo �

27

Поиск

—  Поиск для сайта от Яндекс

—  Custom search от Google

28

Видео, фото, музыка

—  vk.com/dev

—  API данных Youtube

—  SoundCloud API

—  The App Garden от Flickr

—  Last.fm Web Services

29

Покупки

—  Product Advertising API от Amazon

—  Ebay API

30

REST API для единственного клиента

31

Взрыв → Платформы

32

Браузер

—  Геолокация

—  Микрофон

—  Камера

—  File API, FileReader API

—  WebRTC

—  Gamepad, MIDI

—  Web Audio и cинтезирование речи

33

Try Speech Synthesis API

34

text speech text

speechSynthesis text

var ='London is a capital of Great Britain.';var =newSpeechSynthesisUtterance( );

.speak( );

Node.js

—  Приложения для Windows, Linux, Mac OS

—  Работа с ресурсами ОС

36

NW.js и аналоги

Графический интерфейс для приложений

в Windows, Linux и Mac OS.

«Браузер» для одного приложения

37

Adobe Phonegap

—  iOS

—  Android

—  Windows Phone

—  Blackberry OS

—  Symbian

—  Bada

—  WebOS

38

React Native

—  iOS

—  Android

Уже не «браузер», а полноценное

управление нативными элементами

из JavaScript.

39

Сейчас3

40

JavaScript в 2015

—  На любых платформах;

—  С развитой экосистемой;

—  И, наконец, на JS стало удобно писать.

41

Самая быстрорастущая экосистема в мире

42

А если серьезно…

44

Так выглядит современный фронтенд.

45

Так строится будущее сегодня.

46

Тимофей Чаптыков

tim.chaptykov@gmail.com@chaptykov

47