Using mutable objects for modeling application state makes tracking changes hard and incurs a sizable performance cost. Switching to immutable objects solves these problems, but brings new ones. This is because immutability and encapsulation are often at odds. Can we combine the benefits of immutability and local state? In this article I will explore how it can be done in Angular 2.





Problems with Mutable Objects



Tracking Changes



Mutable objects make it hard to keep track of changes in an application. To see why this is true, let’s look at this component.



@Component({
selector: 'person',
template: `{{person.name}} lives at {{address.street}}, {{address.city}}`
})
class DisplayPerson {
@Input() person: {name:string};
@Input() address: {city:string, street:string};
}




Let’s say we want the component to look up and display the zip code of the address. And to make it more interesting, this lookup is expensive, so we want to do it only when the address changes.



In Angular 2, components can..