#168 jecs architecture (Entity Component System)

fallback image probably showing plantuml error image



Diagram Information

Created by: admin   published
Language: Javascript
Repository: zakplus/jecs  github
Commit: master
Tags: featured-todomvc


Entity Component System frameworks are actually relatively simple. They offer ways of:

  1. defining Entities,
  2. adding Components (data objects) to those entity instances,
  3. defining Systems - which are code blocks which run across subsets of matched Components.
  4. a tick function

For my TodoMVC-ecs project I chose to use this javascript Jecs library - pictured here.  Full article at that link.  Here is an excerpt:

Article excerpt:

Is the Entity Component System any good for building traditional GUIs?

It turns out that the answer is yes! Whilst ECS is most commonly used in building games, it can also be used for building a traditional web "form" style application like TodoMVC. However you will need to radically rethink how models, their data and behaviour is organised.

This is arguably a refreshing, mind-blowing lesson in GUI programming! 🤯😉

ECS - Entity Component System Architectural Pattern

The ECS (Entity Component System) architecture is the new hotness in game developer circles. Its a way of architecting your software that rejects Models as classes in favour of a more deconstructed, data driven approach. The results, in gaming apps at least, are massive reductions in complexity and huge increases in performance and maintainability.

When I read about ECS it got me thinking - why not use it for more traditional software, not just games?

You can read about Entity Systems in this Wikipedia article. The basic idea is to take the Object (that contains identity, data and behaviour) and 'deconstruct it'.

  • Entity = like a model, but has no data and no behaviour 🤯 Entities are lightweight and dumb - just an id or name
  • Component = data
  • System = behaviour

more of this article at the TodoMVC-ecs project...


Modules being visualised

List of repository modules/files being visualised in the above diagram: