Estrutura do template de site pessoal

Em outra aula neste mesmo módulo, você foi apresentado ao processo de criação de um novo site pessoal baseado em template utilizando WebMatrix.  Neste contexto, faz sentido olhar de forma demorada para a esturtura deste modelo de aplicação pois permite visualizar um padrão arquitetônico interessante para construção de aplicações web baseadas em web pages com WebMatrix.

Esturtura do template "Personal Site"

Para que possamos começar a analisar a estrutura do template, considere a estrutura de diretórios apresentada pela Figura 1.

Figura 1. A estrutura de diretórios do template

Iniciemos este processo de análise pelos diretórios da aplicação. São 7 (sete) diretórios sendo que, alguns deles, são estratégicos para o funcionamento da aplicação. São eles:

• App_Code: diretório responsável por agrupar helpers, classes, funções, etc. Se algum arquivo Razor deve ser utilizado como biblioteca, este arquivo deve ser incorporado na pasta App_Code. WebMatrix buscará nesta página códigos executáveis.
• App_Data: diretório dedicado ao armazenamento de arquivos que atuam como fontes de dados da aplicação. Por padrão, quando um banco de dados SQL Server Compact (.sdf) é criado, sua estrutura encontra-se hospedada neste diretório.
• bin: diretório específico para a adição componentes da plataforma .NET. Por padrão, quando um projeto WebMatrix é criado, são adicionadas automaticamente algumas referências base. 

Os demais diretórios (Contents, images, Layouts e Styles) são intrínsecos a cada aplicação e não padrões de projeto, como é o caso daqueles visualizados nos ítens anteriores. Ainda assim, como o objetivo é entender a forma como a aplicação foi construída, vale mencionar que, o diretório "Content" agrupa as páginas de conteúdo da aplicação. Já o diretório "images", como é possível imaginar, agrupa todas as imagens exibidas pela aplicação. O diretório "Layouts" é aquele que agrupa arquivos que possuem definições sobre os layouts possíveis para a aplicação, enquanto que o diretório "Styles" agrupa os arquivos de estilização (.css, .less, etc.).

O restante dos ítens apresentados pela Solution Explorer da Figura 1 são arquivos de inicialização padrão do site (veremos alguns deles em mais detalhes mais adiante neste texto).

O diretório "App_Code"

Conforme mencionado anteriormente, o diretório App_Code tem a função de agrupar códigos Razor executáveis para reutilização durante o projeto. Para que possamos entender sua utilidade no projeto do template, considere a Figura 2.

Figura 2. Conteúdo do diretório "App_Code"

Expandindo-se o diretório App_Code, é possível visualizar alguns arquivos em seu interior. Estes arquivos são helpers e classes escritas em linguagem C# que possibilitam a implementação de certos recursos da aplicação. Apresentemos então uma rápida descrição acerca destes:

• BlogHelper.cshtml: trata-se de um helper que implementa algumas funções intrínsecas a blogs. Alguns exemplos: criação de URL' amigáveis, exibição de RSS, etc. Como é possível notar, o arquivo possui a extensão ".cshtml" o que indica que este possui código Razor e pode haver HTML e C# misturados, caracterizando-o portanto como helper.
• ContentSource.cs: classe escrita em C# que implementa o mecanismo de links para conteúdos dentro da aplicação. A ideia aqui é, ao invés de ter-se um menu criado diretamente na web page view, tem-se um objeto que encapsula as características de um menu e, para cada novo conteúdo, tem-se uma instância de ítem de menu.
• FeedItem.cs: classe escrita em C# que possui a função de definir o objeto de feed para utilização do "BlogHelper.cshtml" visto anteriormente.
• FileHelper.cshtml: helper que possui a função de mapear e associar cada nova instância de "ContentSource" para os arquivos físicos em "Content".
• Flickr.cshtml: helper que implementa a intergração com o sistema de compartilhamento de fotos do Yahoo!. Este arquivo encapsula toda a complexidade de integração com a ferramenta e disponibiliza um interface simplificada para o desenvolvedor realizar a conexão.
• TwitterHelper.cshtml: helper que implementa a integração da aplicação com a ferramenta de microblogs. Várias funções estão disponíveis para este helper.

Com base na descrição dos arquivos fica fácil entender que, na pasta App_Code, temos o coração da aplicação implementado. Conforme o conteúdo deste artigo avança, a importância dos arquivos agrupados neste diretório lhe será cada vez meios evidente.

Os arquivos padrão

Além da importância já mencionada do diretório App_Code e seus arquivos, alguns outros arquivos de projeto também são fundamentais na estrutura apresentada pela Figura 1. São eles:

• _AppStart.cshtml: arquivo executado quando a aplicação inicia sua execução. O objetivo desta página é concentrar a implementação de recursos que devem ser executados no momento em que a aplicação é carregada. O símbolo "_" indica ao framework que este arquivo deve ser ignorado em termos de renderização pelos navegadores assim, só funciona em background.
• _PageStart.cshtml: arquivo carregado também com a inicialização da aplicação. A diferença em relação a "_AppStart.cshtml" é que, os parâmetros indicados em "_PageStart.cshtml" dizem respeito as configurações visuais das páginas, enquanto a outra indica configurações relacionadas a operações lógicas.
• ContentPage.cshtml: página responsável por estruturar logicamente o fluxo da aplicação. "ContentSource.cs" e "ContentPage.cshtml" estão intimamente relacionados pois, enquanto o primeiro define o objeto de navegação o segundo mapeia o fluxo de navegação.
• Default.cshtml: página padrão a ser renderizada pelo browser. Ao executar a aplicação, "Default.cshtml" é a página buscada pelo IIS para ser executada enquanto as demais são executadas na sequência.

Com base nas informações apresentadas até este ponto, podemos imaginar o fluxo de execução da aplicação conforme apresentado pela Figura 3.

Figura 3. Fluxo de execução do template

Vantagens deste modelo

As vantagens de se construir uma aplicação de forma modular, separando o máximo possível as responsabilidades são latentes.

Para justificar esta afirmação, considere o exemplo da construção de web page views. A forma tradicional para construção destes elementos é: cria-se um arquivo de estilização (CSS, por exemplo) e, para cada nova página que necessite exibir algum dado no padrão de layout, o arquivo de estilos deve ser incorporado manualmente no interior destes (princípio da repetição das tarefas). Com o modelo de arquitetura proposto pelo exemplo deste template, como o arquivo "_SiteLayout.cshtml" implementa o layout padrão da aplicação, as demais páginas apenas herdam (automaticamente) o layout padrão.

Conclusões

Estruturar as aplicações com WebMatrix pode implicar em diversos benefícios, principalmente para o desenvolvedor. Características como fácil manutenção, abstração com base em objetos, dentre outras, podem impactar diretamente na qualidade da aplicação bem como na produtividade do desenvoledor.

O modelo Razor de programação foi pensado de forma a fornecer todos os recursos necessários para que desenvolvedores pudessem criar a maior gama de códigos e modelos reutilizáveis possível.