tm nextjs starter
1.0.0
Este é meu kit inicial e aplicativo de demonstração React mínimo, mas funcional, em agosto de 2018.
Se você se sente cansado do cansaço do Javascript e deseja começar de forma rápida e fácil, dê uma olhada nisso. Desenvolver um aplicativo SPA React moderno não pode ser muito mais simples do que isso.
O aplicativo de demonstração é um site estático, um aplicativo básico de página única que possui algumas páginas endereçáveis que são carregadas lentamente sob demanda. Ele demonstra operações básicas de CRUD: 1) listar filmes, 2) visualizar detalhes do filme, 3) criar/editar e 4) excluir um filme.
A demonstração usa o navegador localStorage para armazenamento de dados, o que significa que é executado sem back-end. As fontes contêm um módulo que faz chamadas AJAX reais para um back-end REST - você só precisa ativar o módulo e escrever um servidor, e você está no caminho certo para ter um aplicativo da web real. Eu desenvolvi o servidor RESTPie3 Python REST API que implementa esta API de filme simples como exemplo.
O aplicativo de demonstração consiste em uma pilha de tecnologia simples, mas poderosa, que fornece a funcionalidade essencial para a criação de aplicativos da web modernos. Está nos ombros de algumas grandes bibliotecas:
├── /components/ # React components used by pages
│ └── /MyHeader.js # Site header component, just as an example
├── /pages/ # pages
│ ├── /_app.jsx # top level layout of the app, loaded once
│ ├── /about.jsx # about page
│ ├── /index.jsx # home page, lists movies
│ ├── /moviedetails.jsx # details page, views a movie
│ └── /movieedit.jsx # edit page, edits a movie
├── /static/ # static assets, accessed/exported as is
│ ├── /favicon.ico # favicon
│ └── /exampledata/
│ └── /movies.json # sample list of 4 movies - loaded initially
├── /styles/ # global SASS files
│ └── /layout.sass # main layout
├── config.js # app config, select ajax or localstorage
├── next.config.js # nextjs configuration, almost empty
├── package-lock.json # npm something
├── package.json # list of npm packages required
├── README.md # this doc
├── serverapi_ajax.js # API, talks AJAX to a real backend
├── serverapi_localstorage.js # API, talks to localStorage
└── store.js # data store, managed by MobX
Veja como executar o starter em sua máquina local:
$ git clone https://github.com/tomimick/tm-nextjs-starter
$ cd tm-nextjs-starter
$ npm install
$ npm run devEm seguida, aponte seu navegador para http://localhost:3000.
Quando qualquer um dos arquivos dependentes é modificado, as alterações são carregadas a quente e tornam-se visíveis instantaneamente. Aproveite o desenvolvedor!
Nextjs é uma ótima estrutura que traz a quantidade certa de ordem ao caótico reino do desenvolvimento Javascript. Ele facilita o início do desenvolvimento do React, cuidando das configurações e das ferramentas, permitindo que você se concentre no aplicativo principal desde o início. Ele fornece uma funcionalidade central mínima bem projetada que é praticamente necessária para todos os aplicativos da web.
Benefícios do Next.js em poucas palavras:
Nextjs está maduro o suficiente, foi lançado há cerca de 2 anos e possui um ecossistema de plugins saudável. Webpack é usado para o trabalho de base.
É perfeitamente possível e provável que o Nextjs seja substituído ou mesclado com algo ainda melhor no futuro, mas encapsula algumas práticas recomendadas agora que vale a pena experimentar.
Redux é geralmente a primeira opção como solução de gerenciamento de estado para aplicativos React. Foi uma das primeiras bibliotecas disponíveis, é comentada em muitos blogs e, portanto, ganhou quase um status padrão.
Tive sentimentos confusos sobre Redux desde o primeiro encontro. Eu sempre gosto de pensar e fazer pesquisas por conta própria e depois de ler muitas bases de código React+Redux, avaliando outras opções, acho que o Redux com seu paradigma funcional e puro parece um pouco abstrato e superprojetado para mim. (Plus Redux também é usado em locais onde simplesmente não é necessário. É muito fácil exagerar.)
Na minha opinião, o MobX oferece uma solução mais simples e prática para gerenciamento de estado do que o Redux. É mais fácil de entender e entender. Requer menos código clichê. Você tem seu estado que declara observável, então simplesmente altera seu estado e todos os observadores são atualizados automaticamente. MobX funciona e fica fora do caminho.
Os engenheiros discutem se o Redux é melhor para um aplicativo maior ou para um aplicativo “real”, mas é uma batalha sem fim. Minha estratégia geralmente é manter meu código enxuto e mesquinho, nem mesmo tentando desenvolver um aplicativo "grande" em primeiro lugar...
Nextjs fornece suporte para folhas de estilo CSS globais do site e locais da página.
style jsx (veja about.jsx por exemplo).Nesta demonstração também experimento a funcionalidade de grade CSS, que é um padrão recente de layout da web. A grade CSS é uma ferramenta de layout poderosa que finalmente fornece uma maneira robusta de definir uma grade bidimensional. Isso mudará a maneira como construímos layouts. Se você ainda não aprendeu ou leu sobre a grade CSS, 2018 é um bom momento para fazê-lo. O suporte do navegador já é muito bom. Em breve se tornará popular.
A capacidade de gerar um site estático com Nextjs é uma ferramenta importante que possibilita a execução de aplicativos sem servidor backend. Você pode exportar o site para páginas do GitHub, Netlify ou Amazon S3. (Mas verifique algumas dicas com prefixos de site + link nas páginas do Github.)
Outra vantagem da geração estática é ser capaz de conectar o aplicativo a qualquer back-end REST, independentemente do idioma do back-end. A separação clara entre front-end e back-end também fornece modularização em nível técnico e possivelmente em nível de equipe.
Uma observação sobre SEO: para exportar versões estáticas das páginas com dados dinâmicos, você precisaria criar um script de todas as páginas na configuração next.config.js, veja este exemplo.
Para gerar um site estático, basta executar
$ npm run export E os arquivos estáticos serão gerados na pasta out .
Para testar o site estático localmente por meio de um servidor www local, executo rapidamente um script python: (python3 -m http.server)
$ npm run pyserveE então teste o site em http://localhost:8000.
O tamanho da página inicial é decente, cerca de 94 KB compactado e compactado .
O navegador carrega a página inicial com um total de 6 solicitações, e cada nova página carregada sob demanda faz uma única solicitação js uma vez (lembre-se que com React é tudo sobre Javascript, não HTML).
Page Size Inspector Report
URL: https://nextjs.tomicloud.com/
REQUEST REQ BYTES
TOTAL___________________________________________6____94,159
Document________________________________________1_______916
-nextjs.tomicloud.com/ 916
Script__________________________________________4____92,836
-nextjs.tomicloud.com/_next.../index.js 1,053
-nextjs.tomicloud.com/_next/.../_app.js 2,506
-nextjs.tomicloud.com/_nex.../_error.js 2,490
-nextjs.tomicloud.com/.../main-6a4a..js 86,787
Stylesheet______________________________________1_______407
-nextjs.tomicloud.com/_nex.../style.css 407(Relatório do meu Inspetor de tamanho de página da extensão do Chrome.)
Vá em frente e pegue este iniciador React e talvez meu servidor RESTPie3 Python REST API também e construa seu excelente serviço.
Você também pode entrar em contato comigo para perguntar se estou disponível para trabalho freelance.
Se você preferir Vue em vez de React, também codifiquei esse mesmo iniciador com Vue Nuxtjs.
Licença MIT
