Meteor.js based website, reddit/discord alternative

announce
1

Some year ago I shared early stage project here and didn’t update anymore. Over this time it was updated and now should look better. I hope you will find it interesting to check out. I have created a chat room for you to test and present to you - heahy:

Let me know what you think. I will keep checking that chat channel I have created on heahy in the future too so if you want to drop by and talk or ask something about meteor.js I’ll be there.

7 Likes
2

Nice work! We’ll take a deeper look in the next days, but looking good!

3

I did some serious technical testing of the infinite scrolling in the #girls channel and it seems to work quite well :face_with_monocle: :+1:

4

I also noticed the great consistent performance for at least 30 minutes of continuous heavy testing of the adult memes channel.

5

I did some optimizations there actually. The initial pattern of having reactive limit var on client and increasing it were not very good for bigger channels. Even though meteor subscription is smart and sends only new threads but database loads more and more making each new load slower and slower. Actually I made it to basically methods call with pagination, just kept subscription and made it no_merge_no_history.

6

I could not resist @jkuester technical testing challenge and I scrolled his favorite channel.

@ignl I noticed you don’t use DOM virtualization. As you scroll, all your cards remain in the list which affects performance a lot (especially on mobiles). The most common experience with growing number of DOM elements is choppy scrolling.
I use this a lot with React https://virtuoso.dev/ but I think you use Blaze.

By using virtualization I manage to simulate the entire Twitter experience: scroll an account wall, move to another account and scroll infinitely while the scroll position on the first account remains the same and I can do that by going froward to multiple accounts and coming Back. All this time, only a few cards are loaded in the DOM at one time.

Screenshot 2024-11-07 at 3.10.30 PM
Screenshot 2024-11-07 at 3.10.30 PM649×1254 235 KB

2 Likes
7

I moved into another tab for some time and came back to #girls. I am disconnected (status: ‘offline’). The page did not autoreconnect. At this point I need to refresh the page.
The way you can reconnect is simple

const reconnect = () => {
    Meteor.reconnect()
}
document.addEventListener('visibilitychange', reconnect)

or the extended version with “smart disconnect” (to add to client/startup)

import { Meteor } from 'meteor/meteor'
let disconnectTimer = null

// TODO update from https://github.com/mixmaxhq/meteor-smart-disconnect/blob/master/disconnect-when-backgrounded.js for Cordova

// 60 seconds by default
const disconnectTime = ((Meteor.settings?.public?.disconnectTimeSec) || 60) * 1000

const removeDisconnectTimeout = () => {
  if (disconnectTimer) {
    clearTimeout(disconnectTimer)
  }
}

const createDisconnectTimeout = () => {
  removeDisconnectTimeout()

  disconnectTimer = setTimeout(() => {
    Meteor.disconnect()
  }, disconnectTime)
}

const disconnectIfHidden = () => {
  removeDisconnectTimeout()

  if (document.hidden) {
    createDisconnectTimeout()
  } else {
    Meteor.reconnect()
  }
}

Meteor.startup(disconnectIfHidden)

document.addEventListener('visibilitychange', disconnectIfHidden)
8

Great idea I was not aware of this. Is there something like that for blaze?
Edit: did you notice choppiness? My old android scrolls everything to the end and go to thread and back works also fine.

9

Thanks for feedback a lot! This one I actually have in my todo pretty high in the list.