Введение во Frontend

Технопарк, весна, 2024 г.

Введение во Frontend
Слайды доступны по ссылке
frontend.tech-mail.ru

Давайте знакомиться!

Александр
Сарафанников
Почта Mail.ru
Дмитрий
Дорофеев
Truv Inc
Сергей
Володин
Indeed, Japan

Давайте знакомиться #2!

Александр
Цветков
Почта Mail.ru
Михаил
Волынов
Почта Mail.ru
Дмитрий
Пешков
Почта Mail.ru

Что такое Frontend? это вёрстка, HTML и CSS?

Что такое Frontend?

Frontend — публичная часть web-приложений, с которой непосредственно контактирует и взаимодействует пользователь. Во Frontend входят отображение пользовательского интерфейса, функционал, выполняющийся на стороне клиента, и обработка пользовательских запросов

Так же можно встретить название "client-side"

Что такое web-приложение?

Web-приложение — клиент-серверное приложение, в котором клиентом выступает в основном браузер, а сервером — web-сервер. Логика веб-приложения распределена между сервером и клиентом, хранение данных осуществляется преимущественно на сервере, обмен информацией происходит по сети

Примеры web-приложений — vk.com, google.com, facebook.com...

Что такое Frontend-разработка?

Frontend-разработка — это работа по созданию публичной части веб-приложения, с которой непосредственно контактирует пользователь, и функционала который обычно выполняется на стороне клиента

Что будем делать?

Продукт!

Семестровый проект

веб-приложение

Примеры семестровых проектов

Примеры семестровых проектов

Примеры семестровых проектов

Примеры семестровых проектов

Менторы

Менторы

Наша Dream-team Менторов (ч. 1)

Наша Dream-team Менторов (ч. 2)

Пешков Дмитрий
Старший ментор
По любым вопросам по взаимодействию с менторами
https://t.me/DmPesh

Проблемы

Структура курса

Первый модуль

РК 1, оценивается в 25 баллов

Второй модуль

РК 2, оценивается в 30 баллов

Третий модуль

РК 3, оценивается в 15 баллов

Четвёртый модуль

РК 4, оценивается в 10 баллов

Видео с лекций

Видео с лекций

Видео с защиты проектов

Что по чём?

Максимальная сумма баллов за семестр — 100 баллов

Как проходит рубежный контроль

Критерии оценивания

Итоговая оценка

Product-first!

Дополнительные критерии (sic!)

Для получения оценки удовлетворительно , необходимо следующее:

Дополнительные критерии (sic!)

Для получения оценки хорошо , необходимо также:

Дополнительные критерии (sic!)

Для получения оценки отлично , необходимо:

Все требования на одной странице

За что отвечает Frontend

Особенности работы

Будет круто!

Теория клиент-серверного взаимодействия
Порядок работы

Как работают сайты?

Клиент-серверная модель

Клиент – серверная модель — вычислительная или сетевая архитектура, в которой задания или сетевая нагрузка распределены между поставщиками услуг, называемыми серверами, и заказчиками услуг, называемыми клиентами

Клиент-серверная модель

Структура web-приложений: этап 1

Структура web-приложений: этап 1

На данном этапе сайты назывались web-ресурсами

Структура web-приложений: этап 2

Структура web-приложений: этап 2

На данном этапе сайты назывались web-сервисами

Структура web-приложений: этап 3

Структура web-приложений: этап 3

Сейчас такие сайты правильно называть web-приложениями

Современные web-приложения

Практика!

В какой ОС разрабатывать?

В любой, где доступны git и Node.js:

Где писать код?

Хостинг репозиториев github.com

Бесплатный хостинг Netlify

Бесплатный хостинг Heroku

Что находится внутри браузера?

Ограничения JS в браузере

Node.js

Node.js — программная платформа, основанная на движке V8 (транслирующем JavaScript в машинный код), превращающая JavaScript из узкоспециализированного языка в язык общего назначения. Node.js добавляет возможность JavaScript взаимодействовать с устройствами ввода-вывода через свой API (написанный на C++), подключать другие внешние библиотеки, написанные на разных языках, обеспечивая вызовы к ним из JavaScript-кода

Демонстрация использования

		// script.js
		const fs = require('fs');
		 
		const text = fs.readFileSync('script.js', 'utf8');
		console.log(text);

Запуск скрипта

		~$ node script.js <ENTER>
		const fs = require('fs');
		 
		const text = fs.readFileSync('script.js', 'utf8');
		console.log(text);
		 
		~$

npm — Node Packaged Modules

npm — is the package manager for JavaScript

Использование

		~$ npm install md5 <ENTER>
		 
		~$

Можно создать свой собственный
npm-модуль!

		~$ mkdir awesome && cd awesome <ENTER>
		~$ npm init -y <ENTER>
		~$ ls
		package.json
		 
		~$

Содержимое package.json

		{
		    "name": "awesome",
		    "version": "1.0.0",
		    "description": "",
		    "main": "index.js",
		    "keywords": [],
		    "author": "",
		    "license": "ISC"
		}

Практика

Домашнее задание

Полезные ссылки

Полезные ссылки

Всем спасибо!