proscenium
v0.18.0
нос · видеть · в девичестве · хм
существительные : авансцена
- часть театральной сцены перед занавесом.
Proscenium рассматривает ваш интерфейс и код на стороне клиента как первоклассных элементов вашего приложения Rails и предполагает «быстрый Интернет по умолчанию». Он объединяет и минимизирует JavaScript (+ JSX), TypeScript (+TSX) и CSS в реальном времени, по требованию и без необходимости настройки.
Основные моменты:
rails s !Начало работы, очевидно, зависит от того, добавляете ли вы Proscenium в существующее приложение Rails или создаете новое. Поэтому выберите подходящее руководство ниже:
Добавьте эту строку в Gemfile вашего приложения Rails, и все готово:
gem 'proscenium'Обратите внимание, что Proscenium разработан исключительно для использования с Rails.
Теперь, если вы запустите приложение Rails, вы сможете открыть любой код внешнего интерфейса (JS, CSS и т. д.). Например, к файлу app/assets/stylesheets/application.css можно получить доступ по адресу https://localhost:3000/app/assets/stylesheets/application.css , который будет объединен, преобразован и минимизирован [в производстве] в реальном времени.
Proscenium считает, что ваш код внешнего интерфейса так же важен, как и ваш внутренний код, и это не второстепенная мысль — они должны быть первоклассными членами вашего приложения Rails. Поэтому вместо того, чтобы помещать все ваши JS и CSS в каталог «app/assets», а затем требовать отдельный процесс для компиляции или объединения, просто поместите их в любое место вашего приложения и просто запустите Rails!
Например, если у вас есть JS, необходимый для вашего представления app/views/users/index.html.erb , просто создайте рядом с ним файл JS по адресу app/views/users/index.js . Или, если у вас есть CSS, который используется всем вашим приложением, поместите его в app/views/layouts/application.css и загрузите вместе с макетом. Возможно, у вас есть несколько служебных функций JS, поэтому поместите их в lib/utils.js .
Просто разместите свои JS(X) и CSS в любом месте, и ваше приложение Rails будет обслуживать их из того места, где вы их разместили.
Используя приведенные выше примеры...
app/views/users/index.js => https://localhost:3000/app/views/users/index.jsapp/views/layouts/application.css => https://localhost:3000/app/views/layouts/application.csslib/utils.js => https://localhost:3000/lib/utils.jsapp/components/menu_component.jsx => https://localhost:3000/app/components/menu_component.jsxconfig/properties.css => https://localhost:3000/config/properties.css Proscenium лучше всего работает, когда ваши ресурсы загружаются автоматически.
В Rails вы обычно декларативно загружаете ресурсы JavaScript и CSS, используя помощники javascript_include_tag и stylesheet_link_tag .
Например, у вас может быть CSS-код «приложения» верхнего уровня, расположенный в файле /app/assets/stylesheets/application.css . Аналогично, у вас может быть глобальный JavaScript, расположенный в файле /app/javascript/application.js .
Вы должны вручную и декларативно включить эти два файла в макет вашего приложения, примерно так:
<%# /app/views/layouts/application.html.erb %>
<!DOCTYPE html >
< html >
< head >
< title > Hello World </ title >
<%= stylesheet_link_tag 'application' %> <!-- << Your app CSS -->
</ head >
< body >
<%= yield %>
<%= javascript_include_tag 'application' %> <!-- << Your app JS -->
</ body >
</ html >Теперь у вас может быть некоторый CSS и JavaScript, которые требуются только для определенного представления и части, поэтому вы должны загрузить их в свое представление (или макет) примерно так:
<%# /app/views/users/index.html.erb %>
<%= stylesheet_link_tag 'users' %>
<%= javascript_include_tag 'users' %>
<%# needed by the `users/_user.html.erb` partial %>
<%= javascript_include_tag '_user' %>
<% render @users %> Основная проблема заключается в том, что вам нужно отслеживать все эти ресурсы и следить за тем, чтобы каждый из них загружался всеми представлениями, которым они требуются, но при этом избегать их загрузки, когда они не нужны. Это может быть настоящей проблемой, особенно если у вас много просмотров.
При загрузке вашего JavaScript, Typescript и CSS с помощью Proscenium они автоматически включаются вместе с вашими представлениями, фрагментами, макетами и компонентами и только при необходимости.
Боковая загрузка работает путем поиска файла JS/TS/CSS с тем же именем, что и у вашего представления, фрагмента, макета или компонента. Например, если у вас есть представление по адресу app/views/users/index.html.erb , то Proscenium будет искать файл JS/TS/CSS по адресу app/views/users/index.js , app/views/users/index.ts или app/views/users/index.css . Если он его найдет, он включит его в HTML для этого представления.
JSX также поддерживается для JavaScript и Typescript. Просто используйте расширение .jsx или .tsx вместо .js или .ts .
Просто создайте файл JS и/или CSS с тем же именем, что и у любого представления, фрагмента или макета.
Давайте продолжим наш пример проблемы выше, где у нас есть следующие активы
/app/assets/application.css/app/assets/application.js/app/assets/users.css/app/assets/users.js/app/assets/user.js Макет вашего приложения находится в /app/views/layouts/application.hml.erb , а представление, которому нужны ресурсы пользователей, находится в /app/views/users/index.html.erb , поэтому переместите свои ресурсы JS и CSS рядом с ними. :
/app/views/layouts/application.css/app/views/layouts/application.js/app/views/users/index.css/app/views/users/index.js/app/views/users/_user.js (частично) Теперь в вашем макете и представлении замените хелперы javascript_include_tag и stylesheet_link_tag на хелпер include_asset из Proscenium. Что-то вроде этого:
<!DOCTYPE html >
< html >
< head >
< title > Hello World </ title >
<%= include_assets # <-- %>
</ head >
< body >
<%= yield %>
</ body >
</ html > При каждом запросе страницы Proscenium проверит, есть ли в каком-либо из ваших представлений, макетов и частичных файлов файл JS/TS/CSS с таким же именем, а затем включит их туда, где вы разместили хелпер include_assets .
Теперь вам никогда не придется снова включать свои активы. Просто создайте их вместе со своими видами, фрагментами и макетами, а Proscenium позаботится обо всем остальном.
Боковая загрузка включена по умолчанию, но вы можете отключить ее, установив для config.proscenium.side_load значение false в вашем /config/application.rb .
Существуют также помощники include_stylesheets и include_javascripts которые позволяют вам контролировать, где ресурсы CSS и JS включаются в HTML. Эти помощники следует использовать вместо include_assets , если вы хотите точно контролировать, куда включаются ресурсы.
Объединение файла означает встраивание любых импортированных зависимостей в сам файл. Этот процесс является рекурсивным, поэтому зависимости зависимостей (и т. д.) также будут встроены.
Proscenium будет объединен по умолчанию и в режиме реального времени. Таким образом, нет отдельного этапа сборки или предварительной компиляции.
Proscenium поддерживает импорт JS, JSX, TS, TSX, CSS и SVG из NPM, по URL-адресу, из вашего локального приложения и даже из других Ruby Gems.
Как статический ( import ), так и динамический ( import() ) импорт поддерживаются для JavaScript и TypeScript и могут использоваться для импорта файлов JS, TS, JSX, TSX, JSON, CSS и SVG.
Для CSS поддерживается @import CSS-правило.
Пути импорта в настоящее время объединяются только в том случае, если они являются строковым литералом или шаблоном glob. Другие формы путей импорта не объединяются и вместо этого дословно сохраняются в сгенерированном выводе. Это связано с тем, что объединение является операцией времени компиляции, а Proscenium не поддерживает все формы разрешения путей во время выполнения.
Вот несколько примеров:
// Analyzable imports (will be bundled)
import "pkg" ;
import ( "pkg" ) ;
import ( `./locale- ${ foo } .json` ) ;
// Non-analyzable imports (will not be bundled)
import ( `pkg/ ${ foo } ` ) ;Чтобы обойти неанализируемый импорт, необходимо пометить пакет, содержащий этот проблемный код, как несвязанный, чтобы он не включался в пакет. Затем вам нужно будет убедиться, что копия внешнего пакета доступна для вашего связанного кода во время выполнения.
node_modules ) Простой импорт (импорт, не начинающийся с ./ , / , https:// , http:// ) полностью поддерживается и будет использовать выбранный вами менеджер пакетов (например, NPM, Yarn, pnpm) через файл package.json , расположенный в корне вашего приложения Rails.
Установите пакет, который вы хотите импортировать, используя выбранный вами менеджер пакетов...
npm install react
...а затем импортируйте его, как любой другой пакет.
import React from "react" ;И, конечно же, вы можете импортировать свой собственный код, используя относительные или абсолютные пути (расширение файла не является обязательным, а абсолютные пути используют ваш корень Rails в качестве основы):
import utils from "/lib/utils" ;
import constants from "./constants" ;
import Header from "/app/components/header" ; @import "/lib/reset" ; Иногда вы не хотите объединять импорт. Например, вы хотите убедиться, что загружен только один экземпляр React. В этом случае вы можете использовать префикс unbundle
import React from "unbundle:react" ;Это работает только с любым голым и локальным импортом.
Вы также можете использовать префикс unbundle в карте импорта, который гарантирует, что весь импорт по определенному пути всегда будет разделен:
{
"imports" : {
"react" : " unbundle:react "
}
}Затем просто импортируйте как обычно:
import React from "react" ; [НЗП]
Импорт карт для JS и CSS поддерживается «из коробки» и работает независимо от используемого браузера. Это связано с тем, что карта импорта анализируется и разрешается Proscenium на сервере, а не в браузере. Это быстрее, а также позволяет использовать карты импорта в браузерах, которые их еще не поддерживают.
Если вы не знакомы с картами импорта, думайте о них как о способе определения псевдонимов.
Просто создайте config/import_map.json и укажите импорт, который вы хотите использовать. Например:
{
"imports" : {
"react" : " https://esm.sh/[email protected] " ,
"start" : " /lib/start.js " ,
"common" : " /lib/common.css " ,
"@radix-ui/colors/" : " https://esm.sh/@radix-ui/[email protected]/ "
}
}Используя приведенную выше карту импорта, мы можем сделать...
import { useCallback } from "react" ;
import startHere from "start" ;
import styles from "common" ;и для CSS...
@import "common" ;
@import "@radix-ui/colors/blue.css" ; Вы также можете написать карту импорта на JavaScript вместо JSON. Поэтому вместо config/import_map.json создайте config/import_map.js и определите анонимную функцию. Эта функция принимает один аргумент environment .
( env ) => ( {
imports : {
react :
env === "development"
? "https://esm.sh/[email protected]?dev"
: "https://esm.sh/[email protected]" ,
} ,
} ) ; Карты исходного кода могут упростить отладку вашего кода. Они кодируют информацию, необходимую для преобразования смещения строки/столбца в сгенерированном выходном файле обратно в смещение строки/столбца в соответствующем исходном входном файле. Это полезно, если ваш сгенерированный код существенно отличается от исходного кода (например, ваш исходный код — TypeScript или вы включили минификацию). Это также полезно, если вы предпочитаете просматривать отдельные файлы в инструментах разработчика вашего браузера, а не один большой связанный файл.
Вывод исходной карты поддерживается как для JavaScript, так и для CSS. К каждому файлу прилагается ссылка на исходную карту. Например:
//# sourceMappingURL=/app/views/layouts/application.js.mapИнструменты разработки вашего браузера должны уловить это и автоматически загружать исходную карту, когда и где это необходимо.
Вы можете импортировать SVG из JS(X), который будет включать в себя исходный код SVG. Кроме того, при импорте из JSX или TSX исходный код SVG будет отображаться как компонент JSX/TSX.
Доступно в
>=0.10.0
Вы можете определить и получить доступ к любой переменной среды из вашего JavaScript и Typescript в пространстве имен proscenium.env .
По соображениям производительности и безопасности вы должны объявить имена переменных среды, которые вы хотите предоставить, в файле config/application.rb .
config . proscenium . env_vars = Set [ 'API_KEY' , 'SOME_SECRET_VARIABLE' ]
config . proscenium . env_vars << 'ANOTHER_API_KEY' Предполагается, что переменная среды с таким же именем уже определена. Если нет, вам нужно будет определить его самостоятельно либо в своем коде, используя объект ENV Ruby, либо в своей оболочке.
Эти объявленные переменные среды будут заменены константными выражениями, что позволит вам использовать это следующим образом:
console . log ( proscenium . env . RAILS_ENV ) ; // console.log("development")
console . log ( proscenium . env . RAILS_ENV === "development" ) ; // console.log(true) Переменные среды RAILS_ENV и NODE_ENV всегда будут объявляться автоматически.
В дополнение к этому, Proscenium также предоставляет process.env.NODE_ENV , для которой установлено то же значение, что и для proscenium.env.RAILS_ENV . Он предоставляется для поддержки существующих инструментов сообщества, которые часто используют эту переменную.
Переменные среды особенно эффективно помогают встряхивать деревья.
function start ( ) {
console . log ( "start" ) ;
}
function doSomethingDangerous ( ) {
console . log ( "resetDatabase" ) ;
}
proscenium . env . RAILS_ENV === "development" && doSomethingDangerous ( ) ;
start ( ) ; В ходе разработки приведенный выше код будет преобразован в следующий код, отбрасывая определение и вызывая doSomethingDangerous() .
function start ( ) {
console . log ( "start" ) ;
}
start ( ) ;Обратите внимание, что по соображениям безопасности переменные среды не заменяются при импорте URL-адресов.
Неопределенная переменная среды будет заменена undefined .
console . log ( proscenium . env . UNKNOWN ) ; // console.log((void 0).UNKNOWN)Это означает, что код, основанный на этом, не будет подвергнут встряхиванию дерева. Эту проблему можно обойти, используя дополнительный оператор цепочки:
if ( typeof proscenium . env ?. UNKNOWN !== "undefined" ) {
// do something if UNKNOWN is defined
} Предоставляется базовая поддержка для импорта файлов локали Rails из config/locales/*.yml и их экспорта в формате JSON.
import translations from "@proscenium/i18n" ;
// translations.en.* По умолчанию вывод Proscenium будет использовать все современные функции JS из спецификации ES2022 и более ранних версий. Например, a !== void 0 && a !== null ? a : b станет a ?? b при минификации (включено по умолчанию в рабочей среде), при которой используется синтаксис версии JavaScript ES2020. Любая функция синтаксиса, не поддерживаемая ES2020, будет преобразована в более старый синтаксис JavaScript, который поддерживается более широко.
Встряхивание дерева — это термин, который сообщество JavaScript использует для устранения мертвого кода, общей оптимизации компилятора, которая автоматически удаляет недоступный код. В Просцениуме тряска деревьев включена по умолчанию.
function one ( ) {
console . log ( "one" ) ;
}
function two ( ) {
console . log ( "two" ) ;
}
one ( ) ; Приведенный выше код будет преобразован в следующий код, исключая two() , поскольку он никогда не вызывается.
function one ( ) {
console . log ( "one" ) ;
}
one ( ) ;Доступно в
>=0.10.0.
Загруженные сбоку ресурсы автоматически разделяются на код. Это означает, что если у вас есть файл, который импортируется и используется, импортирован несколько раз, причем разными файлами, он будет выделен в отдельный файл.
В качестве примера:
// /lib/son.js
import father from "./father" ;
father ( ) + " and Son" ; // /lib/daughter.js
import father from "./father" ;
father ( ) + " and Daughter" ; // /lib/father.js
export default ( ) => "Father" ; И son.js , и daughter.js импортируют father.js , поэтому и сын, и дочь обычно включают копию отца, что приводит к дублированию кода и увеличению размеров пакетов.
Если эти файлы загружаются неопубликовано, то father.js будет выделен в отдельный файл или фрагмент и загружен только один раз.
Код, общий для нескольких точек входа, выделяется в отдельный общий файл, который импортируют обе точки входа. Таким образом, если пользователь сначала просматривает одну страницу, а затем другую, ему не нужно загружать весь JavaScript для второй страницы с нуля, если общая часть уже загружена и кэширована его браузером.
Код, на который ссылается асинхронное выражение import() будет выделен в отдельный файл и загружен только при вычислении этого выражения. Это позволяет вам сократить начальное время загрузки вашего приложения, загружая только тот код, который вам нужен при запуске, а затем лениво загружая дополнительный код, если он понадобится позже.
Без разделения кода выражение import() вместо этого становится Promise.resolve().then(() => require()) . Это по-прежнему сохраняет асинхронную семантику выражения, но означает, что импортированный код включается в тот же пакет, а не выделяется в отдельный файл.
Разделение кода включено по умолчанию. Вы можете отключить его, установив для параметра конфигурации code_splitting значение false в файле /config/application.rb вашего приложения:
config . proscenium . code_splitting = falseЧто касается JavaScript, есть несколько важных предостережений. Они подробно описаны на сайте esbuild.
CSS — это первоклассный тип контента в Proscenium, что означает, что он может напрямую объединять файлы CSS без необходимости импортировать CSS из кода JavaScript. Вы можете @import другие файлы CSS и ссылаться на файлы изображений и шрифтов с помощью url() , и Proscenium объединит все вместе.
Обратите внимание, что по умолчанию вывод Proscenium будет использовать все современные функции CSS. Например, color: rgba(255, 0, 0, 0.4) станет color: #f006 после минимизации в рабочей среде, что использует синтаксис из модуля цвета CSS уровня 4.
Поддерживается новый синтаксис вложенности CSS, который преобразуется в невложенный CSS для старых браузеров.
Proscenium также автоматически вставит префиксы поставщиков, чтобы ваш CSS работал в старых браузерах.
Вы также можете импортировать CSS из JavaScript. Когда вы это сделаете, Proscenium автоматически добавит каждую таблицу стилей в заголовок документа как элемент <link> .
import "./button.css" ;
export let Button = ( { text } ) => {
return < div className = "button" > { text } < / div > ;
} ; Proscenium реализует подмножество модулей CSS. Он поддерживает ключевые слова :local и :global , но не свойство composes . (рекомендуется использовать миксины вместо composes , поскольку они будут работать везде, даже в простых файлах CSS.)
Присвойте любому файлу CSS расширение .module.css , и Proscenium будет рассматривать его как модуль CSS, преобразуя все имена классов суффиксом, уникальным для файла.
. title {
font-size : 20 em ;
}Приведенный выше ввод дает:
. title-5564cdbb {
font-size : 20 em ;
}Теперь у вас есть уникальное имя класса, которое вы можете использовать практически где угодно.
Вы можете ссылаться на модули CSS из своих представлений, партиалов и макетов Rails, используя помощник css_module , который принимает одно или несколько имен классов и возвращает эквивалентные имена модулей CSS — имя класса с добавленным уникальным суффиксом.
При настройке боковой загрузки вы можете использовать помощник css_module следующим образом.
< div >
< h1 class =" <%= css_module :hello_title %> " > Hello World </ h1 >
< p class =" <%= css_module :body , paragraph : %> " >
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</ p >
</ div > css_module принимает несколько имен классов и возвращает разделенную пробелами строку преобразованных имен модулей CSS.
css_module :my_module_name
# => "my_module_name-ABCD1234"Вы даже можете ссылаться на класс из любого файла CSS, передав URL-путь к файлу в качестве префикса к имени класса. При этом таблица стилей будет автоматически загружена.
css_module '/app/components/button.css@big_button'
# => "big_button"Он также поддерживает пакеты NPM (уже установленные в /node_modules):
css_module 'mypackage/button@big_button'
# => "big_button" css_module также принимает аргумент ключевого слова path , который позволяет вам указать путь к файлу CSS. Обратите внимание, что при этом будет использоваться указанный путь для всех имен классов, передаваемых в этот экземпляр css_module .
css_module :my_module_name , path : Rails . root . join ( 'app/components/button.css' ) Импорт модуля CSS из JS автоматически добавит таблицу стилей в заголовок документа. Результатом импорта будет объект класса CSS для имен модулей.
import styles from "./styles.module.css" ;
// styles == { header: 'header-5564cdbb' }Важно отметить, что экспортированный объект имен модулей CSS на самом деле является объектом прокси-сервера JavaScript. Так что деструктурировать объект не получится. Вместо этого вы должны получить доступ к свойствам напрямую.
Кроме того, импорт модуля CSS в другой модуль CSS приведет к созданию одной и той же строки дайджеста для всех классов.
Proscenium предоставляет функциональные возможности для включения или «смешивания» одного или нескольких классов CSS в другой. Это похоже на свойство composes модулей CSS, но работает везде и не ограничивается модулями CSS.
CSS-миксины поддерживаются с помощью at-правил @define-mixin и @mixin .
Миксин определяется с помощью at-правила @define-mixin . Передайте ему имя, которое должно соответствовать семантике имени класса, и объявите свои правила:
// /lib/mixins.css
@define-mixin bigText {
font-size : 50 px ;
} Используйте примесь, используя правило @mixin . Передайте ему имя миксина, который вы хотите использовать, и URL-адрес, по которому он объявлен. URL-адрес используется для разрешения примеси и может быть относительным, абсолютным, URL-адресом или даже из пакета NPM.
// /app/views/layouts/application.css
p {
@mixin bigText from url ( "/lib/mixins.css" );
color : red;
}Вышеупомянутое дает следующий результат:
p {
font-size : 50 px ;
color : red;
}Миксины могут быть объявлены в любом файле CSS. Их не обязательно объявлять в том же файле, где они используются. однако, если вы объявляете и используете примесь в одном и том же файле, вам не нужно указывать URL-адрес, по которому объявлен примесь.
@define-mixin bigText {
font-size : 50 px ;
}
p {
@mixin bigText;
color : red;
}CSS-модули и миксины прекрасно работают вместе. Вы можете включить примесь в модуль CSS.
Что касается CSS, есть несколько важных предостережений. Они подробно описаны на сайте esbuild.
Typescript и TSX поддерживаются «из коробки» и имеют встроенную поддержку анализа синтаксиса TypeScript и удаления аннотаций типов. Просто переименуйте файлы в .ts или .tsx , и все готово.
Обратите внимание, что Proscenium не выполняет никакой проверки типов, поэтому вам все равно придется запускать tsc -noEmit параллельно с Proscenium для проверки типов.
Что касается Typescript, есть несколько важных предостережений. Они подробно описаны на сайте esbuild.
Использование синтаксиса JSX обычно требует ручного импорта используемой вами библиотеки JSX. Например, если вы используете React, по умолчанию вам нужно будет импортировать React в каждый файл JSX следующим образом:
import * as React from "react" ;
render ( < div / > ) ; Это связано с тем, что преобразование JSX превращает синтаксис JSX в вызов React.createElement , но само по себе ничего не импортирует, поэтому переменная React не отображается автоматически.
Proscenium генерирует для вас эти операторы импорта. Имейте в виду, что это также полностью меняет способ работы преобразования JSX, поэтому это может привести к поломке вашего кода, если вы используете библиотеку JSX, отличную от React.
В [не слишком отдаленном] будущем вы сможете настроить Proscenium для использования другой библиотеки JSX или полностью отключить этот автоматический импорт.
При импорте файлов .json файл JSON анализируется в объект JavaScript и экспортируется в качестве объекта экспорта по умолчанию. Его использование выглядит примерно так:
import object from "./example.json" ;
console . log ( object ) ;Помимо экспорта по умолчанию, для каждого свойства верхнего уровня в объекте JSON также существует именованный экспорт. Импорт именованного экспорта напрямую означает, что Proscenium может автоматически удалять неиспользуемые части файла JSON из пакета, оставляя только тот именованный экспорт, который вы действительно использовали. Например, этот код будет включать поле версии только в комплекте:
import { version } from "./package.json" ;
console . log ( version ) ; Phlex — это платформа для создания быстрых, многократно используемых и тестируемых представлений на чистом Ruby. Proscenium отлично работает с Phlex, поддерживает неопубликованную загрузку, модули CSS и многое другое. Просто напишите свои классы Phlex и наследуйте их от Proscenium::Phlex .
class MyView < Proscenium :: Phlex
def view_template
h1 { 'Hello World' }
end
end В свои макеты включите Proscenium::Phlex::AssetInclusions и вызовите помощник include_assets .
class ApplicationLayout < Proscenium :: Phlex
include Proscenium :: Phlex :: AssetInclusions # <--
def view_template ( & )
doctype
html do
head do
title { 'My Awesome App' }
include_assets # <--
end
body ( & )
end
end
end Вы можете включать ресурсы CCS и JS, используя помощники include_stylesheets и include_javascripts , что позволяет вам контролировать, где они включаются в HTML.
Любой класс Phlex, наследующий Proscenium::Phlex будет автоматически загружен неопубликовано.
Модули CSS полностью поддерживаются в классах Phlex с доступом к помощнику css_module , если он вам нужен. Однако есть лучший и более кажущийся способ ссылаться на классы модулей CSS в ваших классах Phlex.
В ваших классах Phlex любые имена классов, начинающиеся с @ будут рассматриваться как класс модуля CSS.
# /app/views/users/show_view.rb
class Users :: ShowView < Proscenium :: Phlex
def 
