Eu tenho pouca experiência em desenvolvimento de UI, mas já estudei bastante por conta dos projeto de inovação que participei no Globo Lab Dados. Achei simplesmente genial a abstração que esse boilerplate consegue fazer para traduzir o design system em módulos da arquitetura do software. O melhor avanço para fazer a amizade entre desenvolvedor e designer acontecer kkkkkkk
Um ponte que vale levantar é que esse nível de complexidade atribuído ao software faz muito mais sentido para empresas que já tem plataformas num alto nível de maturidade ou tem que administrar várias plataformas e tem que manter uma coesão entre elas, como o Google, o Facebook, a Globo, a Amazon e outras empresas
Sugestão de conteúdo para a Rocketseat: 1) Uma API pública feita por vocês, contendo toda uma documentação e expondo as boas práticas de uma API, podendo ser REST com GraphQl. Seria bem interessante para o estudo no backend e até mesmo usar como uma API para treinar no frontend. 2) Um vídeo mensal ou quinzenal, onde vocês fazem um 'highlight' de apps, packages, conteúdo criado pelos membros do canal; nesse highlight vocês fazem uma análise rápida e mostram as o conteúdo da pessoa. Seria interessante para um engajamento maior.
Vocês não só evoluem, mas são muito ágeis para apresentar as novidades para a comunidade. Cada vez mais o foguete ganha velocidade. Sou aluno da GoStack há um tempo, e estou revendo as aulas de React. Mas esses últimos vídeos sobre Next.js explodiram minha cabeça. Vou criar meu projeto AGORA. Sobre o conteúdo na plataforma roxinha, não encontrei nada por lá... queria mais Next.js..
Já que tocou no assunto, tem como mudar o tema pra dark no linux? Tipo, o chrome fica light, mudei agr pro linux e n consegui fazer essas partes ficarem no dark...
@@leonardoprimieri8987 Windows Manager, q pode ser que gnomeshell do gnome, xwfm do xfce. Mas pra ficar mais fácil vc entender, qual ambiente de desktop (D E) vc está usando? Gnome, Kde, xfce...
Achei bem legal a ideia. Quando puderem, façam um vídeo focando no Next, falando mais detalhes sobre ele, em que tipo de aplicações ele pode ser aplicado e tal.
Fala Diegão, seria mto interessante um vídeo sobre autenticação no Next.js, como ele acaba alterando completamente o esquema de rotas da aplicação, consequentemente, muda muito o sistema de rotas privadas e públicas. Abraço e sucesso!❤️
Fala amigo, não sei se é a melhor prática ou maneira, mas se te ajudar, normalmente crio um componente para isso, e vou usando ele na aplicação. () => { Const [Auth, setAuth] = useState(false) Const { token} = useAuth() UseEffect(() =>{ If(token) { Setauth(true) } }, []) If(!Auth) return Return } Aí passo o token via contexto, se te ajudar.
@@tracksoon4581 eu crio um hook sempre para auxiliar no gerenciamento do token, tentando salvar primeiramente no localstorage e caso der erro, depois no cookie.
Trabalho em um projeto que utiliza Vuetify que é baseado no material design. É legal por ser um padrão, sendo bom pra equipe, mas o que trás produtividade é os componentes que existem no pacote, trazendo os comportamentos e estilos padrões como o bootstrap, tailwind faz. Na web não vejo muitas vantagens. Vejo como vantagem em uma plataforma mais fechada, como o ios que exije padrões de ui e a google que recomenda o material design no android. O boostrap da maneira padrão, funciona em qualquer framework... Geralmente os kits de ui, vem específico para um framework, trazendo limitação. Parabéns pelo conteúdo :)
Sou do time que prefere fazer o css na mão, trabalhar com variáveis e é isso hahaha. Documenta , modulariza e depois dá até pra usar em outros projetos. Mas o que eu achei mais interessante no teu vídeo diego, foi que você mencionou sobre a parte de SEO das aplicações com o NEXT.JS, você poderia fazer alguns vídeos com foco em SEO e otimização? Porque hoje por exemplo eu tenho um cliente que é muito bem posicionado nos meios de busca, mas ele esta precisando urgentemente fazer novos apps/sites enfim e o que mais me prendia na ideia de não optar pelo react no caso dele é justamente por causa do SEO, então estou tendo certa dificuldade para achar uma solução para ele que não fuja do tradicional.
Gostei demais. Agora, é dar uma estudada na documentação. Uma pergunta: quais seriam as principais diferenças entre chakra-ui e material ui. Elas seguem o mesmo padrão ou a mesma metodologia?
Cara eu amo a Rocket, e me espelho cada dia mais nesses conteúdos disponibilizados, sobre utilizar design system, não sei se já me acostumei ou se tenho medo de mudar o CSS normal e o StyledComponents para design system mas ainda estou cético em utilizar e talvez não me suprir o suficiente, acho maneiro a ideia e claro que vou fazer um projeto em cima da ferramenta proposta. Mas nada que me impessa de um dia utilizar. Ah e o conteúdo foi excelente, parabéns pra todo pessoal da Rocket ✌️
Eu adorei essa abordagem, se aplicar uma ideia mais componentizada com os elementos repetidos o código fica clean demais Eu estou usando nextjs com o css modules e o que me incomoda é o número gigante de arquivos, muito bom mesmo estilizar tudo em um lugar!
Primeiramente, parabéns pelo conteúdo do canal, excelente qualidade! Aí Diego, também não curto poluir o html assim porém gostei do design system (lembra muito a estilização do Material UI). Um workaround pra está “poluição” seria, depois de completar a estilização abstrair o style pra um nested object e depois fazer um spreading? De repente até criar um arquivo style separado.. o que acha?
Curti bastante o conceito de UI declarativas. Apesar de inicialmente parecer bastante verboso o "html com css", podemos contornar isso criando componentes que encapsulam grande parte da configuração. O que achei de ponto positivo além dos citados no vídeo, foram : 1. Junto com o TypeScript, cria-se um "padrão" mais forte de escrita, diminuindo a chance de escrevermos código fora do padrão; 2. Para uma equipe bem pequena, acredito que facilita bastante também pois grande parte de ajustes, layout, acessibilidade estão disponíveis e podem ser ajustados. Seria legal também fazer um code drops com nextjs/chakra mais aprofundado. Vale a pena comentar que mais uma vez, um ótimo conteúdo disponibilidado por vocês. Abraço.
Diego, gostaria muito de um MasterClass com Next.js, usando um blog como exemplo, com área restrita para publicar post, service work, meta tags dinâmicas, rotas dinâmicas, utilizando o next.config para configura a aplicação offline (somente a home), usando o plugin purge css, para eliminar os css não utilizados e por ae vai.
Show Diegão, poderia fazer um exemplo next.js + styled components + swr + master detail com search para inserir o detail (tipo produtc ID/ product description)? + routes para products. seria show, é meio viagem mas seria show mesmo, parabéns pelo conteúdo.
Fala diegão! vi seu video quando saiu e estou fazendo um projeto pra minha empresa. Algo pequeno modesto, mas tentei aplicar alguns conceitos que Você passa no vídeo e vai ai meu feedback. O chakra UI foi um dos melhores design patterns q eu ja trabalhei por conta da facilidade de Você alterar o design padrão, outros tive mais dificuldade como o próprio bootstrap. por estar trabalhando só, aderir a um design pattern acelerou bastante meu processo de desenvolvimento do frontend. A respeito do tailwind que é utilizado a mesma ideia no Chakra UI, fica até mais verboso o código mas também acelera bastante o desenvolvimento e fica mais fácil ao meu ver o debug do layout. no mais obrigado pela dica e sucesso!
Fala, Igor!! Obrigado pelo feedback e por compartilhar com a gente a sua experiência nesses 2 assuntos, é muito massa ver a opinião de quem realmente testou isso tudo na prática!! 💜💜
Diego, fica como sugestão dar uma olhada no "Diez", é uma framework de Design System que trabalha com "Design Tokens" e utiliza TypeScript no seu compilador, compila esses "Tokens" para múltiplas plataformas. Ou seja, você atualiza ou faz o "build" e dependendo do seu sistema de CI/CD automaticamente atualiza a base dos seus apps, seja Web, iOs e Android. Não tenho muito conhecimento em cima, mas acredito que a popularidade vai aumentar muito nesses próximos meses e seria interessante saber o ponto de vista da Rocketseat.
Excelente vídeo. Gostaria de ver uma abordagem com Theme-ui + (Styled Components ou Emotion). Na empresa que trabalho estávamos fazendo justamente esse comparativo entre Chakra e Theme-ui e no meu entendimento o Theme-ui te dá uma flexibilidade maior para o uso de temas em components open-source desenvolvidos em Styled-components ou Emotion. Pelo que eu entendi os caras que criaram o theme-ui foram os mesmo criadores do styled-system que é a base para Styled-components e Emotion e eles criaram justamente para ter essa maior flexibilidade na aplicação de design tokens (tema). Enfim, gostaria de ver a visão de vocês da Rocketseat sobre essa abordagem.
Diego, faz somente um ano que trabalho com desenvolvimento front-end mas sempre gostei muito de manter o meu código organizado, se tudo fica em só um lugar eu acabo me perdendo e demorando muito pra achar o que eu preciso. Então ainda prefiro ficar sem a UI declarativa e manter o que é css de um lado e o que é html em outro. Entendi que uma solução para esse problema é criar componentes customizados, mas daí teríamos componentes que estendem mais componentes do design system, perdendo um pouco o sentido de utilizar o Chakra para já ter os elementos estilizados e com regras de design.
Ô assunto difícil. Penso um monte de coisas e não consigo junta-las. 1. Eu acho super legal ter um padrão. 2. Acho legal essa forma de declarar ao mesmo tempo que acho muito bonito também o código mais limpo. 3. Uma coisa que tenho gostado do React é justamente o fato de separar lógica de estilos. E até mesmo marcações. Lógica, componentes, marcações e estilos. Cada um tem sua hora de brilhar. 4. Trabalhar com Styled Components tem sido uma maravilha pra mim. 5. E, de certa forma, eu já tenho o hábito de seguir uma design system. Costumo declarar diversas variáveis no global css e vou seguindo usando depois ao longo do projeto. 6. Certamente o fato de trabalhar com design a vida inteira ajuda a saber declarar e manter um padrão. E também me faz sentir engessado usando essas coisas. 7. Porém, já usei muito Bootstrap e lembro como ele me ajudou para acelerar alguns projetos. Por isso entendo o valor disso. 8. Eu não vejo com bons olhos ter tantas propriedades de css expostas assim. Ao mesmo tempo que você define um padrão, você deixa um mar de possibilidades para serem alteradas e perder o padrão. Solução seria fazer componentes? Sim. Mas aí, né... Acho que no fundo é o famoso depende. Depende do projeto, depende de quem está fazendo, depende de quem poderá mexer um dia.
Opá, eu normalmente desenvolvo sistemas e eles normalmente possuem diversas paginas de cadastros, com laravel, django ou cakephp eu consigo gerar os códigos dos formulários automaticamente, basta eu criar o banco q ele gera os arquivos pra mim, existe algum facilitador assim para react, pq dependendo do sistema pode ficar muito trabalhoso e repetitivo ficar colocando input por input pra todos os cadastros do sistema..
Fala diego, beleza? Gostei muito do vídeo, parabens! Conteúdo, explicação. eu mesmo não conhecia o NextJS, queria estudar e só essa passada no bootstrap já me adiantou meio caminho haha Vou recriar o site de um cliente utilizando next js e vou utilizar o Shakra e o design system. Postarei o resultado no meu github e comento link aqui em produção depois pra tu dar uma olhada. Abraços.
Fiz tudo igual até o minuto 20:00 e aparece na tela Internal Server Error No terminal: Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app Já verifiquei tudo desta lista e nada, alguém passou pelo mesmo erro? Podem me ajudar por favor?
Diego pq não o Material UI? Sinto que em quesito de componentes ele está anos luz na frente das outras libs, tbm tendo suporte a temas customizados, dark/light e claro, segue o design pattern do Material, que é adotado pela google em todos os seus produtos. Como sempre conteúdo de qualidade :)
Cara. Eu adoro seus vídeos. MT msm. Continua assim!!! A única coisa que me deixa cabrero é sua pronúncia do inglês, as vzs vc fala "Raiden" quando é "Hidden" 😂 Mas isso eh só loucura minha msm Sucesso!!!
Parabéns pelo conteúdo (como sempre)! De fato libs assim oferecem produtividade e, mais do que isso, um bom ponto de partida para devs que, como eu, não tem apoio de um designer e também não possuem tanta capacidade para imaginar e criar as próprias interfaces do total zero. Nesse aspecto é bem válido. Porém eu não usaria em um projeto de médio/grande porte. De fato o código fica sujo e, na minha visão, meio que fere o princípio de única responsabilidade que eu tento associar aos meus arquivos no projeto. Pra mim faz muito sentido ter um arquivo que representa a estrutura (html), outro que resolve a estilização (css) e outro que faz a mágica acontecer (js).
Faala, Emmanoel! O Guilherme Rodz do nosso time fez um vídeo explicando tudo, e está bem parecido com o do Diego. Recomendo dar uma conferida no canal dele! 💜
tailwindcss da pra vc criar seus proprios estilos, vc tem um plugin interno chamado @apply, la vc define as classes que vc ker usar, com um nome so, depois vc add esse nome no componente q vc ker,a e ele aje como o bootstrap.
não é uma boa pratica usar o tailwindcss como um substituto do bootstrap, criar component class pode ser interessante, mas não como é feito pelo bootstrap, você perde bastante utility se fizer dessa maneira.
Estou sentindo falta de alguns conteúdos sobre Node, acho que está na hora de renovar meus conhecimentos, principalmente na parte de autenticação, até hoje não achei um conteúdo sobre Refresh Token hahahaha. Fica aí minha sugestão de vídeo pra Rocket!
Diegao, dúvida pro PR: qual a melhor forma de gerar um PDF no mobile? Procuro algo client-side para que o usuário possa usar offline, parecido com o que o jsPDF faz na web. É possível fazer essa geração no app ou devo enviar uma requisição ao servidor? Estou utilizando Expo e Node!!!
Design systems me parecem ir na contramão do isolamento entre conteúdo e apresentação, que foi o que motivou a criação do CSS. Parece que voltamos ao HTML3 quando a gente formatava tudo nas próprias tags do HTML.
Estou trabalhando num projeto usando design system com Material UI, mas os Tokens e estilizações dos componentes passo pelo styled-components. Não consigo mudar o paradigma para ficar tudo no HTML. Além de qua há situações onde você precisa alterar os estilos de forma dinâmica. Até dá para por no HTML, mas misturar tudo vai contra os meus princípios X.x. Gosto de separar estilo de lógica. Pelo menos essa foi uma forma que encontrei de usar um design system sem sair das regras de code clean.
Sei não esse padrão declarativo pra Web comparado com o que é no Flutter, no Swift UI e tá vindo aí no Jetpack Compose pra Android me pareceu meio bagunçado... Por ainda ser CSS não tem aquela ideia tão na cara de ter algo pronto que vai te ajudar... Parece que só está declarando o CSS no componente... Mas enfim vou testar isso aqui pra ver se não é apenas impressão minha, de mais, excelente conteúdo como sempre Rocketseat.
Topzera, a única coisa que eu não gostei sobre esse esquema de UI declarativa é a identação do código, parece uma estrutura de "callback hell" conforme vai aninhando os widgets, é mais facil de entender o código, mas eu acho bem estranho particularmente.
Eu fiquei com uma dúvida. No site do Skylab, quando a gente chega no breakpoint de 900px, o header fica em cima. Como eu posso adicionar esse breakpoint ou media-query, nesse caso?
Adoro o conteúdo de vcs! O React Helmet substituiria a necessidade do NextJS para atender toda parafernalha de SEO? Eu tenho uma aplicação que usa ele, aparentemente tudo roda legal já que ela tem bons resultados orgânicos, mas confesso que mesmo assim não consegui encontrar uma resposta definitiva para isto. É mto difícil fazer benchmark dessas coisas x____X
Por que não usar flexbox nesse caso? Era simplesmente colocar um container 100vh com flex e media query para flex col além de colocar flex também no body mas agora com justify content center e align items center
Eu não vejo com bons olhos esses frameworks que acoplam tudo, sinto que em algum momento o time mudar de ideia sobre ele, terá que reescrever grande parte da aplicação por não conseguir tirar "camadas" do software e reaproveitar.
Bom, você pode criar seus componentes que estendem esses. Assim você só muda esse meio termo e os deixam mais flexíveis. Isso meio que ocorre hoje em dia quando se usa React.
Estou mudando uma aplicação pequena em React para Next.js, todos os componentes e páginas são aproveitados. O que precisa ser feito é configurar o _app.tsx e o _documents.tsx que são os arquivos default do Next.js.
Quando eu ainda tinha cabelo, lá no final dos anos 90 o esquema era fazer tudo com tabela e o estilo quase sempre inline, daí aprendi o CSS e o Javascript, e vi que legal que é separar as responsabilidades para cada tecnologia, era o tal do "tableless" que virou moda. Mesmo com Less ou Sass foi indo dessa forma. Veio o React.JS e mudou o paradigma que estava acostumado, era tudo Javascript mas ainda podia usar o CSS e o Sass separado, daí inventaram o StyledComponents. Aí virou bagunça! Me senti denovo no século passado escrevendo marcações de estilo quase que inline novamente, só que agora em JS. Pelo menos dá pra eu fazer tudo com ele dentro das possibilidades do CSS e do Sass. Agora vc vem e me fala de um Design System como esse tal de Chakra de Virgem. Dei uma brincadinha nele e não gostei muito não. Tem umas limitações de coisas simples, como background com gradiente, por exemplo. Não consegui adicionar num Box simples e isso me deixou frustrado pq nem na documentação encontrei uma forma de resolver isso. Mas veja só, resolver usando as cores declaradas no tema e não pra escrever uma string qualquer, se não pra quê vai servir essa meleca toda?
Hum, consegui! Só que não estava na documentação do Chakra, mas sim na do Theme UI que usa da mesma biblioteca, a Emotion. Enfim, assim eu até consegui, só que perde o lance de ser declarativo.
Só uma informação sobre Declarative UI, o Android vai lançar o Jetpack Compose, que também será UI Declarativa, e terá uma sintaxe bem clean, parecido com Flutter mas mais clean, isso realmente vai dominar o mercado pelo visto
Uma boa sugestão: Cria um repositório com as músicas de abertura com os detalhes do artista... sei que não é relevante mas qual programador não programa escutando música? Foi Ótimo conteúdo!!
Fala parceiro, eles já disponibilizam uma playlist do Spotify, atualizada semanalmente Link: open.spotify.com/playlist/5cQ01bww8FpOHJQTSZmwsN?si=A24ZrmBrScKCAEOpbzgA2w
Acho interfaces declarativas muito interessante, é muito tranquilo fazer as coisas! Não peguei o que ele disse do Tailwind, falou que era verboso, mas mostrou outras duas libs que fazem EXATA a mesma coisa só que usando props, que fica tão verboso quanto* o.O * Fora toda a config que tem que fazer pra usar no React
O único ponto ruim que vejo no Tailwind é a dificuldade em passar por cima de uma propriedade*, já que ele é CSS puro * tipo tentar alterar a cor da font dentro de um componente de forma dinâmica ou, tentar adicionar uma margin menor dentro de um componente que já tem uma classe com um margin maior sem remover a margin anterior (que em alguns casos você não pode/consegue)
Agora a minha opinião: Eu por exemplo, nunca curti Bootstrap, por maia que ele seja ágil para construir algo em tela, ele ja me deu muita dor de cabeça com alguns elementos que não ficavam do jeito que eu queria! Vejo que a principal desvantagem do Chakara, ou qualquer outra Lib similar seja essa parte da verbosidade do código, para quem curte código com poucas linhas isso é um terror, porém se isso deixa mais casado o UI Designer e o DEV, e claro, aumenta a produtividade da equipe, acho que chegamos no futuro da estilização!
Curti essa musica no começo. Trouxe uma vibe muito bacana 💚
O Mike cagueta a distro que ele tá usando aí skskksksks
@@SetupDeDev Ele usa ubuntu com kde, instalou o ubuntu e dps o plasma
@@randomprofile9523 acho que é o kubuntu mesmo
eu ADORO como a rocketseat sempre tá evoluindo, essas edições de vídeos experimentais tá muito maneiro! Esse ficou muito irado, tão gastando a onda
Eu tenho pouca experiência em desenvolvimento de UI, mas já estudei bastante por conta dos projeto de inovação que participei no Globo Lab Dados. Achei simplesmente genial a abstração que esse boilerplate consegue fazer para traduzir o design system em módulos da arquitetura do software. O melhor avanço para fazer a amizade entre desenvolvedor e designer acontecer kkkkkkk
Um ponte que vale levantar é que esse nível de complexidade atribuído ao software faz muito mais sentido para empresas que já tem plataformas num alto nível de maturidade ou tem que administrar várias plataformas e tem que manter uma coesão entre elas, como o Google, o Facebook, a Globo, a Amazon e outras empresas
Faz video completo de NEXT?? Estou com um projeto agora, e sinto que seria muito mais fácil com os conhecimentos da rocketseat!! Muito obrigadoo
Sugestão de conteúdo para a Rocketseat:
1) Uma API pública feita por vocês, contendo toda uma documentação e expondo as boas práticas de uma API, podendo ser REST com GraphQl. Seria bem interessante para o estudo no backend e até mesmo usar como uma API para treinar no frontend.
2) Um vídeo mensal ou quinzenal, onde vocês fazem um 'highlight' de apps, packages, conteúdo criado pelos membros do canal; nesse highlight vocês fazem uma análise rápida e mostram as o conteúdo da pessoa. Seria interessante para um engajamento maior.
Up
Declarative UI funciona muito bem com React Native. Pra web prefiro usar o bom e velho css mesmo. Conteúdo muito bom! 🚀🚀
Seu lindo
Vocês não só evoluem, mas são muito ágeis para apresentar as novidades para a comunidade. Cada vez mais o foguete ganha velocidade.
Sou aluno da GoStack há um tempo, e estou revendo as aulas de React. Mas esses últimos vídeos sobre Next.js explodiram minha cabeça. Vou criar meu projeto AGORA.
Sobre o conteúdo na plataforma roxinha, não encontrei nada por lá... queria mais Next.js..
Diego: Desculpa usuários de tema light...
Também Diego: (abre o devtools com tema light)
Enfim a hipocrisia
Já que tocou no assunto, tem como mudar o tema pra dark no linux? Tipo, o chrome fica light, mudei agr pro linux e n consegui fazer essas partes ficarem no dark...
@@leonardoprimieri8987 qual o WM vc está usando?
@@TomazEdson25 wm?
@@leonardoprimieri8987 Windows Manager, q pode ser que gnomeshell do gnome, xwfm do xfce. Mas pra ficar mais fácil vc entender, qual ambiente de desktop (D E) vc está usando? Gnome, Kde, xfce...
Queremos mais vídeos de Next, com certeza!
Achei bem legal a ideia. Quando puderem, façam um vídeo focando no Next, falando mais detalhes sobre ele, em que tipo de aplicações ele pode ser aplicado e tal.
Faala, Anderson! 💜💜 Valeu pela sua sugestão!
Fala Diegão, seria mto interessante um vídeo sobre autenticação no Next.js, como ele acaba alterando completamente o esquema de rotas da aplicação, consequentemente, muda muito o sistema de rotas privadas e públicas. Abraço e sucesso!❤️
Fala amigo, não sei se é a melhor prática ou maneira, mas se te ajudar, normalmente crio um componente para isso, e vou usando ele na aplicação.
() => {
Const [Auth, setAuth] = useState(false)
Const { token} = useAuth()
UseEffect(() =>{
If(token) {
Setauth(true)
}
}, [])
If(!Auth) return
Return
}
Aí passo o token via contexto, se te ajudar.
@@thalisoneduardo1736 no next ,e mais chato um pouquinho de se fazer autenticação via token,provavelmente voce vai ter que usar cookies
@@tracksoon4581 eu crio um hook sempre para auxiliar no gerenciamento do token, tentando salvar primeiramente no localstorage e caso der erro, depois no cookie.
Comecei a trabalhar com nextjs na empresa agora e vocês trazem conteúdo! Videntes
Achei fantástico este CodeDrop! Se puder trazer mais conteúdo de NextJS, seria bacana sim! 💜
Massa Diego, espero que possa trazer mais conteúdo nessa pegada usando next claro, valeu!
Show de bola. Se puder, fala mais sobre Next.
Trabalho em um projeto que utiliza Vuetify que é baseado no material design.
É legal por ser um padrão, sendo bom pra equipe, mas o que trás produtividade é os componentes que existem no pacote, trazendo os comportamentos e estilos padrões como o bootstrap, tailwind faz.
Na web não vejo muitas vantagens. Vejo como vantagem em uma plataforma mais fechada, como o ios que exije padrões de ui e a google que recomenda o material design no android.
O boostrap da maneira padrão, funciona em qualquer framework... Geralmente os kits de ui, vem específico para um framework, trazendo limitação.
Parabéns pelo conteúdo :)
Sou do time que prefere fazer o css na mão, trabalhar com variáveis e é isso hahaha.
Documenta , modulariza e depois dá até pra usar em outros projetos. Mas o que eu achei mais interessante no teu vídeo diego, foi que você mencionou sobre a parte de SEO das aplicações com o NEXT.JS, você poderia fazer alguns vídeos com foco em SEO e otimização?
Porque hoje por exemplo eu tenho um cliente que é muito bem posicionado nos meios de busca, mas ele esta precisando urgentemente fazer novos apps/sites enfim e o que mais me prendia na ideia de não optar pelo react no caso dele é justamente por causa do SEO, então estou tendo certa dificuldade para achar uma solução para ele que não fuja do tradicional.
Diego como faria para trocar a cor dos icons no focus do input tal como est ana plataforma?
Gostei demais. Agora, é dar uma estudada na documentação. Uma pergunta: quais seriam as principais diferenças entre chakra-ui e material ui. Elas seguem o mesmo padrão ou a mesma metodologia?
Cara eu amo a Rocket, e me espelho cada dia mais nesses conteúdos disponibilizados, sobre utilizar design system, não sei se já me acostumei ou se tenho medo de mudar o CSS normal e o StyledComponents para design system mas ainda estou cético em utilizar e talvez não me suprir o suficiente, acho maneiro a ideia e claro que vou fazer um projeto em cima da ferramenta proposta.
Mas nada que me impessa de um dia utilizar.
Ah e o conteúdo foi excelente, parabéns pra todo pessoal da Rocket ✌️
Eu adorei essa abordagem, se aplicar uma ideia mais componentizada com os elementos repetidos o código fica clean demais
Eu estou usando nextjs com o css modules e o que me incomoda é o número gigante de arquivos, muito bom mesmo estilizar tudo em um lugar!
Boa Rocket, tudo muito top! Diego, você poderia falar alguns locais de onde você tira esses novos conhecimentos? Obrigado pelo conteúdo!
ou uma lista das pessoas que te inspiram para agente seguir também. Muito obrigado 😊
Verdade! Como são inspirados né? Admiro muito.
Primeiramente, parabéns pelo conteúdo do canal, excelente qualidade! Aí Diego, também não curto poluir o html assim porém gostei do design system (lembra muito a estilização do Material UI). Um workaround pra está “poluição” seria, depois de completar a estilização abstrair o style pra um nested object e depois fazer um spreading? De repente até criar um arquivo style separado.. o que acha?
Faala Steven! Valeeu pelo feedback! É uma boa também! 🚀
Concordo ✌🏽
Curti bastante o conceito de UI declarativas. Apesar de inicialmente parecer bastante verboso o "html com css", podemos contornar isso criando componentes que encapsulam grande parte da configuração.
O que achei de ponto positivo além dos citados no vídeo, foram :
1. Junto com o TypeScript, cria-se um "padrão" mais forte de escrita, diminuindo a chance de escrevermos código fora do padrão;
2. Para uma equipe bem pequena, acredito que facilita bastante também pois grande parte de ajustes, layout, acessibilidade estão disponíveis e podem ser ajustados.
Seria legal também fazer um code drops com nextjs/chakra mais aprofundado.
Vale a pena comentar que mais uma vez, um ótimo conteúdo disponibilidado por vocês. Abraço.
Faala, Alexandre! valeu pela sua contribuição! 💜💜
Diego, gostaria muito de um MasterClass com Next.js, usando um blog como exemplo, com área restrita para publicar post, service work, meta tags dinâmicas, rotas dinâmicas, utilizando o next.config para configura a aplicação offline (somente a home), usando o plugin purge css, para eliminar os css não utilizados e por ae vai.
Faala, Newerton! 💜💜 Valeeu pela sua sugestão!
@@rocketseat 💖🚀
Estou usando o material-ui para minhas necessidades é show
Show Diegão, poderia fazer um exemplo next.js + styled components + swr + master detail com search para inserir o detail (tipo produtc ID/ product description)? + routes para products. seria show, é meio viagem mas seria show mesmo, parabéns pelo conteúdo.
So informative, thanks a lot!
Opa Diegão! Next é muito top! Quero mais videos kk
Fala diegão! vi seu video quando saiu e estou fazendo um projeto pra minha empresa. Algo pequeno modesto, mas tentei aplicar alguns conceitos que Você passa no vídeo e vai ai meu feedback.
O chakra UI foi um dos melhores design patterns q eu ja trabalhei por conta da facilidade de Você alterar o design padrão, outros tive mais dificuldade como o próprio bootstrap. por estar trabalhando só, aderir a um design pattern acelerou bastante meu processo de desenvolvimento do frontend.
A respeito do tailwind que é utilizado a mesma ideia no Chakra UI, fica até mais verboso o código mas também acelera bastante o desenvolvimento e fica mais fácil ao meu ver o debug do layout.
no mais obrigado pela dica e sucesso!
Fala, Igor!! Obrigado pelo feedback e por compartilhar com a gente a sua experiência nesses 2 assuntos, é muito massa ver a opinião de quem realmente testou isso tudo na prática!! 💜💜
NextJS e Strapi são tecnologias que trabalham bem juntas. Strapi teve uma atualização muito foda referente a níveis de permissões de usuários.
excelente!!!!
Cara, os vídeos da rocketseat e da equipe em geral está cada vez mais massa! O kaike manda benzaco, o Diego sem palavras! Parabéns rapeize
Eu estava aqui apanhando pra reinventar a roda com styled-components. Parece que um design system é justamente o que preciso. Valeu Diego!
Hahaha boaa!! 💜
what distro of Linux are you using? or what theme?
Diego, fica como sugestão dar uma olhada no "Diez", é uma framework de Design System que trabalha com "Design Tokens" e utiliza TypeScript no seu compilador, compila esses "Tokens" para múltiplas plataformas. Ou seja, você atualiza ou faz o "build" e dependendo do seu sistema de CI/CD automaticamente atualiza a base dos seus apps, seja Web, iOs e Android. Não tenho muito conhecimento em cima, mas acredito que a popularidade vai aumentar muito nesses próximos meses e seria interessante saber o ponto de vista da Rocketseat.
Opaa! Valeeu pela sugestão Augusto! 💜
Excelente vídeo. Gostaria de ver uma abordagem com Theme-ui + (Styled Components ou Emotion).
Na empresa que trabalho estávamos fazendo justamente esse comparativo entre Chakra e Theme-ui e no meu entendimento o Theme-ui te dá uma flexibilidade maior para o uso de temas em components open-source desenvolvidos em Styled-components ou Emotion. Pelo que eu entendi os caras que criaram o theme-ui foram os mesmo criadores do styled-system que é a base para Styled-components e Emotion e eles criaram justamente para ter essa maior flexibilidade na aplicação de design tokens (tema).
Enfim, gostaria de ver a visão de vocês da Rocketseat sobre essa abordagem.
Diego, faz somente um ano que trabalho com desenvolvimento front-end mas sempre gostei muito de manter o meu código organizado, se tudo fica em só um lugar eu acabo me perdendo e demorando muito pra achar o que eu preciso. Então ainda prefiro ficar sem a UI declarativa e manter o que é css de um lado e o que é html em outro. Entendi que uma solução para esse problema é criar componentes customizados, mas daí teríamos componentes que estendem mais componentes do design system, perdendo um pouco o sentido de utilizar o Chakra para já ter os elementos estilizados e com regras de design.
Ô assunto difícil. Penso um monte de coisas e não consigo junta-las.
1. Eu acho super legal ter um padrão.
2. Acho legal essa forma de declarar ao mesmo tempo que acho muito bonito também o código mais limpo.
3. Uma coisa que tenho gostado do React é justamente o fato de separar lógica de estilos. E até mesmo marcações. Lógica, componentes, marcações e estilos. Cada um tem sua hora de brilhar.
4. Trabalhar com Styled Components tem sido uma maravilha pra mim.
5. E, de certa forma, eu já tenho o hábito de seguir uma design system. Costumo declarar diversas variáveis no global css e vou seguindo usando depois ao longo do projeto.
6. Certamente o fato de trabalhar com design a vida inteira ajuda a saber declarar e manter um padrão. E também me faz sentir engessado usando essas coisas.
7. Porém, já usei muito Bootstrap e lembro como ele me ajudou para acelerar alguns projetos. Por isso entendo o valor disso.
8. Eu não vejo com bons olhos ter tantas propriedades de css expostas assim. Ao mesmo tempo que você define um padrão, você deixa um mar de possibilidades para serem alteradas e perder o padrão. Solução seria fazer componentes? Sim. Mas aí, né...
Acho que no fundo é o famoso depende. Depende do projeto, depende de quem está fazendo, depende de quem poderá mexer um dia.
Excelente vídeo.
Valeeeeeu, Geson! 💜 🚀
Isso me lembrou muito a época que a gente fazia layout em tabelas. Daqui a pouco vamos voltar a usar e gifs piscantes em menu lateral.
Obrigado pelo conteúdo, Diego!
Você poderia me dizer que mouse é esse?
Opá, eu normalmente desenvolvo sistemas e eles normalmente possuem diversas paginas de cadastros, com laravel, django ou cakephp eu consigo gerar os códigos dos formulários automaticamente, basta eu criar o banco q ele gera os arquivos pra mim, existe algum facilitador assim para react, pq dependendo do sistema pode ficar muito trabalhoso e repetitivo ficar colocando input por input pra todos os cadastros do sistema..
Fala diego, beleza?
Gostei muito do vídeo, parabens! Conteúdo, explicação. eu mesmo não conhecia o NextJS, queria estudar e só essa passada no bootstrap já me adiantou meio caminho haha
Vou recriar o site de um cliente utilizando next js e vou utilizar o Shakra e o design system.
Postarei o resultado no meu github e comento link aqui em produção depois pra tu dar uma olhada.
Abraços.
Boa xará, você é brabo! 🚀💜
Fiz tudo igual até o minuto 20:00 e aparece na tela Internal Server Error
No terminal:
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
Já verifiquei tudo desta lista e nada, alguém passou pelo mesmo erro? Podem me ajudar por favor?
Gosto muito do design system do material ui, pra mim aumenta muiiito a produtividade, e considero muito melhor que o chakra
Parabéns pelo conteúdo 🚀 curti a introdução, bem suave 💜
Diego pq não o Material UI? Sinto que em quesito de componentes ele está anos luz na frente das outras libs, tbm tendo suporte a temas customizados, dark/light e claro, segue o design pattern do Material, que é adotado pela google em todos os seus produtos.
Como sempre conteúdo de qualidade :)
Cara. Eu adoro seus vídeos. MT msm. Continua assim!!!
A única coisa que me deixa cabrero é sua pronúncia do inglês, as vzs vc fala "Raiden" quando é "Hidden" 😂 Mas isso eh só loucura minha msm
Sucesso!!!
Agora sim acertaram na intro do code drops
Muito bom! Fala sobre Next.js
Q isso em pai, muito massa
Parabéns pelo conteúdo (como sempre)!
De fato libs assim oferecem produtividade e, mais do que isso, um bom ponto de partida para devs que, como eu, não tem apoio de um designer e também não possuem tanta capacidade para imaginar e criar as próprias interfaces do total zero. Nesse aspecto é bem válido.
Porém eu não usaria em um projeto de médio/grande porte.
De fato o código fica sujo e, na minha visão, meio que fere o princípio de única responsabilidade que eu tento associar aos meus arquivos no projeto. Pra mim faz muito sentido ter um arquivo que representa a estrutura (html), outro que resolve a estilização (css) e outro que faz a mágica acontecer (js).
Finalmente meu momento. NextJS sz
Diego, parabéns pelos conteúdos e por compartilhar este seu conhecimento tão vasto do mundo dev! Vlw!
#QueroAprenderMaisSobreNextJS
Faala, Johnny! Valeeu pelo feedback ! 💜💜
Faz um vídeo mostrando a sua customização no GNU/Linux, extensões, temas e etcs... =)
Faala, Emmanoel! O Guilherme Rodz do nosso time fez um vídeo explicando tudo, e está bem parecido com o do Diego. Recomendo dar uma conferida no canal dele! 💜
💜
Muito ótimo o vídeo... continuem assim
Fala Diego, parabéns pelo vídeo! Qual o tema do SO você está utilizando? (achei massa essa transição de janelas)
Show de bola Diego 👊🏻🚀
tailwindcss da pra vc criar seus proprios estilos, vc tem um plugin interno chamado @apply, la vc define as classes que vc ker usar, com um nome so, depois vc add esse nome no componente q vc ker,a e ele aje como o bootstrap.
não é uma boa pratica usar o tailwindcss como um substituto do bootstrap, criar component class pode ser interessante, mas não como é feito pelo bootstrap, você perde bastante utility se fizer dessa maneira.
@@fenilli nao ficou claro se vc defende ou acusa o bootstrap
Excelente biblioteca, posso começar usar Next.JS em todas as aplicações daqui pra frente ?
Estou sentindo falta de alguns conteúdos sobre Node, acho que está na hora de renovar meus conhecimentos, principalmente na parte de autenticação, até hoje não achei um conteúdo sobre Refresh Token hahahaha. Fica aí minha sugestão de vídeo pra Rocket!
vídeo maravilhoso!!!!
Traz mais sobre Next.js :D
Diegao, dúvida pro PR: qual a melhor forma de gerar um PDF no mobile? Procuro algo client-side para que o usuário possa usar offline, parecido com o que o jsPDF faz na web. É possível fazer essa geração no app ou devo enviar uma requisição ao servidor? Estou utilizando Expo e Node!!!
Achei interessante a part do Next. Ansioso por um codedrops só de next...
Podia ter um video com a atualização pro chakra ui v1.0
Diego no 1.5x é imparável hahaha. Ótimo vídeo!
Design systems me parecem ir na contramão do isolamento entre conteúdo e apresentação, que foi o que motivou a criação do CSS. Parece que voltamos ao HTML3 quando a gente formatava tudo nas próprias tags do HTML.
Hahah dá essa impressão mesmo 😅
Estou trabalhando num projeto usando design system com Material UI, mas os Tokens e estilizações dos componentes passo pelo styled-components. Não consigo mudar o paradigma para ficar tudo no HTML. Além de qua há situações onde você precisa alterar os estilos de forma dinâmica. Até dá para por no HTML, mas misturar tudo vai contra os meus princípios X.x.
Gosto de separar estilo de lógica. Pelo menos essa foi uma forma que encontrei de usar um design system sem sair das regras de code clean.
Sei não esse padrão declarativo pra Web comparado com o que é no Flutter, no Swift UI e tá vindo aí no Jetpack Compose pra Android me pareceu meio bagunçado... Por ainda ser CSS não tem aquela ideia tão na cara de ter algo pronto que vai te ajudar... Parece que só está declarando o CSS no componente... Mas enfim vou testar isso aqui pra ver se não é apenas impressão minha, de mais, excelente conteúdo como sempre Rocketseat.
Topzera, a única coisa que eu não gostei sobre esse esquema de UI declarativa é a identação do código, parece uma estrutura de "callback hell" conforme vai aninhando os widgets, é mais facil de entender o código, mas eu acho bem estranho particularmente.
Gente gostei do do chakra, estou criando outros projetos com ui declarativas e no momento estou gostando da organização do código.
Faala, Luiz! Valeeu por compartilhar sua experiência com a gente! 💜
Eu fiquei com uma dúvida. No site do Skylab, quando a gente chega no breakpoint de 900px, o header fica em cima. Como eu posso adicionar esse breakpoint ou media-query, nesse caso?
hum aquele cheirinho haha, mas legal a ideia ,seguindo a documentação e tendo a equipe alinhada com isso e bem dificil fugir do padrão
Adoro o conteúdo de vcs! O React Helmet substituiria a necessidade do NextJS para atender toda parafernalha de SEO? Eu tenho uma aplicação que usa ele, aparentemente tudo roda legal já que ela tem bons resultados orgânicos, mas confesso que mesmo assim não consegui encontrar uma resposta definitiva para isto. É mto difícil fazer benchmark dessas coisas x____X
Pode fazer sim um vídeo só de
Next
Diego, o que vcs da rockeseat acham do Graphql?
Por que não usar flexbox nesse caso? Era simplesmente colocar um container 100vh com flex e media query para flex col além de colocar flex também no body mas agora com justify content center e align items center
Boa Diegão kkkk... Dark eh vida
Com toda certeza hahaha 😄
como chakra ui vc tem o sematic ui, ja algum tempo no mercado.
Diego, falando em Design System, já viu o DS da Adobe, o Spectrum-react?
Eu não vejo com bons olhos esses frameworks que acoplam tudo, sinto que em algum momento o time mudar de ideia sobre ele, terá que reescrever grande parte da aplicação por não conseguir tirar "camadas" do software e reaproveitar.
Bom, você pode criar seus componentes que estendem esses. Assim você só muda esse meio termo e os deixam mais flexíveis.
Isso meio que ocorre hoje em dia quando se usa React.
Estou mudando uma aplicação pequena em React para Next.js, todos os componentes e páginas são aproveitados. O que precisa ser feito é configurar o _app.tsx e o _documents.tsx que são os arquivos default do Next.js.
Teu Linux ficou top! Parabéns.
Fala, Edson! Valeeu pelo feedback! 💜
Quando eu ainda tinha cabelo, lá no final dos anos 90 o esquema era fazer tudo com tabela e o estilo quase sempre inline, daí aprendi o CSS e o Javascript, e vi que legal que é separar as responsabilidades para cada tecnologia, era o tal do "tableless" que virou moda. Mesmo com Less ou Sass foi indo dessa forma. Veio o React.JS e mudou o paradigma que estava acostumado, era tudo Javascript mas ainda podia usar o CSS e o Sass separado, daí inventaram o StyledComponents. Aí virou bagunça! Me senti denovo no século passado escrevendo marcações de estilo quase que inline novamente, só que agora em JS. Pelo menos dá pra eu fazer tudo com ele dentro das possibilidades do CSS e do Sass.
Agora vc vem e me fala de um Design System como esse tal de Chakra de Virgem. Dei uma brincadinha nele e não gostei muito não. Tem umas limitações de coisas simples, como background com gradiente, por exemplo. Não consegui adicionar num Box simples e isso me deixou frustrado pq nem na documentação encontrei uma forma de resolver isso. Mas veja só, resolver usando as cores declaradas no tema e não pra escrever uma string qualquer, se não pra quê vai servir essa meleca toda?
Hum, consegui! Só que não estava na documentação do Chakra, mas sim na do Theme UI que usa da mesma biblioteca, a Emotion. Enfim, assim eu até consegui, só que perde o lance de ser declarativo.
quantas vezes a intro do code/drops foi refeita kkkkk
Pra quem ta começando no React, é bom ir indo pro next, ou é bom pegar uma base boa no react "puro"?
Só uma informação sobre Declarative UI, o Android vai lançar o Jetpack Compose, que também será UI Declarativa, e terá uma sintaxe bem clean, parecido com Flutter mas mais clean, isso realmente vai dominar o mercado pelo visto
Vlwww!!!
alguem ta com algum erro ?? no meu ta dando erro essas libs que o diego esta usando
Traz mais videos de next!
Desvantagem...., tem mas da para virar vantagem ;). Qual versão do linux você esta usando?
Parece ser o kubuntu
Uma boa sugestão: Cria um repositório com as músicas de abertura com os detalhes do artista... sei que não é relevante mas qual programador não programa escutando música?
Foi Ótimo conteúdo!!
Fala parceiro, eles já disponibilizam uma playlist do Spotify, atualizada semanalmente
Link: open.spotify.com/playlist/5cQ01bww8FpOHJQTSZmwsN?si=A24ZrmBrScKCAEOpbzgA2w
Como chama a música do começo?
Diego, como podemos criar layouts responsivo com RN ?? Existe alguma lib que nos auxilia nesse processo de criação?
Fala, Jukka!! Dá uma conferida no episódio de hoje do PR, respondemos sua dúvida por lá!! 💜💜
th-cam.com/video/EXpct54Vc5A/w-d-xo.html&t=664
Acho interfaces declarativas muito interessante, é muito tranquilo fazer as coisas!
Não peguei o que ele disse do Tailwind, falou que era verboso, mas mostrou outras duas libs que fazem EXATA a mesma coisa só que usando props, que fica tão verboso quanto* o.O
* Fora toda a config que tem que fazer pra usar no React
O único ponto ruim que vejo no Tailwind é a dificuldade em passar por cima de uma propriedade*, já que ele é CSS puro
* tipo tentar alterar a cor da font dentro de um componente de forma dinâmica
ou, tentar adicionar uma margin menor dentro de um componente que já tem uma classe com um margin maior sem remover a margin anterior (que em alguns casos você não pode/consegue)
Faala, Vitor! Valeu por compartilhar sua opinião com a gente! 💜💜
Agora a minha opinião:
Eu por exemplo, nunca curti Bootstrap, por maia que ele seja ágil para construir algo em tela, ele ja me deu muita dor de cabeça com alguns elementos que não ficavam do jeito que eu queria!
Vejo que a principal desvantagem do Chakara, ou qualquer outra Lib similar seja essa parte da verbosidade do código, para quem curte código com poucas linhas isso é um terror, porém se isso deixa mais casado o UI Designer e o DEV, e claro, aumenta a produtividade da equipe, acho que chegamos no futuro da estilização!
Que Deus abençoe o Flash e o Action Script.
HAHAHAHAHA 🤣
Next please, thank you
Diego Usando KDE... Hum... é KDE NEON? Ou Kubuntu? Massa. Eu estou usando KDE NEON é acho simplesmente fantástico
Diego tá usando o Kubuntu
abertura ficou bem melhor