Макеты экрана


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

Разделение логики и презентации является одним из принципов разработки с ORCHID. Одним из элементов презентации являются "Layouts" (макеты), которые могут отображаться в различных вариациях. Если попытаться объяснить коротко, то получится, что это view на стероидах.

Подход через макеты

Для формирования страницы в большинстве случаев мы используем однотипные элементы, например, представим блок, который отображает имя, подпись и аватар профиля:

<div class="d-sm-flex flex-row flex-wrap text-center text-sm-left align-items-center">
    <span class="thumb-sm avatar m-r-xs">
        <img src="/avatar/maria.jpg" class="bg-light" alt="Maria">
    </span>
    <div class="ml-sm-3 ml-md-0 ml-xl-3 mt-2 mt-sm-0 mt-md-2 mt-xl-0">
        <h6 class="mb-0">Maria</h6>
        <p class="text-muted mb-1">maria@exaple.com</p>
    </div>
</div>

Простое отображение блока с профилем может фигурировать на десятках страниц и если они скопированы, то поддержание их внешнего вида может потребовать много времени, поэтому прорабатываются различные варианты повторного использования. Это называется компонентным подходом, вне зависимости от способа доставки и уровня ответственности, практикуется как в Blade так и в React/Vue/Angular.

Именно из таких компонентов и состоят слои платформы, явным отличием является только, что необходимо оперировать именно классами, создавая которые вы явно определяете, что принятый параметр avatar будет вставлен в теге <img>, без необходимости каждый раз править исходный код.