O blitz.js foi feito para a criação de aplicativos web grandes ou pequenos com banco de dados.
Blitz não e para criar aplicativos da web extremamente grandes, como o Facebook, também não é para criar sites de conteúdo, embora o usuário poderá adicionar facilmente páginas totalmente estáticas a um aplicativo Blitz para que não precise de um host separado para seu site de marketing.
Pontos importantes que diferenciam de outros frameworks
- Full-stack: Inclui tudo o que você precisa para desenvolver uma aplicação web fullstack de ponta a ponta: banco de dados, back-end e front-end
- Monolítico: Camada de dados sem API, permite colocar código do servidor(back-end) dentro dos seus componentes React ao invés de consumir os dados de uma API
- Convenção acima de configuração: Traz de volta a simplicidade e as convenções de frameworks como Ruby on Rails
Por ser Fullstack e Monolítico ele inclui tudo, desde o banco de dados ao front-end, tudo dentro de um único aplicativo. Apenas um servidor de desenvolvimento. Apenas uma coisa para implantar, em um servidor.
API não é necessária, em vez de buscar dados no back-end, importe-o no código do servidor para o front-end e chame-o como uma função normal.
No momento da construção, a importação da função é trocada por uma API HTTP gerada automaticamente, podendo ser gerada também por terceiros.
É um framework novo e ainda não chegou na versão 1.0, quando chegar, os desenvolvedores irão iniciar o ciclo de lançamento com estável e previsível com diversos canais, como stable, LTS e beta.
Blitz.js ainda não suporta desenvolvimento mobile e não possui integração com React Native.
Quer aprender React.js na prática? Clique aqui para saber como.
Como começar a programar com Blitz.js
Configure o seu computador
Você precisa do Node.js 12 ou mais recente
Instale o Blitz
- npm install -g blitz
Crie um novo aplicativo
- blitz new myAppName
- cd myAppName
- blitz start
Criando um projeto
Se esta é sua primeira vez usando Blitz, você terá que começar com algumas configurações iniciais. Fornecemos um comando que cuida de tudo isso para você, gerando a configuração e o código necessários para começar.
Na linha de comando, cd no diretório em que você deseja armazenar seu código e, em seguida, execute o seguinte comando:
blitz new mysite
Isso deve criar um diretório mysite no seu diretório atual.
Vejamos o que blitz new criou:
meu site
├── app
Components ├── componentes
Error │ └── ErrorBoundary.tsx
│ ├── layouts
Pages └── páginas
│ ├── _app.tsx
│ ├── _document.tsx
│ └── index.tsx
├── db
Migr ├── migrações
│ ├── index.ts
│ └── schema.prisma
├── integrações
Node── node_modules
├── público
│ ├── favicon.ico
│ └── logo.png
├── utils
├── .babelrc.js
├── .env
├── .eslintrc.js
├── .gitignore
├── .npmrc
├── .prettierignore
├── README.md
Bl── blitz.config.js
Package── package.json
Ts── tsconfig.json
└── yarn.lock
Esses arquivos são:
- O app/diretório é um contêiner para a maior parte do seu projeto. É aqui que você coloca todas as páginas ou rotas da API.
- db/ é para onde vai a configuração do banco de dados. Se você está escrevendo modelos ou verificando migrações, é para onde ir.
- node_modules/é onde suas “dependências” são armazenadas. Este diretório é atualizado pelo seu gerenciador de pacotes, para que você não precise se preocupar muito com isso.
- public/é um diretório em que você colocará ativos estáticos. Se você tem imagens, arquivos ou vídeos que deseja usar no seu aplicativo, é aqui que os coloca.
- utils/é um bom lugar para colocar qualquer arquivo de utilitário compartilhado que você possa usar em diferentes seções do seu aplicativo.
- .babelrc.js, .env, Etc. ( “dotfiles”) são arquivos de configuração para vários pedaços de JavaScript ferramental.
- config.js é para configuração personalizada avançada do Blitz. Isso se estende next.config.js.
- json contém informações sobre suas dependências e dev Dependencies. Se você estiver usando uma ferramenta como npm ou yarn, não precisará se preocupar com isso.
- json é a nossa configuração recomendada para o TypeScript.
Quer aprender React.js na prática? Clique aqui para saber como.
Saiba mais em:
https://github.com/blitz-js/blitz
