Современные технологии в ИТ-индустрии

Кто я?

• Разрабатывают интерфейсы 12 лет
• Пишу код 8 лет
• Работа в студиях, сейчас — сам по себе
• Наставничаю в .html academy

О чем этот доклад?

О чем этот доклад?

• Дизайн?

О чем этот доклад?

• Дизайн?
• Верстка?

О чем этот доклад?

• Дизайн?
• Верстка?
• JS и фреймворки?

О чем этот доклад?

• Дизайн?
• Верстка?
• JS и фреймворки?
• ci/cd?

О чем этот доклад?

• Дизайн?
• Верстка?
• JS и фреймворки?
• ci/cd?
• Инструменты?

О чем этот доклад?

• Дизайн
• Верстка
• JS и фреймворки
• ci/cd
• Инструменты

Как выбирал технологии

• Личный опыт ежедневного использования
• Чему учат в .html academy
• Узнал у коллег и в сообществе
• Посмотрел вакансии и исследования по ним

И вот что получилось:

• Photoshop
• Sketch
• Figma
• Adobe XD
• Zeplin
• Avocode
• Node.js
• npm
• yarn
• Grunt
• Gulp
• Webpack
• Parcel
• editorconfig
• stylelint
• eslint
• Docker
• Pug
• Twig
• Nunjucks
• SASS
• LESS
• PostCSS
• ECSS
• SMACSS
• БЭМ
• jQuery
• React
• Vue
• Angular
• Svelte
• TypeScript
• Mocha
• Jest
• Git
• SVN
• GitHub
• Gitlab
• Bitbucket
• Netlify
• Heroku
• Vercel
• Redux
• Nuxt
• OOP
• FP
• REST
• Gatsby
• 11ty
• JAMStack
• CMS
• Headless CMS

Упорядочим их:

Макеты

Макеты

• I–II век н. э. — Photoshop

Макеты

• 2000 г. — Photoshop

Макеты

• 2000 г. — Photoshop
• 2010 г. — Sketch

Макеты

• 2000 г. — Photoshop
• 2010 г. — Sketch
• 2014–2015 г. — Zeplin / Avocode

Макеты

• 2000 г. — Photoshop
• 2010 г. — Sketch
• 2014–2015 г. — Zeplin / Avocode
• 2012 г. 2018 г. — Figma

UI-инструменты в 2020

Шаблони-
заторы

Шаблонизаторы

Генерируют HTML

• Помогают с изменениями повторяющихся частей кода
• Используются в генераторах статики

Шаблонизаторы

• Pug
• Twig
• Nunjucks

Пре-
и пост-
процессоры

Препроцессоры

Компилируются в CSS из собственного формата и могут
больше, чем CSS

• Переменные и миксины
• Математика
• Деление на файлы
• Циклы и функции
• Вложенные селекторы

Препроцессоры

Компилируются в CSS из собственного формата и могут
немного больше, чем CSS

• Переменные и миксины
• Математика
• Деление на файлы
• Вложенные селекторы
• Циклы и функции

Препроцессоры

Компилируются в CSS из собственного формата и могут
немного больше, чем CSS

• LESS
• SASS
• Stylus

Постпроцессоры

PostCSS: обрабатывает уже готовый CSS

Методологии

Методологии

• ECSS
• SMACSS
• БЭМ
• ...

Методологии

• Решают проблему нейминга
• Помогают организовать код
• Делают код переиспользуемым

Методологии

• ECSS
• SMACSS
• БЭМ
• Компонентный подход

JS, фреймворки и библиотеки

JS, фреймворки и библиотеки

• 1995 г. — JavaScript
• 2006 г. — jQuery

JS, фреймворки и библиотеки

• 1995 г. — JavaScript
• 2006 г. — jQuery
• 2009 г. — JavaScript ES5

JS, фреймворки и библиотеки

• 1995 г. — JavaScript
• 2006 г. — jQuery
• 2009 г. — JavaScript ES5
• 2015 г. — JavaScript ES6 / ES-2015

JS, фреймворки и библиотеки

• 1995 г. — JavaScript
• 2006 г. — jQuery
• 2009 г. — JavaScript ES5
• 2015 г. — JavaScript ES6 / ES-2015
• SPA:
  2010 г. — Angular
  2013 г. — React
  2014 г. — Vue.js
  2016 г. — Svelte

JS, фреймворки и библиотеки

• 1995 г. — JavaScript
• 2006 г. — jQuery
• 2009 г. — JavaScript ES5
• 2015 г. — JavaScript ES6 / ES-2015
• 2010–2014 гг. — Angular, React, Vue.js
• 2012 г. — TypeScript

Сборка

Сборка

Node.js

Используется для создания серверных приложений на языке JavaScript

Сборка

Node.js

Используется для создания серверных приложений на языке JavaScript

Используется для сборки проектов

Сборка

Как запустить

• npm
• yarn
• pnpm

Сборка

Чем собирать

• Grunt
• Gulp
• Webpack
• Parcel

Сборка

Docker

Докер помогает создавать и использовать контейнеры: изолированную среду для запуска приложений в конкретном окружении со всеми настройками и зависимосятми.

Тесты и линтеры

Линтеры

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

Не влияют на работоспособность кода.

Линтеры

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

А это точно важно?

Линтеры

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

Да, это важно.

Линтеры

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

• editorconfig
  оформляет весь код, дружит редакторы
• stylelint
  оформляет CSS
• eslint
  оформляет JavaScript

Тесты

Проверяют работоспособность кода. Запускаются после внесения изменений.

• предотвращают поломку продакшена
• легче и спокойнее сопровождать
• TDD (test driven development)

Тесты

Проверяют работоспособность кода. Запускаются после внесения изменений.

Версии, хранение и публикация

Контроль версий

Хранение кода

Публикация

• GitHub pages
• Netlify
• Heroku
• Vercel

Спасибо!

Кстати, а вот что используется прямо в этой презентации:

• Node.js
• npm
• Git
• GitHub
• Netlify