2017-03-26 02 Егор Непомнящих. Что такое web front end, и с чем его...

Что такое 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: Версткаwebref.ru

Этап 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: JavaScriptlearn.javascript.ru

Этап 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: Паттерн MVCtodomvc.com

Этап 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

Особая способность: UI Usabilityhttp://www.goodui.org/

Отличия 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

enepomnyaschih@issart.com

vk.com/enepomnyaschih