Terraforming-mars: Time to leave Vue.js?

[bafolts]

I think we have overstayed our welcome with Vue.js. When I started this project I was using it as a learning tool. I had never used Vue.js so I decided to use Vue.js so I could learn it. This design decision is not very helpful now as we have more contributors and players. Vue.js is proving to me that it is difficult to make large refactors without risk of breaking a template. The lack of type checking in the template until runtime means we lose all compile time type checking.

Moving to React or some other framework with compile time type checking in the template would make client side migrations and refactors much easier. As of now it is very difficult to update the client without risk of breaking it. Moving to React would make sense to me.

How do others feel about this?

[chosta]

+1 for react :)

On Sun, Oct 18, 2020, 23:45 Brian Folts [e-mail] wrote:

I think we have overstayed our welcome with Vue.js. When I started this
project I was using it as a learning tool. I had never used Vue.js so I
decided to use Vue.js so I could learn it. This design decision is not very
helpful now as we have more contributors and players. Vue.js is proving to
me that it is difficult to make large refactors without risk of breaking a
template. The lack of type checking in the template until runtime means we
lose all compile time type checking.

Moving to React or some other framework with compile time type checking in
the template would make client side migrations and refactors much easier.
As of now it is very difficult to update the client without risk of
breaking it. Moving to React would make sense to me.

How do others feel about this?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/bafolts/terraforming-mars/issues/1661, or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAGMEU4QVREKVMOUGWDHCATSLNHV3ANCNFSM4SVKPUKA
.

[Lynesth]

I have no real experience with either of those frameworks, so anything works for me.
Better tests/type checking seems like the way to go.

[peonmodel]

i have been using reactjs for 5 years, ironically i was taking this as an opportunity to learn vuejs

i dont oppose the move to reactjs however

As of now it is very difficult to update the client without risk of breaking it

i dont think this is an issue with vuejs, but the structure of the project,

looking at just the file Colony.ts, every single colony html is defined there instead of broken down into its own individual component, thats the actual cause of the problem making things hard to edit

in addition, the files are in .ts instead of .vue, due to that, my vsc is unable to lint the template string correctly

a significant refactor is required either way

[Lynesth]

I think refactors are already happening (#1605) ?

Also, what about using something like https://github.com/Yuyz0112/vue-type-check if the only real gain is compile time type check (genuine question, didn't even try the tool) ?

[kberg]

That's a good point actually, about options for keeping what's already here. For me, it was a surprise that all the HTML is in strings, when the default example shows how you can embed Vue.js inside an HTML doc: https://scrimba.com/scrim/cQ3QVcr?pl=pXKqta

[chosta]

Jsx, js in css, type checking. All the good stuff. Vue is being broken down
to components as I've already started with the buttons, player page and
cards. But for me react is the way for truly scalable fronted. And its not
going to be hard to migrate, this is also one thing that react excells in

On Mon, Oct 19, 2020, 09:19 Robert Konigsberg [e-mail]
wrote:

That's a good point actually, about options for keeping what's already
here. For me, it was a surprise that all the HTML is in strings, when the
default example shows how you can embed Vue.js inside an HTML doc:
https://scrimba.com/scrim/cQ3QVcr?pl=pXKqta

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/bafolts/terraforming-mars/issues/1661#issuecomment-711635873,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAGMEU5BPWYSXN34RLAIG43SLPK6XANCNFSM4SVKPUKA
.

[kberg]

What value does "truly scalable" provide for this app?

>

[nwai90]

Vue should support jsx too iirc. Am indifferent between the two frameworks but a migration and rewrite seems like a huge effort

[chosta]

Wrong wording. What I meant was easier to maintain + easier to extend +
easier to test. That is for me as I'm no Vue expert. Saying that, I'm 100%
sure that Vue can do everything that React does and vice -versa. But some
things react can do better IMHO

On Mon, Oct 19, 2020, 10:31 Robert Konigsberg [e-mail]
wrote:

What value does "truly scalable" provide for this app?

>

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/bafolts/terraforming-mars/issues/1661#issuecomment-711757880,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAGMEU4RCIKC6BFYC6VFZCTSLPTLHANCNFSM4SVKPUKA
.

[alrusdi]

-1 to change the framework. But we can move to Vue3. It provides more flexibility with developing the components.

[chosta]

Ok, I'll try to disregard my obvious bias towards React so let me present what I know and what I've learned during my time with this project.
First, lets clear something out. React is mostly a library and Vue is a full-blown framework. Both are super popular and in a big competition for "the best thing since sliced bread". I even remember there was a countdown competition which one would be the first to get 100k stars on github. Vue won by a small margin :)
Anyway, as I mentioned earlier both are amazing and can achieve the same things but they differ in the way they do it (not by much though).
What I like about React and I think might be helpful for this project compared to what Vue offers:
1. JSX
+ React - You can read about it but basically no HTML, just javascript. Readable, maintainable, testable (and works well with esprettier)
+ Vue - while as @nwai90 mentioned there is JSX for vue, it is generally discouraged and labelled as an anti-pattern (not sure why)

1. Css in JS
2. React - styled-components is simply amazing. Not going to talk about the benefits, just imagine no .less files most of the style markup resides in the component itself. There are ways to do css in js without a framework (see how react-material-ui does it)

3. Vue - I'm sure it's possible to for vue to do that with the help of an extension. There is a way to cleanup .less files so they are bound to components but since we want to break up bigger components to their basic immutable parts, this might be a challenge. We can have variables and mixins to handle repeating behavior. It needs some rules and dedication. From my experience css becomes a mess at some point - proportional to the size of the project but with the right attitude it could be tamed. (!ignore, class nesting, all the good stuff)

4. State management

5. React - I very rarely find redux useful for projects but for this one it might be the right call. Having the God objects as @alrusdi called them player, game, board could be stored in a global state. Thanks to redux and reacts context manager we can isolate only the properties and objects we need for each component (not pass player to each and every component as we do now)

6. Vue - pretty sure vue can handle global state as good as React. Switching to vue3 as @alrusdi suggested would probably pave the road to do that w/o big issues.

7. Testing & reliability

8. React - as @bafolts mentioned compile time type checking would be an amazing improvement. Unit tests for UI elements is a very controversial topic for me. I've never had the case where a regression test on a React element made sense.

9. Vue - with the proper tools we might be able to do the compile type checking easily. Testing UI elements - no bueno as I mentioned

10. Flexibility

11. React - library - much more flexible but also steeper learning curve
12. Vue - framework - less flexible but robust

I see two approaches here:
1. upgrade to vue3
+ refactor the frontend so we have more components / less HTML #1605
+ introduce JSX? this has to be decided by the rest I am for it (striving for js supremacy)
+ refactor .less files to make more sense and set inhouse rules on how to write class names, variables, mixinis and includes
+ have a better state management (@alrusdi can help explain)

1. merge to React
2. refactor the existing vue components by introducing react counterparts - it is a daunting task but we wanted to refactor every component and break it to smaller Vues anyway :)
3. JSX and esprettier (@kberg would love that <3)
4. styled-components - only drawback is a bit of size increase on the bundle
5. redux ? optional but a good fit for this project imo

Thanks for your attention.

[kberg]

I'm a little skeptical of what JSX seems to be -- Google GWT was a great tool for its time (cross-platform compatibility issues - gone! Hello static typing and first-class refactoring!) Building all your components through Java instead of HTML, though? It was ... not great. GWT isn't absent because of that, but most teams moved to GWT templates, HTML with links back to the code.

It's not clear how much influence such an opinion has on the discussion -- I'll do whatever the senior folks on the team want -- if folks want to take on such a project, and see it through to its logical conclusion, more power to them. There's no reason why a separate branch with a couple of features wouldn't be compelling -- (particularly if there was some crazy way to share components during a migration.)

[bafolts]

My major goal would be for compile time type checking in the vue components. If Vue3 has support with that or with pre-compiled vue templates this can be achieved that is going to be the smallest lift.

[alrusdi]

There are no built-in type checking in Vue3 templates.
But this tool https://github.com/Yuyz0112/vue-type-check can be used for it.

[chosta]

There are no built-in type checking in Vue3 templates.
But this tool https://github.com/Yuyz0112/vue-type-check can be used for it.

Looks legit

@alrusdi Any chance we can have "css-in-js" with Vue?

@kberg NO JSX is just fine. @peonmodel can pconfirm its dope :)

[alrusdi]

Any chance we can have "css-in-js" with Vue?

Yes the same way like it is done with script and template tags in vue-type-check example
https://vuejs.org/v2/guide/single-file-components.html

[bafolts]

The vue-type-check took on a larger dependency that for whatever reason I had difficulty loading without error. Leveraging

https://www.npmjs.com/package/vue-template-compiler

I have our templates compiling to javascript. From there running it through the typescript compiler manually I have arrived at output which pleases me.

Using src/components/GameEnd.ts as example input:

src/components/GameEnd.ts:35:2309 - error TS2339: Property 'generation' does not exist on type 'PlayerModel'.
src/components/GameEnd.ts:35:4399 - error TS2339: Property 'spaces' does not exist on type 'PlayerModel'.
src/components/GameEnd.ts:35:4545 - error TS2339: Property 'oceans' does not exist on type 'PlayerModel'.
src/components/GameEnd.ts:35:4574 - error TS2339: Property 'oxygenLevel' does not exist on type 'PlayerModel'.
src/components/GameEnd.ts:35:4607 - error TS2339: Property 'temperature' does not exist on type 'PlayerModel'.

This output has caught what I want to spot which are places we are referencing values we do not have defined on types. I will most likely expand upon this tooling and add it as a script which runs during the build process to provide us with type checking on our templates.

We will have to tell the script our template files and it can run them through a type checking process. Once this is in place I will address the errors and start running through our templates one at a time.

[bafolts]

The move to react most likely too heavy a lift. For time being I will introduce a type checking and linting process on our templates which will address my concerns. Instead of using props: [] I will also migrate all of these to the type equivalent to give us type checking. After that we should have type checking coverage on our vue templates. This tool will also catch issues with the template as well as the type checking.

[chosta]

I'm ok with Vue in this case. We can just improve the exiting code baes.

[bafolts]

Will be pretty cool to have type checking on our vue templates. We will be the talk of the town! I will attempt to separate the script as it may make sense to provide it for anyone using typescript and vue.

[kberg]

Agreed. Two changes I would like to see, then, are a) moving HTML out of
strings and b) starting to write some tests.

>

[chosta]

+1 on moving out html
+1 on tests (but let's make the ones that make sense)

On Tue, Oct 20, 2020, 19:06 Robert Konigsberg [e-mail]
wrote:

Agreed. Two changes I would like to see, then, are a) moving HTML out of
strings and b) starting to write some tests.

>

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/bafolts/terraforming-mars/issues/1661#issuecomment-712960975,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAGMEU7IBZNTROS5Z5IOUI3SLWYSDANCNFSM4SVKPUKA
.

[kberg]

-1 to sensible tests. +1 to making silly jokes on gh.

On Tue, Oct 20, 2020, 12:26 PM Danimir [e-mail] wrote:

+1 on moving out html
+1 on tests (but let's make the ones that make sense)

On Tue, Oct 20, 2020, 19:06 Robert Konigsberg [e-mail]
wrote:

Agreed. Two changes I would like to see, then, are a) moving HTML out of
strings and b) starting to write some tests.

>

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
<
https://github.com/bafolts/terraforming-mars/issues/1661#issuecomment-712960975
,
or unsubscribe
<
https://github.com/notifications/unsubscribe-auth/AAGMEU7IBZNTROS5Z5IOUI3SLWYSDANCNFSM4SVKPUKA

.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/bafolts/terraforming-mars/issues/1661#issuecomment-712982709,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AADE6KJNINB2F5WK267NIDDSLW22JANCNFSM4SVKPUKA
.