{"id":22164429,"url":"https://github.com/faustinopsy/fastframejs","last_synced_at":"2025-03-24T16:11:58.507Z","repository":{"id":234484815,"uuid":"788994524","full_name":"faustinopsy/fastFramejs","owner":"faustinopsy","description":"Este FastFrame.js é um framework embrionário em JavaScript que visa simplificar a criação de componentes web reutilizáveis ​​e modulares. Através de uma abordagem leve e intuitiva, ele permite que os desenvolvedores construam interfaces dinâmicas e consistentes com menos código e mais facilidade, aproveitando o poder da linguagem JavaScript","archived":false,"fork":false,"pushed_at":"2024-07-11T23:53:37.000Z","size":593,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-29T21:31:55.724Z","etag":null,"topics":["framework","javascript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/faustinopsy.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-19T13:50:27.000Z","updated_at":"2024-07-11T23:53:41.000Z","dependencies_parsed_at":"2024-07-12T01:53:02.026Z","dependency_job_id":null,"html_url":"https://github.com/faustinopsy/fastFramejs","commit_stats":null,"previous_names":["faustinopsy/framejs","faustinopsy/fastframejs"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/faustinopsy%2FfastFramejs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/faustinopsy%2FfastFramejs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/faustinopsy%2FfastFramejs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/faustinopsy%2FfastFramejs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/faustinopsy","download_url":"https://codeload.github.com/faustinopsy/fastFramejs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245304873,"owners_count":20593626,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["framework","javascript"],"created_at":"2024-12-02T05:07:58.589Z","updated_at":"2025-03-24T16:11:58.483Z","avatar_url":"https://github.com/faustinopsy.png","language":"JavaScript","readme":"\r\n## FastFrame.js: Framework Embrionário para Criação Simplificada de Componentes em JavaScript\r\n\r\n**Introdução**\r\n\u003e [!NOTE]\r\n\u003e O `FastFrame.js` é um framework embrionário em JavaScript que visa simplificar a criação de componentes web reutilizáveis e modulares. Através de uma abordagem leve e intuitiva, ele permite que desenvolvedores construam  interfaces dinâmicas e consistentes com menos código e mais facilidade, aproveitando o poder da linguagem JavaScript onde podemos criar o Html e o Css diretamente pelo JavaScript.\r\n\u003e A forma que os objetos eram criados foram transferidos para arquivos json que estão na pasta json na raiz do projeto, isso foi feito para utilizar o web work e nele manter a lógica que faz as requisições paralelas e criam os objetos que serão utilizados no arquivo App.js.\r\n\u003e O modelo atual mostra uma página simples com três páginas no padrão SPA onde os conteudos internos das páginas são criados pela estrutura no arquivo json, isso possibilita a flexibilidade de manuntenção e utiliza a estratégia de cache utilizando o service work, então o uso do web work e service work em conjunto faz o wepapp carregar rapidamente dando ao usuario uma boa experiência de usabilidade.\r\n\u003e esse projeto é apenas um modelo que poderá ser expandido.\r\n\r\n\r\n\r\n\u003e [!IMPORTANT]\r\n\u003e **Estrutura da classe**\r\n\u003e ```\r\n\u003e export default class FastFrame {\r\n\u003e     constructor(objeto) {\r\n\u003e    }\r\n\u003e   \r\n\u003e     adicionarPropriedades() {\r\n\u003e     }\r\n\u003e   \r\n\u003e     adicionarTexto() {\r\n\u003e     }\r\n\u003e   \r\n\u003e     adicionarEventos() {\r\n\u003e     }\r\n\u003e   \r\n\u003e     adicionarEstilo() {\r\n\u003e     }\r\n\u003e   \r\n\u003e     gerarElemento() {\r\n\u003e       this.adicionarPropriedades();\r\n\u003e       this.adicionarTexto();\r\n\u003e       this.adicionarEventos();\r\n\u003e       this.adicionarEstilo();\r\n\u003e   \r\n\u003e       return this.novoElemento;\r\n\u003e     }\r\n\u003e   }\r\n\u003e ```  \r\n\r\n\r\n\u003e [!NOTE]\r\n\u003e **Fundamentos de Uso**\r\n\u003e \r\n\u003e Para utilizar o `FastFrame.js`, siga estes passos:\r\n\u003e \r\n\u003e **1. Crie Objetos de FastFrame:**\r\n\u003e \r\n\u003e -   Defina um objeto JavaScript que represente o componente desejado, os modelos estão no arquivo componentes.\r\n\u003e -   Inclua propriedades como `tipo`, `id`, `className`, `textContent`, `eventos`, `style` e `holver` em um novo objeto.\r\n\u003e \r\n\u003e **Exemplo da criação de um botão e um form:**\r\n\u003e \r\n\u003e \r\n\u003e ```\r\n\u003e //arquivo formulario.js \r\n\u003e import * as elementTypes from \"../../componentes/TiposElementos.js\";\r\n\u003e import * as fabricar from \"../../componentes/Fabrica.js\";\r\n\u003e \r\n\u003e const botaoEnvia = {\r\n\u003e   tipo: \"button\",\r\n\u003e   textContent: \"Clique aqui\",\r\n\u003e   className: \"btn btn-primary\",\r\n\u003e   holver: {\r\n\u003e     colorin: \"lightblue\",\r\n\u003e     colorout: \"\",\r\n\u003e   },\r\n\u003e   eventos: {\r\n\u003e     click: () =\u003e {\r\n\u003e       console.log(\"Botão clicado!\");\r\n\u003e     },\r\n\u003e   },\r\n\u003e };\r\n\u003e \r\n\u003e const form ={\r\n\u003e     tipo: elementTypes.FORM,\r\n\u003e     id: 'form',\r\n\u003e       style: {\r\n\u003e         display: 'flex',\r\n\u003e         'flex-direction': 'column',\r\n\u003e         'justify-content': 'center',\r\n\u003e         width: 'auto',\r\n\u003e         height: 'auto',\r\n\u003e         border: 'solid 2px red',\r\n\u003e       }\r\n\u003e   }\r\n\u003e \r\n\u003e  export default function fabricaForm(){\r\n\u003e    const novoform = fabricar.criarContainer(form);\r\n\u003e     const novobotaoEnvia = fabricar.criarContainer(botaoEnvia);\r\n\u003e    \r\n\u003e     novoform.appendChild(novobotaoEnvia)\r\n\u003e     \r\n\u003e     return novoform\r\n\u003e     \r\n\u003e   }\r\n\u003e ```\r\n\u003e \r\n\u003e \r\n\u003e ```\r\n\u003e //arquivo contato.js:\r\n\u003e import fabricaForm from \"./formulario.js\";\r\n\u003e \r\n\u003e //adiciona no corpo o formulario com o botao já com stylo iline nele\r\n\u003e document.body.appendChild(fabricaForm())\r\n\u003e \r\n\u003e \r\n\u003e ```\r\n\u003e \r\n\u003e \r\n\u003e **2. Importe e Utilize as Funções:**\r\n\u003e \r\n\u003e -   Importe as funções `criaElemento` e `criaTabela` do arquivo `FastFrame.js`.\r\n\u003e -   Utilize a função `criaElemento` para criar qualquer elemento HTML a partir de um objeto de componente.\r\n\u003e -   Utilize a função `criaTabela` para criar tabelas dinâmicas com base em dados estruturados.\r\n\u003e \r\n\r\n\u003e [!Warning]\r\n\u003e **Exemplo:**\r\n\u003e \r\n\u003e ```\r\n\u003e import Elemento from \"./FastFrame.js\";\r\n\u003e \r\n\u003e const botao = criaElemento(meuBotao);\r\n\u003e document.body.appendChild(botao);\r\n\u003e \r\n\u003e const dadosTabela = {\r\n\u003e   th: {\r\n\u003e     nome: \"Nome\",\r\n\u003e     idade: \"Idade\",\r\n\u003e   },\r\n\u003e   td: [\r\n\u003e     { nome: \"João\", idade: 30 },\r\n\u003e     { nome: \"Maria\", idade: 25 },\r\n\u003e   ],\r\n\u003e };\r\n\u003e \r\n\u003e const tabela = criaTabela(dadosTabela);\r\n\u003e document.body.appendChild(tabela);\r\n\u003e \r\n\u003e ```\r\n\u003e \r\n\u003e **3. Personalização e Extensões:**\r\n\u003e \r\n\u003e -   Ajuste as propriedades dos objetos de componente para personalizar a aparência e o comportamento dos elementos.\r\n\u003e -   Crie suas próprias funções e classes para estender o framework e atender às suas necessidades específicas.\r\n\r\n\u003e [!Caution]\r\n\u003e **Propósito**\r\n\u003e \r\n\u003e O `FastFrame.js` foi criado com o objetivo de:\r\n\u003e \r\n\u003e -   **Simplificar a Criação de Componentes:** Reduzir a quantidade de código repetitivo e boilerplate \"código que devem ser incluídas em muitos lugares com pouca ou nenhuma alteração\" para criar elementos HTML.\r\n\u003e -   **Promover Reutilização:** Facilitar a reutilização de componentes em diferentes partes do seu projeto.\r\n\u003e -   **Melhorar a Modularidade:** Organizar o código em módulos independentes e reutilizáveis.\r\n\u003e -   **Aumentar a Produtividade:** Acelerar o desenvolvimento de interfaces web com menos esforço.\r\n\u003e \r\n\u003e **Observações Importantes:**\r\n\u003e \r\n\u003e -   O `FastFrame.js` ainda está em desenvolvimento e pode ter funcionalidades limitadas.\r\n\u003e -   É recomendável utilizar ferramentas de desenvolvimento web para depurar e inspecionar elementos.\r\n\u003e -   Para projetos complexos, considere frameworks mais robustos como React ou Vue.js.\r\n\u003e \r\n\u003e **Conclusão**\r\n\u003e \r\n\u003e O `FastFrame.js` é uma ferramenta promissora para desenvolvedores que desejam simplificar a criação de componentes web em JavaScript. Com sua abordagem leve e flexível, ele pode ser um aliado valioso na construção de interfaces dinâmicas e escaláveis.\r\n\u003e \r\n\u003e \r\n\u003e Acreditamos que o `FastFrame.js` tem potencial para se tornar uma ferramenta popular e simples para a criação de interfaces web em JavaScript e somente com Javascript. Com o seu feedback e colaboração, podemos torná-lo ainda melhor!\r\n\u003e \r\n\u003e \r\n\u003e Melhorias e avanços futuros é criar componentes CSS em javascript para importar nos componentes individuais, mantendo toda estrutura dentro do javascript.\r\n\u003e estou avalindo dois cénarios para o citado logo acima, 1º tem um componete que cria o css dentro dos compoente s na sua criação como funciona hoje, e 2º criar dinâmicamente em cada componete uma forma de criar no head da página o css semelhante ao css externo, mas sem ter css externo, pois este seria criado dinâmicamente quando o componete for criado.\r\n\u003e sinta-se a vontade em colaborar com o projeto com ideias e códigos.\r\n\r\n\u003e [!NOTE]\r\n\u003e **Atualizações para melhoria de desempenho 15-06-2024 :**\r\n\u003e adicionado requisições paralelas\r\n\u003e antes:\r\n\u003e ![Antes](img/antes.png)\r\n\u003e depois:\r\n\u003e ![Depois](img/depois.png)\r\n\r\n\r\n\u003e [!NOTE]\r\n\u003e **Atualizações para melhoria de desempenho 11-07-2024 :*webpack*\r\n\u003e irei deixar a pasta dist pronta para que testem\r\n\u003e\r\n\u003e \r\n\u003e 1- passo: criar o arquivo package.json, mas nele precisa especificar qual o arquivo javascript principal que é o ponto inicial do sistema \r\n\u003e \r\n\u003e ```\r\n\u003e npm init -y\r\n\u003e ```\r\n\u003e 2- passo: instalar as bibliotecas necessarias\r\n\u003e ```\r\n\u003e npm install --save-dev webpack webpack-cli mini-css-extract-plugin html-webpack-plugin  \u003e css-loader style-loader babel-loader @babel/core @babel/preset-env \r\n\u003e ```\r\n\u003e 3- passo: criar o arquivo webpack na raiz do projeto, \"webpack.config.js\" com o conteúdo.\r\n\u003e ```\r\n\u003e const path = require('path');\r\n\u003e const MiniCssExtractPlugin = require('mini-css-extract-plugin');\r\n\u003e const HtmlWebpackPlugin = require('html-webpack-plugin');\r\n\u003e \r\n\u003e module.exports = {\r\n\u003e   entry: './src/js/App.js',  // Arquivo de entrada principal\r\n\u003e  output: {\r\n\u003e     filename: 'App.js',\r\n\u003e     path: path.resolve(__dirname, 'dist'),  // Diretório de saída\r\n\u003e   },\r\n\u003e   module: {\r\n\u003e     rules: [\r\n\u003e       {\r\n\u003e         test: /\\.js$/,\r\n\u003e         exclude: /node_modules/,\r\n\u003e         use: {\r\n\u003e           loader: 'babel-loader',\r\n\u003e           options: {\r\n\u003e             presets: ['@babel/preset-env'],\r\n\u003e           },\r\n\u003e         },\r\n\u003e       },\r\n\u003e       {\r\n\u003e         test: /\\.css$/,\r\n\u003e         use: [MiniCssExtractPlugin.loader, 'css-loader'],\r\n\u003e       },\r\n\u003e     ],\r\n\u003e   },\r\n\u003e   plugins: [\r\n\u003e     new MiniCssExtractPlugin({\r\n\u003e      filename: 'styles.css',\r\n\u003e     }),\r\n\u003e     new HtmlWebpackPlugin({\r\n\u003e       template: './src/index.html',  // Caminho do seu arquivo HTML\r\n\u003e       filename: 'index.html',  // Nome do arquivo gerado na pasta dist\r\n\u003e     }),\r\n\u003e   ],\r\n\u003e   mode: 'production',\r\n\u003e   devtool: \"source-map\",\r\n\u003e };\r\n\u003e ```\r\n\u003e 4- passo: o comando para deploy:\r\n\u003e ```\r\n\u003e npm run build\r\n\u003e ```\r\n\u003e no fina lé gerado a pasta dist com todos os arquivos prontos para publicar.","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffaustinopsy%2Ffastframejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffaustinopsy%2Ffastframejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffaustinopsy%2Ffastframejs/lists"}