Фронтенд в Яндексе

руководитель группыразработки поисковых интерфейсов

Фронтенд разработка

Сергей ПузанковЯ.Студент, 2014

Первый веб

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

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

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

8

Технологии

HTML (HyperText Markup Language) отвечает за логическое структурирование данных в вебе.

Новые API:

• Canvas• Video/Audio API• LocalStorage• и так далее.

HTML5

11

CSS (Cascading Style Sheets) отвечает за отображение данных в вебе.

Препроцессоры:

• SASS• LESS• Stylus

CSS3

12

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

JavaScript

13

• jQuery — готовые решения для рутинных задач на JavaScript

• Coffescript — синтаксический сахар• Typescript — статическая типизация, полноценные классы, модульность

Фреймворки и надстройки над JavaScript

14

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

SVG (Scalable Vector Graphics) — язык разметки масштабируемой векторной графики.

Canvas — элемент HTML5, предназначенный для создания растрового двухмерного изображения при помощи скриптования, обычно, на языке JavaScript.

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

16

3D графика

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

3D графика

18

Видео и Аудио

Видео и Аудио

20

HTML5 VideoHTML5 Audio

Не только desktop

Не только веб

Node.js

25

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

Open-source

Open-source

27

• Github.com — социальная сеть для программистов, построенная вокруг совместной разработки.

• NPM — большое и удобное хранилище open-source проектов на node.js

Стандарты

Стандарты

29

W3C (World Wide Web Consortium) — организация, разрабатывающая и внедряющая технологические стандарты

• Более 110 рекомендаций за 10 лет. • Члены консорциума — более 350 организаций. • 28 стран мира.

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

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

31

• Mozilla Developer Network — база знаний по веб разработке от компании Mozilla

• Web Platform — open-source платформа документации по веб разработке

Фронтенд в Яндексе

33

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

Фронтенд

35

• Работа на стыке UI/UX дизайна и технологий• Desktop, tablets, mobile• Результат работы видят тысячи и миллионы пользователей каждый день

• Молодая и быстроразвивающаяся индустрия• Открытое open-source сообщество

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

Книги

39

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

Интерактивные онлайн курсы

40

• Сodeschool.com• Codecademy.com

Задачки

41

• codewars.com• projecteuler.net

Школа Разработки Интерфейсов

42• tech.yandex.ru/education/shri/

Пузанков

puzankov@yandex-team.ru

@puzankovcom

Сергей

Спасибо!