PROGRAMMS
Сборка
Хаотическое развитие веба породило безумное количество сборщиков разной степени унылости. Но вендоры браузеров каждый день неустанно утверждают, что можно обойтись без них. Мы им поверим и заодно посмотрим, чего можно добиться не используя никаких систем сборки, а полагаясь только на ванильный js и css.
Компоненты
Так как мы не готовы переходить на новый стек с модным сервер рендером, то будет использоваться два вида "компонентов" - серверные шаблоны на twig чтоб рендерить видимые поисковыми машинами части сайта и Custom Elements для всего остального.
Серверная часть
На первое время её не будет, только статичная html страница. В дальнейшем возможно добавим некий ajax, чтоб демка была похожа на нечто вменяемое.
Средства работы с кодом
Для форматирования js будем использовать ESLint настроенный таким образом:
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended"
],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"rules": {
"curly": "off",
"semi": ["error", "never"],
"quotes": ["error", "single"],
"no-unsafe-optional-chaining": "off",
"no-console": "warn",
"no-eq-null": "warn",
"no-case-declarations": "off"
}
}Из важного, он удаляет лишние точки с запятой в конце строк и заменяет двойные кавычки на одинарные там, где это возможно. Таким образом приводит код в более единообразное состояние.
Мы знаем про Prettier но он не очень гибко настраивается, так что обойдёмся без него.
Код
Для начала напишем базовый код чтоб выбить соточки на LightHouse:
<!DOCTYPE html>
<html lang="ru">
<head>
<title>XGM - Next</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Make XGM great again!">
<link rel="shortcut icon" type="image/png" href="favicon.png">
</head>
<body>
<main>
<h1>Новый дизайн XGM</h1>
</main>
</body>
</html>
Наш новый, прекрасный сайт выглядит просто замечательно:
Но это пока неважно. Вы наверно заметили, интересную аббревиатуру PWA, которая, судя по минусу не реализована.
Вот с неё то мы и начнём в следующей статье.
