Quando todo mundo começa a se familiarizar com o React ou o Vue, como com as duas estruturas mais populares para frontend, é claro, todos nós usamos os comandos mágicos
npm install, npm build . E somente depois desse pai 'público' Nós implantamos "onde necessário".
Mas há uma outra maneira (não denominada
pervertida ) não-padrão, que muitos desenvolvedores iniciantes de front-end nem conhecem, já que "cresceram" no npm install / build.
Mas e se você não precisar compilar, basta inserir o código js em html?
Espere para cuspir na minha cara e atirar pedras com a inscrição 'Eu amo o nó' ... Certamente sabemos que sem montagem, perderemos testes de unidade, velocidade e como lidar com a importação de componentes, uma hierarquia de arquivos e, geralmente, algum tipo de código de espaguete vai acabar ...
Então, por que você (e nós) precisamos e como funciona?
Outro dia, um pedido veio de nossa "empresa" para adicionar funcionalidade ao sistema BPM / ERP, que é essencialmente um Redmine fortemente modificado. Todo esse milagre foi realizado há muito tempo e está girando em um servidor VPS com vários microsserviços auxiliares para a leitura de dados de produção, máquinas e assim por diante. Você não pode tocar no sistema operacional ...
Redmine - escrito em Ruby on Rails, e gera toda a frente no servidor. Toda a interação front-end nos plug-ins adicionados foi através do jquery. Agora, o RoR aprendeu a trabalhar com o webpack e você pode estragar o "humano npm", mas isso está nas versões mais recentes, e temos o Ruby e o Centos 6 antigos nos quais não há uma versão mais recente do Ruby ou dos trilhos. Não me apetece coletar as fontes e vasculhar tudo com o objetivo de adicionar vários formulários reativos, por isso começamos a procurar uma maneira de adicionar React ou Vue ao modelo de página do Rails, como JS comum, sem npm e assemblies.
E rapidamente encontrado, e para ambos.
Vue sem Vue npm
Com o Vue, tudo acabou sendo muito simples. Iniciar os componentes parece obviamente "estranho", mas geralmente legível e "gravável".
Um exemplo de uma página simples no Vue com um componente:
<html> <head> <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script> <title>Stranger Vue things</title> </head> <body> <div id="vue-app"></div> <script type="text/javascript"> const titleComponent = `<h1>{{ title }}</h1>`; var app = new Vue({ el: '#vue-app', template: titleComponent, data: function () { return { title: 'Stranger Vue things' }; } }); </script> </body> </html>
Arquivos baixados pelo navegador: 371 Kb, tempo: 590 msVocê pode até importar componentes do Vue no formato .vue normal usando o
http-vue-loader e não gerar código espaguete. Fiquei surpreso ao saber que apenas um valor é necessário das dependências, o que é uma boa notícia.
Reagir sem Reagir npm
Com o React, tudo é um pouco mais complicado, mas não muito. Para que o JSX funcione, é necessário importar o babel. Para trabalhar com o DOM, você precisa reagir. Sem o exposto, a reação não funcionará normalmente. Em vez de uma importação, você precisa fazer três.
Um exemplo de uma página simples em React com um componente:
<html lang="en"> <head> <title>React Stranger Things</title> <script type="application/javascript" src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script> <script type="application/javascript" src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js"></script> <script type="application/javascript" src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> const rootElement = document.getElementById('root') class TitleComponent extends React.Component { render() { return ( <h1> {this.props.title}</h1> ); } } function App(){ return( <div> <TitleComponent title="React Stranger Things"/> </div> ) } ReactDOM.render( <App />, rootElement ) </script> </body> </html>
Arquivos baixados pelo navegador: 542 Kb, tempo: 589 msAqui, diferentemente do Vue, você não precisa escrever o modelo do componente como uma string, escrevemos tudo como de costume, o que é bastante conveniente e não causa nenhum desconforto.
E quem escolhemos?
Se você escolher o tamanho das importações de js baixadas pelo navegador, o vencedor será o Vue. Mas isso é apenas à primeira vista. Como não tínhamos muitos componentes, fizemos a tarefa em ambos. E era mais conveniente escrever no React: quase não há diferença ao escrever com a montagem, e a diferença nas importações não é muito significativa.
Mas e o Preact?
Preact é a versão “mini” do
react , que é um pouco mais rápida e pesa apenas 3 KB. Assim que soube da nossa tarefa, a primeira coisa que lembrei foi a realização. Abrir a documentação não foi uma surpresa agradável: Reagir.
Preact não possui JSX, a ortografia dos componentes é muito diferente do React. Aprender a escrever da "maneira pré-realizada" para a nossa mini-tarefa é muito redundante e "caro".
Isso é uma muleta! Bata nele com eles
Sabemos que isso é uma muleta. Mas às vezes você precisa inventar essas soluções com base nas tarefas. Em uma situação normal de desenvolvimento de front-end, o uso de estruturas nesta modalidade é uma muleta terrível e certamente não é recomendada.