Clever Geek Handbook

ما يجب القيام به إذا كنت تأخذ إطار الواجهة الأمامية هو المبالغة

يشمل المثال



توفر الإطارات الأمامية الحديثة إمكانيات مذهلة. تم تصميم React و Vue و Angular وغيرهم للقيام بما كان مستحيلًا في السابق - تطبيقات الويب. في عام 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, . , . .



, , Github, , gulpfile.



, ?



ماذا سنفعل



. , 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.
  • @@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')"
})


:



More articles:


All Articles