Проект

Игры разума

Фронтенд-разработчик

Погрузитесь в непростую экосистему JavaScript, научитесь настраивать рабочее окружение. Подружитесь с линтером (анализатором качества кода) и менеджером зависимостей npm. Поймёте, чем git отличается от GitHub, поработаете с внешними репозиториями. Получите опыт построения архитектуры полноценного приложения и написания чистого кода.

2-4
недели

Цель

Настройка окружения

Первый проект для многих студентов — одновременно первая полноценная программа вне среды Хекслета. Он знакомит с основными шагами, необходимыми для старта любого нового проекта: установкой языка (интерпретатора), настройкой среды (операционная система, редактор, линтеры), подключением дополнительных библиотек, созданием git-репозитория. На этом этапе начинается глубокая работа с терминалом. Студенты на практике используют все то, что давалось в базовых курсах.

Первый проект прокачивает работу с экосистемой JavaScript. Студенты учатся запускать любые программы, написанные на JavaScript. Знакомятся с интерпретатором языка (REPL) и его возможностями по быстрой отладке и проверке работы небольших кусков кода. Знакомятся с npm. Утилитой, через которую происходит управление проектами: установка и обновление дополнительных библиотек, публикация пакета и многое другое.

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

Здесь же идет формирование правильной инженерной культуры. Одно из первых заданий в настройке — это подключение линтера (Eslint), который автоматически следит за стилем кода и находит потенциальные ошибки. Код, соответствующий стандартам кодирования (Airbnb), гораздо проще в анализе и значительно выше оценивается другими программистами. Это, в том числе, важно при демонстрации проектов на собеседованиях.

И, наконец, студенты знакомятся с GitHub — центральным местом хранения кода и обитания разработчиков в мире. GitHub — это не просто хранилище репозиториев, но и фактически социальная сеть. Реальный код на гитхабе высоко ценится работодателями и резко повышает шансы на трудоустройство. К тому же это первый шаг в разработку открытого ПО (open source).

Эта часть проекта часто сложнее самого процесса написания кода. Настройка системы — очень индивидуальная вещь, так как зависит от окружения конкретной операционной системы и железа. На полную подготовку понадобится, скорее всего, не один день, но этот шаг пропустить нельзя. Зато потом старт любого проекта сократится до десятков минут, а сама настройка перестанет казаться магией.

Код

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

Первый проект включает в себя интерактивную часть — взаимодействие с пользователем командной строки. Для этого понадобится дополнительная библиотека. А это значит, что нужно научиться ее устанавливать, подключать (импортировать) и запускать. Для последнего обязательно чтение документации. Именно так происходит реальная разработка.

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

Архитектура первого проекта — корневая часть всей системы. Она опирается на основные принципы организации кода: изоляцию побочных эффектов, создание правильных барьеров абстракций (высокая модульность). Здесь возникает множество вопросов: «кто за что отвечает?», «кто взаимодействует с пользователем?», «как игра запускается?» и многое другое. С архитектурой придется повозиться, даже если у вас есть опыт реальной разработки.

Проверки наставника

Основные аспекты, на которые обращают внимание наставники при проверке:

  • Правильная настройка проекта и соответствие кода стандартам кодирования.

  • Именование. Как показывает практика, это настоящая проблема даже для уже действующих разработчиков. Мы очень серьезно относимся к читаемости кода и доводим этот аспект до совершенства.

  • Простота системы. Любое решение можно реализовать сложнее, чем это реально необходимо, что многие нередко и делают. В основном из-за недостатка опыта. Простые решения даются сложнее всего.

  • Архитектура. Правильное выделение функций, распределение ответственностей между разными частями системы. Все это имеет огромное значение даже в первом проекте.

Описание

«Игры разума» — набор из пяти консольных игр, построенных по принципу популярных мобильных приложений для прокачки мозга. Каждая игра задает вопросы, на которые нужно дать правильные ответы. После трех правильных ответов считается, что игра пройдена. Неправильные ответы завершают игру и предлагают пройти ее заново. Игры:

  • Калькулятор. Арифметические выражения, которые необходимо вычислить.
  • Прогрессия. Поиск пропущенных чисел в последовательности чисел.
  • Определение четного числа.
  • Определение наибольшего общего делителя.
  • Определение простого числа.

Пример игры:

brain-progression
Welcome to the Brain Game!
What number is missing in the progression?
May I have your name? Roman
Hello, Roman!
Question: 14 .. 18 20 22 24 26 28
Your answer: 16 # Пользователь вводит ответ
Correct!
Question: 5 6 7 8 9 .. 11 12
Your answer: 10 # Пользователь вводит ответ
Correct!
Question: 12 15 18 21 .. 27 30 33
Your answer: 24 # Пользователь вводит ответ
Correct!
Congratulations, Roman!

Наставники

Аватар наставника Айдар Шайхутдинов
Айдар Шайхутдинов
По образованию радиофизик, в веб-разработке с 2014 года. Имеет опыт работы как на фрилансе, так и в распределённых командах. Разрабатывал проекты для «Ростелекома», фронт для системы распределения доступа в «Газпром-нефть»
Аватар наставника Александр Колиух
Александр Колиух
Наш выпускник! Стал фулстек-разработчиком на Хекслете. Успел поработать как на аутсорсе, так и в команде продуктовой компании. Сейчас разработчик EPAM Systems. Основной стек – React / Redux / Effector / TypeScript
Аватар наставника Александр Половников
Александр Половников
Больше 10 лет опыта во фронтенд-разработке. Как в стартапах, так и в крупных российских и зарубежных компаниях (Yandex, Philip Morris, Sweden Airlines). Co-founder финтех-стартапа Monite. Увлекается IoT, программирует умные устройства и роботов
Аватар наставника Антон Минин
Антон Минин
Работает ведущим программистом JS Frontend. За более чем 10-летний опыт в разработке ПО, попробовал себя в разных ролях. Кроме JS Frontend, интересуется также: backend-разработкой, проектированием и управлением разработкой ПО

Впечатления

Аватар пользователя Дмитрий Абдалин
Дмитрий Абдалин 04 октября 2020

Добрый день. Перед выбором данного ресурса пробовал несколько других и онлайн и офлайн. Сложилось впечатление, что Хекслет остался одним из немногих, в котором преподаватели работают на результат, а не на прибыль. Отдельную благодарность хочу принести Станиславу Дзисяк за оперативные и доступные для понимания разъяснения. Конечно, сам первый проект, только показал мне, как мало я еще знаю )). Но, с другой стороны, если "капнуть" чуть глубже (не без помощи ментора!) все становится проще и понятней. Поэтому продолжаем дальше, к смене профессии!


Аватар пользователя Александр Мандриков
Александр Мандриков 26 сентября 2020

Итак, первый проект пройден.

Глядя на Игры Разума с текущей позиции, не сказать, что было сложно. Но и простым он не оказался: переписывать код пришлось несколько раз с нуля. Первый проект здорово прокачал меня в различных областях и помог лучше усвоить теоретический материал, к которому я возвращался не раз :).

Одним из важнейших подарков для меня стало знакомство с модульностью, также получилось потренироваться в работе с git, прочувствовать значимость принципов KISS, YAGNI, DRY в реальной работе. Начало появляться понимание, что это вообще такое, разработка.

Хочу выразить благодарность Станиславу за развернутые комментарии, они были для меня словно мачете, разрубающим лозы незнания на пути к профессии "Фронтенд-программист".


Аватар пользователя Anastasia
Anastasia 24 сентября 2020

Спасибо за проект и спасибо Станиславу за менторство! Самое сложное и главное в проекте - настроить окружение, разобраться со структурой проекта, настроить codeclimate, eslint и, что оказалось максимально времязатратным githubActions.

Проект принят, осталось исправить пару нюансов, и это мощнейшая мотивация для движения дальше.


Аватар пользователя Vyacheslav
Vyacheslav 15 сентября 2020

Вот и принят мой проект ментором. Чему я, несказанно, рад :). Спасибо Станиславу Дзисяк за полученный опыт и подробные разъяснения по замечаниям. Познакомился вплотную в проекте с непрерывной интеграцией на GitHub. Это просто офигенная вещь! Также внеднил в реальности те правила написаниякода, о которых постоянно говорит Хекслет. Желаю Хекслет дальнейших успехов в совершенствовании программы обучения. А впереди ждет второй проект :)


Аватар пользователя Василий Бобров
Василий Бобров 10 сентября 2020

Очень классный проект, в пользе от которого для себя я изначально сомневался, ведь я уже имел некоторый опыт в программировании, а тут, казалось бы, обычные консольные мини-игры. Но работа с ментором помогла разобраться с огромным количеством изъянов в моем понимании того, как надо правильно писать код в разных ситуациях. Большое спасибо Станиславу Дзисяк за настолько качественные проверки и развернутые ответы на мои нескончаемые вопросы! Кроме того, настройка окружения, makefile, github actions, работа с npm - со всем этим знакомят в проекте, и это очень полезно. И наконец, проект позволяет ощутить, насколько было бы классно иметь тесты. Во время code-review при внесении поправок постоянно приходится проверять, не сломалось ли что-нибудь в какой-то из игр. Так что проект дает дополнительное желание пройти предстоящие курсы про тестирование.

Сколько стоят проекты?

Проекты входят в стоимость обучения на любом плане: самостоятельном, групповом и индивидуальном. Дополнительно платить не нужно.

Зачем проходить проекты?

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

Проекты — портфолио программиста. Их код останется в вашем аккаунте на GitHub и будет преимуществом при поиске работы.

Чтобы узнать о том, что такое проекты и в чём их польза, прочитайте нашу статью «Анатомия проектов Хекслета».

Что делать, если возникли трудности во время выполнения проекта?

Задавайте вопросы в разделе «Обсуждение» на странице шага, на котором возникли трудности, или вашему наставнику. Изучите вопросы других студентов в «Обсуждениях»: там собрана большая база знаний, ей можно и нужно пользоваться.

Кто проверяет проекты?

Автоматизированные тесты и линтер. В групповом и индивидуальном форматах наставник дополнительно проверит то, что тестами проверить невозможно (архитектуру проекта, правильность именования, удачность решений), и проведёт код-ревью, чтобы сделать проект ещё качественнее.

У меня другой вопрос

Нажмите на виджет в правом нижнем углу экрана и поищите ответ в нашей справке. Или сразу пишите на support@hexlet.io — вам ответит живой человек из команды Хекслета.