Как выглядит современный фронтенд
-
Upload
timophy-chaptykov -
Category
Engineering
-
view
317 -
download
6
Transcript of Как выглядит современный фронтенд
Что такое современныйфронтенд?Тимофей Чаптыков
[email protected] @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
Зачем нужен пакетный менеджер?
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