 |
At the same time at Google I/O, the nice Material Design was announced and it was available for Dart and the Polymer framework. Finally, a great UI widget library! And Polymer is the kind of framework that I have been longing for. To be able to put together applications from existing components is the kind of reuse that makes me tick.
A quick stop at the Dart pub, and chess.dart (port of chess.js) was found. Yay! That functionality for keeping the game state, loading games from standard chess notation, ... and more, would sure come in handy.
For displaying the chessboard in the game I needed something like chessboard.js, but that wasn’t available in the pub. My first plan was to wrap the JS library, but I soon realise it would be nicer to write a cleaner version using these emerging web technologies. A chessboard tag would be great to have.
Without going into the details of my implementation chessboard.dart, here are some key benefits I found using these newer technologies:
- Separation of presentation from logic. I was able to move most of the presentation logic from code into HTML. In the JS version the HTML is generated in JS.
- CSS encapsulation inside the web component relieved me from having to generate unique element ids as in the JS version.
- Clear separation between modules. There is an overlap of functionality in chess.js and chessboard.js that I could nicely clean up in the Dart implementation.
- The chessboard.dart implementation contains roughly around 350 lines of Dart code compare to around 1200 lines of JavaScript in chessboard.js (excluding the animation support, which I didn’t need).
<chess-board id="chess_board" on-move="{{onMove}}"></chess-board>
<core-item id="turn" label="{{$['chess_board'].turn}} to move"></core-item>
<core-item id="gameStatus" label="{{$['chess_board'].gameStatus}}"></core-item>
void onMove(CustomEvent event, detail, target) {
ChessBoard chessBoard = target;
print('Move event, next turn is ${chessBoard.turn}');
}
In the next part, I will show you how I continued to build upon the chessboard element to create a multiplayer “Chess challenge” game.
