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

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

3. Первый веб

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

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

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

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

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

13. JavaScript
• Scripting language
• Event-driven programming
• Динамическая типизация
13

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

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

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

17. 3D графика

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

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

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

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

41. Задачки
41
• codewars.com
• projecteuler.net

42. Школа Разработки Интерфейсов
42
• tech.yandex.ru/education/shri/

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