Развлечение с дротиком - часть 1

Я был поклонником Dart с момента его выпуска в 2011 году, когда увидел возможности этого языка. Было интересно увидеть альтернативу JS со строгим контролем типов.

В 2012 году я написал настольную игру Людо с Дротиком, доступную на onlineludo.com. Я написал его для конкурса, и это был забавный опыт. В эту игру играют в разных частях света, но в Нигерии она называется лудо, а правила на onlineludo.com зависят от того, как в нее играют в Нигерии.

Из-за того, что работа и хобби-проекты были связаны с серверной частью и инфраструктурой, у меня не было возможности снова использовать Dart после написания настольной игры.

Недавно я наткнулся на видео с Саммита разработчиков Dart 2016, и это возродило мой интерес. Видео с Flutter меня очень впечатлило, и я решил снова попробовать Dart.

Решиться на проект было легко. Я решил переписать настольную игру. 5 лет - это огромный объем для разработчика, и я определенно стал бы лучше структурировать код сейчас. Я также хотел бы использовать недавний интерфейсный фреймворк.

Over_react (построенный на react-dart, привязки React для Dart) привлек мое внимание, и я изначально решил его использовать. Но у меня возникли трудности с использованием с ним материальных компонентов. Я не был готов переписывать многие вещи, учитывая, насколько это просто с JS.

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

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

Я начал с AngularDart, и оказалось, что его легко освоить. У меня есть опыт работы с Angular 1, но это мое первое знакомство с Angular 2 (или 4).

Затем я напомнил себе, что хочу повеселиться с Дротиком, поэтому я стал искать больше проблем, помимо простого переписывания настольной игры. Я решил не писать простые HTML-шаблоны, а создавать их с помощью кода.

Это оказалось не так просто, как я думал. Angular требует, чтобы вы указали templateUrl или константу String в качестве шаблона. то есть вы не можете использовать функцию, оцениваемую во время выполнения для шаблона.

// only one of template or templateUrl is required
@Component(
  template: '<div>Component</div>', 
  templateUrl: 'component.html',
)
class MyComponent {}

В следующей части я расскажу о своем пути к достижению этой цели. Но я смог это придумать.

el("div", children: [
  el("h1", content: "Ludo Game"),
  el("ludo-board"),
]);

И это переводится в этот HTML.

<div>
  <h1>Ludo Game</h1>
  <ludo-board></ludo-board>
</div>

Вы можете спросить, почему? Разве шаблон HTML не проще? Это субъективно. Написание их с помощью кода дает некоторую гибкость, и нет ничего плохого в альтернативном способе работы.

И помните, я решил сделать это, чтобы повеселиться с Дарт.

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