Курс по уеб интерфейси с Vue

Проблем

Програмата е вярна. Клиентите се оплакват

Сметката на кошницата е вярна, а тестовете минават. Но на телефона бутонът „Поръчай“ е извън екрана. Човек, който ползва екранен четец, чува само „бутон“, без да знае какъв. Списъкът с продукти замръзва, докато се зарежда, а при бърз клик поръчката тръгва два пъти.

Хората виждат програмата през екран. Ако екранът се чупи, програмата не работи, колкото и вярна да е отдолу. Този курс учи как се прави екранът.

Идеята

Как браузърът показва страница

Браузърът иска страницата от сървъра и получава HTML: текст, който казва какво има на нея.
От HTML строи дърво от елементите: заглавие, абзац, бутон. Това дърво се казва DOM.
Прилага CSS: правилата за цвят, размер и подредба. Смята къде отива всеки елемент и го рисува.
JavaScript променя дървото: добавя продукт в списъка, сменя текста на бутона. Браузърът рисува наново само каквото е засегнато.

Целият курс е за тези четири стъпки. Първо ги правиш на ръка, а после виждаш как React и Vue правят четвъртата вместо теб.

Идеята

Пясъчникът

Кодът в уроците се пуска направо в страницата. Пробвай: натисни „Изпълни“, после бутона в страницата отдолу. Смени текста в script.js и пусни пак.

HTML, CSS, JS

<!doctype html>
<html lang="bg">
  <head>
    <meta charset="utf-8">
    <title>Кошницата</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Кошницата</h1>
    <p id="count">Кошницата е празна</p>
    <button type="button" id="add">Добави хляб</button>
    <script src="script.js"></script>
  </body>
</html>

body { font-family: system-ui, sans-serif; padding: 16px; }
button { font-size: 16px; padding: 8px 16px; }

let count = 0;
const text = document.querySelector('#count');
document.querySelector('#add').addEventListener('click', () => {
  count++;
  text.textContent = `В кошницата: ${count} ${count === 1 ? 'продукт' : 'продукта'}`;
  console.log('добавен хляб, общо', count);
});

Файловете са в табове: index.html, style.css, script.js, а по-нататък и компонентите. Ctrl+Enter (⌘+Enter на Mac) пуска кода, а „Върни кода“ връща примера.
Конзолата е под страницата: там са console.log и грешките.
Пясъчникът е изолиран. Кодът не вижда сайта, бисквитките и паметта му и няма мрежа. На fetch('/api/…') отговаря мнимо API с данните на магазина, а уроците включват нарочно бавен отговор, грешка или празен списък.
Задачите се проверяват по поведение. „Провери“ натиска бутоните и пише в полетата като човек и търси елементите по роля и име, както ги намира екранен четец. Бутон без име не се намира, затова задачата проверява и достъпността.
Безкраен цикъл в кода спира раздела на браузъра. Тогава презареди страницата: кодът ти е запазен.

Идеята

Двете части

Първата част е платформата: HTML, CSS и DOM. Тя е една и съща за React и Vue, затова текстът и кодът са еднакви на двете страници.

Структурата на страницата: елементи и дървото, текст и връзки, формуляри, достъпност.
Как изглежда: каскадата, кутиите, flexbox, grid, страница за телефон.
JavaScript в страницата: DOM, събития, списък от данни, данни от API.

Втората част са компонентите: защо при голям интерфейс ръчното пипане на DOM се чупи и как интерфейсът става функция на данните.

Компоненти, Състояние, Ефекти, данни и формуляри, Цяло приложение (рутиране, бързина, тестове, истински проект).
Проект: витрината на магазина: каталог, кошница и поръчка в едно приложение.

Идеята

React или Vue

Двете библиотеки решават една задача: описваш как изглежда интерфейсът за дадени данни, а библиотеката обновява страницата, когато данните се сменят. Ето една и съща кошница на двете:

Vue

App.vue

<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>

<template>
  <main>
    <h1>Кошницата</h1>
    <p>{{ count === 0 ? 'Кошницата е празна' : `В кошницата: ${count} ${count === 1 ? 'продукт' : 'продукта'}` }}</p>
    <button type="button" @click="count++">Добави хляб</button>
  </main>
</template>

Това е кодът на Vue: компонентът е файл .vue с шаблон, скрипт и стил. React кодът е на страницата за React.

Не ги класираме. Идеите са едни и същи, а разликата е в записа: React е JavaScript с HTML вътре, Vue е HTML шаблон с JavaScript вътре. Избери едната с „Библиотека:“ над урока и смени по всяко време. Ако не знаеш коя: виж какво ползват фирмите, където искаш да работиш. Като знаеш едната, другата се учи за дни. Има и други (Angular, Svelte, Solid). Те почиват на същите идеи.

Идеята

Какво трябва да знаеш

От JavaScript ти трябват функции, обекти и масиви с map и filter, модули с import и async/await: курсът по JavaScript до „Модерен JavaScript“. Където урокът ползва нещо оттам, сочи към него.

В браузъра не трябва нищо за инсталиране. За свой проект извън пясъчника ти трябват Node.js, редактор (например VS Code) и Vite, който прави празен проект:

npm create vite@latest shop -- --template vue
cd shop
npm install
npm run dev

Тези команди не се пускат тук. Как изглежда истински проект, е последният урок от „Цяло приложение“.

Тест

Провери се

1. Браузърът получи HTML. Какво прави, преди да нарисува нещо?Строи дърво от елементите (DOM) и смята къде отива всекиРисува текста ред по редПуска JavaScript, а той рисува страницата

2. Кодът в пясъчника вика fetch("https://example.com/data"). Какво става?Заявката не излиза: пясъчникът няма мрежа и отговаря само на /api/… на магазинаДанните идват от интернетСтраницата на урока се презарежда

3. React или Vue: кое е по-доброто?React, защото е по-известенVue, защото е по-новНито едното: решават една задача по различен начин, а изборът е на екипа

Добре дошъл

Бисквитки