| theme | title |
|---|---|
apple-basic |
Twygo - Foco no imutável |
Nome: João Vinicius de Paula
Profissão: Programador
Especialidade: Frontend
Inicio: 2008
Não é ser uma verdade absoluta, uma cagação de regra, ou uma bala de prata até pq isso não existe.
Também não vou falar da última funcionalidade lançada da biblioteca mais hypada do momento ou do novo framework da moda
Então esteja a vontade para fazer perguntas, compartilhar a sua experiência ou o seu ponto de vista.
Momento de incubação: Rich Internet Applications - RIA (2002) || Web 2.0
Ajax (acrônimo em língua inglesa de Asynchronous Javascript and XML) + jQuery (2006)
O nascimento: HTML5 (2010-2014), CSS3(2010-2012), ES5(2009), Lançamento do iPhone 3 e App Store (2008), ES6(2015), Bootstrap2(2011)
A evolução: Bundlers/ESM,Reatividade, Bibliotecas/Frameworks, SPA/SSR/SSG/PWA (Hoje)
Volátil (Volatility), Incerto (Uncertainty), Complexo (Complexity) e Ambiguo (Ambiguity)
Eu frequentemente recebo a pergunta: "O que vai mudar nos próximos 10 anos?", Mas raramente escuto: "O que não vai mudar nos próximos 10 anos?"
Que pra ele é: preços mais baixos e entregas mais rápidas.
Disponibilidade, Usabilidade, Performance, Consistência e SEO*.
Infraestrutura suficiente para garantir o crescimento consistente com CDN e testes E2E
HTML semântico + ARIA (Accessible Rich Internet Applications)
FCP: Abaixo de 1,6s – Quando o navegador renderiza o primeiro bit de conteúdo do DOM, fornecendo o primeiro feedback ao usuário de que a página está realmente carregando.
Utilizar técnicas como: SSR, Hydration, virtual-scroll, lazy-load, dinamic imports, imagens/pictures with src srcset,...
A diagramaçao, o design e o comportamento dos elementos devem estar bem definidos e consistentes em todo projeto. Feedbacks claros sobre os erros, mudanças de estado e contextos.
Seria a soma da Disponibilidade + Usabilidade + Performance
Como entregar Disponibilidade, Usabilidade, Performance, Consistência e SEO hoje ou daqui 10 anos?
Por exemplo: "Princípios"
Ele afirma que, para muitos trabalhos, 80% dos resultados resultam de 20% das causas.
Em outras palavras podemos dizer que 80% do uso do seu sistema se concentra em 20% das funcionalidades
80% das suas páginas usa 20% dos seus componentes
Você constrói 80% das suas páginas com 20% dos seus componentes
Concordam?
- Menu de navegação
- Tabela
- Formulario (input, select, checkbox, radio, ...)
- Icones
- Botões
- Dropdown
- E porque tantos bugs?
- E porque tão dificil modificar?
- Como criar componentes realmente reutilizaveis?
- Como paro com o meu vício de dar mais um ctrl-c ctrl-v no stack overflow?
- Quando vão lançar um chatgpt que me entregue um código que funcione de primeira?
- Como fazer com que a equipe esteja alinhada em relação ao projeto? Mesmo aqueles que não são desenvolvedores (Designer, PM, QA, ...)
Ela ditará qual o caminho ou abordagem a seguir para o problema ser resolvido.
A metodologia mais adequada, será aquela que proporciona os melhores métodos para solucionar o seu problema.
Design Tokens são um arquivo central que contém todos os elementos fundamentais de design como: fontes, espaçamento, cores, borda, ícones, entre outros. Os design tokens se inserem como os ‘elétrons’, ou seja, partículas subatômicas que guardam as propriedades e atributos de cada ‘átomo’ da interface em variáveis. Uma vez que é feita uma mudança na cor primária, por exemplo, de um elemento, ela é propagada pra todo website ou aplicação mobile, sem a necessidade de checar o código.
O Atomic Design é uma metodologia composta por cinco estágios distintos trabalhando juntos para criar sistemas de design de interface de forma mais deliberada e hierárquica. Os cinco estágios do design atômico são:
Uma maneira de por em prática os princípios do SOLID ou pelo menos o S - JV
São blocos de construção básicos da matéria que formam a interface.
Exemplo: um input, um button, um ícone
é aqui que mora a cilada, nem todo átomo deve ser um componente, pense nisso.
Grupos simples de elementos da interface do usuário que funcionam juntos como uma unidade.
se juntamos 2 componentes do tipo átomo temos uma molécula, tipo H2O
Conjuntos de moléculas que funcionam juntas como uma unidade. Uma molécula com outra molécula (ou mais), formam um organismo Exemplo: um formulário.
Se juntarmos diferentes componentes do tipo átomo/moleculas com o que está escrito aqui em cima - JV
Saindo um pouco dos termos da química, os templates são objetos no nível de página, onde colocamos componentes em um layout formando a estrutura de página.
Onde você faz a diagramação da página - JV
É o resultado final, exatamente como o template, só que completa de informações reais.
Onde você junta tudo - JV
Spoiler:
- SOLID
- Design Patters: Composition
- ou seja + princípios.
This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.