oop - Design of a simple has and belongs to many dependency in a web application -

i have 2 simple entities.

a foo simple data container. end user can view , modify list of foos.

a bar list of foos. user can remove foos, or add new foos list each bar.

in database, simple habtm relationship. there's foo table, bar table, , join table.

on client, bars need notified when member foos change. example, let's if foo changes, bars containing foo should display symbol indicating have new data, or animation.

i'm not sure 2 things: how store , manage foo data, , how notify affected bars.

foo data

the logical solution seems delegating database. after all, implements joining relationship between foos , bars, why should duplicate on client-side? mean posting every change user makes foo db, , refetching bars db. performance-wise it's wasteful, because i'm querying server data have.

from performance / simplicity pov, obvious implementation bars on front-end have references foos, i'm unsure this. wouldn't defeat purpose of having relational database? instead of using database's ability return populated bar records (including details of foo), use foo ids, looking them in client-side foo list , storing references them. i'm duplicating db's join logic, bad (tm), right?

notification

the best solution can think of observer pattern: storing in each foo list of bars belongs to, when foo changes know bars need notified. i'm reluctant because having references both foo bar , bar foo bi-directional association.