Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-03-10

1 <p>Теги: javascript, vue, typescript, программирование на javascript, разработка на javascript, pwa, bem</p>

2 <p>Важнейшая часть образовательного процесса в OTUS - практическое применение знаний, полученных на занятиях. Именно поэтому последний модуль большинства курсов посвящён выполнению проектной работы. Итак, предлагаем вашему вниманию<a>проект</a>одного из выпускников курса<a>"Разработчик JavaScript"</a>-<strong>Павла Асташкина</strong>.</p>

3 <h2>Classic Tetris</h2>

4 <p>В рамках выполнения проектной работы Павел создал игровое приложение<a>Tetris</a>, используя для этого<strong>Vue + TypeScript + PWA</strong>. В результате получилась яркая классическая игра, которая так любима многими из нас.</p>

5 <p>Однако давайте дадим слово непосредственно автору проекта -<strong>Павлу Асташкину</strong>, который специально для нашего блога написал подробные разъяснения относительно проделанной работы.</p>

6 <h2>Почему Vue?</h2>

7 <p><strong>Vue</strong>- это простой в использовании и не уступающий по возможностям (React и Angular) фреймворк с качественно написанной документацией и большим community.</p>

8 <h2>Почему TypeScript?</h2>

9 <p>TypeScript прекрасно сочетается со Vue несмотря на то, что работа по его интеграции всё ещё ведётся. В версии Vue 3 планируются значительные улучшения.</p>

10 <h2>Реализация (Vue + TypeScript + PWA)</h2>

11 <p>Приложение реализовано на frontend’e. Доступны как desktop, так и touch версии игры. Игровое поле представляет из себя грид 10х20 ячеек. Управление игровым процессом происходит с помощью одного большого массива, который хранит состояние каждой ячейки и при необходимости меняет его. Работа с DOM ведётся только на стороне Vue. Некоторые могут подумать, что фигуры, которые падают сверху, - это картинки (png, svg), но это, конечно же, не так. Фигуры - это те же массивы, которые представлены в бинарном виде</p>

12 [ [ [0, 1, 0], [1, 1, 1], ], [ [1, 1, 0], [0, 1, 1], ], [ [0, 1, 1], [1, 1, 0], ], [ [1, 0, 0], [1, 1, 1], ], …. ]<p>Игровая статистика, как и игровой процесс, сохраняются в store (vuex) и дополнительно в<strong>localStorage</strong>. То есть игра будет сохранена при закрытии браузера и её можно будет продолжить в любой момент. А благодаря технологии<strong>Progressive Web Apps</strong>(PWA), можно играть в режиме offline.</p>

13 <h2>SCSS + Short BEM</h2>

14 <p>В процессе работы над приложением пришло понимание того, что текущее именование классов по бэму отъедаёт всё свободное место. Причём использование таких огромных классов делает процесс разработки немного грустным.</p>

15 <p>К поиску лучшего именования были выдвинуты следующие требования: 1. Классы должны быть короткими и не нести в себе лишний смысл. 2. По возможности исключить присутствие глобальных классов. 3. Сохранить понятие BEM-сущностей.</p>

16 <p>В качестве решения была взята технология<strong>Vue scoped css</strong>, которая позволяет изолировать css текущего компонента от остальных. Таким образом, отпадает необходимость добавлять каждому классу имя блока. Но при этом необходимо сохранить понимание элементов и модификаторов. Удобным и простым решением становится<strong>добавление двух минусов</strong>перед элементом и одного перед модификатором. Такая методология получила название<strong>Short BEM</strong>. Пример:</p>

17 .user { .--name { &.-red {} } .--age { &.-green {} } .--address {} }<p>Именно в таком виде классы и будут существовать в DOM.</p>

18 <div class=”user”> <div class=”--name -red”>Вася Пупкин</div> </div><p>На первый взгляд, может показаться, что это неудобно или некрасиво, однако преимуществ у такой методологии больше, чем недостатков.</p>

19 <p><em>Ознакомиться с исходным кодом вы можете по<a>ссылке на репозиторий</a>. Ну и, разумеется, там же вы сможете поиграть в игру! И не пропустите запуск следующей группы<a>"Разработчик JavaScript"</a>!</em></p>