Web-программирование занимает существенную часть в мире современной разработки. Многие студенты делают Web-приложения в рамках НИР или занимаются этим на первой работе.
Web-приложения, создаваемые в рамках НИР, чаще всего нетиповые приложения. На работе студенты работают с современными технологиями веб-разработки: SPA приложениями, JS фреймворками, используют самые разные языки на серверной части.
Цели курса: изучить Web-программирование в теоретической части от базового фундамента до современных подходов, а также получить практические навыки как в традиционной, так и современной Web-разработке.
1. Практический курс с вниманием к теории.
Главное в курсе - получение практических навыков разработки. Но курс университетский и большое внимание уделяется изучению концепций, подходов и систематизации знаний.
2. Больше о клиентской части, чем о серверной.
Серверная часть веб-приложения ближе к "обычному" приложению. Студенты изучаю работу с БД на курсе "БД и СУБД", сетевое взаимодействие, разработку веб-сервисов и распределённых приложений на курсе "Технологии разработки распределённых приложений". Важно научиться разрабатывать приложение для веб-браузера и понимать, как применять навыки, полученные на других курсах, в разработке серверной части веб-приложения.
3. Вёрстка - только основы.
Вёрстка - большая тема. Её сложно изучить за небольшое число занятий и требуется много практики. В то же время в университете студентам важнее быстрая разработка работающего прототипа, а не реализация уникального дизайна.
4. Изучение как традиционных, так и современных подходов, и их сравнение.
Изучение традиционных подходов важно для понимания основ, а современных - для решения актуальных практических задач. Решение одних и тех же задач разными подходами поможет лучше понять разницу между ними.
5. Изучать конкретные языки или фреймворки не так важно.
Курс не посвящён разработке сайтов на фреймворке A для языка B. У студентов разные предпочтения, они работают на разных технологических стеках как самостоятельно, так и на работе. Важно понимать основные концепции, и систематизировать знания. Тем не менее, примеры показываются на определённых (но простых) технологиях.
6. Простые задачи на минимальную оценку, сложные на максимальную.
Не всем интересна и нужна веб-разработка. Курс должен быть как можно полезнее для заинтересованных, но не становиться ночным кошмаром для тех, для кого это "просто ещё один курс, который надо сдать". Для получения проходного балла достаточно сдать простые лабораторные работы.
| Лекции | Практики |
|---|---|
| 1. Введение: о курсе, история web, основные понятия | 1. HTML (лекция + практика) |
| 2. JavaScript: основы языка | 2. CSS. Блочная модель (лекция + практика) |
| 3. JavaScript: DOM, BOM, jQuery | 3. Flex. Вёрстка (лекция + практика вёрстки) |
| 4. Введение в серверную часть: основные компоненты, формы | 4. Сдача лабораторных: 1, 2 |
| 5. Аутентификация, хранение данных на клиенте, сессия | 5. UI фреймворки (лекция + практика с примером) |
| 6. AJAX; API | 6. Практика по традиционной серверной части |
| 7. JS-Фреймворки (c примерами на Vue.js) | 7. CMS и конструкторы сайтов (лекция + практика по AJAX) |
| 8. Современный Front-End: Node.js, инструменты разработки | 8. Сдача лабораторных: 3, 4 |
| 9. SPA | 9. Практика: Современный JS |
| 10. Доклады: React, Angular, Ember (?) | 10. Практика: SPA |
| 11. Аутентификация 2; Инфраструктура современного веб-приложения | 11. Практика: аутентификация в SPA |
| 12. Доклады: PHP, Go, Java, dotnet, Node.js | 12. Сдача лабораторных: 5, 6 |
| 13. Развёртывание: On-Premise, IaaS, PaaS, SaaS, FaaS | 13. Практика: пример развёртывания; Досдача лабораторных |
| 14. Что ещё есть в веб-разработке | 14. Экзамен |
Материалы находиться в директории > materials.
Лабораторные работы реализуют части проекта - Мини-почту.
Мини-почта - реализация простой почты.
Зарегистрированный пользователь может отправить "письмо" другому зарегистрированному пользователю по его имени. Каждый пользователь видит список всех своих сообщений: исходящих и входящих. Письмо может находиться в состоянии "прочитано" и "не прочитано". Непрочитанные письма можно удалять.
- Входной контроль: работа с БД (> ссылка)
- HTML, CSS: вёрстка страницы проекта по эскизу
- JS: разработка маленькой игры на JavaScript
- Традиционное Web-приложение: реализация части проекта традиционным подходом без JS
- AJAX: добавление AJAX в проект
- SPA: реализация клиентской части как SPA приложения
- Проект: Окончательная реализация Web-приложения с SPA и API
Информация об экзамене и вопросах к экзамену на странице > Экзамен
Это открытый курс, выложенный на GitHub репозитории. Вы можете помочь сделать его лучше и внести в него вклад!
- Есть предложения по улучшению плана?
- Знаете, как сделать задания полезнее и интереснее?
- Нет идей, как сделать лучше, но знаете, что не нравится в текущем курсе?
- Нашли фактическую ошибку в материалах?
- Нашли опечатку?
- Или просто хотите высказать своё мнение?
Помогите сделать этот курс лучше для вас или будущих студентов!
Подробности в разделе (> CONTRIBUTING).
Техническая информация о разработке курса (сборка презентаций, преобразование в HTML и PDF файлы) в разделе > DEVELOPMENT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent