O que fazer se você adotar uma estrutura de front-end é um exagero

Exemplo @@ include



As estruturas modernas de front-end oferecem possibilidades surpreendentes. React, Vue, Angular e outros são criados para fazer o que antes era impossível - aplicativos da Web. Em 2020, o download e a instalação de aplicativos não são mais necessários. Por que, se tudo puder ser feito no site?



No entanto, com grande força vem um grande número de vícios. E há entusiastas que decidem que construir uma grande estrutura para seu pequeno projeto não é uma má idéia. Mesmo que seja apenas uma página de destino.



Sobre esta questão, apoio os "conservadores". Não há necessidade de escrever páginas de destino e várias páginas no Create-React-App, para isso você pode usar as estatísticas usuais.



No entanto, eu também entendo perfeitamente quem faz o contrário. As estruturas de front-end modernas não apenas fornecem muitas funcionalidades novas, mas também são muito fáceis de usar. E se eu precisar criar um site simples com algumas páginas, não tenho muita escolha.



? HTML- ? view? , . , -.



-, data-driven. , – . , , . .



– . . – . – .



, data-driven . – Alpine.js. ? – gulp-file-include.



, , 100? , , . 4 1.0.0, , React (15). , .



Github 6,5 npm, , , HTML . .



– Gulp. , , – . , Gulp, . , . .



, , Github, , gulpfile.



, ?



O que faremos



. , HTML.



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' – , . , src partials, . Gulp, . , Gulp src, . , .
  • filters – , . .
  • context – "" @@if.


:



  • @@include – HTML- HTML.
  • @@if – ; "" context / @@include.
  • @@forcontext/ @@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')"
})


:




All Articles