Forem: Diogo Neves

Folder Structure for SPA Applications (Angular, React, Vue ...)

Diogo Neves — Mon, 06 May 2024 15:42:04 +0000

When starting a new Single Page Application (SPA) project, one of the most crucial decisions is the organization of the project's folders. A well-defined structure can simplify development, maintenance, and collaboration with other team members.

In this article, I will explore a folder structure for starting an application, aiming to make it flexible and scalable throughout development.

It is important to note that this approach is especially useful for frameworks that do not offer a highly opinionated folder structure by default.

Directory Architecture

Below, I present a visualization of the directory architecture that I recommend for organizing SPA projects:

/src
│
├── /core
│   ├── (**Essential functionalities to initialize the application**)
│
├── /components 
│   ├── (**Presentation components**)
│
├── /widgets
│   ├── (**Independent components**)
│
├── /services
│   ├── (**Services to communicate with the API**)
│
├── /domain
│   ├── (**Application-specific types and utilities**)
│
└── /routes
    ├── (**Application pages**)

This structure provides a clear separation of responsibilities, facilitating development, maintenance, and scalability of the project.

In the continuation of this article, I will explain the responsibility of each folder.

/core

This folder is used to store the necessary code to initialize your application and load essential functionalities. Here reside essential services, components, and other functionalities that are used in various parts of the application.

/components

Here lie the reusable components of your application focused on presenting data to the user.

/services

In this folder, you should place the services responsible for communicating with your backend API. These services may include authentication logic, HTTP calls, and data manipulation.

/widgets

The components in this folder are designed to be incorporated into pages independently. They use services to fetch the necessary data and make use of markup and other components to display them.

Ideally, these components should be customizable only in basic styling aspects, such as colors, fonts, and sizes. They should not receive data directly, as they should be able to fetch it on their own.

/domain

This folder houses types and utilities specific to the application. Here you will find data type definitions, functions, classes, and business logic that are specific to the application domain.

/routes

The components in this folder combine other components to create complete pages that are displayed when the user accesses certain URLs.

Additional Tip:

In addition to the folder structure, a valuable complementary practice is to have one or more (in each directory) README.md files containing information about the purpose of each folder, usage guidelines, and any other relevant information for developers interacting with the code in the future.

Conclusion

Remember that there is no one-size-fits-all approach that works for all projects. The structure presented in this article is just a suggestion and can be adapted according to the specific needs of your project.

Try out this structure in your next project and adjust it as needed to meet your requirements.

I hope this article has been helpful in getting you off to a good start with your SPA projects!

Estrutura de Pastas Aplicações SPA (Angular, React, Vue ...)

Diogo Neves — Wed, 01 May 2024 12:28:42 +0000

Ao iniciar um novo projeto de Single Page Application (SPA), uma das decisões mais cruciais é a organização das pastas do projeto. Uma estrutura bem definida pode simplificar o desenvolvimento, a manutenção e a colaboração com outros membros da equipe.

Neste artigo, explorarei uma estrutura de pastas para iniciar uma aplicação, visando torná-la flexível e escalável ao longo do desenvolvimento.

É importante notar que essa abordagem é especialmente útil para frameworks que não oferecem uma estrutura de pastas altamente opinativa por padrão.

Arquitetura dos diretórios

A seguir, apresento uma visualização da arquitetura de diretórios que recomendo para a organização de projetos de SPA:

/src
│
├── /core
│ ├── (Funcionalidades essenciais para inicializar a aplicação)
│
├── /components
│ ├── (Componentes de apresentação)
│
├── /widgets
│ ├── (Componentes independentes)
│
├── /services
│ ├── (Serviços para comunicar com a API)
│
├── /domain
│ ├── (Tipos e utilitários específicos da aplicação)
│
└── /routes
├── (Páginas da aplicação)

Essa estrutura proporciona uma separação clara de responsabilidades, facilitando o desenvolvimento, manutenção e escalabilidade do projeto.

Na continuação deste artigo, explicarei a responsabilidade de cada pasta.

/core

Esta pasta é utilizada para armazenar o código necessário para inicializar o seu aplicativo e carregar funcionalidades essenciais. Aqui residem os serviços essenciais, componentes e outras funcionalidades que são utilizadas em várias partes da aplicação.

/components

Aqui ficam os componentes reutilizáveis da sua aplicação focados na apresentação dos dados ao usuário.

/widgets

Os componentes nesta pasta são projetados para serem incorporados nas páginas de forma independente. Eles utilizam serviços para buscar os dados necessários e fazem uso de marcação e outros componentes para exibi-los.

O ideal é que esses componentes sejam customizáveis apenas em aspectos básicos de estilização, como cores, fontes e tamanhos. Eles não devem receber dados diretamente, pois devem ser capazes de buscar por conta própria.

/services

Nesta pasta, você deve colocar os serviços responsáveis por se comunicar com a API do seu backend. Esses serviços podem incluir lógica de autenticação, chamadas HTTP e manipulação de dados.

/domain

Esta pasta abriga tipos e utilitários específicos da aplicação. Aqui você encontrará definições de tipos de dados, funções, classes e lógica de negócios que são específicas para o domínio da aplicação.

/routes

Os componentes nesta pasta combinam outros componentes para criar páginas completas que são exibidas quando o usuário acessa determinadas URLs.

Dica Adicional:

Além da estrutura de pastas, uma prática complementar valiosa é ter um ou varios(em cada diretório) arquivos README.md contendo informações sobre o propósito de cada pasta, orientações de uso, e quaisquer outras informações relevantes para os desenvolvedores que interagem com o código no futuro.

Conclusão

Lembre-se de que não há uma abordagem única que funcione para todos os projetos. A estrutura apresentada neste artigo é apenas uma sugestão e pode ser adaptada conforme as necessidades específicas do seu projeto.

Experimente esta estrutura em seu próximo projeto e ajuste conforme necessário para atender às suas necessidades.

Espero que este artigo tenha sido útil para ajudá-lo a começar com o pé direito em seus projetos SPA!

Como criar seu próprio sistema de gerenciamento de estado com vanilla JS?

Diogo Neves — Tue, 27 Dec 2022 21:33:34 +0000

Gerenciando o estado não é uma coisa nova em software, mas ainda é relativamente novo para construir software em JavaScript. Tradicionalmente, manteríamos o estado dentro do próprio DOM ou até mesmo o atribuiríamos a um objeto global na janela. Agora, porém, somos mimados com opções de bibliotecas e estruturas para nos ajudar com isso. Bibliotecas como Redux, MobX e Vuex(Ou Pinia) tornam o gerenciamento do estado entre componentes quase trivial. Isso é ótimo para a resiliência de um aplicativo e funciona muito bem com uma estrutura reativa de state-first, como React ou Vue.

Mas como essas bibliotecas funcionam? O que seria necessário para escrever uma nós mesmos?

Conceitos

Antes de começar, é importante conhecer alguns conceitos:

Estado

O estado pode ser entendido como o local onde guardarmos dados da aplicação, este pode ser global onde toda a aplicação pode fazer uso ou local onde apenas uma parte ou componente da aplicação podem fazer uso.

Observadores

São funções que são vinculadas a determinados valores para que possam ser chamadas sempre que esse valor mudar e, então, executar algo sobre a mudança.

Existem outros conceitos e provavelmente você poderá ver pequenas mudanças em cada biblioteca, mas com isso podemos iniciar o desenvolvimento do nosso próprio sistema.

Começando

De início vamos criar uma função store que receberá um objeto normal:


function store(initStateObject) {

}

Agora que podemos acessar as propriedades que o “usuário” do nosso sistema vai precisar, devemos fazer algo com elas, devemos retornar algo que ele possa realmente usar como sistema de gerenciamento de estado, para isso devemos definir como irá funcionar:

Devemos permitir obter e alterar o valor atual da propriedade.
Devemos permitir a criação de observadores para cada propriedade.

Para realizar a primeira parte, podemos criar um novo objeto derivado do objeto passado como argumento, este novo objeto conterá todas as propriedades, porém, elas serão convertidas em funções que quando chamadas sem argumento, retornarão o valor atual da propriedade e quando chamado com um argumento, este passará a ser o novo valor da propriedade:

function store(initStateObject) {
  // Obtém uma lista com todas as propriedades no objeto.
  const keys = Object.keys(initStateObject);

  // O objeto que terá as propriedades como funções.
  const realStateObject = {};

  // Útil para evitar alterá o objeto original.
  const initStateObjectClone = { ...initStateObject };

  for (const key of keys) {
    // A função que será usada no lugar da propriedade.
    const propertyFn = (newValue) => {
      // Se não houver um novo valor, retorne o valor atual.
      if (newValue === undefined) return initStateObjectClone[key];

      // Atualiza o valor da propriedade
      initStateObjectClone[key] = newValue;

      return newValue;
    };

    // Adiciona a propriedade como uma função ao objeto de estado.
    realStateObject[key] = propertyFn;
  }

  // Retorna o objeto de estado.
  /**
   * ? O objeto é congelado para evitar inserção de propriedades
   * ? já que não lidaremos com elas.
   * */
  return Object.freeze(realStateObject);
}

Com isso podemos saber quando um valor de uma propriedade foi consultado ou alterado.

Agora devemos permitir a anexação de observadores para que qualquer parte da aplicação interessada em uma propriedade saiba que ela foi alterada e faça algo a respeito.

Para isso, vamos aproveitar o fato de que as funções Javascript podem receber propriedades:

function store(initStateObject) {
  // Obtém uma lista com todas as propriedades no objeto.
  const keys = Object.keys(initStateObject);

  // O objeto que terá as propriedades como funções.
  const realStateObject = {};

  // Útil para evitar alterá o objeto original.
  const initStateObjectClone = { ...initStateObject };

  for (const key of keys) {
    //! Novo:
    // Armazena os observadores para cada propriedadade.
    const watchers = new Set();

    // A função que será usada no lugar da propriedade.
    const propertyFn = (newValue) => {
      // Se não houver um novo valor, retorne o valor atual.
      if (newValue === undefined) return initStateObjectClone[key];

      // Atualiza o valor da propriedade
      initStateObjectClone[key] = newValue;

      //! Novo:
      // Percorre todos os observadores e passa a eles o novo valor.
      watchers.forEach((fn) => fn(newValue));

      return newValue;
    };

    //! Novo:
    // Método `watch()` que será responsável por adicionar os observadores.
    propertyFn.watch = (observer) => {
      //! Novo:
      // Chama o observador imediatamente na primeira vez.
      observer(initStateObjectClone[key]);

      // Armazena o observador.
      watchers.add(observer);

      // Uma função responsável por remover o observado.
      return () => watchers.delete(observer);
    };

    // Adiciona a propriedade como uma função ao objeto de estado.
    realStateObject[key] = propertyFn;
  }

  // Retorna o objeto de estado.
  /**
   * ? O objeto é congelado para evitar inserção de propriedades
   * ? já que não lidaremos com elas.
   * */
  return Object.freeze(realStateObject);
}

O que fizemos foi adicionar um método watch() nas funções que foram criadas a partir das propriedades, ele é responsável por adicionar o observador, o método watch() também retorna uma função que quando chamada remove o observador.

Exemplo de uso:

const userData = store({ username: undefined });

userData.username.watch((u) => u && alert(`Òlá, ${u}!`));

setTimeout(() => {
  userData.username("Diogo Neves");
}, 2000);

Fechamento

Isso é apenas o básico, mas com isso temos um sistema de gerenciamento de estado simples e útil!

Poderíamos usar Proxies Javascript, no entanto, acredito que dessa forma fica mais fácil de entender e pensar por si próprio como um sistema de gerenciamento de estado funciona, mas recomendo a leitura sobre Proxies.

Obrigado por chegar até aqui!

Qualquer dúvida deixe um comentário, até mais!

BemtvJS - Overview

Diogo Neves — Sun, 27 Nov 2022 16:56:49 +0000

BemtvJS:
Template-based reactivity,
Brackethtml,
CSS-In-Template,
SuperComponent,
CSS-In-JS,
Hooks,
DOM events,
CompVars,
Transformation functions,
Automatic routing,
and Code-Splitting.

BemtvJS is a UI library that takes an approach contrary to most libraries and frameworks. Usually UI tools observe the state (variables and properties) and when it changes it updates the template and applies the result to the DOM, Bemtv makes the template itself check if the state has changed and update itself.

Brackethtml

Brackethtml is a markup language built into Bemtv that allows you to reduce HTML redundancy, support it and look like it:

const btn = `button[Click me!]`;

Brackethtml also allows insertion of CSS-In-Template, which is simply CSS-In-JS inserted directly into the template:

const btn = `button[color:blue; ~ Click me!]`;

SuperComponent

Creating a component:

import { _ } from "bemtv";

_`App`();

The returned value is called a SuperComponent. Internally, each time the component is used, a lightweight instance is created that manages this new rendering of the component.

These instances assume “control” whenever an action occurs in them, where the reaction is the execution of a previously passed callback, normally in Hooks and DOM events.

CSS-In-JS

In addition to the style that can be applied directly to the template, a great option is to use the css() method:

import { _ } from "bemtv";

const { css, template } = _`App`();

css`
  color: blue;
  font-size: 20px;
`;

template`h1[Hello world!]`;

Hooks

Each component instance goes through a series of steps, we can run functions called hooks in each of these steps:

import { _ } from "bemtv";

const { onInit, onMount, onUpdate, onUnmount } = _`App`();

onInit(() => {
  // Called(only once) when the instance is initialized.
});

onMount(() => {
  // Called(only once) after the component template has been mounted in the DOM.
});

onUpdate(() => {
  // Called after the template update is applied to the DOM.
});

onUnmount(() => {
  // Called(only once) after the component is removed/unmounted from the template it was in.
});

DOM Events

We can use DOM events directly from SuperComponent:

import { _ } from "bemtv";

const { click$, mouseover$ } = _`App`();

click$(() => {}, { capture: true });

mouseover$(() => console.log("Hey!"));

CompVars

We can pass an object as an argument to the component, this object is called compVars and all properties added to it are isolated to each rendering of the component, including data structures like Array, Set, Map and Object.

Knowing our “variables”, Bemtv manages to provide really sweet syntactic sugars.

An example is that we can add the path to the property directly in the template using the $ symbol:

import { _ } from "bemtv";

const { template, render } = _`Message`({ message: "Hey!" });

template`button[Clicked: $message ]`;

render();

If we have a property with the same name as an HTML attribute, we can use the @ symbol to tell Bemtv to treat the property as a key and value:

import { _ } from "bemtv";

const { template, render } = _`Img`({
  src: "avatar.png",
  alt: "My avatar",
});

template`img[ @src @alt ]`;

render();

Transformation Functions

The Transformation functions allow us to add a “mark” to a data structure and tell Bemtv to transform the data structure only when necessary, this allows us to focus only on the data structure.

import { tFn } from "bemtv";

const tListJoin = tFn((list) => list.join(" br[] "));

The above example creates a transform function that can be used with lists, and when the list is requested by the template it executes that function and adds the result to the template:

import { _, tFn} from "bemtv";

const tListJoin = tFn((list) => list.join(" br[] "));

const { template } = _`List`({
  list: tListJoin(["user1", "user2", "user3"]),
});

template`div[Users: $list ]

Whenever this list is changed (eg $.list.push(item)), Bemtv will detect and use the transform function again and render the change.

Automatic routing

Bemtv uses an innovative automatic route creation system, this is possible because the components can behave like routes/pages.

Bemtv is able to automatically figure out when a “normal” component should also be treated as a route:

A regular component:

import { _ } from "bemtv";

const { template } = _`AboutUs`();

template`We are cool!`;

The component responsible for rendering the App:

import { _ } from "bemtv";

const { template, render } = _`App`();

template`
      Welcome!  br[]br[]

      #[] br[]br[]

      #AboutUs[ Link to about us ]`;

render();

The second component uses the #[] symbol, it is within it that the routes are rendered.

Note the #AboutUs[...], this is where the “magic” happens.
First, Bemtv will read the App component template and find that the AboutUs component
is also a route (thanks to the # before it), and when the template is rendered, everything inside the #AboutUs[...] component will be wrapped in an a tag with the href attribute pointing to the route.

The route address will be the component name in kebab-case: /about-us.

When the user clicks on the link, the AboutUs component will be rendered in #[].

Bemtv will also figure out that the component is a route whenever we access some method of the component that targets routes, even if it is not called (thanks to Proxies).

Code-Splitting

To automate the component import process, Bemtv offers the autoImportComponents() function which accepts an object where the properties name must be the components name and their values must be a function that imports the component using dynamic imports(dynamic import):

import { autoImportComponents } from "bemtv";

autoImportComponents({
  Counter() {
    import("./components/Counter");
  },
});

Bemtv will import the component as soon as the component is used in a template, however, it will ignore the component until it is available.

Closure

These are not all the functionalities offered by Bemtv, for example, we are not talking about the innovative data sharing system between the components.
You can check everything in the project repository:

https://github.com/diogoneves07/bemtvjs.

Bemtv is a recent project, you are welcome to be part of the construction of this tool.

Any questions or if you want to contribute to the project, you can contact me or open a PR.

Thanks for getting this far!

BemtvJS - Visão geral

Diogo Neves — Sun, 27 Nov 2022 16:46:20 +0000

BemtvJS:
Reatividade baseada em template,
Brackethtml,
CSS-In-Template,
SuperComponent,
CSS-In-JS,
Hooks,
DOM events,
CompVars,
Funções de transformação,
Roteamento automático,
e Divisão de código.

BemtvJS é uma biblioteca de UI que adota uma abordagem contrária à maioria das bibliotecas e estruturas. Normalmente as ferramentas de UI observam o estado (variáveis e propriedades) e quando ele muda, atualiza o template e aplica o resultado ao DOM, a Bemtv faz o próprio template verificar se o estado mudou e se atualizar.

Brackethtml

Brackethtml é uma linguagem de marcação incorporada ao Bemtv que permite reduzir a redundância do HTML, suportá-lo e se parecer com ele:

const btn = `button[Click me!]`;

Brackethtml também permite a inserção de CSS-In-Template, que simplesmente é CSS-In-JS inserido diretamente no template:

const btn = `button[color:blue; ~ Click me!]`;

SuperComponent

Criando um componente:

import { _ } from "bemtv";

_`App`();

O valor retornado é chamado de SuperComponent. Internamente, cada vez que o componente é usado, é criada uma instância leve que gerencia essa nova renderização do componente.

Essas instâncias assumem o “controle”, sempre que ocorre uma ação nelas, onde a reação é a execução de um callback passado anteriormente, normalmente em Hooks e eventos do DOM.

CSS-In-JS

Além do estilo que pode ser aplicado diretamente no template, uma ótima opção é utilizar o método css():

import { _ } from "bemtv";

const { css, template } = _`App`();

css`
  color: blue;
  font-size: 20px;
`;

template`h1[Hello world!]`;

Hooks

Cada instância do componente passa por uma série de etapas, podemos executar funções chamadas hooks em cada uma dessas etapas:

import { _ } from "bemtv";

const { onInit, onMount, onUpdate, onUnmount } = _`App`();

onInit(() => {
  // Chamada(apenas uma vez) quando a instância é inicializada.
});
onMount(() => {
  // Chamada(apenas uma vez) depois que o template do componente foi montado no DOM.
});
onUpdate(() => {
  // Chamada após a atualização do template ser aplicada ao DOM.
});
onUnmount(() => {
  // Chamado(apenas uma vez) depois que o componente é removido/desmontado do template em que estava.
});

Eventos do DOM

Podemos usar eventos DOM diretamente do SuperComponent:

import { _ } from "bemtv";

const { click$, mouseover$ } = _`App`();

click$(() => {}, { capture: true });

mouseover$(() => console.log("Hey!"));

Variáveis de componentes(compVars)

Podemos passar um objeto como argumento para o componente, este objeto é chamado compVars e todas as propriedades adicionadas a ele são isoladas a cada renderização do componente, incluindo estruturas de dados como Array, Set, Map e Object.

Conhecendo nossas “variáveis”, a Bemtv consegue fornecer açúcares sintáticos realmente doces.

Um exemplo é que podemos adicionar o caminho para a propriedade diretamente no template usando o símbolo $:

import { _ } from "bemtv";

const { template, render } = _`Message`({ message: "Hey!" });

template`button[Clicked: $message ]`;

render();

Se tivermos uma propriedade com o mesmo nome de um atributo HTML podemos usar o símbolo @ para informar a Bemtv para tratar a propriedade como chave e valor:

import { _ } from "bemtv";

const { template, render } = _`Img`({
  src: "avatar.png",
  alt: "My avatar",
});

template`img[ @src @alt ]`;

render();

Funções de transformação

As funções de transformação nos permitem adicionar uma “marca” a uma estrutura de dados e informa ao Bemtv para transformar a estrutura de dados somente quando necessário, isso nos permite focar apenas na estrutura de dados.

import { tFn } from "bemtv";

const tListJoin = tFn((list) => list.join(" br[] "));

O exemplo acima cria uma função de transformação que pode ser usada com listas, e quando a lista é solicitada pelo template ele executa essa função e adiciona o resultado ao template:

import { _, tFn} from "bemtv";

const tListJoin = tFn((list) => list.join(" br[] "));

const { template } = _`List`({
  list: tListJoin(["user1", "user2", "user3"]),
});

template`div[Users: $list ]

Sempre que esta lista for alterada (ex: $.list.push(item)), A Bemtv detectará e usará a função de transformação novamente e renderizará a alteração.

Roteamento automático

A Bemtv utiliza um inovador sistema de criação automática de rotas, isso é possível porque os componentes podem se comportar como rotas/páginas.

O Bemtv é capaz de descobrir automaticamente quando um componente “normal” também deve ser tratado como uma rota:

Um componente normal:

import { _ } from "bemtv";

const { template } = _`AboutUs`();

template`We are cool!`;

O componente responsável por rendrizar o App:

import { _ } from "bemtv";

const { template, render } = _`App`();

template`
      Welcome!  br[]br[]

      #[] br[]br[]

      #AboutUs[ Link to about us ]`;

render();

O segundo componente apresenta a utilização do simbolo #[], é dentro dele que as rotas são renderizadas.

Observe o #AboutUs[...], é aqui que a mágica acontece.
Primeiro, a Bemtv lerá o template de componente App e descobrirá que o componente AboutUs
também é uma rota (graças ao # antes dele), e quando o template for renderizado, tudo dentro do componente #AboutUs[...] será envolvido em uma tag a com o atributo href apontando para a rota.

O endereço da rota será o nome do componente em kebab-case: /about-us.

Quando o usuário clicar no link, o componente AboutUs será renderizado em #[].

A Bemtv também descobrirá que o componente é uma rota sempre que acessarmos algum método do componente que se destine a rotas, mesmo que não seja chamado(graças a Proxies).

Dividindo o Código (Code-Splitting)

Para automatizar o processo de importação de componentes, a Bemtv oferece a função autoImportComponents() que aceita um objeto onde o nome das propriedades deve ser o nome dos componentes e seus valores devem ser uma função que importa o componente usando importações dinâmicas(dynamic import):

import { autoImportComponents } from "bemtv";

autoImportComponents({
  Counter() {
    import("./components/Counter");
  },
});

A Bemtv fará a importação do componente assim que componente for utilizado em um template, porém, irá ignorar o componente até o momento em que estiver disponível.

Fechamento

Essas não são todas as funcionalidades oferecidas pela Bemtv, por exemplo, não estamos falando do inovador sistema de compartilhamento de dados entre os componentes.
Você pode conferir tudo no repositório do projeto:

https://github.com/diogoneves07/bemtvjs.

Bemtv é um projeto recente, você é bem-vindo para fazer parte da construção desta ferramenta.

Qualquer dúvida ou se quiser contribuir com o projeto, pode entrar em contato comigo ou abrir uma PR.

Obrigado por chegar até aqui!

Super IA vs Devs

Diogo Neves — Sat, 19 Nov 2022 00:48:52 +0000

Recentemente, durante uma conversa em um grupo de amigos desenvolvedores, surgiu uma dúvida: Uma super IA poderia ou não “roubar” o espaço dos programadores no mercado de trabalho?

Para ter um parâmetro de quão “super” essa IA precisaria ser, imagine a combinação das ferramentas e IAs mais poderosas atualmente, exatamente aquelas que você está acostumado a usar, certamente seria muito poderosa.

A minha resposta...

Começo minha resposta com uma pergunta: atualmente, na empresa em que você trabalha, sendo júnior ou sênior, sua única responsabilidade é sentar em uma cadeira e programar?

Um programador é semelhante a um arquiteto e como tau, tem grande importância naquilo que está sendo construído, ele normalmente vai além do código, fazendo parte do planejamento, acompanhado execução e ajudando na tomada de decisões de acordo com as necessidades do projeto.

Conclusão

Eu vejo essas “ferramentas” literalmente como ferramentas que ajudam ou vão ajudar o programador a ser mais produtivo ou que simplesmente atacam um determinado problema que pode ser automatizado, mesmo com uma “Super AI“, não vejo o mundo dos programadores sendo abalado, de fato.

Na verdade, com a automatização de determinadas tarefas sobra mais tempo para os programadores focarem em coisas realmente importantes como qualidade do código, testes e novas funcionalidade. Ou seja, contribui para desenvolvermos softwares incríveis e torná-lo mais sustentáveis ao longo do tempo.

Deixe-me saber se concorda ou não comigo nos comentários!

Obrigado por chegar até aqui!

O quão bom você é na sua linguagem favorita?

Diogo Neves — Thu, 17 Nov 2022 12:53:17 +0000

Nos últimos anos aprofundei meus conhecimentos em JavaScript e recentemente me surgiu uma dúvida: Como saber se sou realmente bom em JavaScript?

A questão não é se sou um bom desenvolvedor ou programador, mas até onde cheguei em uma determinada linguagem.

A resposta...

A resposta para isso é “depende”, depende do seu parâmetro de comparação, porque ele vai determinar o que você considera “bom”.

No entanto, podemos usar uma analogia e comparar o aprendizado de uma linguagem de programação com o aprendizado de uma idioma falado.

O sonho de todo estudante de idiomas é pronunciar e conhecer as palavras de um determinado idioma como os falantes nativos, no entanto, nem mesmo os falantes nativos conhecem todas as palavras ou todas as maneiras pelas quais uma frase pode ser montada.

Mas na maioria das vezes que um falante nativo ouve ou lê palavras em seu idioma, ele as reconhece rapidamente, mesmo sem saber o que elas realmente significam.

Voltando ao mundo das linguagens de programação, acredito que um programador alcançou um bom nível ou “nativo” em uma determinada linguagem sempre que, ao ver algo novo nessa linguagem, não se sente “confuso” ou “perdido”, ou seja, mesmo que não saiba exatamente o que está acontecendo, você deve ter uma noção básica e se sentir confortável.

Conclusão

Atualmente, gosto de pensar assim porque simplesmente não é necessário definir níveis.

Nós podemos testar esse raciocínio ao olhar para um bloco de código em uma linguagem desconhecida e depois olhar para outro na nossa linguagem favorita, obviamente suas habilidades podem fazer você compreender os dois códigos, mas ao olhar para um bloco de código em uma linguagem desconhecida parecerá que você não está falando em seu idioma nativo, mas sim em um outro idioma.

Deixe um comentário para que eu saiba se você concorda ou não comigo!

Obrigado por chegar até aqui!

Super componentes... E muito mais!

Diogo Neves — Thu, 17 Nov 2022 12:36:11 +0000

O último lançamento da biblioteca Bemtv veio com recursos interessantes, o mais marcante deles a sintaxe possibilitada pelos SuperComponents.

Por que SuperComponent?

Um dos objetivos de criar componentes é poder utilizá-los muitas vezes em sua aplicação. Com o SuperComponent, internamente, cada vez que o componente é usado, cria-se uma instância leve que gerência essa nova renderização do componente. Essas instâncias assumem o “controle”, sempre que ocorre uma ação nelas, onde a reação é a execução de um callback passado anteriormente, normalmente em Hooks e eventos do DOM.

Um breve olhar

Componente Counter:

import { _ } from "bemtv";

const { click$, $, css, template, render } = _`Counter`({ count: 0 });

click$(() => $.count++);

css`
  padding: 20px;
  color: blue;
`;

template`button[Clicked: $count ]`;

render();

Logo, vemos que não precisamos envolver a lógica do componente em uma função como de costume, então a sintaxe parece melhor e mais limpa.

Variáveis de componentes(compVars)

No exemplo anterior, passamos um objeto com uma propriedade count como argumento, este objeto é chamado compVars e todas as propriedades adicionadas a ele são isoladas a cada renderização do componente, incluindo estruturas de dados como Array, Set, Map e Object.

Conhecendo nossas “variáveis”, a Bemtv consegue fornecer açúcares sintáticos realmente doces.

Um exemplo é que podemos adicionar o caminho para a propriedade diretamente no template usando o símbolo $:

import { _ } from "bemtv";

const { template, render } = _`Counter`({ message: "Hey!" });

template`button[Clicked: $message ]`;

render();

Se tivermos uma propriedade com o mesmo nome de um atributo HTML podemos usar o símbolo @ para informar a Bemtv para tratar a propriedade como chave e valor:

import { _ } from "bemtv";

const { template, render } = _`Img`({
  src: "avatar.png",
  alt: "My avatar",
});

template`img[ @src @alt ]`;

render();

Funções de transformação

import { tFn } from "bemtv";

const tListJoin = tFn((list) => list.join(" br[] "));

O exemplo acima cria uma função de transformação que pode ser usada com listas, e quando a lista é solicitada pelo template ele executa essa função e adiciona o resultado ao template:

import { _, tFn} from "bemtv";

const tListJoin = tFn((list) => list.join(" br[] "));

const { template } = _`List`({
  list: tListJoin(["user1", "user2", "user3"]),
});

template`div[Users: $list ]

Sempre que esta lista for alterada (ex: $.list.push(item)), A Bemtv detectará e usará a função de transformação novamente e renderizará a alteração.

As funções de transformação podem ser incrivelmente poderosas porque com Brackethtml podemos até retornar a marcação com CSS-In-JS.

Router

Um Router é usado para navegação entre visualizações de vários componentes em uma aplicação Bemtv, permite alterar a URL do navegador e mantém a UI sincronizada com a URL:

import { _, router } from "bemtv";

_`Home`().template`Hey!`;

_`AboutUs`().template`Hey Again!`;

const { template, render } = _`MyPages`();

template`
      #[] br[]br[] 
      Links: 
        #Home[Click to go home!]  
        #AboutUs[Click to know about us!]`;

render();

No exemplo acima, criamos duas rotas(Bemtv cria rotas automaticamente) e fornecemos um local para que elas sejam renderizadas #[] e também criamos links #Home[ Texto do link ], tudo isso em poucas linhas!

Fechamento

Esses são apenas alguns dos novos recursos da biblioteca, caso queira saber mais segue o link para o repositório do projeto: Bemtv.

Obrigado por chegar até aqui!

Reactive templates “automagically”

Diogo Neves — Wed, 26 Oct 2022 15:11:08 +0000

One of the most talked about topics lately in the JavaScript universe is Reactive Programming,
something we see somehow in major UI libraries and frameworks like React, Vue, Svelte, Solid, Angular and others.

This article is not intended to explain reactive programming, however, keep in mind that basically(in world of UI libraries/frameworks) whenever the state changes, the template is checked, updated, and the changes are applied to the DOM.

Obviously, each framework deals with this in its own way, some more reactive, others declarative, with VDOM, without VDOM...

What if we tried to do the opposite of what these frameworks normally do? Instead of changing the state causing the template to be updated, the template itself checks to see if the state has changed and updates itself.

At first it may seem strange, but this is the proposal of the Bemtv library.

A brief look

Counter component:

import { _ } from "bemtv";

const { click$, $, css, template, render } = _`Counter`({ count: 0 });

click$(() => $.count++);

css`
  padding: 20px;
  color: blue;
`;

template`button[Cliked: $count ]`;

render();

It uses a requestAnimationFrame loop to execute just the component template, thus getting the updated template to compare with the previous template to detect if there have been any changes and apply them to the DOM.

We might think that this will overload the browser, however, there are best practices we should follow to avoid this:

Everything inside the template must be strings, numbers or light calculations.
The function that generates the template should only be used for this.

Bemtv also uses a sophisticated system to determine if there have been any changes to the template, continues using the browser's repaint as a basis, but reduces the number of checks as the user interacts with the page and the time the component takes to generate the template, this makes Bemtv more efficient.

Bemtv does its work at runtime, it has a markup language very similar to HTML basically reducing its redundancy and a CSS-In-JS library all integrated into the template, and a Router full of syntactic sugars.

Bemtv is currently not available for production and its main goal is to be a tool for small web applications that can be learned in minutes instead of hours.

And that’s it

That's it for today, but you can find out more details on project repository and if you like the idea, don't forget to leave your star, it encourages the development of the project, see you soon!

Templates reativos “automagicamente”

Diogo Neves — Wed, 26 Oct 2022 14:56:51 +0000

Um dos tópicos mais comentados ultimamente no universo JavaScript é a Programação Reativa,
algo que vemos de alguma forma nas principais bibliotecas e frameworks de UI como React, Vue, Svelte, Solid, Angular e outros.

Este artigo não pretende explicar programação reativa, entretanto, tenha em mente que basicamente(no mundo das bibliotecas/frameworks de interface do usuário) sempre que o estado muda, o template é verificado, atualizado e as alterações são aplicadas ao DOM.

Obviamente, cada framework lida com isso à sua maneira, uns mais reativos, outros declarativos, com VDOM, sem VDOM...

E se tentássemos fazer o oposto do que esses frameworks normalmente fazem? Em vez de alterar o estado fazendo com que o template seja atualizado, o próprio template verifica se o estado mudou e se atualiza.

A princípio pode parecer estranho, mas essa é a proposta da biblioteca Bemtv.

Um breve olhar

Componente Counter:

import { _ } from "bemtv";

const { click$, $, css, template, render } = _`Counter`({ count: 0 });

click$(() => $.count++);

css`
  padding: 20px;
  color: blue;
`;

template`button[Cliked: $count ]`;

render();

Ela usa um requestAnimationFrame loop para executar apenas o template do componente, obtendo assim o template atualizado para comparar com o template anterior para detectar se houve alguma alteração e aplicá-las ao DOM.

Podemos pensar que isso sobrecarregará o navegador, no entanto, existem boas práticas que devemos seguir para evitar isso:

Tudo dentro do template deve ser strings, números ou cálculos leves.
A função que gera o template só deve ser usada para isso.

A Bemtv também utiliza um sistema sofisticado para determinar se houve alguma alteração no template, continua usando como base a repaint(repintura) do navegador, mas reduz o número de verificações à medida que o usuário interage com a página e o tempo que o componente leva para gerar o template, isso torna a Bemtv mais eficiente.

A Bemtv faz seu trabalho em tempo de execução, ela possui uma linguagem de marcação muito parecida com HTML basicamente reduzindo sua redundância e uma biblioteca CSS-In-JS tudo integrado ao template, e um Router cheio de açúcares sintáticos.

Atualmente, Bemtv não está disponível para produção e seu principal objetivo é ser uma ferramenta para pequenas aplicações Web, que pode ser aprendida em poucos minutos ao invés de horas.

Fechamento

Por hoje é só, mas você pode saber mais detalhes no repositório do projeto e se gostar da ideia, não esqueça de deixar sua estrela, ela incentiva o desenvolvimento do projeto, até breve!

Forem: Diogo Neves

Folder Structure for SPA Applications (Angular, React, Vue ...)

Directory Architecture

/core

/components

/services

/widgets

/domain

/routes

Additional Tip:

Conclusion

Estrutura de Pastas Aplicações SPA (Angular, React, Vue ...)

Arquitetura dos diretórios

/core

/components

/widgets

/services

/domain

/routes

Dica Adicional:

Conclusão

Como criar seu próprio sistema de gerenciamento de estado com vanilla JS?

Conceitos

Começando

Exemplo de uso:

Fechamento

BemtvJS - Overview

Brackethtml

SuperComponent

CSS-In-JS

Hooks

DOM Events

CompVars

Transformation Functions

Automatic routing

Code-Splitting

Closure

BemtvJS - Visão geral

Brackethtml

SuperComponent

CSS-In-JS

Hooks

Eventos do DOM

Variáveis de ​​componentes(compVars)

Funções de transformação

Roteamento automático

Dividindo o Código (Code-Splitting)

Fechamento

Super IA vs Devs

A minha resposta...

Conclusão

O quão bom você é na sua linguagem favorita?

A resposta...

Conclusão

Super componentes... E muito mais!

Por que SuperComponent?

Um breve olhar

Variáveis de ​​componentes(compVars)

Funções de transformação

Router

Fechamento

Reactive templates “automagically”

A brief look

And that’s it

Templates reativos “automagicamente”

Um breve olhar

Fechamento

Variáveis de componentes(compVars)

Variáveis de componentes(compVars)