Recommendations for new project: Meteor + React + TypeScript? Packages?

Hi guys,

the next bootstrapped project is coming and I am thinking about which stack to choose…

Some questions:

  1. Is there a “best-practise“ code-example somewhere that shows how an awesome Meteor-React-Typescript codebase would look like?
  2. What tooling would you choose for when working with freelancers? I am planning to collaborate with freelance programmers and an exotic stack will probably limit my choice of potential programmers. :grinning:
  3. I’d like to have your feedback on which “tooling“ (=npm / athmosphere-packages) to use.
    So far the plan is:
  • Meteor
  • React
  • Typescript (is it worth it? What do you think?)
  • Material-UI (although I am struggling a bit getting into the styledComponents-concept - I am coming from bootstrap and still love working with less/sass)
  • SimpleSchema and Collection2
  • Vazcoo/uniforms for forms (project is form-heavy)

What do you guys recon?

In a previous thread I started there were some good references, including a nice looking react starter app

1 Like

@meecect thanks for the link. I checked it out but it does not use Typscript.

I’d love to see some best-practise typescript meteor-code in a project.

If possible a meteor project that uses:

  • React
  • Typescript
  • SimpleSchema and Collection2
  • And maybe some kind of Autoform (no other than vazcoo:uniforms I guess) that is based on a typescript schema.

Background is that I am evaluating the stack to use for my next project and thinking about making the switch to typescript…

Any other codebases to show of?

1 Like

So far I found:

But both don’t really show the full power of typescript to me…

Check out the husky recommendation in this thread - runs typescript compile check before git commit. It is just great!

1 Like

to be honest classical meteor using collections and pub/sub, simpleschema etc. does not play very well with typescript. You might get typechecking for simpl-schema definition, but not for entities in your database and that is probably what you are wishing for. At least this was my intention when i started to use typescript.

I personally recommend using graphql. You can create typescript types using npx apollo codegen:generate --target=typescript based on your backend-api and use these generated types in your client-code. They match exactly the data you requested from the backend. So if you remove something because you think you don’t need it anymore and regenerate the types, you will immediatly notice if you still used it somewhere. This really gives you piece-of-mind when writing client code and is also very convenient, because you can auto-complete through your entities’ properties.

Data used in multiple components can easily be shared in a common hook. just import it, use it in your component and its return value will be magically typed.

See https://www.apollographql.com/docs/react/development-testing/static-typing/ for an example of using apollo-client and typescript

styledComponents-concept

you will learn to love it! No need to invent classNames all the time, never having leaking styles, dead css code, unexpected style regressions.

Vazcoo/uniforms for forms (project is form-heavy)

i also use it often, but its typescript capabilities are still a bit limited, but it might get better in the future as it is still maintained

2 Likes

Thanks for all those infos guys :grinning: