App com components em VanillaJS

[fernandoRj]

Fala pessoal boa noite, gostaria de saber se eu separar meu site por modulo (ex: header,content,footer,sidebar) e dentro desses modulos add os componentes de uma forma basica msm, somente uma funçao que contem uma variavel com o html e retorna esse html e depois pegar todas essas partes e importar para o arquivo principal, isso seria equivalente aos modulos do reactjs?

[eliseumds]

Um componente é basicamente um pedaço de lógica + estado + elementos de interface.

Qual é a motivação pra você fazer isso com componentes? Se você vai retornar somente HTML strings dos seus componentes, por que não utilizar HTML direto? Se você tiver lógica dentro deles (conditional rendering, eventos, etc), aí sim vale a pena, mas tem bastante coisa que vai tornar a tarefa mais difícil do que parece, como:

• Se um componente precisar ser atualizado, quem vai fazer isso?
• Quando um componente for atualizado, o ideal é que os outros, que não foram atualizados, não sejam renderizados novamente (reconciliation)
• Onde você vai guardar o estado de cada componente?
• Como você vai fazer pra compartilhar estado global? Por ex, talvez você queira mostrar o nome do usuário logado na header e footer simultaneamente

Há algumas alternativas ao React que são bem mais leves como Preact e Inferno. VueJS vai ficar bem mais similar na versão 3.0, mas deve levar mais uns meses pra sair.

[bernardodiasc]

Vale a pena tentar. Já fiz alguns projetos inteiros usando template literals para gerar o HTML, funciona perfeitamente. Voce vai precisar manjar de alguns conceitos de arquitetura pra botar tudo junto, mas vale a pena sim, e é divertido e fácil. Depois que fizer isso, vai enxergar os frameworks com muito mais maturidade, além do domínio da linguagem (que é o que importa).

[salatielsql]

Você pode fazer isso criando funções que retornam strings de components. Lembrando que desse jeito você você não cria estados, só um template de html reaproveitável:

// components/button.js
const VanillaButton = (text, onclick) => (`
    <button onclick="${onclick}">${text}</button>
`)

export const VanillaButton

// index.js
import { VanillaButton } from './components/button'

document.getElementById('button-container').innerHTML = VanillaButton('Meu Botão', () => {console.log('click')})

Ou você pode usar o ejs junto com o Webpack, WebpackHtmlPlugin e ejs-loader e importar arquivos de templates de ejs dentro do seu html.

// vanila-button.ejs:
<button onclick="<%= onclick %>"><%= text %></button>

// index.ejs
<div>
   <%- include('./templates/vanilla-button', { text: 'Meu botão', onclick: ( ) => {console.log('click') })
<div>

[evertonthepaula]

Eu já tentei brincar com algo parecido com isto https://github.com/evertonthepaula/MarvelAPI, se você olhar no diretório "src" verá que dividi as coisas entre estructures( templates e views) e widgets. Hoje eu faria um pouco diferente, tem muita coisa que quero mudar nesse repositório, mas eu gostei bastante do resultado final.

Se eu fosse te dar três dicas seriam:

1 - Aprenda sobre módulos Javascript
2 - Aprenda sobre Web Components(o que, por quê e como) e leia sobre a especificação nativa.
3 - Aprenda sobre como os frameworks funcionam e ganhe experiência usando frameworks.

[kazzkiq]

isso seria equivalente aos módulos do reactjs?

Por módulos eu entendo que você queira dizer componentes... a grosso modo, sim, seria.

É claro que quanto mais você tenta se aproximar de uma lib como o React com JS puro, mais complexo seu código vai ficando. Mas reforçando o que o @bernardodiasc disse, só com template literals e uns .createElement já da pra fazer "componentes" simples bem úteis, acho que vale o aprendizado até pra você perceber em qual ponto de complexidade de uma aplicação já vale a pena utilizar uma lib/framework de componentes.

[fernandoRj]

Você pode fazer isso criando funções que retornam strings de components. Lembrando que desse jeito você você não cria estados, só um template de html reaproveitável:

// components/button.js
const VanillaButton = (text, onclick) => (`
    <button onclick="${onclick}">${text}</button>
`)

export const VanillaButton

// index.js
import { VanillaButton } from './components/button'

document.getElementById('button-container').innerHTML = VanillaButton('Meu Botão', () => {console.log('click')})

Ou você pode usar o ejs junto com o Webpack, WebpackHtmlPlugin e ejs-loader e importar arquivos de templates de ejs dentro do seu html.

// vanila-button.ejs:
<button onclick="<%= onclick %>"><%= text %></button>

// index.ejs
<div>
   <%- include('./templates/vanilla-button', { text: 'Meu botão', onclick: ( ) => {console.log('click') })
<div>

fala amigo boa tarde o conceito que eu quero e justamente esse poder reaproveitar o html, so queria saber se isso se aproxima do conceito de componentes do reactjs, eu nao queria usar react nos meus projetos, queria fazer td com vanilla, inclusive estou usando o vanilla router para as rotas, mais pelo que eu vi eu estaria reinventando a roda, seria uma logica mt mais complexa de ser compreendida, no caso irei criar so esse app para estudos msm e depois ja irei começar a estudar react pq pelo que eu vejo n tem como se livrar do react

[evertonthepaula]

Você pode fazer isso criando funções que retornam strings de components. Lembrando que desse jeito você você não cria estados, só um template de html reaproveitável:

// components/button.js
const VanillaButton = (text, onclick) => (`
    <button onclick="${onclick}">${text}</button>
`)

export const VanillaButton

// index.js
import { VanillaButton } from './components/button'

document.getElementById('button-container').innerHTML = VanillaButton('Meu Botão', () => {console.log('click')})

Ou você pode usar o ejs junto com o Webpack, WebpackHtmlPlugin e ejs-loader e importar arquivos de templates de ejs dentro do seu html.

// vanila-button.ejs:
<button onclick="<%= onclick %>"><%= text %></button>

// index.ejs
<div>
   <%- include('./templates/vanilla-button', { text: 'Meu botão', onclick: ( ) => {console.log('click') })
<div>

fala amigo boa tarde o conceito que eu quero e justamente esse poder reaproveitar o html, so queria saber se isso se aproxima do conceito de componentes do reactjs, eu nao queria usar react nos meus projetos, queria fazer td com vanilla, inclusive estou usando o vanilla router para as rotas, mais pelo que eu vi eu estaria reinventando a roda, seria uma logica mt mais complexa de ser compreendida, no caso irei criar so esse app para estudos msm e depois ja irei começar a estudar react pq pelo que eu vejo n tem como se livrar do react

Cara então usa Web Components nativos:

https://developers.google.com/web/fundamentals/web-components/?hl=pt-br

Cara se você ta começando não entra nessa viajem de: "eu tenho que usar ferramenta X", é ótimo aprender React mas você tem que aprender conceito, conceitos são mais importantes que qualquer coisa.

[salatielsql]

Você pode fazer isso criando funções que retornam strings de components. Lembrando que desse jeito você você não cria estados, só um template de html reaproveitável:

// components/button.js
const VanillaButton = (text, onclick) => (`
    <button onclick="${onclick}">${text}</button>
`)

export const VanillaButton

// index.js
import { VanillaButton } from './components/button'

document.getElementById('button-container').innerHTML = VanillaButton('Meu Botão', () => {console.log('click')})

Ou você pode usar o ejs junto com o Webpack, WebpackHtmlPlugin e ejs-loader e importar arquivos de templates de ejs dentro do seu html.

// vanila-button.ejs:
<button onclick="<%= onclick %>"><%= text %></button>

// index.ejs
<div>
   <%- include('./templates/vanilla-button', { text: 'Meu botão', onclick: ( ) => {console.log('click') })
<div>

fala amigo boa tarde o conceito que eu quero e justamente esse poder reaproveitar o html, so queria saber se isso se aproxima do conceito de componentes do reactjs, eu nao queria usar react nos meus projetos, queria fazer td com vanilla, inclusive estou usando o vanilla router para as rotas, mais pelo que eu vi eu estaria reinventando a roda, seria uma logica mt mais complexa de ser compreendida, no caso irei criar so esse app para estudos msm e depois ja irei começar a estudar react pq pelo que eu vejo n tem como se livrar do react

Oi @fernandoRj Sim, eu acho bem interessante fazer isso para servir de aprendizado mas sim você estaria reinventando a roda hahaha é melhor aprender algum framework que faça isso, react, vue ou so o web components mesmo.

Eu estou tendo que fazer algo pareciso só com vanilla em um projeto mas foi porque achei o sistema era algo simples e depois virou um monstro haha (Eu deveria ter feito com React desde o início)

[eliseumds]

Talvez seja importante aprender sobre Web Components, mas lembre-se que há muitas desvantagens. Leia mais em https://dev.to/richharris/why-i-don-t-use-web-components-2cia. Claro que há vantagens também, e é seu papel decidir se a ferramenta se encaixa bem no seu produto (https://dev.to/ionic/why-we-use-web-components-2c1i).