Этот пост давно назрел. Прошло полгода с тех пор, как я закончил буткемп, и я рад сообщить, что не веду блог так часто, как потому, что теперь я нахожусь на прекрасной работе инженером-программистом в Yahoo. Я завершу опыт буткемпа и напишу о своей работе в другом посте. Этот посвящен моему последнему проекту, Nimblecode.

Nimblecode — это игра-гонка с набором кода, призванная улучшить вашу скорость и точность кодирования. Вы можете либо участвовать в гонках на время, либо продемонстрировать свои навыки в живой многопользовательской игре с друзьями в частной или публичной игре. Мы хотели сделать веселую, но образовательную игру, в которую мог бы играть каждый. Надеемся, что пользователи также познакомятся с различными языками программирования и смогут опробовать синтаксис, не чувствуя, что они что-то изучают. Если вы хотите проверить это, вы можете посетить www.nimblecode.io или проверить это на github здесь.

Стек технологий

Как студенты буткемпа, нашей основной целью было научиться создавать продукт с нуля и выпускать готовое к производству приложение в очень короткие сроки. Поскольку мы также хотели изучить текущие навыки для рынка труда, мы решили использовать React и Redux в качестве основы для дальнейшего развития. Большая часть остальной когорты придерживалась Angular, так как это был основной фреймворк, преподаваемый на курсе (в то время), но мне повезло, что моя группа была готова потратить несколько дней на изучение чего-то нового, более передового и актуального в сегодняшней ситуации. рынок.

С React было приятно работать, но не самым простым в настройке. В то время create-react-app еще не существовало, но мы рассматривали другие шаблоны и туториалы для первоначальной настройки. Проблема с настройкой React заключалась не в самом React, а в том, что для этого требовались Babel, Webpack и куча других инструментов. Мои товарищи по группе потратили несколько дней на изучение React, пока я устанавливал каркас для нашего интерфейса и сервера. Как только все освоили React, стало легко писать компоненты и поддерживать их модульность и целостность. С JSX html и JS были в одном файле, и мы смогли легко организовать наши файлы, папки и компоненты.

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

Мы подошли к той точке нашего развития, когда нам понадобилась система управления государством. Из онлайн-исследований и рекомендаций коллег мы остановились на Redux, поскольку сообщество React, похоже, наконец сплотилось вокруг единой архитектуры Flux. Доступность поддержки, документации и руководств была отличной, и мы смогли приступить к их реализации в нашем приложении, потратив всего около двух дней на изучение.

Моя роль

Мое внимание было сосредоточено на однопользовательской части приложения. Я хотел включить такие функции, как множество подсказок кода, графические дисплеи, несколько языков и, прежде всего, систему «призрачного повтора», которая позволяла бы вам соревноваться с рекордным временем в режиме реального времени. Эта функция была самой сложной для программирования, но впечатлила большинство людей. Все спрашивали, как я это сделал. Хотел бы я сказать, что придумал гениальный алгоритм для сохранения и воспроизведения событий нажатия клавиш в определенное время, но, как и большинство веб-разработчиков, мой стек переполнился 😃 Я обнаружил, что кто-то еще сталкивался с похожей проблемой и нашел решение, не фиксируя события, а фиксируя состояние редактора кода при каждом нажатии клавиши и создавая объект с отметками времени и состояниями кода. После того, как объекты были построены, вы можете «воспроизвести» их в будущем, запустив setTimeout для отображения кода с немного другими временными интервалами, таким образом имитируя «призрачный тип».

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

Последние мысли

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

Мы выпустили его для наших друзей и товарищей по группе, и он получил отличные отзывы. Хотя это и не идеально, людям в целом было весело играть с ним, и они были впечатлены его забавным фактором. Хотя он не получил такой популярности на Reddit или Hacker News, как мы надеялись, его использовали и видели сотни людей, и было приятно видеть, как рекорды бьют и устанавливают совершенно незнакомые люди. В конце концов, это помогло мне получить работу в Yahoo. Мне удалось продемонстрировать, что я могу спланировать и реализовать продукт на React/Redux за короткое время, и это именно то, что должен делать дипломный проект из буткемпа.