Уеб програмиране от нулата: front-end, back-end, бази данни и HTTP

Уеб програмирането е повече от красива страница. Зад всеки сайт с вход, количка или търсачка има три части: това, което браузърът показва (front-end), програмата на сървъра, която решава какво да покаже (back-end), и базата данни, в която се пази информацията. Между тях върви протоколът HTTP. Човек, който разбира и трите части и връзките между тях, може да построи цяло уеб приложение.

Тук описваме цялата карта и реда, в който се учи. Частта в браузъра (HTML, CSS, JavaScript и React) е разгледана подробно в ръководството за front-end разработка, затова тук я засягаме накратко.

HTTP: езикът между браузъра и сървъра

Всичко започва със заявка. Браузърът (клиентът) пита, сървърът отговаря. MDN описва HTTP като протокол за извличане на ресурси, основата на обмена на данни в мрежата. Заявката съдържа метод (например GET за четене или POST за изпращане на форма), пътя до ресурса, версията на протокола и заглавия (headers). Отговорът съдържа код на състоянието, например 200 OK, заглавия и по желание тяло: HTML, изображение, JSON.

Две неща от HTTP обясняват много от уеб програмирането:

• HTTP няма памет. Две последователни заявки не знаят една за друга. Сесиите, входът в профил и количката работят чрез бисквитки (cookies), които добавят състояние върху протокола.
• Версиите се различават по пренасяне, не по смисъл. HTTP/1.1 въвежда постоянни връзки, а HTTP/2 опакова съобщенията в двоични рамки и пуска много заявки по една връзка. Методите и кодовете остават същите.

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

Front-end: това, което виждате

HTML дава структурата, CSS вида, а JavaScript поведението. Учебната програма на MDN поставя в ядрото си точно тези три технологии, плюс увод в рамки като React, достъпност и контрол на версиите. Това е основата и за front-end, и за full stack разработчика. Подробен план има в ръководството за front-end, а за разликата между уеб и мобилни приложения вижте отделния материал.

Back-end: програмата на сървъра

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

• взима данни от база и сглобява от тях страницата, вместо да има отделен файл за всеки продукт или статия;
• връща данни като JSON за приложения, които рисуват интерфейса в браузъра;
• проверява кой е потребителят и показва само това, до което има достъп;
• пази сесията, например дали сте влезли в профила си;
• изпраща имейли и известия, например потвърждение при регистрация.

Езиците тук са много: PHP, Python, Ruby, C#, JavaScript чрез Node.js и други. MDN подчертава, че на практика почти винаги се работи с рамка (framework), например Django за Python или Express за Node.js, защото тя дава готови сесии, удостоверяване, достъп до база и шаблони. Ако вече учите Python, естественото продължение е Django; ако идвате от front-end, Node.js и Express ви позволяват да останете в JavaScript. За Python има отделен план за начинаещи.

Бази данни

Повечето уеб приложения пазят данните си в релационна база. В документацията на PostgreSQL принципът е обяснен просто: данните са в таблици, всяка таблица е колекция от редове, а всеки ред има едни и същи именувани колони с определен тип. Таблиците се групират в бази данни. С езика SQL четете, добавяте и променяте редове, а редът на резултатите се задава изрично при заявката.

Начинаещият трябва да може да проектира няколко свързани таблици, например потребители и поръчки, да пише основни заявки и да разбира защо паролите не се пазят като обикновен текст. За сигурността на уеб приложенията има отделен материал с конкретни уроци.

В какъв ред да учите

Колко време отнема, никой сериозен източник не обещава с точност: MDN казва, че целта на програмата му е да ви изведе от „начинаещ“ до „уверен“, а не до „експерт“. Мерете напредъка с работещи проекти, не с часове.

Безплатни програми, които покриват всичко

• MDN Learn web development. Ядро за front-end и допълнителни модули, сред които сървърна част с Django (Python) или Express (Node.js), тестване и производителност. Има упражнения „Test your skills“ и задачи, които събират няколко умения в цял проект.
• The Odin Project. Безплатна учебна програма с отворен код. След общ модул Foundations предлага две пътеки: Full Stack JavaScript (7 курса) и Full Stack Ruby on Rails (8 курса), които се минават в посочения ред.

Каквато и програма да изберете, публикувайте проектите си. Как да ги подредите така, че да ги види работодател, обясняваме в материала за портфолио в GitHub.