Post on 14-Jun-2015
description
Руководитель группы разработки интерфейсов
Кто такой фронтендер?
Чистяков Денис
Разрушители мифов или три «НЕ»
• Дизайнер • Проектировщик • Верстальщик / технолог
3
1993 — Тим Бернерс-Ли пишет HTML
1994 — он же организует W3C *
6* World Wide Web Consortium — Консорциум Всемирной паутины
1994 — он же организует W3C *
• Разработка стандартов для Интернета
6* World Wide Web Consortium — Консорциум Всемирной паутины
1994 — он же организует W3C *
• Разработка стандартов для Интернета• Помощь программам во взаимодействии в Сети
6* World Wide Web Consortium — Консорциум Всемирной паутины
1994 — он же организует W3C *
• Разработка стандартов для Интернета• Помощь программам во взаимодействии в Сети• Обеспечение интернационализации Сети
6* World Wide Web Consortium — Консорциум Всемирной паутины
1994 — он же организует W3C *
• Разработка стандартов для Интернета• Помощь программам во взаимодействии в Сети• Обеспечение интернационализации Сети• Доступность для людей с ограниченными
возможностями
6* World Wide Web Consortium — Консорциум Всемирной паутины
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 1.0//EN">!<HTML>! <HEAD>! <TITLE>This is a title</TITLE>! </HEAD>! <BODY>! <H1>This is a heading</H1>! Here is some text! <H2>Second level heading</H2>! Here is some more text.! <A HREF="Go"><IMG SRC="Button"> Press to start</A>! </BODY>!</HTML>
HTML
7
v1.0 Яндекса
1994 — Хокон Виум Ли пишет CSS
p span!{! font-size: 35pt;! color: white;! background: #000!}
CSS
11
<p> <span>не черный</span> </p>
CSS:
HTML:
Не черныйПример:
v8.5 Яндекса с CSS
1995 — Брендан Айк пишет JavaScript
v11 Яндекса с JS
2006
+
Асинхронные и динамические страницы
Браузер
Событие
DOM
XHR
Web-сервер
PHP Python Ruby Perl C# …
HTTP
XML
БД
v12 Яндекса с AJAX
2008 — Google пишет V8
2009 — Райан Дал пишет Node.js
Разделение на Фронтенд и Бэкенд
Браузер
Событие
DOM
XHR
Фронтэнд
Node.js
HTTP
JSON
Бэкенд
PHP Python Ruby Perl C# …
БД
HTTP
XML JSON …
Наши дни — iPhone + Android
Инструменты
• JS-анализаторы: JSHint, JSLint, JSCS, … • CSS-препроцессоры: SASS, LESS, Stylus, … • BASH, Grunt, Gulp, Makefile, … • Веб-инспекторы в браузерах всё мощнее
23
HTML → HTML + CSS + JS + Node.js + …
24
Проекты Яндекса в Екб
Этому не учат в ВУЗах
35
Фронтендеры всегда стоят на острие интернета
35
Фронтендеры всегда стоят на острие интернета
HTML CSS
35
Фронтендеры всегда стоят на острие интернета
HTML CSS JS
35
Фронтендеры всегда стоят на острие интернета
HTML CSS JS
Node.js
Руководитель группы разработки интерфейсов
dench@yandex-team.ru @denchistyakov
Спасибо! Вопросы?
Чистяков Денис