Что такое Компонентно-ориентированное программирование(COP)
COP vs OOP.
Компонентно-ориентированное программирование — новое объектно-ориентированное программирование.
C развитием все новых front-end фреймворков — таких как React, Angular и Vue — появляются также и новые парадигмы. Одной из таких является компонентно-ориентированная парадигма. Её основная идея — это складывание воедино компонентов, чем-то похожих на кусочки Lego.
В основе COP лежит правило DRY — Don’t Repeat Yourself (с англ. — не повторяйся). Повторения в коде малоэффективны и затратны по времени. Чем меньше повторений, тем быстрее идет разработка приложения. Учитывая дедлайны, которые зачастую ставят заказчики, скорость разработчики является чуть ли не одной из главных метрик.
Как выглядит Компонентно-ориентированное программирование(COP)?
Если вы знаете какой-либо front-end фреймворк, например React, Angular или Vue, то вам должно быть знакомо, как выглядит компонентно-ориентированная архитектура. Вот небольшой пример компонента Header
В данном блоке кода мы импортируем компоненты, создаем композицию и складываем их как кирпичики.
Проблемы, которые решает компонентно-ориентированная парадигма.
COP — это очень мощная концепция, ибо она позволяет нам изолировать и инкапсулировать логику. Чем меньше наши файлы — тем более они поддерживаемы. Компании Facebook пришлось исправлять всем известную ошибку уведомлений. Где-то в 2014–15 гг. на персональной страничке пользователя показывало, что у него есть новые сообщения. Когда же пользователь нажимал на красный колокол(указания о новых сообщениях), никаких новых сообщений у пользователя не было. Это вызывало негодования пользователей по всему интернету. Причиной этого бага были огромные файлы с трудночитаемым и запутанным PHP кодом. Проблема была не в языке программирования, а в структуризации.
React был изобретен компанией Facebook именно для решения бага уведомлений. Релиз фреймворка React ознаменовал начало новой эры — эры компонентно-ориентированной парадигмы.
Мой прогноз — будущее за нативными веб-компонентами. На данный момент каждая инфраструктура имеет свою собственную экосистему инструментов, компонентов, библиотек и т. д. Хотя удобно использовать оупенсорсный код, нехорошо то, что каждая экосистема является замкнутой. Если вы используете React, то вы должны ограничиваться только React. Вы не можете использовать инструменты Angular, Vue или Svelte. Нативные Веб Компоненты изменят все это.
Подумайте только, как здорово, если бы мы могли использовать инструментарий различных библиотек одновременно.
Допустим кто-то написал потрясающую библиотеку анимации, которая совместима со всеми фреймворками. Это именно то, к чему стремится API-интерфейс веб-компонентов. Если вы хотите узнать больше про API веб-компонентов — вот ссылка на статью.
API Веб-Компонентов
API, совместимый со всеми JavaScript библиотеками и фреймворками, — это круто. Пишешь код один раз, а используешь много. Вот так выглядит обычная кнопка с использованием веб-компонентов:
Веб-компонент представляет собой простой фрагмент кода на основе классов с наследованием. Обратите внимание, как мы расширяем нашу кнопку для наследования класса HTMLElement.
Если вам интересно узнать больше о веб-компонентах, обратитесь к документации Mozilla. У Mozilla очень хорошо структурированная и понятная документация.
В следующий раз, когда вам нужно будет решить какую-то проблему, постарайтесь использовать компонентно-ориентированный подход. Этот подход действительно хорош, особенно в тех случаях, когда перед вами стоит большая задача. Разделяй и властвуй!
Браузерная поддержка API веб-компонентов
Имейте в виду, что это относительно экспериментальная технология, и никто не знает, когда и как она будет стандартизирована, но всегда хорошо быть в курсе событий и держать руку на пульсе касательно новых и интересных технологий, связанных с программированием.
P.S. Если вы новичок в JavaScript и хотите выучить этот язык, я рекомендую вам начать с прочтения книг, которые охватывают фундаментальные вещи. Вот вам одна рекомендация: “A Smarter Way to Learn JavaScript”
Спасибо и Счастливого кодинга!
