Документ рассматривает современные технологии фронтенда, включая языки разметки (HTML), стилизации (CSS) и программирования (JavaScript), а также множество связанных фреймворков и инструментов, таких как npm и webpack. Он описывает важность пакетных менеджеров, модульных систем и API, а также платформы для разработки приложений с использованием JavaScript. Автор подчеркивает, что экосистема JavaScript продолжает быстро развиваться, делая разработку фронтенда удобнее и доступнее.

1. Что такое современный
фронтенд?
Тимофей Чаптыков
tim.chaptykov@gmail.com @chaptykov

3. Начало1
3

4. 11 лет
4

5. Я могу так
И так
И даже так
<!-- Мой первый гипертекстовый документ из 2004 -->
h1< > h1</ >
h2< > h2</ >
p< > p</ >

6. Технологии
— HTML для разметки;
— CSS для оформления;
— JavaScript для логики.
6

7. JavaScript в 2005
7

8. Взрыв2
8

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

10. Фреймворки
— GWT
— ExtJS
— Knockout
— Backbone
— Angular
— React
10

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

13. Пакетные менеджеры
— bower
— npm
13

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

15. // Менеджмент зависимостей в npm
{
"name": "Application",
"dependencies": {
"babel": "^5.8.19",
"express": "^4.3.2",
"superagent": "^1.3.0"
}
}

17. Модульные системы
— CommonJS
— amd
— ECMAScript 2015 modules
17

18. Системы сборки
— Grunt
— Gulp
— Browserify
— Webpack
18

19. Языки и транспиллеры
— Dart от Google
— TypeScript от Microsoft
— flow или JSX от Facebook
— ECMAScript 2015
— ECMAScript 2016
19

20. r
length Math PI r
s Math PI r r
circle
// Пример кода с использованием ECMAScript 2015
class Circle extends Figure {
constructor( ) {
super();
this. = 2 * . * ;
this. = . * * ;
}
}
var = new Circle(10);

21. _get _x _x2 _x3
_again
_function _again
object _x
property _x2
receiver _x3
_again
object object Function prototype
desc Object object property
desc undefined
parent Object object
parent
undefined
_x parent
_x2 property
_x3 receiver
_again
desc parent undefined
_function
desc
desc value
getter desc
getter undefined
undefined
getter receiver
instance Constructor
instance
subClass superClass
superClass superClass
superClass
subClass prototype Object superClass superClass prototype
constructor
value subClass
enumerable
writable
configurable
superClass Object setPrototypeOf Object subClass superClass subClass __proto__ superClass
Circle _Figure
Circle _Figure
r
Circle
Object Circle prototype
length Math PI r
s Math PI r r
Circle
Figure
circle
"use strict";
var = function get( , , ) {
var = true;
: while ( ) {
var = ,
= ,
= ;
= false;
if ( === null) = . ;
var = .getOwnPropertyDescriptor( , );
if ( === ) {
var = .getPrototypeOf( );
if ( === null) {
return ;
} else {
= ;
= ;
= ;
= true;
= = ;
continue ;
}
} else if ("value" in ) {
return . ;
} else {
var = .get;
if ( === ) {
return ;
}
return .call( );
}
}
};
function _classCallCheck( , ) {
if (!( instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _inherits( , ) {
if (typeof !== "function" && !== null) {
throw new TypeError("Super expression must either be null or a function, not " + typeof );
}
. = .create( && . , {
: {
: ,
: false,
: true,
: true
}
});
if ( ) . ? .setPrototypeOf( , ) : . = ;
}
var = (function( ) {
_inherits( , );
function Circle( ) {
_classCallCheck(this, );
_get( .getPrototypeOf( . ), "constructor", this).call(this);
this. = 2 * . * ;
this. = . * * ;
}
return ;
})( );
var = new Circle(10);

22. Взрыв → API
22

23. Количество API на ProgrammableWeb
23
32 2005
~3000 8 марта 2011
~4000 8 марта 2011
~14300 2015

24. Картографические API
— API Карт от 2ГИС
— API Карт от Яндекс
— Google Maps API
— OpenStreetMap API
24

26. API социальных сетей
— vk.com/dev
— developers.facebook.com
— dev.twitter.com
— instagram.com/developer
— apiok.ru
— core.telegram.org
— developer.foursquare.com
26

27. Погода
— Yahoo! Weather
— Gismeteo
27

28. Поиск
— Поиск для сайта от Яндекс
— Custom search от Google
28

29. Видео, фото, музыка
— vk.com/dev
— API данных Youtube
— SoundCloud API
— The App Garden от Flickr
— Last.fm Web Services
29

30. Покупки
— Product Advertising API от Amazon
— Ebay API
30

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

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

33. Браузер
— Геолокация
— Микрофон
— Камера
— File API, FileReader API
— WebRTC
— Gamepad, MIDI
— Web Audio и cинтезирование речи
33

34. Try Speech Synthesis API
34

35. text
speech text
speechSynthesis text
var = 'London is a capital of Great Britain.';
var = new SpeechSynthesisUtterance( );
.speak( );

36. Node.js
— Приложения для Windows, Linux, Mac OS
— Работа с ресурсами ОС
36

37. NW.js и аналоги
Графический интерфейс для приложений
в Windows, Linux и Mac OS.
«Браузер» для одного приложения
37

38. Adobe Phonegap
— iOS
— Android
— Windows Phone
— Blackberry OS
— Symbian
— Bada
— WebOS
38

39. React Native
— iOS
— Android
Уже не «браузер», а полноценное
управление нативными элементами
из JavaScript.
39

40. Сейчас3
40

41. JavaScript в 2015
— На любых платформах;
— С развитой экосистемой;
— И, наконец, на JS стало удобно писать.
41

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

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

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

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

47. Тимофей Чаптыков
tim.chaptykov@gmail.com
@chaptykov
47