Designing the structure and content of the remote class selecting components реферат

Обновлено: 04.07.2024

Помимо компонентов на основе функций, React позволяет определять компоненты на основе классов, которые, как в случае реализации ловушки для ошибок просто не заменимы. Кроме этого, с ними необходимо познакомиться, так как они являются частью React. Именно поэтому текущая глава полностью посвящена старым добрым классовым компонентам.

Производные от Component

Пользовательские компоненты построенные на основе классов обязаны расширять базовый обобщенный класс Component

имеющего три необязательных параметра типа.

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

Кроме того в нашем примере у метода render отсутствует аннотация возвращаемого типа, что на практике даже приветствуется. Но с образовательной точки зрения её указание не принесет никакого вреда.

При переопределении производным классом метода render в качестве типа возвращаемого значения необходимо указывать тип совместимый с указанным в базовом классе, то есть с типом ReactNode поведение и нюансы которого были подробно рассмотрены в главе посвященной функциональным компонентам.

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

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

Параметры Props¶

Начнем по порядку, а именно с Props . Несмотря на то что пропсы делятся на обязательные и необязательные, все они по мере необходимости передаются в качестве аргументов конструктора при создании его экземпляра и доступны по ссылке this.props (обозначим их как общие пропсы). Тем не менее за инициализацию необязательных пропсов ответственен сам классовый компонент для чего и предусмотренно статическое поле defaultProps .

Тот факт что аннотация defaultProps предполагает тип представляющий лишь ассоциированное с этим полем значение вынуждает разделить декларацию общих пропсов на два типа DefaultProps и Props . Ввиду того что тип Props представляет не только обязательные пропсы, но и необязательные, он должен расширять ( extends ) тип DefaultProps .

Не будет лишним упомянуть что в реальных проектах интерфейс Props , помимо DefaultProps , очень часто расширяет множество других интерфейсов. В их число входят типы, предоставляемые библиотеками ui, hoc обертками и обычными библиотеками, как например react-router и его тип RouteComponentProps .

Поскольку в описании базового класса поле ( this.props ) принадлежит к типу определенного в качестве первого параметра типа, то есть Component

, то Props необходимо указать в аннотации не только первого параметра конструктора, но и в качестве первого аргумента базового типа. Иначе this.props так и останется принадлежать к простому объектному типу <> заданному по умолчанию.

Как было сказано в теме посвященной функциональным компонентам, что если взять за правило именовать типы пропсов как DefaultProps и Props , то при необходимости в их импорте непременно возникнет коллизия из-за одинаковых имен. Поэтому принято добавлять к названиям названия самих компонентов *DefaultProps и *Props . Но поскольку эти типы повсеместно указываются в аннотациях расположенных в теле классового компонента, то подобные имена попросту усложняют понимание кода. Поэтому для исчерпывающих имен необходимо создавать более компактные псевдонимы типа type .

Также стоит сразу сказать, что все три типа выступающих в качестве аргументов базового типа нуждаются в более компактных идентификаторах определяемых с помощью псевдонимов. Но кроме того, все они описывают объекты, мутация которых не предполагается. Простыми словами типы Props , State и Snapshot используются исключительно в аннотациях readonly полей класса, параметрах его методов и возвращаемых ими значениях. Поскольку секрет здорового приложения кроется в типобезопасности, всю упомянутую троицу необходимо сделать неизменяемой. Для этого существует специальный тип Readonly . Но так как преобразование типов в каждой отдельной аннотации приведет к чрезмерному увеличению кода, необходимо проделать это единожды в определении их псевдонимов.

Посмотрим как новая информация преобразит наш основной пример.

Параметр children¶

В остальном children имеют то же поведение и недостатки подробно описанные в главе посвященной функциональным компонентам. Поэтому оставим их и приступим к рассмотрению второго параметра базового типа Component , а именно к типу представляющего состояние компонента Component

Несмотря на то что состояние является закрытым от внешнего мира, тип представляющий его также принято называть с префиксом в роли которого выступает название самого компонента. Причина кроется не только в соблюдении общего стиля кода относительно именования типов пропсов. На практике могут возникнуть коллизии имен при создании вложенных классовых компонентов что является обычным делом при создании hoc. Поэтому для типа описывающего состояние компонента так же необходимо определить ещё и псевдоним и не забыть передать его в качестве второго аргумента базового типа и указать в аннотации поля state .

Состояние State¶

Пора обратить внимание на момент связанный с объявлением defaultProps и state , которым необходимо указывать (или не указывать вовсе) модификатор доступа public , так как к ним должен быть доступ извне. Кроме того не будет лишним добавить этим полям модификатор readonly , который поможет избежать случайных изменений.

Говоря о состоянии нельзя обойти стороной такой метод как setState необходимый для его изменения, о котором известно что в качестве аргумента он может принимать как непосредственно объект представляющий новое состояние, так и функцию возвращающую его. Но поскольку первый случай ничего, что нас могло бы заинтересовать, из себя не представляет, рассмотрен будет лишь второй вариант с функцией. Поэтому продолжим наш основной пример и внесем в него изменения касающиеся изменения состояния. Создадим скрытый метод reset который будет сбрасывать значение пройденного времени.

Из того кода что был добавлен в наш пример стоит обратить внимание на несколько моментов. Прежде всего это использование псевдонимов Props и State в аннотациях параметров функции переданной в метод setState . Обозначим её как updater . Как было сказано ранее, типы описывающие состояние и пропсы используются повсеместно в коде компонента. Кроме того стоит сказать что описание сигнатуры функции updater подобным образом излишне и имеет место быт лишь в образовательных целях. Достаточно просто определить необходимые параметры и вывод типов самостоятельно определит их принадлежность.

В добавок к этому стоит возложить определение возвращаемого значения из функции updater на вывод типов, поскольку это не просто излишне, но и в большинстве случаев может являться причиной избыточного кода. Все дело в том что когда состояние содержит множество полей, обновление которых не производится одновременно, при указании возвращаемого типа как State будет невозможно частичное обновление, поскольку лишь часть типа State не совместимо с целым State .

В случае когда функция updater выполняет частичное обновление состояния и при этом тип возвращаемого значения указан явно, необходимо воспользоваться механизмом распространения ( spread ) дополнив отсутствующую часть в новом состоянии старым.

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

И последнее о чем ещё не упомянули, что метод setState , в качестве второго параметра принимает функцию обратного вызова, декларация которой очень проста и будет рассмотрена в самом конце данной главы, когда весь код будет собран в одном месте.

Snapshot¶

И на этом рассмотрение состояния завершено, поэтому можно приступить к рассмотрению третьего и последнего параметра базового типа Component

Принципы применяемые для описания типа представляющего Snapshot ничем не отличаются от описания Props и State , поэтому пояснения будут опущены.

Жизненный цикл¶

Ничего особенного на что стоило бы обратить внимание нет. Поэтому без лишних комментариев продолжим знакомство с внутренним устройством компонента - его жизненного цикла.

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

Обратить внимание стоит лишь на импорт впервые встречающегося типа ErrorInfo необходимость в котором появляется при определении необязательно метода componentDidCatch . Кроме того не будет лишнем напомнить, что в строгом, рекомендуемом режиме, при котором все элементы без аннотации неявно принадлежат к типу any , аннотация сигнатур методов является обязательной. И по этому случаю ещё раз стоит упомянуть о пользе коротких псевдонимов заменяющих огромные идентификаторы типов *Props , *State и *Snapshot .

Вдобавок необходимо заметить, что код иллюстрирующий жизненный цикл компонента взять из декларации устанавливаемой из репозитория @types/react и именно поэтому она изобилует излишними преобразованиями в Readonly тип. Но как было отмечено ранее, в этом нет нужны поскольку все типы составляющие троицу аргументов базового типа уже прошли преобразование при определении представляющих их псевдонимов. Учитывая этот факт предыдущий код будет выглядеть следующим образом.

Ссылки ref¶

Следующий в очереди на рассмотрение механизм, получение ссылок на нативные dom элементы и React компоненты, обозначаемый как рефы (refs).

Предположим что существует форма которую по событию submit необходимо очистить при помощи нативного метода reset , доступного лишь через нативный dom элемент, ссылку на который можно получить с помощью механизма рефов, применение которого возможно осуществить двумя способами. Первый способ заключается в создании объекта реф с помощью статического метода React.createRef() , а второй в самостоятельном сохранении ссылки на нативный dom элемент с помощью функции обратного вызова.

Начнем по порядку. Первым делом необходимо определить поле (в нашем случае это formRef ) необходимое для сохранения объекта реф и желательно чтобы оно было закрытое ( private ) и только для чтения ( readonly ). В примере поле formRef определен вместе с аннотацией в которой указан импортированный тип RefObject , где параметр типа принимает тип нативного dom элемента, в нашем случае HTMLFormElement . Но в конкретном примере аннотация излишня поскольку мы указали выводу типов принадлежность нативного dom элемента передав его в качестве аргумента типа функции React.createRef () .

На следующим шаге устанавливаем объект реф react элементу и определяем закрытый метод reset в котором происходит вызов метода reset нативной формы. Не будет лишним обратить внимание, что вызов непосредственно метода reset осуществляется при помощи оператора опциональной последовательности ( ?. ). Сделано это по причине возможного отсутствия ссылки на нативный элемент.

Второй способ получения ссылки на нативный элемент заключается в определении функции принимающей в качестве единственного параметра нативный dom элемент, сохранение ссылки на который перекладывается на разработчика.

Для иллюстрации сказанного повторим предыдущий пример. Первым делом импортируем обобщенный тип RefCallback описывающий функцию и принимающий в качестве аргумента типа тип нативного dom элемента который будет передан в функцию в качестве единственного аргумента. Затем определим поле formNativeElement с типом union , множество которого включат не только тип нативного элемента, но и null . Это необходимо поскольку при инициализации требуется установить значение принадлежащие к типу null . Это необходимо при активном флаге --strictPropertyInitialization входящим в группировку определяющую рекомендуемый строгий режим компилятора.

Следующим шагом происходит определение закрытого только для чтения поля formRefCallback которому в качестве значения присвоена стрелочная функция. Единственный параметр данной функции лишен аннотации тпа, поскольку вывод типов определит его как принадлежащего к переданному в качестве аргумента типа RefCallback . В теле данной функции происходит присваивание её параметра полю formNativeElement определенному на предыдущем шаге.

Стоит заметить что то же самое можно реализовать и без помощи типа импортированного RefCallback . Для этого лишь потребуется самостоятельно добавить аннотацию типа для параметра функции обратного вызова.

Выбор того или иного способа зависит лишь от предпочтений самого разработчика.

Продолжим доведение примера до финального состояния и установим созданную в первом случае функцию обратного вызова react элементу в качестве реф. Также определим уже известный метод reset в теле которого будет происходить вызов метода reset у нативного dom элемента ссылка на который будет сохранена в поле класса formNativeElement .

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

Первым делом определим классовый компонент Slider реализующий два открытых метода предназначенных для перелистывания контента prev и next . Далее определим компонент App в теле которого определим рефу при помощи функции createRef которой в качестве аргумента типа передадим тип классового компонента Slider . Таким образом вывод типа определит рефу sliderRef как принадлежащую к типу RefObject . После этого в методе рендер создадим экземпляр компонента Slider и два react элемента , в обработчиках событий click которых происходит взаимодействие с компонентом Slider при помощи ссылки на него доступной через ассоциированную непосредственно с ним рефу.

Обработчики событий¶

На этом рассмотрение работы с механизмом рефов в типизированном стиле завершено. Но до завершения знакомства с работой классового компонента в основе которого лежит Component

осталась ещё одна тема, а именно работа с React событиями. Кроме того её освещение будет являться альтернативным решением задачи получения доступа к нативному элементу. Простыми словами реализуем вызов метода reset у нативного dom элемента ссылку на который будет получена из объекта события submit . Но поскольку данная тема была подробна рассмотрена в главе посвященной функциональным компонентам, здесь подробно будут освещены только моменты присущие исключительно классовым компонентам.

Первым делом возвратим предыдущий пример в первоначальное состояние и добавим кнопку для отправки формы.

Далее нам потребуется определить закрытое поле только для чтения в качестве значения которого будет присвоена стрелочная функция способная сохранить контекст текущего экземпляра. В качестве типа данного поля укажем импортированный из пространства имен React ранее рассмотренный обобщенный тип ReactEventHandler .

Для завершения примера осталось всего-навсего написать логику слушателя события submit , которая также повторяет пример из главы посвященной функциональным компонентам и поэтому подробных комментариев не будет.

Данный способ типизирования слушателей событий является предпочтительным поскольку при таком подходе аннотация включает только два типа и кроме того, стрелочная функция уберегает от неминуемой потери контекста. Случаи требующие определения слушателя как метода класса требуют другого подхода. Отличие заключается в том что в аннотировании типа нуждается непосредственно параметр слушателя. Но поскольку React делегирует все нативные события, необходимо импортировать тип соответствующего события из его пространства имен. Для событий связанных с формами в React определен обобщенный тип FormEvent ожидающий в качестве аргумента типа тип нативного элемента. И поскольку слушатель ничего не возвращает, то тип возвращаемого значения, явное указание которого излишне, определяется как void .

Поскольку установка слушателя представляемого методом класса приведет к неминуемой потери контекста, прибегать к подобному объявлению стоит только при условии что их тело лишено логики предполагающей обращение к членам через ссылку экземпляра this .

Контекст можно было бы сохранить прибегнув к методу bind или делегированию события непосредственно с помощью стрелочной функции определенной в месте установки слушателя, но зачем? Для bind потребуется определения дополнительного поля.

Стрелочная функция будет пересоздаваться каждую отрисовку.

Кроме того оба случая затрудняют понимание кода. Поэтому необходимо повторить что использовать метод класса в качестве слушателя события стоит только при отсутствии необходимости в обращении через ссылку this . При возникновении именно такого случая не будет лишним уточнения способа выбора типа события. В приведенном примере это был FormEvent , поскольку работа производилась с формой. Для других событий появится необходимость в других соответствующих типа, узнать которые можно с помощью подсказок вашей ide. Для чего всего-лишь необходимо навести курсор на определение слушателя события.

Также не забываем об упомянутом ранее базовом для всех событийных React типов обобщенном типе SyntheticEvent , который в качестве аргумента ожидает тип представляющий нативный элемент.

На этом тему посвященную созданию классового компонента расширяющего Component

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

Производные от PureComponent

Помимо того, что пользовательские компоненты могут быть производными от универсального класс Component

, они также могут использовать в качестве базового класса универсальный класс PureComponent

. Но поскольку все что было сказано относительно Component в ста процентах случаев верно и для PureComponent , который также ничего нового не привносит, то данная глава будет ограничена лишь кодом иллюстрирующим определение пользовательского компонента.

Тем кто только начал своё знакомство с классовыми компонентами с данной главы необходимо вернутся на шаг назад или даже более разумно в самое начало, поскольку именно там объясняется что для полного понимания необходимо ознакомиться со всем материалом относящимся к React.

Обратите внимание, что версия строительных лесов должна быть vue-cli3.
Убедившись, что вышеуказанная среда в порядке, мы перейдем к созданию проекта.

В названии проекта нельзя использовать заглавные буквы, иначе будет сообщено об ошибке.

Долгие знания: это единственный выбор, вы можете нажимать клавиши вверх / вниз, чтобы переключать параметры, нажмите клавишу ввода, чтобы перейти к следующему шагу (переключатель git bash проблематичен, рекомендуется использовать терминал cmd)

default - опция по умолчанию, метка eslint позади означает, что будут представлены только эти два
Выбор функций вручную
Поскольку мы хотим использовать Vue + Typescript, мы выбираем Manully select features

Здесь есть несколько вариантов: нажмите клавишу вверх / вниз для переключения, пробел, чтобы выбрать вариант.

Use class-style component syntax?
Здесь нужно спросить, использовать ли синтаксис компонента в стиле класса. Чтобы использовать TypeScript более удобно, мы выбираем Y.
Если позже вы не знаете, что это значит, просто нажмите следующий шаг, как дурак.

Use history mode for router?
Вот вопрос, следует ли использовать режим истории маршрутизатора. Если да, то в производственной среде серверу необходимо настроить откат индекса соответствующим образом. Это не повлияло на нашу демонстрацию. Нажмите клавишу ВВОД, чтобы использовать параметр по умолчанию.

Pick a CSS pre-processor
Препроцессор может выбрать один самостоятельно

Pick a linter / formatter config
Выберите здесь инструмент проверки кода, выберите ESLint + Prettier, потому что Prettier может не только форматировать код js, но также форматировать код в части шаблона css и vue template == (обратите внимание, что выбор этого параметра приведет к закрытию элементов конфигурации конфликта ESLint и Prettier Ситуация немного хлопотная) ==
Итак, поленитесь и выберите ESLint напрямую

Pick additional lint features
Вот когда форматировать код, выберите Lint при сохранении.

Where do you prefer placing config for Babel, ESLint, etc.?
Здесь можно настроить Babel, ESLint и т. Д.

В специальных файлах конфигурации
В package.json настраивается в файле package.json
Выбираем В выделенных конфигурационных файлах

Save this as a preset for future projects?
Следует ли сохранять выбранную на этот раз конфигурацию, чтобы облегчить повторное использование при построении проекта в следующий раз
Введите напрямую

Команда ввода терминала для запуска: npm run serve

Сервис-ориентированная архитектура (service-oriented architecture, SOA) придумана в конце 1980-х. Она берёт своё начало в идеях, изложенных в CORBA, DCOM, DCE и других документах. О SOA написано много, есть несколько её реализаций. Но, по сути, SOA можно свести к нескольким идеям, причём архитектура не диктует способы их реализации:

Сочетаемость приложений, ориентированных на пользователей.
Многократное использование бизнес-сервисов.
Независимость от набора технологий.
Автономность (независимые эволюция, масштабируемость и развёртываемость).

SOA — это набор архитектурных принципов, не зависящих от технологий и продуктов, совсем как полиморфизм или инкапсуляция.

В этой статье я рассмотрю следующие паттерны, относящиеся к SOA:

Общая архитектура брокера объектных запросов (CORBA)

В 1980-х началось активное использование корпоративных сетей и клиент-серверной архитектуры. Возникла потребность в стандартном способе взаимодействия приложений, которые созданы с использованием разных технологий, исполняются на разных компьютерах и под разными ОС. Для этого была разработана CORBA. Это один из стандартов распределённых вычислений, зародившийся в 1980-х и расцветший к 1991 году.

Стандарт CORBA был реализован несколькими вендорами. Он обеспечивает:

Не зависящие от платформы вызовы удалённых процедур (Remote Procedure Call).
Транзакции (в том числе удалённые!).
Безопасность.
События.
Независимость от выбора языка программирования.
Независимость от выбора ОС.
Независимость от выбора оборудования.
Независимость от особенностей передачи данных/связи.
Набор данных через язык описания интерфейсов (Interface Definition Language, IDL).

Сегодня CORBA всё ещё используется для разнородных вычислений. Например, он до сих пор является частью Java EE, хотя начиная с Java 9 будет поставляться в виде отдельного модуля.

Хочу отметить, что не считаю CORBA паттерном SOA (хотя отношу и CORBA, и SOA-паттерны к сфере распределённых вычислений). Я рассказываю о нём здесь, поскольку считаю недостатки CORBA одной из причин возникновения SOA.

Принцип работы

Вызывающая программа (caller) вызывает локальную процедуру, реализованную заглушкой.

Достоинства

Независимость от выбранных технологий (не считая реализации ORB).
Независимость от особенностей передачи данных/связи.

Недостатки

Веб-сервисы

И для решения этих задач в конце 1990-х начали появляться веб-сервисы.

[Веб-]сервисы можно публиковать, находить и использовать стандартным образом вне зависимости от технологий.
— Microsoft 2004, Understanding Service-Oriented Architecture

С точки зрения технологий SOA не просто сервисная архитектура, а набор политик, методик и фреймворков, благодаря которым мы предоставляем и получаем нужные сервисы.
— Microsoft 2004, Understanding Service-Oriented Architecture

Достоинства

Недостатки

Запрос/Ответ

Все эти паттерны можно отнести к либо к pull- (polling), либо к push-подходу:

Достоинства

Недостатки

Сервисная шина предприятия (ESB)

Сервисная шина предприятия использовала веб-сервисы уже в 1990-х, когда они только развивались (быть может, некоторые реализации сначала использовали CORBA?).

В этой архитектуре используется модульное приложение (composite application), обычно ориентированное на пользователей, которое общается с веб-сервисами для выполнения каких-то операций. В свою очередь, эти веб-сервисы тоже могут общаться с другими веб-сервисами, впоследствии возвращая приложению какие-то данные. Но ни приложение, ни бэкенд-сервисы ничего друг о друге не знают, включая расположение и протоколы связи. Они знают лишь, с каким сервисом хотят связаться и где находится сервисная шина.

Это очень упрощённое описание архитектуры ESB. Более того, хотя ESB является главным компонентом архитектуры, в системе могут использоваться и другие компоненты вроде доменных брокеров (Domain Broker), сервисов данных (Data Service), сервисов процессной оркестровки (Process Orchestration Service) и обработчиков правил (Rules Engine). Тот же паттерн может использовать интегрированная архитектура (federated design): система разделена на бизнес-домены со своими ESB, и все ESB соединены друг с другом. У такой схемы выше производительность и нет единой точки отказа: если какая-то ESB упадёт, то пострадает лишь её бизнес-домен.

Главные обязанности ESB:

Также рекомендую не забывать, что реализации ESB уже достаточно развиты и в большинстве случаев позволяют использовать для своего конфигурирования пользовательский интерфейс с поддержкой drag & drop.

Достоинства

Недостатки

Ниже скорость связи, особенно между уже совместимыми сервисами.
Централизованная логика:
- Единая точка отказа, способная обрушить системы связи всей компании.
- Большая сложность конфигурирования и поддержки.
- Со временем можно прийти к хранению в ESB бизнес-правил.
- Шина так сложна, что для её управления вам потребуется целая команда.
- Высокая зависимость сервисов от ESB.
Микросервисы

В основе микросервисной архитектуры лежат концепции SOA. Назначение у неё то же, что и у ESB: создать единое общее корпоративное приложение из нескольких специализированных приложений бизнес-доменов.

Главное различие микросервисов и шины в том, что ESB была создана в контексте интеграции отдельных приложений, чтобы получилось единое корпоративное распределённое приложение. А микросервисная архитектура создавалась в контексте быстро и постоянно меняющихся бизнесов, которые (в основном) с нуля создают собственные облачные приложения.

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

[Микросервисы — это] маленькие автономные сервисы, работающие вместе и спроектированные вокруг бизнес-домена.
— Sam Newman 2015, Principles Of Microservices

Главным недостатком архитектуры ESB было очень сложное централизованное приложение, от которого зависели все остальные приложения. А в микросервисной архитектуре это приложение почти целиком убрано.

Сэм Ньюман, автор Building Microservices, выделяет восемь принципов микросервисной архитектуры. Это:
- Проектирование сервисов вокруг бизнес-доменов
  Это может дать нам стабильные интерфейсы, высокосвязные и мало зависящие друг от друга модули кода, а также чётко определённые разграниченные контексты.
- Культура автоматизации
  Это даст нам гораздо больше свободы, мы сможем развернуть больше модулей.
- Скрытие подробностей реализации
  Это позволяет сервисам развиваться независимо друг от друга.
- Полная децентрализация
  Децентрализуйте принятие решений и архитектурные концепции, предоставьте командам автономность, чтобы компания сама превратилась в сложную адаптивную систему, способную быстро приспосабливаться к переменам.
- Независимое развёртывание
  Можно развёртывать новую версию сервиса, не меняя ничего другого.
- Сначала потребитель
  Сервис должен быть простым в использовании, в том числе другими сервисами.
- Изолирование сбоев
  Если один сервис падает, другие продолжают работать, это делает всю систему устойчивой к сбоям.
- Удобство мониторинга
  В системе много компонентов, поэтому трудно уследить за всем, что в ней происходит. Нам нужны сложные инструменты мониторинга, позволяющие заглянуть в каждый уголок системы и отследить любую цепочку событий.
Сообщество предпочитает другой подход: умные конечные точки и глупые каналы. Микросервисы, из которых собираются приложения, должны как можно меньше зависеть друг от друга и при этом быть очень тесно связанными — они содержат собственную доменную логику и работают скорее как фильтры с точки зрения классического Unix: получают запросы, применяют логику и генерируют ответы. Они оркестрируются с помощью простых REST-подобных протоколов, а не сложных протоколов вроде WS-Choreography или BPEL либо какого-то централизованного инструмента.
— Martin Fowler 2014, Microservices

Достоинства

Недостатки

Антипаттерн: архитектура равиоли (Ravioli Architecture)

Архитектурой равиоли обычно называют антипаттерн микросервисной архитектуры. Равиоли получаются, если микросервисов слишком много, они слишком мелкие и не отражают доменных концепций.

Заключение

В последние десятилетия SOA сильно эволюционировала. Благодаря неэффективности прежних решений и развитию технологий сегодня мы пришли к микросервисной архитектуре.

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

Проблему сложности кода можно решать так же, как мы разбиваем монолитное приложение на отдельные доменные компоненты (разграниченные контексты). Но с разрастанием команд и кодовой базы увеличивается потребность в независимом развитии, масштабировании и развёртывании. SOA помогает добиться такой независимости, упрочняя границы контекстов.

Повторюсь, что всё дело в слабой взаимозависимости и высокой связности, причём размер компонентов должен быть больше прежнего. Необходимо прагматично оценить свои потребности: используйте SOA, лишь когда это необходимо, поскольку она сильно увеличивает сложность. И если на самом деле вы можете обойтись без SOA, то лучше выберите микросервисы подходящего размера и количества, не больше и не меньше.

Мир веб-разработки развивается головокружительно быстро, как и язык программирования JavaScript. Сегодня, если вы не шарите в Webpack, React Hooks, Jest, Vue и NG elements, вы чувствуете себя потерянным и отстающим. Этот разрыв быстро расширяется, вы уже не понимаете, о чем говорят ваши коллеги… Но все меняется!

Впервые за много лет главной тенденцией в развитии JavaScript-экосистемы становится стандартизация. Компоненты вступили в игру, и теперь все играют по их правилам.

Все элементы системы, от стиля до тестирования, – даже управление состоянием, – перешли на компонентный подход. И дальше тенденция сохранится и усилится. К чему же придет в 2020 году веб, в основе которого лежат компоненты?

ВНИМАНИЕ! Обзор субъективен. Если вы видите будущее веба иначе, добро пожаловать в комментарии ;)

Компоненты, свободные от фреймворков

Инструменты для работы с веб-компонентами

Веб-компоненты – это совокупность стандартов, которые позволяют вам создавать собственные HTML-элементы и определять их поведение. Сюда входят:
- Пользовательские элементы (Custom Elements) – JavaScript API для связывания вашего тега с соответствующим ему классом.
- Теневой DOM (Shadow DOM) – способ инкапсуляции внутреннего содержания тега.
- HTML-шаблоны (HTML templates) – специальный тег , предназначенный для хранения шаблонов.
Звучит знакомо, правда? Все эти возможности точно предоставляет ваш любимый фреймворк, с той лишь разницей, что веб-компоненты – это стандарт.

Веб-компоненты быстрые, оптимизированные, удобные, современные. Они свободны от фреймворков и груза старых практик языка. Они уже поддерживаются всеми популярными браузерами.

Поддержка веб-компонентов браузерами

Чтобы работа с веб-компонентами приносила вам одну лишь радость и непонимание, почему вы не делали этого раньше, обратите внимание на инструменты:

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

Если вы еще не знакомы с веб-компонентами, самое время подружиться с ними:

Фреймворки, построенные на компонентах

Веб-компоненты прошли долгий путь до относительно хорошей поддержки в браузерах. Но еще раньше потрясающие возможности компонентного подхода поняли JavaScript фреймворки.

Можно сколько угодно спорить, какой фреймворк лучше, но нельзя не признать очевидное – они все базируются на компонентах. В React, в Vue, в Angular вы занимаетесь тем, что делите свое приложение на небольшие части и работаете с ними как с самостоятельными единицами.

Что случится с популярными фреймворками, когда веб-компоненты заработают во всю силу? Скорее всего, ничего радикального. Они продолжат идти собственным путем в бурном мире фронтенда, ведь правильно реализованная компонентная структура долго будет востребована.

Снова сравниваем JavaScript-фреймворки:

Повторное использование компонентов и Bit

Bit - концентратор js-компонентов

Концепция компонентного подхода во фронтенде открывает невероятные возможности для повторного использования единожды написанного кода. Только представьте, вы создаете компонент (например, красивый прелоадер) для одного проекта, а потом используете его во всех остальных, без всякого переписывания или рефакторинга.

В этой сфере есть один замечательный инструмент, который нельзя проигнорировать – это Bit.

Bit – проект с открытым исходным кодом, предназначенный для сбора ваших компонентов, их удобного шаринга и переиспользования. Теперь можно мгновенно подключать в ваше приложение любой строительный блок, созданный ранее (вами или тысячами других разработчиков по всему миру).

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

Благодаря bit.dev вы можете легко наладить обмен компонентами между членами одной команды, обеспечивая тем самым однообразие вашего приложения. Концентратор предоставляет все необходимое для удобной совместной работы: от отличного поиска до полной поддержки CI/CD (непрерывная доставка и интеграция кода).

Компоненты и модули ES

ES (EcmaScript) Modules – это стандарт для работы с модульным кодом JavaScript в браузере. Благодаря ему у нас появилась возможность разделять проект на самостоятельные модули, инкапсулирующие некоторую функциональность, и подключать их отдельно.

Что это нам даст? Очень многое. Только представьте, вы сможете создавать компоненты JS в отдельных модулях, размещать их на bit.dev и подключать при необходимости через CDN (сеть доставки контента).

Немного информации о ES модулях, которую вы должны знать:

Стилизация компонентов

За последние пару лет мы перепробовали множество вариантов стилизации изолированных компонентов:
- инлайновые стили,
- CSS модули,
- CSS-in-JS, в React,
- даже типизированный CSS в stylable.
Хочется думать, что мы извлекли из этого многообразия какие-то уроки. В ближайшие годы стилизация компонентов скорее всего будет развиваться в сторону композиции логики и тематизации, без их смешивания. Это позволит создать легкую, удобную и расширяемую дизайн-систему.

Управление состоянием и работа с данными на уровне компонентов

Скажи React State Management еще хоть раз.

Итак. что нового в управлении? Можно дальше использовать глобальное хранилище Redux или как?

Использование глобального состояния в приложении не дает полностью реализовать модульную и многоразовую природу компонентов. Веб постепенно переходит от глобального уровня state management к уровню отдельных строительных блоков. Это предполагает использование более реактивных подходов, например, MobX или unstated.

Появление в React Context API и хуков (hooks) означает, что вам больше не нужны сторонние библиотеки, и вы можете управлять состоянием на уровне функциональных компонентов.

А используя Apollo, вы можете легко создавать компоненты пользовательского интерфейса, которые извлекают данные через GraphQL.

Инструменты проектирования на основе компонентов

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

В Sketch уже есть связи зависимостей между компонентами, так что вы можете создавать и обновлять проекты модульным способом. Полная интеграция с компонентами кода – это всего лишь вопрос времени.

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

Framer создает инструмент, конвертирующий элементы UI в компоненты React.

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

Читайте также: