Step 3 Utilizing the data in the frontend - Thewessen/tic-tac-toe_ruby_backend GitHub Wiki

Now that we have our data, we should use it!

Emberjs was a bit harder to learn as I thouged it would. The framework is pretty regid in what goes where. And I wanted to do things right from the start. So I had too read the documents, and learn Emberjs quite deep before I could even start.

One of the problems I faced was serializing the boardstate string stored in the backend, and deserializing when storing again. Emberjs has some nice way's of cooping with that, called transformers. Once in place, they create an array from my string, and back again. Awesome!

The next problem was the hardest. Comming from Angular and React, seeing how Emberjs sets up data binding made me a bit confused. It even made calls by reference, my boardstate array, call by value when passing it to a component. This is a good thing, I guess?

I'm also used of Angular rerendering all the components if the initial data (aka the array) is changed. Emberjs doesn't do that, or at least not in this extend. So i had to figure out a better way too pass data too and from the components. This was the hardest part, and took me quite a day to figure it out (learning a lot of things in the process).

Once the proper bindings were set up, creating some styling wasn't that hard. The instructions state something about using Material Design Light. I'm new to this css framework, so I thoughed I would give it a go. I didn't want to give it that much attention though, so I quickly scrambled up some styling comming directly from the first layout example, and fixed it with css classes where needed. If I had more time, I would have styled the app much better and responsive. But I believe this is not the main goal about this exercises.

Setting up a service for the game logic wasn't that hard either. It feels strange the service could only get access through the model data through the controllers. And when you feed it the data too soon, the data isn't ready yet. This should be fixable by utilizing the Promise based api. Something I could do better in the futher.

TODO: Cleaning up the styling? TODO: Look into the use of Promises for accessing model data in the service?