---
title: Native Component
category: Other
order: 2
---

The core elements of Arez are [Observables]({% api_url Observable %}), [Observers]({% api_url Observer %}) and
[ComputedValues]({% api_url ComputedValue %}) and these are all that is needed at runtime for Arez to build complex
applications. The initial versions of Arez just used these primitives to construct the first Arez applications.

Constructing primitives in this manner was tedious at best. Humans tend to want to use higher level abstractions
and so was born the annotation driven [Component Model]({{ site.baseurl }}/components/overview). Arez users could
define "components" that consisted of [@Observable]({% api_url annotations.Observable %}) properties,
[@Computed]({% api_url annotations.Computed %}) properties and [@Track]({% api_url annotations.Track %}) or
[@Autorun]({% api_url annotations.Autorun %}) observers.

The component model made authoring the reactive elements of Arez applications relatively easy. However annotation
processor used naming conventions to link primitive reactive elements together. The only way to know that
two observables were from the same component was to look at their names and if enough of the prefix matched then
they were probably from the same component. i.e. It would be reasonably safe to assume that two observable
properties named `"Person.42.firstName"` and `"Person.42.lastName"` where properties on a single component
of type `"Person"` with id `"42"`. 

This was usually sufficient for a human who was inspecting the event logs to get a gist of the interactions between
the different reactive elements but it made building a DevTool that introspected the components difficult. This lead
to the creation of native components.

Native components explicitly represent the component and the observables, observers and computed values that it
contains. Native components are exposed via the "spy" subsystem, allowing tools to introspect components and determine
which reactive components are contained within each component. Unfortunately native components add some overhead and
are only enabled if the system property `"arez.enable_native_components"` is true. Typically this is only enabled
in development mode.

The enhanced classes generated by the annotation processor will only define native components if they are enabled.
In a GWT world this is a compile-time determination and thus all code relating to native components is removed via
dead code removal when `"arez.enable_native_components"` is false. This means that in development mode you have a
runtime that allows full introspection by development tools with no overhead in production mode. The best of both
worlds.

Add some basic docs around native components
Add some basic docs around native components
