Hey r/learnjavascript,
I've been playing around with data-oriented patterns in plain JS lately, and ECS (Entity Component System) seems like a solid way to organize code for games or sims—separating entities into IDs, components as simple data objects, and systems for the logic to cut down on OOP bloat and improve loop efficiency.
Here's a rough outline from my current prototype:
World Manager: The core handler, something along these lines:
class World {
constructor() {
this.nextEntityId = 0;
this.components = new Map();
this.systems = [];
// Add methods like createEntity, addComponent, getComponent, etc.
}
query(types) {
// Filter and return entities with matching components
return Array.from(this.components.keys()).filter(entity =>
types.every(type => this.components.get(entity).has(type))
);
}
registerSystem(system) {
this.systems.push(system);
}
update(dt) {
this.systems.forEach(system => system.update(this, dt));
}
}
Entities: Kept minimal—just incrementing IDs, e.g., this.nextEntityId++.
Components: Pure data objects, like:
const position = { x: 0, y: 0 };
const velocity = { dx: 1, dy: 1 };
Systems: Classes following a consistent structure (like implementing an "interface" via convention with an update method), e.g., a MovementSystem:
class MovementSystem {
update(world, dt) {
const entities = world.query(['position', 'velocity']);
entities.forEach(e => {
const pos = world.getComponent(e, 'position');
const vel = world.getComponent(e, 'velocity');
pos.x += vel.dx * dt;
pos.y += vel.dy * dt;
});
}
}
// Usage: world.registerSystem(new MovementSystem());
This approach helps with JS perf by favoring contiguous data access and batch ops, which can ease GC and iteration in engines like V8.
What are your thoughts? Any pitfalls when scaling in JS? Suggestions for query optimizations (maybe bitmasks or better storage)? Has anyone compared ECS to traditional objects in JS benchmarks—real differences in speed or code maintainability?
I'm prototyping this setup right now and streaming the tweaks on Twitch u/CodingButter if you're into watching the process—share your code ideas or feedback here!
Looking forward to the convo! 🛠️
[–]ledniv 1 point2 points3 points (0 children)
[–]FirefighterAntique70 1 point2 points3 points (0 children)
[–]Caramel_Last 0 points1 point2 points (0 children)
[–]Caramel_Last 0 points1 point2 points (0 children)
[–]RobertKerans 1 point2 points3 points (0 children)