Aplicações React do futuro? UI declarativas, design system e frameworks | Code/Drops #48

[@maykbrito]

Curti essa musica no começo. Trouxe uma vibe muito bacana 💚

[@SetupDeDev]

O Mike cagueta a distro que ele tá usando aí skskksksks

[@randomprofile9523]

@@SetupDeDev Ele usa ubuntu com kde, instalou o ubuntu e dps o plasma

[@levyaraujo2374]

@@randomprofile9523 acho que é o kubuntu mesmo

[@daxaquaticx]

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.

[@MateusHenrique-ne5el]

Up

[@arthurmendespereira2061]

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

[@pedrosoares9634]

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

[@pedrosoares9634]

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

[@pedrosoares9634]

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

[@gurmiguel]

Diego: Desculpa usuários de tema light... Também Diego: (abre o devtools com tema light)

[@renanbritz3459]

Enfim a hipocrisia

[@leonardoprimieri8987]

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...

[@TomazEdson25]

@@leonardoprimieri8987 qual o WM vc está usando?

[@leonardoprimieri8987]

@@TomazEdson25 wm?

[@TomazEdson25]

@@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...

[@Elizeuth]

Declarative UI funciona muito bem com React Native. Pra web prefiro usar o bom e velho css mesmo. Conteúdo muito bom! 🚀🚀

[@BrennoFabyanno]

Seu lindo

[@CarlosEduardo42]

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..

[@tavareshenrique]

Queremos mais vídeos de Next, com certeza!

[@LuizFerK]

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!❤️

[@thalisoneduardo1736]

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]

@@thalisoneduardo1736 no next ,e mais chato um pouquinho de se fazer autenticação via token,provavelmente voce vai ter que usar cookies

[@thalisoneduardo1736]

@@tracksoon4581 eu crio um hook sempre para auxiliar no gerenciamento do token, tentando salvar primeiramente no localstorage e caso der erro, depois no cookie.

[@M4J0R97]

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.

[@rocketseat]

Faala, Anderson! 💜💜 Valeu pela sua sugestão!

[@pedroimpulcetto]

Larguei o BOMBEIRO e agora sou DEV!! 🚒💻 Obrigado Diego 🙏🏻👊🏻

[@TaffarelXavier]

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?

[@paulorcvieira]

Massa Diego, espero que possa trazer mais conteúdo nessa pegada usando next claro, valeu!

[@fabioramatis2373]

Comecei a trabalhar com nextjs na empresa agora e vocês trazem conteúdo! Videntes

[@gleniocarvalho1]

Achei fantástico este CodeDrop! Se puder trazer mais conteúdo de NextJS, seria bacana sim! 💜

[@TheDsadsadass]

Obrigado pelo conteúdo, Diego! Você poderia me dizer que mouse é esse?

[@marciopas]

Show de bola. Se puder, fala mais sobre Next.

[@randysmachado]

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.

[@LuizHenrique-cu4kq]

Opa Diegão! Next é muito top! Quero mais videos kk

[@devgoliveira]

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 :)

[@albertolotz]

Estou usando o material-ui para minhas necessidades é show

[@gustavo.saraiva]

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 ✌️

[@TheKroow]

Boa xará, você é brabo! 🚀💜

[@steventagloehner3385]

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?

[@rocketseat]

Faala Steven! Valeeu pelo feedback! É uma boa também! 🚀

[@lucascoronel2289]

Concordo ✌🏽

[@renanbritz3459]

Eu estava aqui apanhando pra reinventar a roda com styled-components. Parece que um design system é justamente o que preciso. Valeu Diego!

[@rocketseat]

Hahaha boaa!! 💜

[@felipehuggler]

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

[@BrenoNovelli]

Ô 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.

[@viniciusbenedito1596]

Boa Rocket, tudo muito top! Diego, você poderia falar alguns locais de onde você tira esses novos conhecimentos? Obrigado pelo conteúdo!

[@ricardoutino619]

ou uma lista das pessoas que te inspiram para agente seguir também. Muito obrigado 😊

[@victorwestmann]

Verdade! Como são inspirados né? Admiro muito.

[@GuaxinimDosParanaue]

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.

[@fabioramatis2373]

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!

[@jonasgedrat658]

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.

[@TutoDS2014]

Diego como faria para trocar a cor dos icons no focus do input tal como est ana plataforma?

[@altamirsantos6030]

Q isso em pai, muito massa

[@adrianomachado1871]

Gosto muito do design system do material ui, pra mim aumenta muiiito a produtividade, e considero muito melhor que o chakra

[@DaviOliveira-tb7tq]

Agora sim acertaram na intro do code drops

[@ruanvalente7496]

Parabéns pelo conteúdo 🚀 curti a introdução, bem suave 💜

[@samuellevy8861]

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.

[@aleodoni]

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.

[@rocketseat]

Faala, Alexandre! valeu pela sua contribuição! 💜💜

[@alexandrevelozo3045]

Show de bola Diego 👊🏻🚀

[@newerton]

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.

[@rocketseat]

Faala, Newerton! 💜💜 Valeeu pela sua sugestão!

[@newerton]

@@rocketseat 💖🚀

[@danilodesignerdd]

Fala Diego, parabéns pelo vídeo! Qual o tema do SO você está utilizando? (achei massa essa transição de janelas)

[@tarciziobarbosa9532]

Finalmente meu momento. NextJS sz

[@igorccunha]

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!

[@rocketseat]

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!! 💜💜

[@renansouza351]

Muito bom! Fala sobre Next.js

[@jillesmc]

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.

[@kabal6838]

So informative, thanks a lot!

[@gesonpires3615]

Excelente vídeo.

[@rocketseat]

Valeeeeeu, Geson! 💜 🚀

[@luanfelipecosta]

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.

[@jvzaniolo]

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.

[@PauloMiezi15]

Muito ótimo o vídeo... continuem assim

[@FiRizzi]

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..

[@celconeto8340]

Excelente biblioteca, posso começar usar Next.JS em todas as aplicações daqui pra frente ?

[@alaelciolucas6838]

excelente!!!!

[@RiversDelay]

Traz mais sobre Next.js :D

[@wesleycristiano289]

Achei interessante a part do Next. Ansioso por um codedrops só de next...

[@johnnysilva8861]

Diego, parabéns pelos conteúdos e por compartilhar este seu conhecimento tão vasto do mundo dev! Vlw! #QueroAprenderMaisSobreNextJS

[@rocketseat]

Faala, Johnny! Valeeu pelo feedback ! 💜💜

[@andresaba3366]

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!!!

[@jonathasribeiro6862]

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!

[@arthur_snow]

vídeo maravilhoso!!!!

[@ccunhax]

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.

[@rocketseat]

Hahah dá essa impressão mesmo 😅

[@alefsilva1679]

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.

[@FelipeMaffezzolli]

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).

[@emmanoelmendes2089]

Faz um vídeo mostrando a sua customização no GNU/Linux, extensões, temas e etcs... =)

[@rocketseat]

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! 💜

[@emmanoelmendes2089]

💜

[@AugustoFnrd]

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.

[@rocketseat]

Opaa! Valeeu pela sugestão Augusto! 💜

[@arthurdebortoli1654]

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!

[@gabrielcoelho1170]

Diego no 1.5x é imparável hahaha. Ótimo vídeo!

[@igorwestermann2768]

Podia ter um video com a atualização pro chakra ui v1.0

[@Junior.Nascimento]

Diego, o que vcs da rockeseat acham do Graphql?

[@Herongozo54]

what distro of Linux are you using? or what theme?

[@uxplay8160]

Gente gostei do do chakra, estou criando outros projetos com ui declarativas e no momento estou gostando da organização do código.

[@rocketseat]

Faala, Luiz! Valeeu por compartilhar sua experiência com a gente! 💜

[@luancampos5186]

Boa Diegão kkkk... Dark eh vida

[@rocketseat]

Com toda certeza hahaha 😄

[@brunomonteiro2705]

Diego, falando em Design System, já viu o DS da Adobe, o Spectrum-react?

[@guiquintelas]

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 :)

[@leonardoprimieri8987]

Pra quem ta começando no React, é bom ir indo pro next, ou é bom pegar uma base boa no react "puro"?

[@tracksoon4581]

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

[@arthurdebortoli1654]

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!!!

[@andersondossantoscruz3685]

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.

[@edvaldoafonso5487]

Pode fazer sim um vídeo só de Next

[@principe.borodin]

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.

[@fenilli]

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.

[@principe.borodin]

@@fenilli nao ficou claro se vc defende ou acusa o bootstrap

[@omarciano42]

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

[@GabrielGoncalves-bt3ye]

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.

[@LeandroCorso]

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?

[@LeandroCorso]

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.

[@ptcomics]

Teu Linux ficou top! Parabéns.

[@rocketseat]

Fala, Edson! Valeeu pelo feedback! 💜

[@diegohenrique5227]

quantas vezes a intro do code/drops foi refeita kkkkk

[@danilocunha5220]

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

[@HandersonMachadoPinheiro]

Que Deus abençoe o Flash e o Action Script.

[@rocketseat]

HAHAHAHAHA 🤣

[@esawaHSR]

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.

[@RomuloAssis7]

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.

[@newerton]

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.

[@apholo8308]

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

[@principe.borodin]

como chakra ui vc tem o sematic ui, ja algum tempo no mercado.

[@edrdesigner]

Desvantagem...., tem mas da para virar vantagem ;). Qual versão do linux você esta usando?

[@hackfile4820]

Parece ser o kubuntu

[@SolidousMdz]

1h? Diego em 2x é só para os fortes.

[@pliavi]

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

[@pliavi]

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)

[@rocketseat]

Faala, Vitor! Valeu por compartilhar sua opinião com a gente! 💜💜

[@paulospiguel]

Falaaaaaa DD (Diego Dev), o guru do react. É possível usar o Chakra-ui com o poder do styled-components? Ou quando utiliza-se de design system o styled-component é desnecessário?

[@AndersonFaro9]

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!!

[@JeanPoffo]

Fala parceiro, eles já disponibilizam uma playlist do Spotify, atualizada semanalmente Link: open.spotify.com/playlist/5cQ01bww8FpOHJQTSZmwsN?si=A24ZrmBrScKCAEOpbzgA2w

[@jukkaverissimo2687]

Diego, como podemos criar layouts responsivo com RN ?? Existe alguma lib que nos auxilia nesse processo de criação?

[@rocketseat]

Fala, Jukka!! Dá uma conferida no episódio de hoje do PR, respondemos sua dúvida por lá!! 💜💜 kzbin.info/www/bejne/e4nTlKdrabuWa6M&t=664

[@almeida96]

Traz mais videos de next!

[@LuizPauloCamargo]

E o Material UI? O que acha?

[@lucascipriano3570]

Cai no mesmo que o Boostrap, ele é mais ""feio"", para web eu utilizei bastante Bootstrap no começo, mas depois que comecei a estudar design system, vi um outro mundo e como poderia até criar o meu e replicar para meus projetos.

[@TukaCraft]

Qual sistema operativo está a usar ? Linux ou MacOS?

[@hackfile4820]

Linux

[@GuuVFX]

Como chama a música do começo?

[@leavs]

cara, me bateu uma "nostalgia" danada quando o Diego citou o Jekyll. Mas fica só na memória, NextJS é muito melhor em muitos aspectos kkk

[@mikrailhyper]

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?