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

TypeScript

npm install -g typescript

package-lock.json

npm install

Task Runner

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

Pages and Views

  • 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

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

Static Files

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.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store