Хекслет 3.0: практические уроки по программированию в браузере

    Привет, Хабр!

    Мы уже не раз писали о запуске, перезапуске и развитии образовательного проекта Хекслет. Проект стал возможным во многом именно благодаря поддержке Хабрасообщества и администрации (особенно deniskin). Спасибо вам!

    Примерно месяц назад вышла бета-версия нового Хекслета! Есть несколько важных нововведений, но главная идея Hexlet.io это полноценная практика по программированию в браузере. Главное отличие от других проектов (например, Codecademy или CodeSchool) в том, что на Хекслете нет симуляторов: в каждом уроке вы работаете с полноценной машиной, подключенной к сети. Это позволяет обучать и обучаться не только программированию, но и работе с базами данных, серверами, сетью, фреймворками и так далее. Грубо говоря, если это запускается на Unix-машине – этому можно обучать на Хекслете.

    В этой статье я расскажу немного об итерациях разработки (как мы пришли к такому формату и почему считаем его правильным), о новой версии, а также о технической реализации. Но сначала – о доступных сейчас уроках.

    Какие уроки сейчас доступны?


    Новые уроки на Хекслете появляются каждую неделю. Вот некоторые из доступных сейчас курсов уроков:

    • Java 101. Улучшенная версия самого популярного курса старого Хекслета. Введение в язык программирования Java от инженера из Amazon.
    • Python 101. Введение в язык Python для всех, кто знаком с самым базовым синтаксисом.
    • Erlang 101. Язык Эрланг для начинающих от разработчика из Wargaming.
    • Введение в алгоритмы. Сортировка, сложность, графы, деревья, машина Тьюринга, P vs. NP. Практические задания на Python.
    • Git base. Уроки про системы контроля версий и Git в частности.
    • Distributed systems. Уроки про DNS на примере Amazon Route53, балансировке нагрузки на примере Amazon Load Balancer и межрегиональная балансировка нагрузки.


    Список всех курсов.



    Как мы пришли к такому формату


    Итерация 1. Тенги

    В начале прошлого года мы с Кириллом toxicmt Мокевниным решили объединить его усилия по практическому обучение на рабочем месте и мои усилия по академическому онлайн-обучению, и сделать новую образовательную платформу для программистов. Были сформированы главные тезисы:

    • Длинные, масштабные курсы часто неэффективны, их плохо проходят и заканчивают, из них сложно вычленять нужную информацию из-за кучи зависимостей в каждом уроке
    • Обучение программированию без практики не имеет смысла в большинстве случаев.
    • Практика в симуляторах неэффективна и опасна. Практика должна проходить в максимально реальной обстановке.

    На основе этого мы сделали прототип – специальный формат урока и тестовый урок про протокол HTTP. Даже решили придумать название для такого формата уроков – тенг (textbook + engineering). Идея формата – совместить теорию (textbook, учебник) c реальной практикой (engineering). Каждый тенг автономен, то есть имеет смысл сам по себе, а не как составная часть длинного курса. Тенг состоит из таких шагов:

    1. Теория. Это текст и/или видео, основанные на задаче, так что в отличие от традиционной академической теории, мы делаем упор на специфическую задачу, которая уже решена умными инженерами и программистами, а затем следуем по их шагам, чтобы понять решение.
    2. Тест. С вариантами ответов и заданиями “заполнить бланк”. Проверяется концептуальное понимание, а не память.
    3. Упражнение в браузере. У уроке по HTTP мы давали людям терминал в браузере и просили выполнить особые HTTP-запросы с помощью утилиты telnet. Таким образом учащиеся понимали все “кишки” протокола и ручного взаимодействия с сервером. Тут же демонстрировались отличия HTTP 1.0 от 1.1.
    4. Практика на своем компьютере. Пользователь скачивал специальную консольную утилиту, авторизовывался в ней с помощью предоставленного нами API-ключа, скачивал задание с ее помощью, потом писал на своем компьютере программу и проверял нашими тестами. В примере с HTTP требовалось написать свой HTTP-парсер на любом языке программирования. Потом с помощью код отправлялся нам на сервер, автоматически проверялся и оценивался.


    Теоретическая часть урока по HTTP

    Мы запустили сайт и начали продавать урок за $1.99. Теоретическая часть была бесплатной. После пары сотен покупок и огромного количества фидбека, мы поняли, что:

    1. ОМГ! Это работает!
    2. Консольная утилита, написанная на Python, это боль, особенно если пользователь на Windows
    3. Нужно продолжать, потому что см. пункт 1


    Итерация 2. Платформа для тенгов


    С самого начала мы хотели делать именно платформу, чтобы все желающие могли приходить и создавать свои уроки. Поэтому после проверки первой гипотезы мы перешли к созданию платформы для уроков в формате тенгов.


    Один из этапов обсуждения интерфейса

    Идея практики на своем компьютере была для нас ключевой: куда еще реальнее, чем реальная разработка на своей машине, с установкой и настройкой окружения? Но слишком много людей сталкивалось с проблемами, поэтому мы решили обернуть все что нужно в виртуалку. Теперь пользователь скачивал не простую утилиту, а виртуальную машину (с помощью Vagrant), в которой уже было все настроено. Например, если урок по рельсам – внутри готовое окружение под Ruby, рельсами, веб-сервером и т.д.

    Это работало лучше, чем в прошлой итерации, но появились другие проблемы: с Vagrant и VirtualBox. Как всегда, больше всех проблем было у владельцев Windows, особенно русской версии Windows. Заодно мы узнали, что огромное количество людей все еще пользуются Windows XP. Задумайтесь: на свете есть люди, которые пользуются операционной системой, которая появилась до их рождения!


    Вариант внешнего вида страницы упражнения

    С оплатой уроков тоже были свои заморочки. Мы думали в стиле “iTunes для уроков”, чтобы каждый урок стоит от $0.99 до пары долларов, но обрабатывать такие микроплатежи с выгодой умеют только Эппл, Гугл и Кока-Кола (грубо говоря), а мы бы разорились. Поэтому мы сделали систему с пополнением внутреннего счета: пользователи покупали виртуальную валюту – Хексы – а потом за них покупали уроки. Было прикольно, но многие ничего не понимали, поэтому Хексы пришлось заменить на понятные всем доллары.

    Забавный факт: курс доллара там был вписан в код, 35 рублей, и использовался почти до самой зимы 2014 года.

    После нескольких месяцев открытого тестирования мы решили вернуться к шальной идее: сделать всю практику в браузере.

    Итерация 3. Hexlet.io


    Теперь все встало на свои места! Нет больше бесконечных попыток отладить определенную версию VirtualBox на определенной конфигурации Windows! Нет больше разделения на браузерные упражнения и практические задания. Нет странной внутренней валюты и пополнения счета. После года экспериментов новый Хекслет это:

    • автономные уроки, которые могут включать в себя до трех шагов: теория, практика и тест
    • реальная практика в браузере, с терминалом, редактированием файлов и доступом к сети
    • ежемесячная подписка $9 для доступа к практике
    • бесплатная теория для всех



    Практическое задание в браузере. Можно заметить, что в виртуалке запущен Redis.

    Как это работает?


    Хекслет написан на Rails, вся инфраструктура крутится на Амазоне, используются несколько специфичных амазоновских сервисов для баз и хранилищ, очередей и почты.

    Для каждого пользователя поднимается докер-контейнер, в котором запущено все, что автор урока решил включить в урок. Эти контейнеры поднимаются на специальном «eval»-сервере. На нем есть только Докер и обращаться к нему можно только из Sidekiq, асинхронно. В идеале хотелось бы придти к схеме, где для каждого пользователя поднимается полноценная виртуалка.

    Докер используется не только для уроков, но и в продакшене самой системы в целом: каждый сервис завернут в свой контейнер. 1 контейнер = 1 сервис. Сайт, Redis, Grafana и т.д. Большинство образов для контейнеров – готовые из tutum.co.

    Мы некоторое время искали готовую браузерную среду разработки, но в итоге написали свою. Здесь нас спасла еще одна довольно новая технология – ReactJS и концепция Flux. Наш Hexlet IDE – в опен-сорсе.

    Техническая реализация – отдельная большая и интересная история. Если вам интересно – голосуйте, и в следующей статье мы расскажем обо всем подробнее.

    Мы приглашаем авторов


    Создавать практические уроки под Хекслет может каждый опытный программист. Не обязательно записывать видео, можно делать текстовые уроки. Главное это практика, а практика это, грубо говоря, интересная задача + юнит-тесты для ее проверки.

    Вот подробная инструкция по созданию вашего первого урока. У нас есть специальная группа в фейсбуке для авторов. Сейчас мы разрабатываем прозрачную систему распределения доходов от подписки между авторами уроков.

    Спасибо за внимание!

    Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.

    О чем рассказать в следующей статье?

    • 48,9%О технической реализации платформы130
    • 22,9%О Хекслете как о стартапе: гипотезы, эксперименты, обучение и привлечение инвестиций61
    • 13,9%О том, как создавать уроки на Хекслете37
    • 14,3%О процессе разработки Хекслета38
    Hexlet
    Практические уроки по программированию
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 16

      0
      Почему перешли к модели подписки, а не оплаты конкретного урока, как это было раньше?
        0
        Похоже, прежняя модель убыточна. ИМХО подписка все-таки действительно логичнее чем все остальные.
          +4
          Не всегда убыточна, но подписки проще и удобнее во всех отношениях. К тому же, как оказалось, регулярная подписка неплохо мотивирует пользователей проходить уроки постоянно.
            0
            Понятно, что мотивирует. Но не всегда есть время постоянно заниматься и может быть так, что не все курсы интересны. И было бы классно, что бы можно было и так и так. Если хочешь подписку, если нет, то конкретный урок. Это же повсеместная практика на контент.
        0
        А там есть брейкпоинты и отладка?
          0
          Пока нет
          0
          В инструкции по созданию уроков предполагается использование Bitbucket. Скажите, планируется ли интеграция с GitHub?
            +4
            Планируется, но пока нет конкретных дат.
            Bitbucket выбран потому, что там можно создавать приватные репозитории бесплатно.
          +3
          Круто, молодцы. Интересно узнать про докер: деплой, отладка, управление, проблемы и т.д.
            +2
            Расскажем!
            Спасибо :)
            +3
            Курс по Python хорош! Спасибо)
              +1
              Рахим, а что насчет англоязычных курсов? Поставили это направление на паузу?
                +1
                Нет, планируем заняться ими в ближайшие пару месяцев.
                +3
                Вопрос о компетентности — авторы курсов знакомы с педагогикой?
                  +2
                  Красавчики! Моим первым курсом станет Python.

                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                  Самое читаемое