Предыдущая лекция | | Следующая лекция :----------------:|:----------:|:----------------: | [Содержание](../readme.md#практика-№2-разработка-web-приложений) | [Знакомство с VUE.js](./vue_intro.md) # Основы WEB-разработки >Скроее всего Вы услышите много новых слов - запишите их в тетрадку и спросите всё что не поняли. WEB разработка делится на две независимые части: **Фронтенд** и **Бэкенд** ## Фронтенд **Вся лицевая сторона**. Фронтенд-разработчик отвечает за то, что пользователь видит и с чем взаимодействует на странице. Например: дизайн, визуальные элементы, схемы. Задачи фронтендера — сделать сайт, который будет решать задачи владельца, одинаково корректно работать на всех устройствах, независимо от браузера и размера экрана и при этом будет удобен пользователю. Основные инструменты: **HTML**, **CSS** и **JavaScript**. ## Бэкенд **Невидимая часть сайта**. Бэкенд-разработчик отвечает за то, что скрыто от глаз пользователя и работает на сервере. Например: создание базы данных и программы, которые будут записывать информацию в базу, шифрование паролей и ценной информацией, настраивание доступов и системы резервного копирования данных, написание программы, обрабатывающие информацию, невидимую пользователю. Языков программирования для бэкенда много, например: **PHP**, **Ruby**, **Python** или **Node.js**. Для бэкенд-разработки нужны системы управления базами данных: **MySQL**, **PostgreSQL**, **SQLite** или **MongoDB**. ## Вёрстка страниц Вне зависимости от того, что вы выберете: фронтенд или бэкенд, вам придётся взаимодействовать с веб-страницами. Для этого надо изучить **HTML** и **CSS**. >IMHO это утверждение не всегда верно. Да, большинство "старых" бекенд-фреймворков содержат шаблонизаторы для формирования **HTML** файлов, но современные JS-фреймворки формируют контент на лету в браузере и в бекенд ходят только за данными. Таким образом бекенд-разработчик может сосредоточиться на работе с данными. ### HTML Это язык гипертекстовой разметки. Отвечает за структуру и содержание страницы. Он состоит из тегов, а тег состоит из имени, заключённого между знаками «меньше» и «больше». Например: `

`, `
` и `
`. Вспомните, как вы работаете с документом в текстовом редакторе. Пишете текст, фрагменты выделяете курсивом или цветом, вставляете картинки или таблицы. Веб-разработчик делает то же самое в редакторе кода с помощью тегов. Вместо расширения `.txt` тут используется `.html`. Оно даёт понять браузеру, что внутри файла находится код веб-страницы. Браузер разбирает его структуру, определяет взаиморасположение элементов и визуализирует их. ```html HTML Документ
**Этот текст будет полужирным, а этот — ещё и курсивным.
``` Веб-стандарты HTML** описаны в спецификациях. Это главный источник знаний и для браузеров, и для разработчиков. Важно следить за их обновлениями. ### CSS Это язык, который используется для стилизации вашей разметки. Например: сделать текст красным, выровнять по левую сторону, округлить углы изображения, поиграть со шрифтами, сделать отступы больше или меньше. ```css /* свойству font-family передаются сразу несколько шрифтов и название семейства / p { font-family: "Arial", "Helvetica", sans-serif; } ``` Тег `
` отвечает за формирование текстового абзаца. Допустим, нам нужно чтобы все `
` на странице получили одинаковые свойства. Для этого надо подключить к странице стили. Пока они не подключены никакого эффекта от них не будет. Стили можно встроить внутри HTML-кода страницы (инлайново) или подключить их как внешний файл. Чаще всего стили подключают из внешнего файла с расширением `.css`. Так разметка отделяется от стилизации, снижается вероятность ошибки, внешний файл кешируется и не загружается повторно. Для подключения из внешнего файла используется тег ``. ```html ``` Знание основ HTML и CSS позволит создавать простые сайты с текстовым наполнением. Если хотите что-то посложнее, не обойтись без языков программирования. ## Программирование ### JavaScript Браузерный язык программирования для фронтенд-разработки. Его поддерживают все популярные браузеры. Каждый сайт, каждое веб-приложение, которым вы пользовались содержит JavaScript-код. Его часто рекомендуют для изучения новичкам, потому что он достаточно простой, но содержит все фундаментальные вещи: объектно-ориентированную модель и структуры данных. Применяется, чтобы оживить HTML-страницы: добавить на страницу обработку действий пользователя или интересные визуальные эффекты. Возможности применения JavaScript ограничиваются только вашей фантазией и поддержкой браузеров. Не путайте его с Java, это совершенно разные языки. ### PHP Серверный язык программирования, на котором пишут бэкендеры. Он создан специально для веб-разработки — написанный на нём код можно внедрить в HTML. Когда вы открываете свою страницу в социальной сети и вводите логин-пароль, компьютер формирует запрос с вашими данными и отправляет на сервер. На стороне сервера PHP получает информацию из базы данных, которая тоже лежит на сервере и формирует вашу страницу: передаёт на фронтенд имя, фотографию, заполняет поля. Результат оформляется в виде готового HTML и отправляется вам в браузер. PHP не самый сложный язык, но чтобы раскрыть все его возможности, потребуется изучить и другие технологии. Например, работу с базами данных: язык SQL, а также MySQL, PostgreSQL, SQLite или MongoDB. База данных — это место, в котором хранятся данные сайта. Это могут быть тексты страниц, списки пользователей с их логинами и паролями, каталоги продукции и многое другое. На PHP пишется серверная логика для интернет-магазинов, сервисов бронирования, а также крупных проектов, которыми пользуются миллионы людей: «Википедия» и «ВКонтакте». ### React Библиотека на языке JavaScript. Используется для создания веб-приложений. Уметь пользоваться библиотеками нужно, чтобы оптимизировать написание кода и не тратить много времени на поиск ошибок. В библиотеке хранятся готовые решения, которые можно использовать для типовых задач. Чтобы написать приложение с помощью React, недостаточно знать HTML, CSS и JavaScript. Библиотеку придётся изучить отдельно. Но если у вас уже есть базовые знания JavaScript, проблем с этим не будет. ### Vue JavaScript-фреймворк. Как и React используется для создания веб-приложений. На нём мы дальше и будем писать. Vue приложение содержит и верстку и стили и логику. При выполнении в браузере строится виртуальный DOM, в котором формируется содержимое, а затем это содержимое отрисовывается в окне браузера. АПИ будем использовать то, которое написали на `C#`. ## Полезные ссылки ### Видео курс по vue.js (незаконченный) 1. [О структуре (видео)](https://www.youtube.com/watch?v=4XTy6ucbLNg&list=PLvTBThJr861yMBhpKafII3HZLAYujuNWw&index=1) 1. [Зачем нужен Vue.js? - Vue.js: концепции](https://www.youtube.com/watch?v=4xyb_tA-uw0&list=PLvTBThJr861yMBhpKafII3HZLAYujuNWw&index=2) 1. [Реактивность - Vue.js: концепции](https://www.youtube.com/watch?v=LV235z6qOUI) 1. [Двустороннее связывание - Vue.js: концепции](https://www.youtube.com/watch?v=U2ZJCMiQuo8) 1. [Как во Vue.js использовать Х - Vue.js: нюансы](https://www.youtube.com/watch?v=orWKmX4xO1g) 1. [Знакомство - Vue.js: практика](https://www.youtube.com/watch?v=LN29isbbmsk) >[Упомянутый codesandbox](https://codesandbox.io/s/vuex-lagging-getter-forked-n2stm) 1. [Декларативность - Vue.js: концепции](https://www.youtube.com/watch?v=pp-VE5m9pvc) 1. [Бизнес логика или детали реализации? - Vue.js: концепции](https://www.youtube.com/watch?v=i5kUQl6hvoo) ### JavaScript 1. [Учебник по JavaScript](https://learn.javascript.ru/) Предыдущая лекция | | Следующая лекция :----------------:|:----------:|:----------------: | [Содержание](../readme.md#практика-№2-разработка-web-приложений) | [Знакомство с VUE.js](./vue_intro.md)