Entity Component Systems For The Web
What Is An Entity Component System?
An Entity Component System (ECS) is a computational architecture pattern primarily used in game design. In it, you have many Entities, which contain only a unique id number and a place to store a collection of Components.
The Component is a collection of data, and the System is the logic that acts on the components attached to the entities.
Here is a Javascript example for each of these:
So put simply, an Entity can have Components like position and health added to it. Then our systems will update the components for each entity typically every frame or a given amount of time.
ECS’s are very powerful for any application in which you will have lots of unique objects that need different kinds of operations called on them, so the gaming industry is the obvious customer here; but there are others.
ECS’s For None Game Development Purposes
ECS architecture is brand new and came about as a result of problems game developers were facing in their work, but you might begin to see ECS’s cropping up in many other industries; For instance VFX. In VFX the idea is similar to the game dev industry. You have particles and objects that need to have certain things done to them on each update, and you can have thousands of them on screen at a time; so the usefulness certainly seems applicable.
Even outside of applications in which you have to handle loads of unique objects, this architecture can still be useful just for the fact that it is a fairly easy concept to understand, and therefore it can be easy for a developer to solve problems and implement code in an ECS architecture.
Take a Bird and a Rock for example, and try to think about what components they would have. The rock and the bird would both have a position and mass a component, but the rock would not have a flightMovement component since unless throw, is incapable of flight. Take a look at the objects around you and imagine what components they would have, and the systems that affect those components and the entities they belong to.
ECS In Web Development
ECS is very young and fairly similar to OOP, so it seems like it might take a bit to take hold in anything outside the obvious use cases. I’m not sure at this point if a true ECS can be used on a large scale, especially since as far as I know it has never been tried, and it most likely won’t be common until somebody proves it can be useful; or perhaps proves it isn't.
The ECS model is moldable to each use case, just like OOP, and because of that, I’m not sure if ECS’s can or can’t be a better option than OOP or Function Programming in web dev. As of writing this blog, I haven't tried utilizing an ECS outside game dev, but I’m going to take a shot at it to work out what the pros and cons of the system end up being for that particular application.
Resources For ECS In Javascript
There aren’t too many libraries for setting up an ECS in JS, and it isn't built into JS itself, but here are a few I've found, as well as some additional reading on the subject.
ECSY, an experimental ECS framework for the web → https://ecsy.io/
Some ECS libraries for JS →
- https://github.com/fritzy/ecs-js
- https://github.com/yagl/ecs
Additional Reading →
https://medium.com/ingeniouslysimple/entities-components-and-systems-89c31464240d