Вопрос “Как спроектировать курс и программу обучения?” совсем не тривиальный. Даже учитывая многочисленность подобных курсов, всегда есть особенности, из-за которых нельзя просто так взять и скопировать. Мы хотим поделиться опытом, как мы разрабатывали учебную программы для frontend-школы, какие цели преследовали и что у нас в итоге получилось.
Основной нашей целью было — дать большой багаж самых актуальных знаний, необходимых современному фронтендеру, основываясь на собственном опыте работы над большими проектами. Это тот фундамент, который позволит молодому специалисту очень быстро расти как профессионал. Также мы дали возможность лучшим студентам трудоустроиться в нашу компанию, чтобы работать над реальными проектами с миллионной аудиторией.
Перед нами встала проблема: как за небольшой промежуток времени дать то, что по максимуму потребуется на практике. Основываясь на продолжительности курса (два месяца) и основных целях, программа школы начинается с фундаментальных знаний по JavaScript, а заканчивается разработкой учебного проекта на React под руководством преподавателей. Как мы уже обозначили, обучение продлилось два месяца: 11 теоретических занятий и два занятия для работы над учебными проектами совместно с преподавателями. После каждого занятия студентам выдавалось домашнее задание.
Занятие 1. Обзорная лекция.
Сперва мы немного познакомились, рассказали о себе и о курсе, обсудили организацию занятий.
Занятие 2. Типы данных в JS.
В том числе рассказали об особенностях работы с объектами.
Занятие 3. Цикл событий и контекст в JavaScript.
На этом уроке было рассказано об одной из самых сложных для понимания тем, которую спрашивают чуть ли не на каждом собеседовании.
Занятие 4. Замыкания. Прототипы.
Рассказано о том, как комбинируются функция и лексическое окружение, в котором эта функция была определена. Рассказано о прототипном стиле программирования.
Занятие 5. Обзор часто используемых возможностей ES6.
Ознакомили обучающихся с возможностями новых стандартов JavaScript и историей изменения языка.
Занятие 6. Promises и async/await.
Рассказано об асинхронном коде и Promise'ах, их применении, промисификации. Рассказано о новом синтаксисе написания асинхронных функций, особенностях и отличиях от промисов.
Занятие 7. Обзорная лекция по инструментарию.
Познакомили обучающихся с широко используемым инструментарием, в т.ч. который использует наша команда.
Занятие 8. Фреймворки и библиотеки.
Ознакомили студентов с основными фреймворками и библиотеками, использующимися в разработке современных проектов.
Занятие 9. Настройка сборки для веб-проекта.
Продемонстрированы возможности сборки проектов с использованием Webpack. Рассказаны отличия в сборке для разных режимов (dev и prod, например).
Занятие 10. Погружение в React.
На этом занятии начали рассказывать детали библиотеки React и то, как с его помощью можно построить мощные приложения, с формами и динамическим обновлением пользовательского интерфейса.
Занятие 11. Углубление в React.
Показан пример использования тестов. Рассказано о Flux и Redux и о том, как их использовать при серверном рендеринге.
Курс рассчитан на начинающих разработчиков с минимальным опытом в JavaScript, но способных сделать простой сайт на jQuery. Обучение предоставлялось бесплатно для всех, но в группу мы пригласили только тех, кто успешно выполнил тестовое задание. Кандидатам нужно было подать заявку, дождаться звонка или письма и выполнить несложное тестовое задание: сверстать страницу о себе, своё эдакое резюме в свободной форме. На основе тестового задания было отобрано 15 студентов.
В конце обучения все участники были разбиты на команды и под руководством преподавателей разрабатывали реальные учебные проекты. Основной обязательный технологический стек проектов: Node.js, React. Использовать базы данных не обязательно, достаточно хранить все нужные данные просто в памяти Node.js. Для хостинга можно использовать Heroku. Нам очень хотелось видеть аккуратный и чистый интерфейс, поэтому мы рекомендовали Bootstrap с какой-нибудь темой.
Нами было сформулировано семь проектов, один из них был предложен самими студентами:
Онлайн чат – чат с разделением ролей на пользователей и администраторов. Основной сценарий: вход в чат после указания логина/пароля администратора или имени пользователя, имена пользователей не могут повторяться; пользователь может отправлять сообщения, которые сразу видят остальные; пользователь может редактировать свои сообщения; администратор может редактировать и удалять любые сообщения; на сервере может быть задан blacklist слов, после обнаружения в тексте сообщения от пользователя слов из чёрного списка только администратору приходят эти сообщения, которые он может пометить как “прошедшие проверку”.
Онлайн крестики-нолики – онлайн-версия игры крестики-нолики с возможностью создавать несколько игр. Основной сценарий: перед запуском игры пользователь вводит своё имя и ему выдаётся ссылка с уникальным id, которую можно отправить второму игроку; когда к игре присоединится второй игрок, начнётся игра; реализовать возможность включить подсказки для игрока; игра завершается, если один из противников выходит или не активен в течение долгого времени; таблица рейтинга игроков должна отображать имя игрока, количество побед и поражений, самую быструю победу по количеству ходов и времени.
Сервис для построения рейтингов постов из социальных сетей – сервис, позволяющий задать интересующий набор сообществ, по которым нужно отбирать наиболее интересные посты за определенное время. Основной сценарий: пользователь создает категорию сообществ, например, “Мемасики”. Категория получает уникальный ключ (к примеру, j81Nxb) и становится доступна по определенному URL: site.com/c/j81Nxb; пользователь добавляет в эту категорию ссылки на сообщества, например, на MDK, Орлёнок и т.д; пользователь заходит в созданную категорию для просмотра и видит список из лучших постов за последнее время.
Кооперативная рисовалка – сервис, который позволяет нескольким людям подключиться к онлайн-канве и рисовать на ней. Все изменения в канве сразу отображаются у всех подключенных участников. Основной сценарий: пользователь создает холст с определенным именем; холст открывается по уникальному URL (например, site.com/canva/n37Xsn3), который можно отправить кому-нибудь; пользователь может рисовать на холсте с использованием доступных инструментов; другие пользователи, подключившиеся к холсту, тоже могут рисовать; все пользователи, подключившиеся к холсту, сразу видят все изменения на холсте.
Аналог Trello – сервис управления проектами небольших групп. Каждый проект представляет из себя доску, на которой расположены столбцы с карточками. Изменения на доске и в карточках синхронизируются у всех пользователей, которые просматривают доску. Основной сценарий: Если пользователь заходит на главную для него автоматически генерируется доска с уникальным url (например, site.com/board/f11Xna8). Если пользователь заходит на существующий url то открывается уже созданная ранее доска; пользователь добавляет несколько колонок на доску (например, To Do, In Progress и Done); пользователь добавляет карточку в колонку To Do, заполняя описание этой карточки; пользователь перемещает карточку из To Do в In Progress, а затем в Done; Другие пользователи, подключенные к доске, видят все передвижения карточки в реальном времени.
Кооперативный Todo-list – сервис, который позволяет составлять списки дел, которые могут редактировать другие пользователи сервиса. Все изменения автоматически отображаются у других пользователей. Основной сценарий: если пользователь заходит на главную для него автоматически генерируется страница с уникальным url (например, site.com/list/f11Xna8); если пользователь заходит на существующий url то открывается уже созданный ранее список; пользователь пишет заголовок списка; добавляет пункты и подпункты; редактирует список перемещая пункты, редактируя их и меняя пункты на подпункты и наоборот, добавляя новые; пользователь помечает подпункты, и когда все подпункты помечены как выполненные, то основной пункт автоматически помечается как выполненный; если другие пользователи заходят в список по url, то они могут в реальном времени наблюдать за изменениями.
Морской бой по сети – онлайн-версия классического морского боя с возможностью создавать несколько игр. Основной сценарий: перед запуском игроку даётся возможность расставить доступные корабли на поле 10х10 (используя dnd); при запуске новой игры создаётся ссылка с уникальным id, которую можно отправить второму игроку; когда игроки закончили приготовление, они изменяют свой статус на “Готов к игре”; основная обработка полей противника (закрытых) должна вестись на стороне сервера; игра завершается, если один из противников выходит или не активен в течение долгого времени.
В ходе практической работы, помимо знаний библиотек, необходимых для написания проектов, студенты освоили систему контроля версий Git, мессенджер Slack и другие инструменты командной работы. Мы старались воссоздать условия, максимально приближенные к «боевым», чтобы выполнить поставленные в самом начале цели.
Разумеется, школа прошла не идеально и мы допускали различные ошибки, но старались их фиксировать и исправлять, если не сразу, то в будущем. Мы получили очень ценный опыт, провели большую ретроспективу по окончанию и планируем провести ещё не одну подобную школу уже с новыми знаниями, опытом и силами.
Всем удачи.
Основной нашей целью было — дать большой багаж самых актуальных знаний, необходимых современному фронтендеру, основываясь на собственном опыте работы над большими проектами. Это тот фундамент, который позволит молодому специалисту очень быстро расти как профессионал. Также мы дали возможность лучшим студентам трудоустроиться в нашу компанию, чтобы работать над реальными проектами с миллионной аудиторией.
Перед нами встала проблема: как за небольшой промежуток времени дать то, что по максимуму потребуется на практике. Основываясь на продолжительности курса (два месяца) и основных целях, программа школы начинается с фундаментальных знаний по JavaScript, а заканчивается разработкой учебного проекта на React под руководством преподавателей. Как мы уже обозначили, обучение продлилось два месяца: 11 теоретических занятий и два занятия для работы над учебными проектами совместно с преподавателями. После каждого занятия студентам выдавалось домашнее задание.
Занятие 1. Обзорная лекция.
Сперва мы немного познакомились, рассказали о себе и о курсе, обсудили организацию занятий.
Занятие 2. Типы данных в JS.
В том числе рассказали об особенностях работы с объектами.
Занятие 3. Цикл событий и контекст в JavaScript.
На этом уроке было рассказано об одной из самых сложных для понимания тем, которую спрашивают чуть ли не на каждом собеседовании.
Занятие 4. Замыкания. Прототипы.
Рассказано о том, как комбинируются функция и лексическое окружение, в котором эта функция была определена. Рассказано о прототипном стиле программирования.
Занятие 5. Обзор часто используемых возможностей ES6.
Ознакомили обучающихся с возможностями новых стандартов JavaScript и историей изменения языка.
Занятие 6. Promises и async/await.
Рассказано об асинхронном коде и Promise'ах, их применении, промисификации. Рассказано о новом синтаксисе написания асинхронных функций, особенностях и отличиях от промисов.
Занятие 7. Обзорная лекция по инструментарию.
Познакомили обучающихся с широко используемым инструментарием, в т.ч. который использует наша команда.
Занятие 8. Фреймворки и библиотеки.
Ознакомили студентов с основными фреймворками и библиотеками, использующимися в разработке современных проектов.
Занятие 9. Настройка сборки для веб-проекта.
Продемонстрированы возможности сборки проектов с использованием Webpack. Рассказаны отличия в сборке для разных режимов (dev и prod, например).
Занятие 10. Погружение в React.
На этом занятии начали рассказывать детали библиотеки React и то, как с его помощью можно построить мощные приложения, с формами и динамическим обновлением пользовательского интерфейса.
Занятие 11. Углубление в React.
Показан пример использования тестов. Рассказано о Flux и Redux и о том, как их использовать при серверном рендеринге.
Курс рассчитан на начинающих разработчиков с минимальным опытом в JavaScript, но способных сделать простой сайт на jQuery. Обучение предоставлялось бесплатно для всех, но в группу мы пригласили только тех, кто успешно выполнил тестовое задание. Кандидатам нужно было подать заявку, дождаться звонка или письма и выполнить несложное тестовое задание: сверстать страницу о себе, своё эдакое резюме в свободной форме. На основе тестового задания было отобрано 15 студентов.
В конце обучения все участники были разбиты на команды и под руководством преподавателей разрабатывали реальные учебные проекты. Основной обязательный технологический стек проектов: Node.js, React. Использовать базы данных не обязательно, достаточно хранить все нужные данные просто в памяти Node.js. Для хостинга можно использовать Heroku. Нам очень хотелось видеть аккуратный и чистый интерфейс, поэтому мы рекомендовали Bootstrap с какой-нибудь темой.
Нами было сформулировано семь проектов, один из них был предложен самими студентами:
Онлайн чат – чат с разделением ролей на пользователей и администраторов. Основной сценарий: вход в чат после указания логина/пароля администратора или имени пользователя, имена пользователей не могут повторяться; пользователь может отправлять сообщения, которые сразу видят остальные; пользователь может редактировать свои сообщения; администратор может редактировать и удалять любые сообщения; на сервере может быть задан blacklist слов, после обнаружения в тексте сообщения от пользователя слов из чёрного списка только администратору приходят эти сообщения, которые он может пометить как “прошедшие проверку”.
Онлайн крестики-нолики – онлайн-версия игры крестики-нолики с возможностью создавать несколько игр. Основной сценарий: перед запуском игры пользователь вводит своё имя и ему выдаётся ссылка с уникальным id, которую можно отправить второму игроку; когда к игре присоединится второй игрок, начнётся игра; реализовать возможность включить подсказки для игрока; игра завершается, если один из противников выходит или не активен в течение долгого времени; таблица рейтинга игроков должна отображать имя игрока, количество побед и поражений, самую быструю победу по количеству ходов и времени.
Сервис для построения рейтингов постов из социальных сетей – сервис, позволяющий задать интересующий набор сообществ, по которым нужно отбирать наиболее интересные посты за определенное время. Основной сценарий: пользователь создает категорию сообществ, например, “Мемасики”. Категория получает уникальный ключ (к примеру, j81Nxb) и становится доступна по определенному URL: site.com/c/j81Nxb; пользователь добавляет в эту категорию ссылки на сообщества, например, на MDK, Орлёнок и т.д; пользователь заходит в созданную категорию для просмотра и видит список из лучших постов за последнее время.
Кооперативная рисовалка – сервис, который позволяет нескольким людям подключиться к онлайн-канве и рисовать на ней. Все изменения в канве сразу отображаются у всех подключенных участников. Основной сценарий: пользователь создает холст с определенным именем; холст открывается по уникальному URL (например, site.com/canva/n37Xsn3), который можно отправить кому-нибудь; пользователь может рисовать на холсте с использованием доступных инструментов; другие пользователи, подключившиеся к холсту, тоже могут рисовать; все пользователи, подключившиеся к холсту, сразу видят все изменения на холсте.
Аналог Trello – сервис управления проектами небольших групп. Каждый проект представляет из себя доску, на которой расположены столбцы с карточками. Изменения на доске и в карточках синхронизируются у всех пользователей, которые просматривают доску. Основной сценарий: Если пользователь заходит на главную для него автоматически генерируется доска с уникальным url (например, site.com/board/f11Xna8). Если пользователь заходит на существующий url то открывается уже созданная ранее доска; пользователь добавляет несколько колонок на доску (например, To Do, In Progress и Done); пользователь добавляет карточку в колонку To Do, заполняя описание этой карточки; пользователь перемещает карточку из To Do в In Progress, а затем в Done; Другие пользователи, подключенные к доске, видят все передвижения карточки в реальном времени.
Кооперативный Todo-list – сервис, который позволяет составлять списки дел, которые могут редактировать другие пользователи сервиса. Все изменения автоматически отображаются у других пользователей. Основной сценарий: если пользователь заходит на главную для него автоматически генерируется страница с уникальным url (например, site.com/list/f11Xna8); если пользователь заходит на существующий url то открывается уже созданный ранее список; пользователь пишет заголовок списка; добавляет пункты и подпункты; редактирует список перемещая пункты, редактируя их и меняя пункты на подпункты и наоборот, добавляя новые; пользователь помечает подпункты, и когда все подпункты помечены как выполненные, то основной пункт автоматически помечается как выполненный; если другие пользователи заходят в список по url, то они могут в реальном времени наблюдать за изменениями.
Морской бой по сети – онлайн-версия классического морского боя с возможностью создавать несколько игр. Основной сценарий: перед запуском игроку даётся возможность расставить доступные корабли на поле 10х10 (используя dnd); при запуске новой игры создаётся ссылка с уникальным id, которую можно отправить второму игроку; когда игроки закончили приготовление, они изменяют свой статус на “Готов к игре”; основная обработка полей противника (закрытых) должна вестись на стороне сервера; игра завершается, если один из противников выходит или не активен в течение долгого времени.
В ходе практической работы, помимо знаний библиотек, необходимых для написания проектов, студенты освоили систему контроля версий Git, мессенджер Slack и другие инструменты командной работы. Мы старались воссоздать условия, максимально приближенные к «боевым», чтобы выполнить поставленные в самом начале цели.
Разумеется, школа прошла не идеально и мы допускали различные ошибки, но старались их фиксировать и исправлять, если не сразу, то в будущем. Мы получили очень ценный опыт, провели большую ретроспективу по окончанию и планируем провести ещё не одну подобную школу уже с новыми знаниями, опытом и силами.
Всем удачи.
Комментариев нет:
Отправить комментарий