Важная часть современного веба - это фронтенд. Рассказ краткой истории фронтенд-разработки от истоков и до наших дней, что происходит на этой кухне сегодня и куда движется современный веб.

1. Интерфейс пользователя: от начала
времен и до наших дней
Михаил Колганов
архитектор, Тамтэк

2. До н.э.
В 1990 году в CERN разработан протокол HTTP, язык
разметки HTML и первый веб-браузер

3. Да, это там где БАК

4. Первый Web-сервер

5. До н.э.
В 1990 году в CERN разработан протокол HTTP, язык
разметки HTML и первый веб-браузер
NCSA Mosaic

6. До н.э.
В 1990 году в CERN разработан протокол HTTP, язык
разметки HTML и первый веб-браузер
NCSA Mosaic
Netscape Navigator

7. До н.э.
В 1990 году в CERN разработан протокол HTTP, язык
разметки HTML и первый веб-браузер
NCSA Mosaic
Netscape Navigator
Основан W3C

8. Web = HTML + ? + ?
1990 г

9. Web = HTML + JavaScript + ?
1990 г
1995 г

10. Web = HTML + JavaScript + CSS
1990 г
1996 г
1995 г

11. Война браузеров

12. График популярности браузеров

13. Фронтенд до н.э.

14. Фронтенд сегодня

15. AJAX
asynchronous JavaScript and XML

16. Без AJAX С AJAX

17. HTML5 + CSS3

18. Flash против HTML5

19. Flash против HTML5

20. Статистика браузеров по платформам
http://gs.statcounter.com/#desktop+mobile+tablet-comparison-ww-monthly-
201508-201608-bar

21. Адаптивный веб-интерфейс

22. Адаптивный веб-интерфейс

23. Возможности CSS3
https://codepen.io/iliadraznin/pen/JcqbE

24. Популярный, есть в каждом браузере
JavaScript

25. Популярный, есть в каждом браузере
Продвинутый и выразительный
JavaScript

26. Популярный, есть в каждом браузере
Продвинутый и выразительный
Работает на сервере (Node.js)
* Доклад Андрея Юдина с прошлого HappyDev-lite’15 подробнее о JS:
http://2015-autumn.happydev-lite.ru/room-event/134
JavaScript

27. Веб-приложения без интернета

28. Поддержка WebGL — 3D в браузере
http://caniuse.com/#search=webgl

29. Поддержка WebGL — 3D в браузере
http://k9.github.io/globe-viewer/

30. Поддержка WebGL — 3D в браузере
http://recordit.co/tLrwIDHcAH

31. Другие возможности web-браузеров
Web Audio API
Camera API
Fullscreen API
DeviceMotion API
Battery Status API
Vibration API
etc.

32. Вездесущий веб: Плагин для браузера
и другие на
основе Chromium

33. Вездесущий веб: Мобильные приложения
https://cordova.apache.org/

34. Вездесущий веб: Smart TV
https://cordova.apache.org/

35. Что почитать?
https://htmlacademy.ru (курс по вёрстке)
https://learn.javascript.ru/ (учебник по JavaScript)
http://htmlbook.ru/ (справочник веб-разработчика)
http://caniuse.com/ (доступность фич в браузерах)
https://developer.mozilla.org/en-US/
http://www.w3schools.com/ (много учебников от W3C)

36. Спасибо за внимание!
Вопросы?
Михаил Колганов, Тамтэк
mike.kolganov@gmail.com