Введение во Frontend

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

Введение во Frontend
Слайды доступны по ссылке
frontend-park-mailru.firebaseapp.com

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

Алексей
Тюльдюков
Почта@Mail.Ru
Анатолий
Остапенко
Почта@Mail.Ru
Дмитрий
Дорофеев
Почта@Mail.Ru
Сергей
Володин
Почта@Mail.Ru

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

Александр
Цветков
Почта@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-разработка — это работа по созданию публичной части веб-приложения, с которой непосредственно контактирует пользователь, и функционала который обычно выполняется на стороне клиента

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

Мультиплеерная игра в браузере

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

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

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

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

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

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

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

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

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

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

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

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

Могли бы быть
семестровыми проектами

thefwa.com

awwwards.com

Менторы

Менторы

Наша Dream-team Менторов

Наша Dream-team Менторов

Проблемы

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

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

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

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

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

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

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

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

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

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

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

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

Что по чём?

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

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

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

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

Браузерная игра

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

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

Дополнительные критерии (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

Бесплатный хостинг now.sh

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

Ограничения 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"
		}

Практика

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

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

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

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