Как я перестал верить технологиям

Технологии призваны приводить процессы к автоматизации для повышения эффективности человеческой деятельности. Однако, постоянная смена технологий, как правило, даёт обратный результат.

Я объясню, почему нельзя использовать все технологии подряд, и почему такой метод с большой вероятностью окажется бесполезным и неэффективным — расскажу, почему нельзя менять эмбер на ангуляр, потом на реакт, а потом обратно на ангуляр; почему нельзя прыгать с препроцессора на препроцессор.

Я поделюсь своим опытом и примерами, когда постоянная смена технологий не помогла проектам выстрелить и сделать их прорывными.

Ссылка на видео c WSD: https://www.youtube.com/watch?v=p5g4giWmcvE

Transcript

1. Алексей Симоненко Веб-евангелист в HTML Academy 2016 Как я перестал верить технологиям
3. Разработчики не хотят тратить вермя на HTML- и CSS-код
4. Библиотека компонентов
5. <!-- news.html --> <template id="news"> <News> <Article> {name} <Time datetime="{date}">{date} </Time> {description} <Link href="{link}">Подробнее </Link> </Article> </News> </template> Разметка отдельно от компонентов
6. // news.js import {getJSX} from "hype"; export default class News extends Component { render: () => getJSX("#news") } Разметка отдельно от компонентов
7. // element.scss $element-height: 100px; $element-padding-left: 20px; // element.js import {getConstants} from "hype"; let constants = getConstants("element.scss"); export default class Element extends Component { render: () => { // NB! Обязательно использовать нотацию в квадратных скобках, // потому что он импортирует названия буквально, символ в символ. return <div style={{ "paddingLeft": constants["element-padding-left"], "height": constants["element-height"] }} />; } } Импорт констант из SCSS
8. <!-- element.html --> <template id="element" data-style="element.scss"> <div style=" padding-left: $element-padding-left, height: $element-height " /> </template> Импорт констант из SCSS в разметку
9. // element.scss .element { width: 300px; background-color: #ff0000; } // element.js import {getCSSClasses} from "hype"; let names = getCSSClasses("element.scss"); export default class Element extends Component { render: () => { return <div className={{ names["element"] }} />; } } Импорт названий CSS-классов
10. .a{width:300px;background:red} <div class="a"> </div> Обфускация CSS-классов
11. Роутинг?
12. export default Router({ "/": App }); Встроенный роутер
13. export default Router({ "/": App }); Встроенный роутер , "/search": { "load": () => {}, "enter": () => {}, "leave": () => {} }
14. Вебпак?
15. Встроенный сборщик – Автоконфигурирование
16. Встроенный сборщик – Автоконфигурирование – Hot Loader
17. Встроенный сборщик – Автоконфигурирование – Hot Loader – Удаление неиспользуемого кода
18. Встроенный сборщик – Автоконфигурирование – Hot Loader – Удаление неиспользуемого кода – Оптимизация кода
19. Встроенный сборщик – Автоконфигурирование – Hot Loader – Удаление неиспользуемого кода – Оптимизация кода – Обфускация CSS-классов
20. Встроенный сборщик – Автоконфигурирование – Hot Loader – Удаление неиспользуемого кода – Оптимизация кода – Обфускация CSS-классов – Фриз статики
21. Интеграция с бэкендом
22. В два раза меньше React A ngular 1 A ngular 2 Em ber H ype Выдуманные цифры для несуществующего графика за 2016 год
23. В полтора раза быстрее Выдуманные цифры для несуществующего графика за 2016 год React H ype
24. – Vice President of Information Technology “Обратная совместимость с Реактом — залог быстрого перехода.”
25. Hype.js – Упрощённый рендеринг на сервере – Большая библиотека компонентов – Разметка отдельно от компонентов – Интеграция с SCSS – В два раза меньше – В полтора раза быстрее
26. Но всё это козни маркетологов Hype.js не существует
27. 16 лет назад
28. Мы делали невероятные штуки – Наше меню выпадало – Наши кнопки меняли картинки при ховере – Наши снежинки летали
29. Моя история JS-библиотек Prototype.js
30. Моя история JS-библиотек Prototype.js Dojo Toolkit
31. Моя история JS-библиотек Prototype.js Dojo Toolkit YUI Library
32. Моя история JS-библиотек Prototype.js Dojo Toolkit YUI Library jQuery
33. Моя история JS-библиотек Prototype.js Dojo Toolkit YUI Library jQuery VanillaJS
34. Время MVC, MVP, MVVM и других странных аббревиатур
35. Проект новой CRM – SPA-приложение
36. Проект новой CRM – SPA-приложение – Backbone.js
37. Проект новой CRM – SPA-приложение – Backbone.js – Полное управление с клавиатуры
38. Проект новой CRM – SPA-приложение – Backbone.js – Полное управление с клавиатуры – Моментальное создание, редактирование, поиск
39. И ты такой…
40. А на самом деле…
41. Проект новой CRM – SPA-приложение – Backbone.js – Полное управление с клавиатуры – Моментальное создание, редактирование, поиск – Тонны костылей
42. Мы любим решать сложные задачи и не любим доводить проекты до конца.
43. Сайт конференции в 2012 году
44. Проект на Node.js в 2012 году – Авторизация?
45. Проект на Node.js в 2012 году – Авторизация? – Платёжные гейты?
46. Проект на Node.js в 2012 году – Авторизация? – Платёжные гейты? – Отправка почты?
47. Проект на Node.js в 2012 году – Авторизация? – Платёжные гейты? – Отправка почты? – Частые обновления!
48. Проект на Node.js в 2012 году – Авторизация? – Платёжные гейты? – Отправка почты? – Частые обновления! – Очень много работы вместо сна!
49. Берегите свой мозг 36 youtube.com/watch?v=nIFClfBXuIQ
50. Берегите свой мозг 36 youtube.com/watch?v=nIFClfBXuIQ 5 минут youtube.com/watch?v=iBHr8gKc5L8
51. Мог я сделать по-другому?
52. Выбор модных технологий не даёт никаких преимуществ новому продукту.
53. Сайт Академии в 2012 году
54. Сайт Академии в 2014 году
55. Сайт Академии в 2016 году
56. Самое важное — это продукт, а не технологии.
57. Моя история препроцессоров LESS
58. Моя история препроцессоров LESS Sass
59. Моя история препроцессоров LESS Sass Rework
60. Моя история препроцессоров LESS Sass Rework PostCSS
61. Моя история препроцессоров LESS Sass Rework PostCSS Sass
62. Моя история препроцессоров LESS Sass Rework PostCSS Sass PostCSS
64. Делайте продукты для людей вместо возни с технологиями.
65. KharkivJS #5 youtube.com/watch?v=xPFRUM_oDKA
66. Использовать новые технологии? Использовать старые технологии? или
67. Как узнавать новое? – Читайте известных разработчиков
 github.com/talgautb/frontenders/blob/master/ru.md
68. Как узнавать новое? – Читайте известных разработчиков
 github.com/talgautb/frontenders/blob/master/ru.md – Ходите на конференции и городские митапы
 github.com/web-standards-ru/frontend-confs
69. Как узнавать новое? – Читайте известных разработчиков
 github.com/talgautb/frontenders/blob/master/ru.md – Ходите на конференции и городские митапы
 github.com/web-standards-ru/frontend-confs – Читайте «Веб-стандарты»
 twitter.com/webstandards_ru
70. Как узнавать новое? – Читайте известных разработчиков
 github.com/talgautb/frontenders/blob/master/ru.md – Ходите на конференции и городские митапы
 github.com/web-standards-ru/frontend-confs – Читайте «Веб-стандарты»
 twitter.com/webstandards_ru – Слушайте «Веб-стандарты»
 soundcloud.com/web-standards
71. А как же новички?
72. Дилетанты повсюду – Бутстрапщики
73. Дилетанты повсюду – Бутстрапщики – Интеграторы jQuery-плагинов
74. Дилетанты повсюду – Бутстрапщики – Интеграторы jQuery-плагинов – Интеграторы React-компонентов
75. Дилетанты повсюду – Бутстрапщики – Интеграторы jQuery-плагинов – Интеграторы React-компонентов – ES6-ваятели
76. Социальная ответственность
77. Социальная ответственность – Говорить не только о достоинствах, но и о недостатках
78. Социальная ответственность – Говорить не только о достоинствах, но и о недостатках – Говорить о том, где можно использовать, а где нет
79. Социальная ответственность – Говорить не только о достоинствах, но и о недостатках – Говорить о том, где можно использовать, а где нет – Прекратить ненавидеть людей за выбор технологий
81. Социальная ответственность – Говорить не только о достоинствах, но и о недостатках – Говорить о том, где можно использовать, а где нет – Прекратить ненавидеть людей за выбор технологий – Меньше категоричности, больше прагматичности
82. htmlacademy.ru simonenko @simonenko Спасибо!