Embed Size (px)
Citation preview
Что такое Web front end,и с чем его едят
Егор Непомнящих, ISS Art,
старший инженер-программист
О себе
2005-2010 - ОмГУ ИМИТ
c 2008 - ИСС Арт
Специализация: JavaScript, TypeScript
Умения: Java, Scala, Unity 3D,PHP, Ruby
Team lead
Что такое Web front end
Front endAPI
Этап 1: Верстка
Веб-страница
Этап 1: Верстка
Веб-страница
HTMLCSS
JS
Этап 1: Верстка
HTML - разметка
(HyperText Markup Language)
Этап 1: Верстка
HTML - разметка
(HyperText Markup Language)
Этап 1: Верстка
HTML - разметка
Может выдаваться сервером
Этап 1: Верстка
HTML - разметка
Может строиться на клиенте
Этап 1: Верстка
CSS - внешний вид
(Cascade StyleSheets)
Этап 1: Верстка
CSS - внешний вид
Этап 1: Верстка
CSS - внешний вид
Этап 1: Верстка
JS (JavaScript) - поведение
Полноценный язык программирования
Этап 1: Верстка
JS (JavaScript) - поведение
Этап 1: Верстка
JS (JavaScript) - поведение
Этап 1: Верстка
Веб-страница
HTMLCSS
JS
Верстка
Этап 1: Верстка
Адаптивная верстка
Этап 2: JavaScript
DOM (Document Object Model)
Этап 2: JavaScript
DOM (Document Object Model)
Этап 2: JavaScript
DOM (Document Object Model)
$(".mt-profile-box-tweets-value") .text(381);
Этап 2: JavaScript
Попробуйте сами!
1. Откройте Google Chrome или Mozilla Firefox2. Перейдите по ссылке goo.gl/C5g03h3. Нажмите Ctrl+Shift+I4. Откройте вкладку "Консоль"5. Введите код $("a").css("color", "red")6. Нажмите Enter7. Все ссылки станут красными8. Более подробно jquery.com
Этап 2: JavaScript
Сервер Клиент
HTTP$.get("/api/tweets") .then(render);
Асинхронныйзапрос,
JSON-формат
AJAX
(AsynchronousJavaScript And XML)
Этап 3: Паттерн MVC
Этап 3: Паттерн MVC
Model
View2View1 View3
Этап 3: Паттерн MVC
Model
View
Читает имодифицирует
Прослушиваетизменениемодели
Этап 3: Паттерн MVC
Model
View
Читает,но не
модифицирует
Прослушиваетизменениемодели
Односторонний биндинг
Этап 3: Паттерн MVC
Model
View
Модифицирует,но не читает
Односторонний биндинг
Этап 3: Паттерн MVC
Model
View
И читает,и модифицирует
Прослушиваетизменениемодели
Двусторонний биндинг
Этап 3: Паттерн MVC
Двусторонний биндинг
Простой пример
http://enepomnyaschih.github.io/mt/1.4/jwui-property-jwval-two.html
Этап 3: Паттерн MVCО контроллере
Этап 3: Паттерн MVC
Этап 3: Паттерн MVC
https://habrahabr.ru/company/oleg-bunin/blog/311096/
Сергей Аверин
JavaScript-фреймворки: долженостаться только один
Этап 4: Современные средства разработки
Этап 4: Современные средства разработки
Средства для верстки
Этап 4: Современные средства разработки
Языки программирования
Этап 4: Современные средства разработки
Оптимизаторы и анализаторы
Этап 4: Современные средства разработки
Менеджеры зависимостей
Этап 4: Современные средства разработки
Инструменты сборки проекта
Этап 4: Современные средства разработки
Инструменты сборки проекта
Этап 4: Современные средства разработки
Инструменты сборки проекта
Особая способность: UI Usability
Отличия front end разработки от прочих дисциплин
Отличия front end разработки от прочих дисциплин
Взаимодействие с пользователем
Отличия front end разработки от прочих дисциплин
● Взаимодействие с пользователем
Нужно быть художником
Отличия front end разработки от прочих дисциплин
● Взаимодействие с пользователем● Нужно быть художником
Нужно предугадывать реакцию пользователя (usability)
Отличия front end разработки от прочих дисциплин
● Взаимодействие с пользователем● Нужно быть художником● Нужно предугадывать реакцию пользователя (usability)
Нужно восхищать пользователя
Отличия front end разработки от прочих дисциплин
● Взаимодействие с пользователем● Нужно быть художником● Нужно предугадывать реакцию пользователя (usability)● Нужно восхищать пользователя
Нужно рассматривать все сценарии
Отличия front end разработки от прочих дисциплин
● Взаимодействие с пользователем● Нужно быть художником● Нужно предугадывать реакцию пользователя (usability)● Нужно восхищать пользователя● Нужно рассматривать все сценарии
Асинхронность
Отличия front end разработки от прочих дисциплин
● Взаимодействие с пользователем● Нужно быть художником● Нужно предугадывать реакцию пользователя (usability)● Нужно восхищать пользователя● Нужно рассматривать все сценарии
● Асинхронность
Ограничения безопасности
Отличия front end разработки от прочих дисциплин
● Взаимодействие с пользователем● Нужно быть художником● Нужно предугадывать реакцию пользователя (usability)● Нужно восхищать пользователя● Нужно рассматривать все сценарии
● Асинхронность● Ограничения безопасности
Стандартизация (W3C)
Отличия front end разработки от прочих дисциплин
● Взаимодействие с пользователем● Нужно быть художником● Нужно предугадывать реакцию пользователя (usability)● Нужно восхищать пользователя● Нужно рассматривать все сценарии
● Асинхронность● Ограничения безопасности● Стандартизация (W3C)
Кроссбраузерность и кроссплатформенность
Отличия front end разработки от прочих дисциплин
● Взаимодействие с пользователем● Нужно быть художником● Нужно предугадывать реакцию пользователя (usability)● Нужно восхищать пользователя● Нужно рассматривать все сценарии
● Асинхронность● Ограничения безопасности● Стандартизация (W3C)● Кроссбраузерность и кроссплатформенность
Адаптивность
Отличия front end разработки от прочих дисциплин
● Взаимодействие с пользователем● Нужно быть художником● Нужно предугадывать реакцию пользователя (usability)● Нужно восхищать пользователя● Нужно рассматривать все сценарии
● Асинхронность● Ограничения безопасности● Стандартизация (W3C)● Кроссбраузерность и кроссплатформенность● Адаптивность
Обилие инструментов
Отличия front end разработки от прочих дисциплин
● Взаимодействие с пользователем● Нужно быть художником● Нужно предугадывать реакцию пользователя (usability)● Нужно восхищать пользователя● Нужно рассматривать все сценарии
● Асинхронность● Ограничения безопасности● Стандартизация (W3C)● Кроссбраузерность и кроссплатформенность● Адаптивность● Обилие инструментов
Вопросы?
Егор Непомнящих, ISS Art
vk.com/enepomnyaschih
