Другое

Компонентный подход в программировании: что это и где его используют?

Lorem ipsum dolor

Компонентный подход в программировании — это относительно недавний подход, если сравнивать его с другими. Пришел он с массовым появлением фреймворков. Суть его сводится к тому, что разработка одной большой программы производится с применением «заготовок» кода, что где-то напоминает детский конструктор Лего. Ребенок может собирать из конструктора что угодно, но когда ему нужен «человечек» или колесо, он просто берет уже готовый компонент, а не собирает его с нуля.

Компонентный подход в программировании очень четко следует принципу DRY (Don't Repeat Yourself), что означает «не повторяйся».

 

Компонентный подход в программировании

Когда нужно писать один и тот же код по несколько раз в течение одной программы, это приносит массу трудностей:

  • в первую очередь это отнимает очень много времени, и все остальные причины тоже так или иначе связаны со временем;

  • если нужно внести корректировки в этот фрагмент кода, то это нужно сделать во всех местах;

  • когда приходит новый разработчик, ему очень трудно найти все места, где расположены одинаковые фрагменты кода, когда их нужно корректировать;

  • и др.

Время — это одна из самых важных метрик в современной разработке. Это прекрасно знают работающие разработчики, которые часто сталкиваются с нереальным временем дедлайнов, когда приходится работать по 12-15, а то и больше часов, чтобы успеть. Компонентный подход в программировании дает возможность выиграть время. Потому что вы можете разработать код один раз, но потом вызывать его сколько угодно всего лишь одной строчкой кода. Это хорошо видно на примере ниже.

 

Компонентный подход программирования: пример 

Все, кто интересуется IT, хотя бы раз в жизни слышали о таком фреймворке, как React. На нем очень сильно развит компонентный подход в программировании. Давайте посмотрим, как на нем легко и просто из отдельных «кирпичиков» складывается header.

Пример кода:

import React from `react`;

import {Logo, ProfileImage, BurgerMenu, HeaderWrapper}

from `components`;

const Header = () => (

  <HeaderWrapper>

     <Logo></Logo>

     <ProfileImage></ProfileImage>

     <BurgerMenu></BurgerMenu>

  </HeaderWrapper>

)

export default Header

Тот, кто хоть раз писал header на чистом HTML, понимает, насколько удобнее компонентный подход в программировании на React.

 

Компонентный подход в программировании: немного истории

Компонентный подход задает очень лаконичную и читаемую структуру кода. Это облегчает дальнейшую поддержку разработанного приложения. Если ваша разработка — это небольшой одностраничный сайт, то плюсы от компонентного подхода не будут так заметны. Но если у вас реализован большой проект, то отличная структура будет как нельзя кстати. Однако отличную структуру можно обеспечить как раз компонентным подходом в программировании.

Очень часто можно услышать или прочитать о багах в крупных ресурсах, например, в Фейсбуке, в ВК, Google и др. Баги выглядят простыми, а решать их очень сложно из-за того, что в разработке использован трудночитаемый и запутанный код какого-нибудь языка программирования. Большинство критиков в этом случае твердят, что это плохой язык программирования. Такую критику часто можно услышать в сторону языка PHP. Но фактически язык-то ни в чем не виноват. Виновата плохая структуризация проекта, что приводит к проблемам при чтении кодовых документов и решении багов.

Все мы знаем, что тот же React это детище Фейсбука. Но мало кто знает, что причиной разработки этого фреймворка стали проблемы с исправлением ошибок на самом Фейсбуке. В 2012-2013 годах у этой соцсети появились проблемы с уведомлениями на личных страницах соцсетей:

  • приходили уведомления о событиях (над «колокольчиком» загоралась красная цифра), но когда пользователь открывал «Уведомления», то там было пусто;

  • такая же ситуация с их внутренним мессенджером — над значком появлялись оповещения о сообщении, но когда пользователь открывал мессенджер, то там было пусто.

Вроде бы проблемы небольшие, но их долгое время не могли решить, потому что попросту не могли найти, где это сделать. Настолько «запутанным» был код Фейсбука. Окончательно эту проблему решили только внедрение React и его компонентный подход в программировании.

Хочется заметить, что Реакт не был первопроходцем в компонентном программировании, до него существовали и другие фреймворки, которые позволяли точно так же программировать, тот же Angular или Backbone. Просто при React и Vue.js компонентный подход в программировании стал более широко использоваться программистами, поэтому эту парадигму приписывают именно данным фреймворкам.

 

Заключение

Компонентный подход в программировании помогает писать код один раз и использовать его где нужно, в рамках одного проекта. Когда будете работать над большим проектом, обязательно попробуйте его применить — вы сразу заметите много плюсов.

Схожие статьи

Настройка VR-джойстика: с чего начать, описание, примеры кода
Другое

Настройка VR-джойстика: с чего начать, описание, примеры кода

Стратегии защиты информации: основные сведения и виды стратегий
Другое

Стратегии защиты информации: основные сведения и виды стратегий

Как настроить CLion актуальной версии для запуска и компиляции
Другое

Как настроить CLion актуальной версии для запуска и компиляции

Whitespace: язык программирования с самым необычным синтаксисом
Другое

Whitespace: язык программирования с самым необычным синтаксисом