Drapo Framework for ASP.NET Core — Initial

No post Drapo Framework for ASP.NET Core — The Beginning eu falei sobre um novo framework para frontend, algo diferente de tudo que você já viu sem deixar de ser incrível.

Vou falar agora sobre a forma de funcionamento do template, pois como o drapo foi desenvolvido usando TypeScript usamos algumas libs e o gulp para facilitar o uso.

Pre-requisites

Você vai precisar do Node.js instalado, não esqueça de confirmar a criação da variável de ambiente para que o executável do npm possa ser executado de qualquer pasta.

TypeScript

Após o npm instalado, execute a linha abaixo, pode ser no powershell, isso vai fazer com que o TypeScript seja instalado de forma global (-g).

npm install -g typescript

package-lock.json

Execute o comando abaixo para criar o arquivo package-lock.json e já instalar os pacotes necessários para o projeto. O comando deve ser executado no mesmo local onde o arquivo package.json está.

npm install

Task Runner

Vamos utilizar o gulp para criar tarefas para copiar os arquivos necessários dos pacotes do node_modules para dentro o wwwroot. Para isso, precisaremos da CLI (Command Language Interface) do gulp, além disso o gulp também precisa do pacote graceful-fs. Para instalar ambos, execute os comando abaixo para que seja instalado de forma global (-g).

npm install -g gulp-cli

npm install -g graceful-fs

O gulp somente vai funcionar se você executá-lo utilizando o command prompt — MS-DOS. O comando deve ser executado no mesmo local onde o arquivo gulpfile.js está. Caso durante a instalação você estava com o command prompt aberto, deve fechá-lo e abrí-lo novamente para que ele carregue os executáveis do path das variáveis de ambiente.

O gulpfile.js já está configurado para ser executado sempre que você realizar build do projeto.

Se você se sentir confortável, você pode trocar o gulp, usando o grunt, cake, libman entre diversos outros. Uma curiosidade sobre o cake é que ele foi feito em C#.

drapo.js

Você vai perceber que o template de inicialização do projeto não possui o arquivo drapo.js, pois ele está embedeed no pacote ‘Sysphera.Middleware.Drapo’ que em breve vai mudar de nome.

Pages and Views

O padrão MVC, funciona da seguinte forma:

• O Razor procura pelo arquivo _ViewStart.cshtml;
• O _ViewStart.cshtml indica qual é o _Layout.cshtml;
• No _Layout.cshtml está o header, footer e o body onde o conteúdo das páginas será exibido.

No drapo a estrutura funciona da mesma forma, dentro do wwwroot/index.html, há uma chamada para wwwroot/app/shared/layout.html.

Startup.cs

O mais importante a ser destacado aqui é o método ConfigureDrapo, conforme mostrado a seguir.

Vou falar de algumas configurações dele que ajudam no início do uso.

Static Files

Precisamos alterar o middleware pipeline do ASP.NET Core e adicionar o UseStaticFiles quando arquivos com conteúdo estático são utilizados na aplicação, para que o conteúdo destes arquivos sejam carregados.

O drapo não usa o padrão MVC (Model View Controller) e sim arquivos html estáticos dentro da pasta wwwroot.

• NoCache: Para esta configuração de exemplo, nós desabilitamos o cache dos arquivos estáticos. Isso é necessário, pois o drapo realiza modificações em tempo de execução (runtime), se mantivessemos o cache o browser não buscaria novamente aquele conteúdo em uma próxima requisição.
• Debug: A opção debug permite utilizar o drapo.js no modo que não esteja minificado a fim de colaborar na visualização em caso de algum problema.
• UsePipes: Para utilizar a função pipes dentro do drapo, é necessário que o signalR esteja habilitado. Este recurso é bastante utilizado caso sem sua aplicação tenha algum recurso de notificações, assim como as do Facebook. Dentro do drapo há uma classe chamada DrapoPlumber que cuida de todo esse fluxo, seu único trabalho seria cuidar do frontend.
• CreateTheme: Você indica os nomes dos estilos que deseja e o drapo se encarrega de usá-los da seguinte forma: styles\layout.less padrão
  styles\layout.dark.css estilo dark

Falarei de configurações específicas em outros posts.

Originally published at http://alextochetto.com on September 14, 2020.