Embed Size (px)
DESCRIPTION
Доклад об особенностях фронтенд-разработки. Речь пойдет о специфике разработки интерфейсов в больших и маленьких компаниях и о том, что должен знать хороший фронтенд-разработчик. Вы узнаете также, как устроен процесс разработки в Яндексе и какие интерфейсные задачи мы решаем.
Citation preview
руководитель группыразработки поисковых интерфейсов
Фронтенд разработка
Сергей ПузанковЯ.Студент, 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/
Пузанков
@puzankovcom
Сергей
Спасибо!
