Расскажу, чем разработка front end для Web отличается от остальных дисциплин программирования. Чему нужно научиться, чтобы разрабатывать быстрые, удобные и интуитивно понятные пользовательские интерфейсы.

1. Что такое Web front end,
и с чем его едят
Егор Непомнящих, ISS Art,
старший инженер-программист

2. О себе
2005-2010 - ОмГУ ИМИТ
c 2008 - ИСС Арт
Специализация: JavaScript, TypeScript
Умения: Java, Scala, Unity 3D,
PHP, Ruby
Team lead

3. Что такое Web front end
Front endAPI

4. Этап 1: Верстка
webref.ru

5. Этап 1: Верстка
Веб-страница

6. Этап 1: Верстка
Веб-страница
HTML
CSS
JS

7. Этап 1: Верстка
HTML - разметка
(HyperText Markup Language)

8. Этап 1: Верстка
HTML - разметка
(HyperText Markup Language)

9. Этап 1: Верстка
HTML - разметка
Может выдаваться сервером

10. Этап 1: Верстка
HTML - разметка
Может строиться на клиенте

11. Этап 1: Верстка
CSS - внешний вид
(Cascade StyleSheets)

12. Этап 1: Верстка
CSS - внешний вид

13. Этап 1: Верстка
CSS - внешний вид

14. Этап 1: Верстка
JS (JavaScript) - поведение
Полноценный язык программирования

15. Этап 1: Верстка
JS (JavaScript) - поведение

16. Этап 1: Верстка
JS (JavaScript) - поведение

17. Этап 1: Верстка
Веб-страница
HTML
CSS
JS
Верстка

18. Этап 1: Верстка
Адаптивная верстка

19. Этап 2: JavaScript
learn.javascript.ru

20. Этап 2: JavaScript
DOM (Document Object Model)

21. Этап 2: JavaScript
DOM (Document Object Model)

22. Этап 2: JavaScript
DOM (Document Object Model)
$(".mt-profile-box-tweets-value")
.text(381);

23. Этап 2: JavaScript
Попробуйте сами!
1. Откройте Google Chrome или Mozilla Firefox
2. Перейдите по ссылке goo.gl/C5g03h
3. Нажмите Ctrl+Shift+I
4. Откройте вкладку "Консоль"
5. Введите код
$("a").css("color", "red")
6. Нажмите Enter
7. Все ссылки станут красными
8. Более подробно jquery.com

24. Этап 2: JavaScript
Сервер Клиент
HTTP$.get("/api/tweets")
.then(render);
Асинхронный
запрос,
JSON-формат
AJAX
(Asynchronous
JavaScript And XML)

25. Этап 3: Паттерн MVC
todomvc.com

26. Этап 3: Паттерн MVC

27. Этап 3: Паттерн MVC
Model
View2View1 View3

28. Этап 3: Паттерн MVC
Model
View
Читает и
модифицирует
Прослушивает
изменение
модели

29. Этап 3: Паттерн MVC
Model
View
Читает,
но не
модифицирует
Прослушивает
изменение
модели
Односторонний биндинг

30. Этап 3: Паттерн MVC
Model
View
Модифицирует,
но не читает
Односторонний биндинг

31. Этап 3: Паттерн MVC
Model
View
И читает,
и модифицирует
Прослушивает
изменение
модели
Двусторонний биндинг

32. Этап 3: Паттерн MVC
Двусторонний биндинг
Простой пример
http://enepomnyaschih.github.io/mt/1.4/jwui-property-jwval-two.html

33. Этап 3: Паттерн MVC
О контроллере

34. Этап 3: Паттерн MVC

35. Этап 3: Паттерн MVC
https://habrahabr.ru/company/oleg-bunin/blog/311096/
Сергей Аверин
JavaScript-фреймворки: должен
остаться только один

36. Этап 4: Современные средства разработки

37. Этап 4: Современные средства разработки
Средства для верстки

38. Этап 4: Современные средства разработки
Языки программирования

39. Этап 4: Современные средства разработки
Оптимизаторы и анализаторы

40. Этап 4: Современные средства разработки
Менеджеры зависимостей

41. Этап 4: Современные средства разработки
Инструменты сборки проекта

42. Этап 4: Современные средства разработки
Инструменты сборки проекта

43. Этап 4: Современные средства разработки
Инструменты сборки проекта

44. Особая способность: UI Usability

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

46. Отличия front end разработки от прочих дисциплин

47. Отличия front end разработки от прочих дисциплин
Взаимодействие с пользователем

48. Отличия front end разработки от прочих дисциплин
● Взаимодействие с пользователем
Нужно быть художником

49. Отличия front end разработки от прочих дисциплин
● Взаимодействие с пользователем
● Нужно быть художником
Нужно предугадывать реакцию
пользователя (usability)

50. Отличия front end разработки от прочих дисциплин
● Взаимодействие с пользователем
● Нужно быть художником
● Нужно предугадывать реакцию пользователя (usability)
Нужно восхищать пользователя

51. Отличия front end разработки от прочих дисциплин
● Взаимодействие с пользователем
● Нужно быть художником
● Нужно предугадывать реакцию пользователя (usability)
● Нужно восхищать пользователя
Нужно рассматривать все сценарии

52. Отличия front end разработки от прочих дисциплин
● Взаимодействие с пользователем
● Нужно быть художником
● Нужно предугадывать реакцию пользователя (usability)
● Нужно восхищать пользователя
● Нужно рассматривать все сценарии
Асинхронность

53. Отличия front end разработки от прочих дисциплин
● Взаимодействие с пользователем
● Нужно быть художником
● Нужно предугадывать реакцию пользователя (usability)
● Нужно восхищать пользователя
● Нужно рассматривать все сценарии
● Асинхронность
Ограничения безопасности

54. Отличия front end разработки от прочих дисциплин
● Взаимодействие с пользователем
● Нужно быть художником
● Нужно предугадывать реакцию пользователя (usability)
● Нужно восхищать пользователя
● Нужно рассматривать все сценарии
● Асинхронность
● Ограничения безопасности
Стандартизация (W3C)

55. Отличия front end разработки от прочих дисциплин
● Взаимодействие с пользователем
● Нужно быть художником
● Нужно предугадывать реакцию пользователя (usability)
● Нужно восхищать пользователя
● Нужно рассматривать все сценарии
● Асинхронность
● Ограничения безопасности
● Стандартизация (W3C)
Кроссбраузерность и
кроссплатформенность

56. Отличия front end разработки от прочих дисциплин
● Взаимодействие с пользователем
● Нужно быть художником
● Нужно предугадывать реакцию пользователя (usability)
● Нужно восхищать пользователя
● Нужно рассматривать все сценарии
● Асинхронность
● Ограничения безопасности
● Стандартизация (W3C)
● Кроссбраузерность и кроссплатформенность
Адаптивность

57. Отличия front end разработки от прочих дисциплин
● Взаимодействие с пользователем
● Нужно быть художником
● Нужно предугадывать реакцию пользователя (usability)
● Нужно восхищать пользователя
● Нужно рассматривать все сценарии
● Асинхронность
● Ограничения безопасности
● Стандартизация (W3C)
● Кроссбраузерность и кроссплатформенность
● Адаптивность
Обилие инструментов

58. Отличия front end разработки от прочих дисциплин
● Взаимодействие с пользователем
● Нужно быть художником
● Нужно предугадывать реакцию пользователя (usability)
● Нужно восхищать пользователя
● Нужно рассматривать все сценарии
● Асинхронность
● Ограничения безопасности
● Стандартизация (W3C)
● Кроссбраузерность и кроссплатформенность
● Адаптивность
● Обилие инструментов

59. Вопросы?
Егор Непомнящих, ISS Art
enepomnyaschih@issart.com
vk.com/enepomnyaschih