Angular client

[bmayen]

I'm looking into contributing an Angular client. While it's possible to write Angular in JS, it's really geared to TS. Before I go forward, what are your thoughts on contributing the Angular pieces in TS?

[nicolodavis]

I'm not opposed to it being in TS. If we find that it's difficult to make it work well with our setup here, we can always move it to a separate repo.

[saintplay]

This problem reminds me of how Storybook has their "clients" in its source code.

Storybook has support for many frameworks.

They have a directory for each framework

storybook
└── app
    └── Angular
    │   └── package.json
    │   └── // Angular dependencies and client
    └── React
    │   └── package.json
    │   └── // React dependencies and client
    └── React Native
    │   └── package.json
    │   └── // React Native dependencies and client
    └── Polymer
    │   └── package.json
    │   └── // Polymer dependencies and client
    └── Vue
        └── package.json
        └── // Vue dependencies and client

That way, for example, they can have a Typescript setup just for Angular, that doesn't mix with the other frameworks setup.

[bmayen]

A separate repo or monorepo would be preferable IMO. In addition to the TS compilation, there's also the concern about having all of the dependencies in a single, ambiguous package.json.

But for now I'll play around with everything as is and can decide what to do about this down the line.

[vdfdev]

By the way, this might be useful: https://github.com/Felizardo/turnato/blob/master/%40types/boardgame.io/index.d.ts

it is a first take on typing the boardgame.io api.

[nicolodavis]

React Native is now supported as of https://github.com/google/boardgame.io/pull/128. This could serve as a good reference for how to add other UI frameworks.

[sedobrengocce]

I can handle vue client if noone take it

[nicolodavis]

That would be great!

[nicolodavis]

@sedobrengocce I restructured the examples directory in https://github.com/google/boardgame.io/commit/39fcdd6fe0ae77d242bc84a0826cda65de827b1d. Just FYI in case you've already started writing some code.

[shirakaba]

@bmayen @Felizardo I've now fully-typed the repo on my own branch (tracking progress on issue #190 ); will likely need to spend another week on it before I can make a pull request, but, as TypeScript users, I would greatly welcome either/both of you reviewing the pull request when it comes, if you possibly could.

[vdfdev]

@shirakaba Thank you! I will try to use your version on my project because it seems more complete :), and if I can improve it in any way I will contribute upstream :D

[nicolodavis]

@bmayen @sedobrengocce Just wanted to check in and ask if you guys are still working on the Angular / Vue clients respectively? Let me know if I can be of any assistance.

[sedobrengocce]

@nicolodavis I'm sorry, but at the moment i've some work issue and i cannot work on vue client.

[bmayen]

Same. Unfortunately, day job has gotten in the way for now.

[nicolodavis]

No problem! Just wanted to check if I could make a call for other volunteers that may want to contribute in this space.

[amitport]

working on an Angular compatible client (not much code reuse, but supporting same reducers and data structure)

[nicolodavis]

Why not just wrap it around the client in boardgame.io/client? This is what React also does. The React layer is actually quite thin. If you follow a similar approach for Angular, you will be able to reuse most of the code.

[amitport]

@nicolodavis we're getting ahead of ourselves, I will publish a wrap around boardgame.io's client (almost done). I'm pretty sure that I will need refactor the client to be more Angular friendly, but I'm not there yet (we can discuss those changes when(/if) they will become clearer, and maybe push back to core client).

(besides, much of the code is non-core react code that still should be translated to Angular: debug-view, MCTS visualizer, examples, docs)

[amitport]

Initial client implemented.

[nicolodavis]

Closing this now. Feel free to reopen if there any issues that are relevant to the Angular client to discuss.