现代的前端框架提供了惊人的可能性。React，Vue，Angular和其他工具旨在完成以前无法实现的任务-Web应用程序。在2020年，不再需要下载和安装应用程序。为什么，如果一切都可以在网站上完成？
但是，巨大的成瘾伴随着巨大的成瘾。而且，有一些发烧友认为为自己的小型项目构建大型框架并不是一个坏主意。即使只是登陆页面。
关于这个问题，我支持“保守派”。无需在Create-React-App上编写登录页面和多页面，为此，您可以使用常规的静态方法。
但是，我也完全理解那些不这样做的人。现代的前端框架不仅提供了许多新功能，而且非常易于使用。而且，如果我需要用几个页面制作一个简单的网站，我没有太多选择。
该怎么办？在一个文件中编写一张HTML标记吗？在视图中存储数据？这不是退后一步，而是跌倒并跌入深渊。这不仅带来不便，还违背了前端开发的现代范式。
首先，数据驱动。数据是最重要的，外观只是一种显示。用户进行操作，数据更改，然后显示更改。这就是所有现代框架的工作方式。
现代方法的另一个要素是组件。我们将应用程序划分为几个自给自足的可重用块。更高的可重用性意味着更少的代码。更少的代码意味着更少的错误。
, data-driven . – Alpine.js. ? – gulp-file-include.
, , 100? , , . 4 1.0.0, , React (15). , .
Github 6,5 npm, , , HTML . .
– Gulp. , , – . , Gulp, . , . .
, ?
. , HTML.
<section class="text-gray-700 body-font">
<div class="container px-5 py-24 mx-auto">
<h1 class="mb-20 text-2xl font-medium text-center text-gray-900 sm:text-3xl title-font">
,
</h1>
<div class="flex flex-wrap -mx-4 -mt-4 -mb-10 sm:-m-4 md:mb-10">
<div
class="flex flex-col items-center p-4 mb-6 sm:flex-row lg:w-1/3 md:mb-0 sm:items-stretch"
>
<div
class="inline-flex items-center justify-center flex-shrink-0 w-12 h-12 mb-4 text-indigo-500 bg-indigo-100 rounded-full"
>
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
>
<path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
</svg>
</div>
<div class="flex-grow pl-6">
<h2 class="mb-2 text-xl font-medium text-gray-900 title-font"> </h2>
<p class="text-lg leading-relaxed">
, , .
</p>
</div>
</div>
<div
class="flex flex-col items-center p-4 mb-6 lg:w-1/3 md:mb-0 sm:flex-row sm:items-stretch"
>
<div
class="inline-flex items-center justify-center flex-shrink-0 w-12 h-12 mb-4 text-indigo-500 bg-indigo-100 rounded-full"
>
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
>
<circle cx="6" cy="6" r="3"></circle>
<circle cx="6" cy="18" r="3"></circle>
<path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12"></path>
</svg>
</div>
<div class="flex-grow pl-6">
<h2 class="mb-2 text-xl font-medium text-gray-900 title-font">
</h2>
<p class="text-lg leading-relaxed">
, , .
</p>
</div>
</div>
<div
class="flex flex-col items-center p-4 mb-6 lg:w-1/3 md:mb-0 sm:flex-row sm:items-stretch"
>
<div
class="inline-flex items-center justify-center flex-shrink-0 w-12 h-12 mb-4 text-indigo-500 bg-indigo-100 rounded-full"
>
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
>
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
</div>
<div class="flex-grow pl-6">
<h2 class="mb-2 text-xl font-medium text-gray-900 title-font">
</h2>
<p class="text-lg leading-relaxed">
- , , , .
</p>
</div>
</div>
</div>
</div>
</section>! , . , TailwindCSS, , . , , , TailwindCSS – . , . , , , , developer-experience.
. . gulp-file-include HTML , @@include(< >, < >).
gulpfile . :
function html() {
return src('src/*.html')
.pipe(fileinclude({ basepath: './src/partials' }))
.pipe(dest('dist'));
} HTML- src, dist. . .
prefix–@@.suffix– .basepath– , .'@file'– HTML-.'@root'– , . ,srcpartials, . Gulp, . , Gulpsrc, . , .filters– , . .context– ""@@if.
:
@@include– HTML- HTML.@@if– ; ""context/@@include.@@for–context/@@include.@@loop– , , . JSON.
@@loop. JSON-, , .
? : , SVG. , HTML . , .
JSON (data.json).
[
{
"title": " ",
"text": " , , .",
"svg": "<path d=\"M22 12h-4l-3 9L9 3l-3 9H2\"></path>"
},
{
"title": " ",
"text": " , , .",
"svg": "<circle cx=\"6\" cy=\"6\" r=\"3\"></circle><circle cx=\"6\" cy=\"18\" r=\"3\"></circle><path d=\"M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12\"></path>"
},
{
"title": " ",
"text": " - , , , .",
"svg": "<path d=\"M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2\"></path><circle cx=\"12\" cy=\"7\" r=\"4\"></circle>"
}
] (card.html). @@< >.
<div
class="flex flex-col items-center p-4 mb-6 sm:flex-row lg:w-1/3 md:mb-10 sm:items-stretch"
>
<div
class="inline-flex items-center justify-center flex-shrink-0 w-12 h-12 mb-4 text-indigo-500 bg-indigo-100 rounded-full"
>
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
>
@@svg
</svg>
</div>
<div class="flex-grow pl-6">
<h2 class="mb-2 text-xl font-medium text-gray-900 title-font">@@title</h2>
<p class="text-lg leading-relaxed">@@text</p>
</div>
</div>(index.html).
<section class="text-gray-700 body-font">
<div class="container px-5 py-24 mx-auto">
<h1 class="mb-20 text-2xl font-medium text-center text-gray-900 sm:text-3xl title-font">
,
</h1>
<div class="flex flex-wrap -mx-4 -mt-4 -mb-10 sm:-m-4">
@@loop('problems/card.html', 'partials/problems/data.json')
</div>
</div>
</section> @@loop ( basepath), – JSON- ( src).
:
src
│ index.html
│ main.css
│
└───partials
│ │
│ └───problems
│ │ index.html
│ │ card.html
│ │ data.json
... index.html @@include .
<!DOCTYPE html>
<html lang="ru">
<head>
...
</head>
<body>
...
@@include('problems/index.html')
...
</body>
</html>. , , HTML, . , , TailwindCSS, – , , ? – .
. , , , . , , . , , .
UPD: extend. . , -. .
@@include.
- layout-, @@data ( , "content", )
<!DOCTYPE html> <html lang="ru"> <head>...</head> <body> ... @@data ... </body> </html>
index, layout,data@@include
@@include('layouts/app.html', { "data": "@@include('main.html')" })
: