Я был поклонником 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 не проще? Это субъективно. Написание их с помощью кода дает некоторую гибкость, и нет ничего плохого в альтернативном способе работы.
И помните, я решил сделать это, чтобы повеселиться с Дарт.
Следите за обновлениями во второй части пути, где я использую генерацию кода и трансформеры.