Как выглядит современный фронтенд
- 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
- 8. Взрыв2 8
- 9. Взрыв → Организация кода 9
- 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
- 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
- 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
- 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
- 45. Так выглядит современный фронтенд. 45
- 46. Так строится будущее сегодня. 46