руководитель группы
разработки поисковых интерфейсов
Фронтенд разработка
Сергей Пузанков
Я.Студент, апрель, 2014
Первый веб
Современный веб
• Client-side — фронтенд и клиентская часть веб-приложения
• Server-side — бэкенд или серверная часть веб-приложения
• SPA...
Технологии
HTML (HyperText Markup Language) отвечает за логическое
структурирование данных в вебе.
Новые API:
• Canvas
• Video/Audio ...
CSS (Cascading Style Sheets) отвечает за
отображение данных в вебе.
Препроцессоры:
• SASS
• LESS
• Stylus
CSS3
12
• Scripting language
• Прототипное наследование
• ООП
• Event-driven programming
• Динамическая типизация
JavaScript
13
• jQuery — готовые решения для рутинных задач на
JavaScript
• Coffescript — синтаксический сахар
• Typescript — статическа...
Векторная графика
SVG (Scalable Vector Graphics) — язык разметки масштабируемой
векторной графики.
Canvas — элемент HTML5, предназначенный д...
3D графика
WebGL (Web-based Graphics Library) — программная
библиотека для языка программирования JavaScript,
позволяющая создавать и...
Видео и Аудио
Видео и Аудио
20
HTML5 Video
HTML5 Audio
Не только desktop
Не только веб
Node.js
25
Node.js — Cерверная платформа, использующая
язык программирования JavaScript, основанная на
движке V8. Предназн...
Open-source
Open-source
27
• Github.com — социальная сеть для
программистов, построенная вокруг
совместной разработки.
• NPM — большое...
Стандарты
Стандарты
29
W3C (World Wide Web Consortium) — организация,
разрабатывающая и внедряющая технологические
стандарты
• Более...
Документация
Документация
31
• Mozilla Developer Network — база знаний
по веб разработке от компании Mozilla
• Web Platform — open-sour...
Фронтенд в Яндексе
33
• Более 300 фронтенд-разработчиков
• Четкое разделение на фронтенд и бэкенд
• Серверный JavaScript
•...
Фронтенд
35
• Работа на стыке UI/UX дизайна и технологий
• Desktop, tablets, mobile
• Результат работы видят тысячи и милл...
С чего начать?
Книги
38
• Дуглас Крокфорд «JavaScript. Сильные стороны»
• Дэвид Флэнаган «JavaScript. Подробное руководство»
• Стоян Стеф...
Интерактивные онлайн курсы
39
• Сodeschool.com
• Codecademy.com
Пузанков
puzankov@yandex-team.ru
@puzankovcom
Сергей
Спасибо!
Фронтенд в Яндексе
Фронтенд в Яндексе
Фронтенд в Яндексе
Фронтенд в Яндексе
Фронтенд в Яндексе
Фронтенд в Яндексе
Фронтенд в Яндексе
Фронтенд в Яндексе
Фронтенд в Яндексе
Фронтенд в Яндексе
Upcoming SlideShare
Loading in...5
×

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

470

Published on

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

Published in: Internet

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

  1. 1. руководитель группы разработки поисковых интерфейсов Фронтенд разработка Сергей Пузанков Я.Студент, апрель, 2014
  2. 2. Первый веб
  3. 3. Современный веб
  4. 4. • Client-side — фронтенд и клиентская часть веб-приложения • Server-side — бэкенд или серверная часть веб-приложения • SPA — Single-Page Application Современный веб 8
  5. 5. Технологии
  6. 6. HTML (HyperText Markup Language) отвечает за логическое структурирование данных в вебе. Новые API: • Canvas • Video/Audio API • LocalStorage • и так далее. HTML5 11
  7. 7. CSS (Cascading Style Sheets) отвечает за отображение данных в вебе. Препроцессоры: • SASS • LESS • Stylus CSS3 12
  8. 8. • Scripting language • Прототипное наследование • ООП • Event-driven programming • Динамическая типизация JavaScript 13
  9. 9. • jQuery — готовые решения для рутинных задач на JavaScript • Coffescript — синтаксический сахар • Typescript — статическая типизация, полноценные классы, модульность Фреймворки и надстройки над JavaScript 14
  10. 10. Векторная графика
  11. 11. SVG (Scalable Vector Graphics) — язык разметки масштабируемой векторной графики. Canvas — элемент HTML5, предназначенный для создания растрового двухмерного изображения при помощи скриптования, обычно, на языке JavaScript. Векторная графика 16
  12. 12. 3D графика
  13. 13. WebGL (Web-based Graphics Library) — программная библиотека для языка программирования JavaScript, позволяющая создавать интерактивную 3D-графику. 3D графика 18
  14. 14. Видео и Аудио
  15. 15. Видео и Аудио 20 HTML5 Video HTML5 Audio
  16. 16. Не только desktop
  17. 17. Не только веб
  18. 18. Node.js 25 Node.js — Cерверная платформа, использующая язык программирования JavaScript, основанная на движке V8. Предназначена для создания масштабируемых распределённых сетевых приложений.
  19. 19. Open-source
  20. 20. Open-source 27 • Github.com — социальная сеть для программистов, построенная вокруг совместной разработки. • NPM — большое и удобное хранилище open-source проектов на node.js
  21. 21. Стандарты
  22. 22. Стандарты 29 W3C (World Wide Web Consortium) — организация, разрабатывающая и внедряющая технологические стандарты • Более 110 рекомендаций за 10 лет. • Члены консорциума — более 350 организаций. • 28 стран мира.
  23. 23. Документация
  24. 24. Документация 31 • Mozilla Developer Network — база знаний по веб разработке от компании Mozilla • Web Platform — open-source платформа документации по веб разработке
  25. 25. Фронтенд в Яндексе 33 • Более 300 фронтенд-разработчиков • Четкое разделение на фронтенд и бэкенд • Серверный JavaScript • Широкий стек технологий • Отвественность за продукт, а не за кусок работы • Наши сотрудники есть в core-team некоторых популярных фреймворков и в рабочих группах W3C
  26. 26. Фронтенд 35 • Работа на стыке UI/UX дизайна и технологий • Desktop, tablets, mobile • Результат работы видят тысячи и миллионы пользователей каждый день • Молодая и быстроразвивающаяся индустрия • Открытое open-source сообщество !
  27. 27. С чего начать?
  28. 28. Книги 38 • Дуглас Крокфорд «JavaScript. Сильные стороны» • Дэвид Флэнаган «JavaScript. Подробное руководство» • Стоян Стефанов «JavaScript. Шаблоны» • Дэн Седерхольм «CSS3 для веб-дизайнеров» • Ден Седерхольм «Пуленепробиваемый веб-дизайн» • Алан Купер «Об интерфейсе. Основы проектирования взаимодействия»
  29. 29. Интерактивные онлайн курсы 39 • Сodeschool.com • Codecademy.com
  30. 30. Пузанков puzankov@yandex-team.ru @puzankovcom Сергей Спасибо!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×