Finding a mature and long-lasting setup with meteor

Hi there, I am desperately trying to find a front-end setup that works, all components are done, its well-documented and tested.

I have tried semantic-ui, which is now legacy, and seems to be incompatible with new meteor versions. I have looked at the Blaze Bootstrap 4 Components Blaze Bootstrap 4 Components and I have looked at some angular attempts. It all seems messy and not following each other.

I am open to anything, but I would something that is mature and will last a little longer than two years. Any ideas?

I spent a few days trying out UI libraries, and ended up just going with good old Bootstrap classes. I’m still a noob dev, but it works and is really easy. Very few components end up needing custom css, at least on the projects I work on.

Here’s a TitleBar component w/ collapsible nav (sry I use React, className=class):

export default TitleBar = ({ children, title }) =>
  <nav className="TitleBar">

    <TitleLinks title={title} />

    <h1 className="TitleBar__title">{title}</h1>

    <div className="TitleBar__collapse" id="navbarSupportedContent">
      
      {children}
  
    </div>

</nav>

And the css:

.TitleBar {
  @extend .navbar, .navbar-light, .navbar-expand-lg,
    .bg-secondary, .text-dark, .shadow;
  display: flex;
  justify-content: space-between;
}

.TitleBar__title {
  @extend .serif, .mx-3;
  font-display: swap;
}

.TitleBar__collapse {
  @extend .collapse, .navbar-collapse;
  display: flex;
  flex-wrap: wrap;
  flex-basis: 100;
  justify-content: space-around;
}

@media (max-width: 600px) {
  .TitleBar {
    flex-direction: column;
  }
}

Not a lot of code, and keeps the markup pretty clean. I use scss @extend to use bootstrap classnames. Getting it setup is a matter of this:

meteor add fourseven:scss  # scss is cool!
meteor npm install bootstrap  # downloads bootstrap src to node_modules
# in client/main.scss:
@import '{}/node_modules/bootstrap/scss/bootstrap'

It will complain that jquery and popper.js are peer deps, and you need them if you want interactive features of Bootstrap:

meteor npm jquery popper.js
# in client/main.js:
import 'bootstrap/dist/js/bootstrap.bundle.min';

I’m not thrilled about including jquery and popper, but bootstrap is great. I haven’t noticed any performance or build issues… but I’m pretty clueless :laughing: . Hopefully someone more experienced than me can share their UI strategy.

Bootstrap has good docs and probably isn’t going to drop off the map any time soon. If you need mature and long lasting though, Meteor is probably your biggest concern. Docs or forum posts or packages from 2 yrs ago are basically irrelevant. I see 2017 and don’t even bother clicking.

Just a noobs 2c, maybe I’m just not good enough to adapt the old solutions. Good luck!

As creator and maintainer of the (work in progress) Blaze Bootstrap 4 components I would really appreciate if you would highlight a bit which parts of it are messy as I am open for major changes in this phase. Once it hits the 1.0 it will be not that easy to make deep structural changes.

This is totally up to you. Expecting a tech in the realm of Javascript to last two years is already a very brave plan. The best you can do is actively contributing to the tech of your choice to make sure it will last the period of your intend.

I think what you mean is a component framework on top of a front end framework and a layout framework? If you use React you may check out react-bootstrap. Notice that it is close to 1.0 although being developed for quite a time by a good amount of people. So I think it is hard to find the perfect stunner framework out-of-the-box that is more developed than this one.

1 Like

I’ll give up the joy of creating my own components from scratch, when you pry it from my cold, dead hands! :cowboy_hat_face:

1 Like

Thanks @jistjoalal for your 2c, makes at a lot of sense to me, and along the lines of my thinking. Can you elaborate on your point about the Meteor age concern.

Thanks @jkuester on your comments, and sorry for my indication of your work being messy, that was not the intention at all, on the contrary your work seems very well done, and I am looking forward to your progress, but I dont understand why it has not been done ages ago…?

I think there is a strong point for my consideration to expect maturity in this part of the arena. I guess you are right, I am looking for something which is not there.

Well I’m pretty new to the web dev world, but Meteor doesn’t seem to me the most stable platform. If Rails is a train, Meteor is a rocket. We’re not that good at making rockets w/ a long lifespan yet :laughing: But if you need to get somewhere in a hurry, rockets are indeed fast.

I read the K&R C book (2nd edition says 1988) and that code still compiles on my modern machine. I read a blog post from 2016 about how to do something in Meteor, and the code just never works. Sometimes it doesn’t even look relevant to how Meteor works now.

It could just be how much Javascript has changed since Meteor was created. I’m new so I maybe I just can’t translate the code.

The main problem is packages. Outdated packages or dependencies that seem to have been the perfect solution only a few years ago are soul crushing

Care to share said piece of code? Because our experience, and that of many Meteor users in this community, is that the library is actually rock solid.

1 Like

Like I said, it’s probably more a problem of being a noob and the JS world changing so fast.

I took Andrew Mead’s Udemy course and created the additional challenge for myself of not using his specified package versions, but the latest, and then reading docs to get it working. It took forever. React Router had completely changed since the course came out. Almost every video in the course has comments from students facing version problems.

My honest opinion is that it’s not easy to keep up-to-date with the JS world, and it doesn’t seem that stable. I guess it’s just lack of experience.

Thank you for the encouragement, the forums are a big reason for me choosing Meteor for some of my own projects.

I appreciate that you are still in the process of learning, but then it might be too early for you to say that “Meteor doesn’t seem to me the most stable platform”. You see what I mean? :wink:

Since we are talking about how unstable the JS world feels (and admittedly it is), Meteor is one of the most stable and backwards compatible JavaScript frameworks. I had it run some of our old code, wrote in the 0.x era. If you want peace of mind, you hardly have a more reliable choice.

5 Likes

I use Pure css for a few form components and then build everything bigger myself using flexbox.

I’m a huge fan of Semantic-UI React. Been using it for the past two years here and find it to be exceptionally stable.

I’m using Bulma for CSS - clicking on a button is still handled by my app JS code - ie: opening / closing a dropdown menu.

We’ve been using Material UI (React) for 3 years now, working very fine.

1 Like

I use Material UI too. It’s beautiful.

I use material-ui as well, as well as their styling component. This is react, however.

1 Like

I write all my customized styles using styled-components.

1 Like

I’m personally a fan of https://reactstrap.github.io/

@njbuch no offense taken, I am just curious about any critics on my projects :slight_smile:

I think this has not been started since there was no bootstrap 4 at the time when Blaze was still the major frontend framework for Meteor. And bs3 was not event finished. Then React and Angular came to the stage and brought some of these component frameworks.

I do this now with Blaze Bs4 because I still use Blaze in my projects for the next 2-3 years.

me2, unless if it is really technical. then i sometimes use material ui.

styled-components and material-ui are both great, because you can add it to the project without messing with the rest of your app.

try adding bootstrap to a existing app without breaking the style somewhere…

1 Like