Профессия "Front-end архитектор"

Transcript

1. Профессия
   «front-end архитектор»
   © Андрей Оконечников, 2007
   

   View Slide

2. Слово.
   

   View Slide

3. Слово.
   

   View Slide

4. Слово.
   

   View Slide

5. spacer.gif
   

   View Slide

6. И началась эпоха
   веб-дизайнеров.
   

   View Slide

7. Дизайнер-
   ремесленник
   

   View Slide

8. Фокусируясь на том, как
   сайт выглядит, дизайнеры
   часто забывают о
   целях и задачах.
   

   View Slide

9. Cайтом должны
   пользоваться люди,
   

   View Slide

10. искать и находить,
    

    View Slide

11. делать покупки,
    

    View Slide

12. читать новости,
    

    View Slide

13. участвовать в
    обсуждениях.
    

    View Slide

14. Стремление быть
    оригинальными
    приводит
    

    View Slide

15. к необычным
    результатам...
    

    View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. Дизайн
    ради дизайна
    

    View Slide

22. не ради
    пользователей
    

    View Slide

23. не ради
    их целей и задач
    

    View Slide

24. не ради
    удовлетворенности
    продуктом или услугой
    

    View Slide

25. 10 фишек
    

    View Slide

26. Почему так
    происходит?
    

    View Slide

27. Очень часто дизайнеры
    думают...
    

    View Slide

28. результат их работы
    — самый важный.
    

    View Slide

29. Это не так!
    

    View Slide

30. Графический
    дизайн — лишь
    один из аспектов
    веб-разработки.
    

    View Slide

31. Такой же, как
    

    View Slide

32. usability,
    

    View Slide

33. accessibility,
    

    View Slide

34. семантика,
    

    View Slide

35. и контент.
    

    View Slide

36. Немногие
    дизайнеры пишут
    код разметки
    страниц.
    

    View Slide

37. Поэтому...
    

    View Slide

38. После создания
    макетов, дизайнер
    выводится из
    проекта,
    

    View Slide

39. а реализацией
    занимаются другие
    люди...
    

    View Slide

40. Дизайнер теряет
    контроль над
    конечным
    продуктом.
    

    View Slide

41. View Slide

42. View Slide

43. Можно относиться
    к дизайну как
    к искусству,
    

    View Slide

44. но это имеет
    мало общего с
    реальным миром
    и
    его потребностями.
    

    View Slide

45. +
    

    View Slide

46. Низкое качество
    разметки страниц
    

    View Slide

47. =
    

    View Slide

48. Source: http://www.accessibility.nl/files/images/tag-soup2-035.jpg
    

    View Slide

49. Source: http://andyhiggs.co.uk/blog/images/162.jpg
    

    View Slide

50. Веб-стандартист
    

    View Slide

51. Появились люди,
    называющие себя
    «веб-стандартисты»
    и выступающие…
    

    View Slide

52. создание
    семантического
    и валидного
    кода
    

    View Slide

53. разделение
    представления
    и содержания
    

    View Slide

54. использование
    безтабличной
    верстки
    

    View Slide

55. Веб-сообщество
    приняло их как
    реальное решение
    накопившихся
    проблем.
    

    View Slide

56. Дизайнеры
    заявляют:
    

    View Slide

57. «Веб-стандарты,
    не являясь выразительным
    средством коммуникации,
    мешают их
    творческой работе»
    

    View Slide

58. Графический
    дизайн не зависит
    от веб-стандартов!
    

    View Slide

59. Source: http://www.uwsp.edu/geo/faculty/ritter/images/maps/ocean_currents.jpg
    

    View Slide

60. Source: http://www.photos-screensaver-maker.com/screen/images/scr-ocean.jpg
    

    View Slide

61. Выверенный и хорошо
    выполненный графический
    дизайн действует на
    пользователей лишь через
    визуальный канал.
    

    View Slide

62. Семантическая разметка,
    на которую «наложена»
    графическая составляющая,
    будет взаимодействовать с
    технологиями и
    механизмами Веба.
    

    View Slide

63. Создать уникальный
    графический дизайн и
    реализовать его, используя
    веб-стандарты, — это
    реальная задача.
    

    View Slide

64. Кроме того...
    

    View Slide

65. хорошая разметка
    ускоряет разработку
    веб-приложений.
    

    View Slide

66. Source: http://www.webdimension.co.uk/
    

    View Slide

67. Время
    front-end
    архитекторов
    

    View Slide

68. Сегодняшняя веб-
    разработка немыслима
    без использования
    серверных фреймворков
    

    View Slide

69. View Slide

70. View Slide

71. призваны упрощать
    и ускорять разработку
    и отладку
    веб-приложений.
    

    View Slide

72. Усложняется логика
    работы приложений.
    

    View Slide

73. Растут объемы данных.
    

    View Slide

74. Это сделало
    стандартом «де-факто»
    наличие в проектах
    системного архитектора.
    

    View Slide

75. системный
    архитектор
    

    View Slide

76. Использование
    серверных
    фреймворков
    предполагает, что
    

    View Slide

77. разработчик должен
    больше думать о
    логике приложения,
    красоте своего кода, его
    объектной модели
    

    View Slide

78. нежели о деталях
    реализации под
    различными браузерами
    и платформами.
    

    View Slide

79. Но!
    

    View Slide

80. Результат работы
    фреймворка не всегда
    идеален и зачастую должен
    быть откорректирован.
    

    View Slide

81. View Slide

82. C развитием серверных
    фреймворков, становятся
    все более сложными и
    фронт-енд технологии.
    

    View Slide

83. и динамическое
    изменение страниц,
    Ajax
    

    View Slide

84. drag & drop
    

    View Slide

85. визуальные эффекты
    

    View Slide

86. сложные элементы
    пользовательского
    интерфейса
    

    View Slide

87. +
    

    View Slide

88. user experience
    

    View Slide

89. usability
    

    View Slide

90. accessibility
    

    View Slide

91. современные
    задачи уже не могут
    быть решены лишь
    с помощью
    

    View Slide

92. HTML & CSS
    

    View Slide

93. безтабличной
    версткии
    

    View Slide

94. умением писать
    валидный код
    

    View Slide

95. Front-end
    архитектура
    

    View Slide

96. Учитывая то количество
    различных технологий
    и способов решения тех
    или иных задач
    

    View Slide

97. часто бывает сложно
    принять решение, какой
    из этих способов следует
    использовать в данном
    конкретном случае.
    

    View Slide

98. — Использовать CSS или
    JavaScript для создания
    выпадающих меню?
    

    View Slide

99. — Использовать
    текстовые, графические
    или sIFR загловки?
    

    View Slide

100. Каждый из способов имеет
     свои плюсы и минусы,
     которые могут иметь разное
     значение в зависимости от
     конкретной ситуации.
     

     View Slide

101. Необходимо знать не
     только слабые и
     сильные стороны
     технологии, но и
     владеть ситуацией.
     

     View Slide

102. Для принятия
     правильного
     решения
     

     View Slide

103. требуется человек,
     способный оценить
     ситуацию в целом,
     учитывая большое
     количество факторов:
     

     View Slide

104. usability
     

     View Slide

105. accessibility
     

     View Slide

106. серверную
     реализацию
     

     View Slide

107. задачи пользователей
     

     View Slide

108. бизнес-цели
     

     View Slide

109. Разметка
     страниц
     

     View Slide

110. Основой фронт-енда
     является HTML
     разметка страниц.
     

     View Slide

111. — Какой doctype стоит
     использовать?
     

     View Slide

112. — Каким (x)HTML
     элементом кодировать тот
     или иной блок на
     странице?
     

     View Slide

113. — Использовать атрибут
     id или class?
     

     View Slide

114. Это зависит от...
     

     View Slide

115. Какой серверный
     фреймворк будет
     использоваться?
     

     View Slide

116. Какая функциональность
     будет на страницах?
     

     View Slide

117. Потребуется ли менять
     внешний вид страниц?
     

     View Slide

118. CSS
     

     View Slide

119. CSS является
     презентационным
     уровнем фронт-енд
     модели приложения.
     

     View Slide

120. — Как организовать CSS
     документы?
     

     View Slide

121. — Создавать имена
     классов или привязать к
     элементам DOM?
     

     View Slide

122. — Использовать
     наследование или писать
     дублирующий код?
     

     View Slide

123. Это зависит от...
     

     View Slide

124. Насколько крупное
     создается приложение?
     

     View Slide

125. Будет ли меняться
     разметка страниц в
     процессе разработки?
     

     View Slide

126. Как взаимосвязана
     функциональность
     страниц?
     

     View Slide

127. JavaScript
     

     View Slide

128. JavaScript & DOM scripting
     — это логика фронт-енд
     приложения.
     

     View Slide

129. — Использовать onclick
     или “unobtrusive”
     обработчики событий для
     элементов?
     

     View Slide

130. — Реализовать
     валидацию на стороне
     клиента или сервера?
     

     View Slide

131. — Назначать стиль
     отображения inline через
     JavaScript или
     использовать className?
     

     View Slide

132. — Организовать код через
     namespaces или
     использовать global scope?
     

     View Slide

133. Это зависит от...
     

     View Slide

134. Что решает эта
     функциональность?
     

     View Slide

135. Как именно она
     должна работать?
     

     View Slide

136. Поддерживают ли данную
     реализацию необходимые
     браузеры?
     

     View Slide

137. Существуют определенные
     практики, знание и владение
     которыми позволит избежать
     множества проблем при
     использовании JavaScript.
     

     View Slide

138. Ajax
     

     View Slide

139. Полный Ajax!
     

     View Slide

140. — Использовать Ajax или
     стандартный механизм с
     обновлением страницы?
     

     View Slide

141. — Какой из вариантов
     наиболее удобен для
     пользователей в контексте
     решаемой задачи?
     

     View Slide

142. — Как это отразится на
     доступности приложения?
     

     View Slide

143. — Смогут ли использовать
     эту функциональность
     пользователи мобильных
     устройств?
     

     View Slide

144. Это зависит от...
     

     View Slide

145. Если отключен JavaScript,
     то Ajax функциональность
     перестанет работать.
     

     View Slide

146. Этот недостаток можно
     обойти, но это потребует
     дополнительных усилий.
     

     View Slide

147. И снова требуется кто-то, кто
     сможет дать рекомендации по
     использованию,
     

     View Slide

148. кто сможет принять
     решение о необходимости
     Ajax в конкретном случае.
     

     View Slide

149. Front-end
     архитектор
     

     View Slide

150. front-end
     архитектор
     

     View Slide

151. View Slide

152. View Slide

153. View Slide

154. View Slide

155. View Slide

156. Какими знаниями и
     навыками должен
     обладать фронт-енд
     архитектор?
     

     View Slide

157. XHTML & CSS
     

     View Slide

158. Кросс-браузерная и
     кросс-платформенная
     совместимость
     

     View Slide

159. JavaScript разработка
     (DOM scripting, Ajax, UI)
     

     View Slide

160. Flash & ActionScript
     

     View Slide

161. Progressive
     Enhancement
     &
     Graceful
     Degradation
     

     View Slide

162. Accessibility
     

     View Slide

163. Usability
     

     View Slide

164. Информационная
     архитектура
     

     View Slide

165. Дизайн
     пользовательских
     интерфейсов
     

     View Slide

166. Визуальный дизайн
     

     View Slide

167. Логика генерации
     страниц
     (ASPX, Rails Views, etc.)
     

     View Slide

168. Бизнес-логика
     

     View Slide

169. • XHTML & CSS
     • Кросс-браузерная и кросс-платформенная совместимость
     • JavaScript разработка (DOM scripting, Ajax, UI)
     • Flash и ActionScript
     • Progressive Enhancement & Graceful Degradation
     • Доступность использования (Accessibility)
     • Удобство использования (Usability)
     • Информационная архитектура
     • Дизайн пользовательских интерфейсов
     • Визуальный дизайн
     • Логика генерации страниц (ASPX, Rails Views, etc.)
     • Бизнес-логика
     

     View Slide

170. +
     

     View Slide

171. Уметь общаться на языке
     разработчиков и принимать
     критические
     интеграционные решения.
     

     View Slide

172. Хороший клиентский код —
     это часть задачи.
     

     View Slide

173. Необходимо, чтобы код
     взаимодействовал с
     серверной частью в реальных
     условиях.
     

     View Slide

174. Фронт-енд архитектор
     должен
     

     View Slide

175. владеть ситуацией на
     высоком уровне
     

     View Slide

176. уметь оценить
     преимущества и
     недостатки
     

     View Slide

177. руководствуясь
     множеством
     факторов.
     

     View Slide

178. View Slide

179. Умение писать код,
     

     View Slide

180. проектировать
     пользовательские
     интерфейсы,
     

     View Slide

181. владеть
     современными
     технологиями,
     

     View Slide

182. следить за их
     развитием
     

     View Slide

183. обязательные
     качества
     специалиста.
     

     View Slide

184. Будущее
     профессии
     

     View Slide

185. Пусть этим занимаются
     системные архитекторы?
     

     View Slide

186. Системные архитекторы
     поглощены техническими
     аспектами разработки.
     

     View Slide

187. Когда такие
     профессионалы будут
     востребованы?
     

     View Slide

188. Вчера!
     

     View Slide

189. Обязательно ли это
     связано с интернетом и
     «социальными» или
     «Веб 2.0» сервисами?
     

     View Slide

190. Отнюдь!
     

     View Slide

191. Российский
     рынок труда
     

     View Slide

192. Компании не доверяют
     многопрофильным
     специалистам и
     предпочитают нанимать
     узконаправленных фронт-енд
     специалистов:
     

     View Slide

193. графических дизайнеров,
     

     View Slide

194. кодировщиков HTML/CSS,
     

     View Slide

195. JavaScript разработчиков.
     

     View Slide

196. Но!
     

     View Slide

197. они не смогут решить 100%
     возникающих проблем.
     

     View Slide

198. Спрос на фронт-енд
     архитекторов появится в
     ближайшее время.
     

     View Slide

199. Кто-то должен управлять
     узкопрофильными
     специалистами,
     координировать их действия,
     отвечая за конечный результат.
     

     View Slide

200. А что сейчас?
     

     View Slide

201. В настоящий момент явного
     спроса на фронт-енд
     архитекторов в России не
     существует.
     

     View Slide

202. «Многостаночник» не может
     хорошо владеть всеми
     заявленными знаниями.
     

     View Slide

203. Относительная дороговизна
     таких сотрудников.
     

     View Slide

204. Не уделяется должного
     внимания вопросам usability,
     user experience, accessibility...
     

     View Slide

205. Подводя итог
     

     View Slide

206. Современному
     фронт-енду требуются
     свои архитекторы.
     

     View Slide

207. Чем более сложные
     приложения будут
     разрабатываться,
     

     View Slide

208. тем больше эта
     потребность будет расти.
     

     View Slide

209. Отреагировать на
     изменения рынка —
     задача сегодняшних
     специалистов.
     

     View Slide

210. Спасибо за
     внимание.
     

     View Slide

211. Андрей Оконечников
     andrej.okonetschnikow@gmail.com
     © Андрей Оконечников, 2007
     

     View Slide