По мере того, как я, или, если быть точнее, команда, в которой я состою, все больше и больше придерживаюсь шаблона проектирования «Лего», мы можем увидеть огромный рост на нашем графике производительности.
Мы выпускаем новые функции быстрее, и все это к удовлетворению нашей команды UX, продукта и QA.
Что это за шаблон дизайна «Лего»?
Это не ново, я могу вам многое сказать.
Шаблон проектирования Лего — это всего лишь реализация шаблона проектирования Объектно-ориентированное программирование (ООП).
В двух словах (и я настоятельно рекомендую вам прочитать немного больше об ООП), это шаблон проектирования для наличия нескольких объектов, которые могут взаимодействовать с другими объектами, но не зависят от них.
Легко сказать, значит сделать, поверьте мне.
Вам нужно выработать способ смотреть на вещи, чтобы вы могли находить самые маленькие детали, которые вы можете построить, но не слишком маленькие.
Возьмем, к примеру, форму.
Внимание... Я буду использовать синтаксис ReactJs.
Ввод — это, безусловно, самый маленький объект в форме, но мы ни в коем случае не хотим создавать компонент только для него.
Следующий уровень вверх в большинстве случаев будет следующим:
Как видите, наш компонент FormFiled содержит минимальный набор объектов, который нам нужен, чтобы играть важную роль в нашем приложении формы.
Наш FormFiled достаточно надежен, чтобы он мог быть практически любым типом ввода.
Если мы теперь посмотрим на наше приложение формы, мы увидим это.
Это очень простой синтаксис для формы, и все же вы все еще можете видеть здесь, как наш единственный компонент FormField, наша единственная часть «Lego» имеет множество преимуществ.
Основные преимущества, которые мы можем отметить:
- Наш код стал более читабельным и чистым, так что следующему разработчику не составит труда разобраться.
- Намного проще протестировать как FormField, так и компонент Form.
Вы можете посмотреть живой пример здесь: https://codesandbox.io/embed/o4l784o1r6
Я создал еще один пример. На этот раз Галерея. https://codesandbox.io/s/0y23k21q9v
В примере с галереей вы можете видеть, что у нас есть компонент «Галерея», который выполняет только одну функцию. Чтобы создать миниатюру. Его меньше заботит количество элементов, которые ему нужно сгенерировать.
Мы также можем видеть компонент Thumbnail, который знает, что это именно он. Его меньше заботит личность его создателя и еще меньше, если рядом есть какой-либо другой компонент миниатюры.
Какие еще преимущества мы получаем от написания кода таким образом?
Допустим, вы хотите провести A/B-тест миниатюры.
Все, что нам нужно сделать, это создать еще один компонент Thumbnail. В компоненте «Галерея» мы будем обрабатывать оператор if, чтобы решить, какой тип эскиза мы хотим нарисовать. Теперь мы можем протестировать новую функцию с минимальными изменениями в нашем коде и без риска изменить код, который не имеет ничего общего с нашим тестом.
Как только тестирование завершено и мы знаем, какую версию нам нужно сохранить, мы можем удалить устаревший компонент, зная, что весь связанный с ним код также был удален. Регрессии кода не ожидается.
Я верю, что со временем вы сможете найти свои собственные причины, почему это хорошо работает для вас.
Подход «Лего» не связан только с пользовательским интерфейсом. Вы также можете использовать ту же концепцию в своем бэкэнде.
Мы пишем серверы NodeJs и видим, что можем получить те же преимущества и там.
Если то, что я рассказал вам до сих пор, не убедило вас в том, что вы можете извлечь выгоду из подхода «Лего», возможно, это поможет.
Как вы убираете свой дом? Вы убираете все сразу или убираете комнату за комнатой, работа за работой?
Когда вы убираете свой дом, вам нужно убрать его в одиночку или кто-то другой может сделать это с вами? Когда этот другой человек убирает вместе с вами, вы выполняете одну и ту же работу вместе или разделяете ее? эти работы переплетаются или их можно выполнять по отдельности?
Последний вопрос. Когда вы закончите со всеми домашними делами, которые в большинстве случаев являются отдельными делами, и меньше будете заботиться о других делах, которые вам приходилось выполнять, ваш дом будет чистым или нет?
Надеюсь, вы понимаете, что такое «Лего» и как извлечь из этого максимальную пользу. Если нет, по крайней мере, вы знаете, что ваш дом чист.
