Проектная работа по JavaScript
Важнейшая часть образовательного процесса в OTUS — практическое применение знаний, полученных на занятиях.
Classic Tetris
В рамках выполнения проектной работы Павел создал игровое приложение Tetris, используя для этого Vue + TypeScript + PWA. В результате получилась яркая классическая игра, которая так любима многими из нас.
Однако давайте дадим слово непосредственно автору проекта — Павлу Асташкину, который специально для нашего блога написал подробные разъяснения относительно проделанной работы.
Почему Vue?
Vue — это простой в использовании и не уступающий по возможностям (React и Angular) фреймворк с качественно написанной документацией и большим community.
Почему TypeScript?
TypeScript прекрасно сочетается со Vue несмотря на то, что работа по его интеграции всё ещё ведётся. В версии Vue 3 планируются значительные улучшения.
Реализация (Vue + TypeScript + PWA)
Приложение реализовано на frontend’e. Доступны как desktop, так и touch версии игры. Игровое поле представляет из себя грид 10х20 ячеек. Управление игровым процессом происходит с помощью одного большого массива, который хранит состояние каждой ячейки и при необходимости меняет его. Работа с DOM ведётся только на стороне Vue. Некоторые могут подумать, что фигуры, которые падают сверху, — это картинки (png, svg), но это, конечно же, не так. Фигуры — это те же массивы, которые представлены в бинарном виде
[ [ [0, 1, 0], [1, 1, 1], ], [ [1, 1, 0], [0, 1, 1], ], [ [0, 1, 1], [1, 1, 0], ], [ [1, 0, 0], [1, 1, 1], ], …. ]
Игровая статистика, как и игровой процесс, сохраняются в store (vuex) и дополнительно в localStorage. То есть игра будет сохранена при закрытии браузера и её можно будет продолжить в любой момент. А благодаря технологии Progressive Web Apps (PWA), можно играть в режиме offline.
SCSS + Short BEM
В процессе работы над приложением пришло понимание того, что текущее именование классов по бэму отъедаёт всё свободное место. Причём использование таких огромных классов делает процесс разработки немного грустным.
К поиску лучшего именования были выдвинуты следующие требования: 1. Классы должны быть короткими и не нести в себе лишний смысл. 2. По возможности исключить присутствие глобальных классов. 3. Сохранить понятие BEM-сущностей.
В качестве решения была взята технология Vue scoped css, которая позволяет изолировать css текущего компонента от остальных. Таким образом, отпадает необходимость добавлять каждому классу имя блока. Но при этом необходимо сохранить понимание элементов и модификаторов. Удобным и простым решением становится добавление двух минусов перед элементом и одного перед модификатором. Такая методология получила название Short BEM. Пример:
.user { .--name { &.-red {} } .--age { &.-green {} } .--address {} }
Именно в таком виде классы и будут существовать в DOM.
<div class=”user”> <div class=”--name -red”>Вася Пупкин</div> </div>
На первый взгляд, может показаться, что это неудобно или некрасиво, однако преимуществ у такой методологии больше, чем недостатков.
Ознакомиться с исходным кодом вы можете по ссылке на репозиторий. Ну и, разумеется, там же вы сможете поиграть в игру! И не пропустите запуск следующей группы «Разработчик JavaScript»!
