O projeto Commons UI é responsável por prover a estrutura da camada de visualização para todos os projetos que utilizam-se da arquitetura na camada de apresentação. Esta estrutura é composta, internamente, por bibliotecas como: AngularJS, jQuery e Atlassian AUI. Em conjunto, todas as bibliotecas agregam componentes, estruturação da apresentação, modelo de dados de fácil utilização com data-biding bidirecional, internacionalização, etc. Nesta seção veremos como o projeto Commons UI trabalha internamente e a sua intervenção no desenvolvimento da camada de visualização.
Conforme a imagem abaixo, o projeto é estruturado por pastas, cada qual refletindo a responsabilidade de seus componentes. Como este projeto é inteiramente composto de arquivos Javascript, não existem dependencias de outros projetos.

Nesta seção abordaremos como cada provider disponível na arquitetura funciona internamente. Providers são objetos expostos para toda a aplicação, passíveis de injeção e podem ser utilizados dentro de um bloco de configuração do AngularJS. Para maiores informações leia a documentação oficial sobre providers.
A arquitetura utiliza apenas um provider, o MessageProvider. Este é um componente do AngularJS que pode ser configurado em um bloco de configuração, como por exemplo URLs de validação e mensagens, e oferece uma interface pública para componentes do AngularJS (controllers, directives, filters). Abaixo temos um exemplo da utilização do MessageProvider na configuração de URLs de validação e mensagens.

Tem como responsabilidade buscar, armazenar mensagens (de validação ou descrição) e controlar o fluxo utilizando-se de listeners para avisar outros componentes de que a a busca de mensagens foi realizada com sucesso.
Nesta seção abordaremos como cada service disponível na arquitetura funciona internamente.
Nesta seção abordaremos como cada directive disponível na arquitetura funciona internamente.