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

2. руководитель группы
разработки поисковых интерфейсов
Фронтенд разработка
Сергей Пузанков
Я.Студент, апрель, 2014

3. Первый веб

6. Современный веб

8. • Client-side — фронтенд и клиентская часть веб-приложения
• Server-side — бэкенд или серверная часть веб-приложения
• SPA — Single-Page Application
Современный веб
8

9. Технологии

11. HTML (HyperText Markup Language) отвечает за логическое
структурирование данных в вебе.
Новые API:
• Canvas
• Video/Audio API
• LocalStorage
• и так далее.
HTML5
11

12. CSS (Cascading Style Sheets) отвечает за
отображение данных в вебе.
Препроцессоры:
• SASS
• LESS
• Stylus
CSS3
12

13. • Scripting language
• Прототипное наследование
• ООП
• Event-driven programming
• Динамическая типизация
JavaScript
13

14. • jQuery — готовые решения для рутинных задач на
JavaScript
• Coffescript — синтаксический сахар
• Typescript — статическая типизация, полноценные
классы, модульность
Фреймворки и надстройки над JavaScript
14

15. Векторная графика

16. SVG (Scalable Vector Graphics) — язык разметки масштабируемой
векторной графики.
Canvas — элемент HTML5, предназначенный для создания
растрового двухмерного изображения при помощи скриптования,
обычно, на языке JavaScript.
Векторная графика
16

17. 3D графика

18. WebGL (Web-based Graphics Library) — программная
библиотека для языка программирования JavaScript,
позволяющая создавать интерактивную 3D-графику.
3D графика
18

19. Видео и Аудио

20. Видео и Аудио
20
HTML5 Video
HTML5 Audio

21. Не только desktop

23. Не только веб

25. Node.js
25
Node.js — Cерверная платформа, использующая
язык программирования JavaScript, основанная на
движке V8. Предназначена для создания
масштабируемых распределённых сетевых
приложений.

26. Open-source

27. Open-source
27
• Github.com — социальная сеть для
программистов, построенная вокруг
совместной разработки.
• NPM — большое и удобное хранилище
open-source проектов на node.js

28. Стандарты

29. Стандарты
29
W3C (World Wide Web Consortium) — организация,
разрабатывающая и внедряющая технологические
стандарты
• Более 110 рекомендаций за 10 лет.
• Члены консорциума — более 350 организаций.
• 28 стран мира.

30. Документация

31. Документация
31
• Mozilla Developer Network — база знаний
по веб разработке от компании Mozilla
• Web Platform — open-source платформа
документации по веб разработке

33. Фронтенд в Яндексе
33
• Более 300 фронтенд-разработчиков
• Четкое разделение на фронтенд и бэкенд
• Серверный JavaScript
• Широкий стек технологий
• Отвественность за продукт, а не за кусок работы
• Наши сотрудники есть в core-team некоторых
популярных фреймворков
и в рабочих группах W3C

35. Фронтенд
35
• Работа на стыке UI/UX дизайна и технологий
• Desktop, tablets, mobile
• Результат работы видят тысячи и миллионы
пользователей каждый день
• Молодая и быстроразвивающаяся индустрия
• Открытое open-source сообщество
!

37. С чего начать?

38. Книги
38
• Дуглас Крокфорд «JavaScript. Сильные стороны»
• Дэвид Флэнаган «JavaScript. Подробное руководство»
• Стоян Стефанов «JavaScript. Шаблоны»
• Дэн Седерхольм «CSS3 для веб-дизайнеров»
• Ден Седерхольм «Пуленепробиваемый веб-дизайн»
• Алан Купер «Об интерфейсе. Основы проектирования
взаимодействия»

39. Интерактивные онлайн курсы
39
• Сodeschool.com
• Codecademy.com

40. Пузанков
puzankov@yandex-team.ru
@puzankovcom
Сергей
Спасибо!