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

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

Сергей Пузанков Я.Студент, апрель, 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 Video HTML5 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 сообщество !

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

Книги

38

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

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

39

• Сodeschool.com • Codecademy.com

Пузанков

puzankov@yandex-team.ru

@puzankovcom

Сергей

Спасибо!