Atomic Design e Typescript no React Native - Code/drops #95

Подписаться 371 тыс.

Просмотров 41 тыс.

50% 1

✅ Inscreva-se no DoWhile2021: bit.ly/30EkU0I
O Atomic Design é uma metodologia desenvolvida por Brad Frost. Essa abordagem é muito interessante para auxiliar na abstração de componentes que acontecem em cinco etapas que trabalhar juntas e de forma harmônica para dar origem as interfaces. Depois de conhecer essa metodologia de abstração você com certeza irá enxergar os componentes de uma aplicação de outra maneira.
Nesse Code/Drops vamos refatorar, na prática, uma aplicação até tocar no componente mais atômico da aplicação e de quebra será um excelente exercício de refactor.
Repositório do projeto utilizado como base: github.com/rod...
-----
Confira a grade completa de conteúdos do canal aqui: rocketseat.com...
Conecte-se a 200mil devs e avance para o próximo nível com a nossa plataforma: rocketseat.com...
Cadastre-se na nossa plataforma: app.rocketseat...
Junte-se a mais de 392mil devs em nossa comunidade no Discord: / discord
Acompanhe a Rocketseat nas redes sociais:
Twitter: @rocketseat
Facebook: @rocketseat
Instagram: @rocketseat_oficial
Nos ouça também no Spotify:
- Podcast Faladev
- Podcast Alumni
- Podcast Proxy

Опубликовано:

18 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 135

@jhorranisbrunetti9174 3 года назад

Muito legal o vídeo. Parabéns! Sobre o Atomic, é bom saber esse conceito. O próprio React Native já fornece os átomos (View, Text, Image, etc..). Nesse caso do app do insta é muito esforço na construção desses componentes(moléculas) pra não serem reutilizados em outras partes, já que dificilmente você vai usar um PostHeader em outro lugar. Mas como dito, o importante é você seguir o padrão definido para o projeto, independente de qual for.

@rocketseat 3 года назад

Exatamente, Jhorranis! 👏‍🏻‍👏‍🏻‍👏‍🏻‍ Boa! Valeu demais pelo feedback! Que massa que curtiu o conteúdo! 💜 😍

@dicousdev2592 Год назад

É certo que dificilmente você pode usar um PostHeader, mas separando assim, o código fica mais limpo, não acha ? Digamos que eu crie um componente como o PostHeader, mas que precisa fazer uma requisição http, não ficaria melhor em um componente separado ? mais clean ?

@DiegoAugustoSinkz 3 года назад

Aula bem legal, uma alternativa legal era deixar os atoms menos específicos. Em vez de ter vários atoms relacionados ao Post, poderíamos ter buttons, texts, labels, containers, grids, rows, etc.. E nas moléculas/organismos usaríamos os atoms para criar os componentes mais específicos. Também é sempre legal pensar onde podemos deixar as regras de negócio/estado. Nesse caso o ideal era ficar isolado nos organismos/templates, casos os mesmos sejam reutilizáveis.

@ThiagoLianon 2 года назад

Estou usando Atomic Design em um projeto no meu trabalho, e estava um pouco perdido, esse vídeo tirou todas a minhas duvidas, como sempre o Master of RN mandando super bem!. Parabéns Rodrigão!

@luccasspecht7551 3 года назад

Baita conteúdo! No projeto em que eu trabalho decidimos adotar essa estrutura e definimos como padrão aqui no projeto. O resultado tem sido muito satisfatório🚀

@rocketseat 3 года назад

Sério, Luccas? Que massa! 💜 😍

@ribeiro.evandro 3 года назад

Conteúdo sensacional... Só a notificação do RU-vid, deu a entender que era um vídeo sobre animações com a Moti... Espero que ele saia logo

@rocketseat 3 года назад

Faaaaala, Evandro! Curtiu? Que massa! 💜 🚀 Pequena falha técnica... 👀 😛

@jederilson 3 года назад

Muito interessante a aplicação da estrutura no projeto. Mas como foi bem dito, as "miudezas" não precisam ser feitas sempre. Pelo menos no meu entender, só vale a pena separar os átomos se realmente for precisar reutilizar. Senão, deixa junto na molécula msm. Show de bola 😎🙌🏼

@diniz005 3 года назад

Olá Rodrigo. Sensacional o conteúdo. Tem como em futuros, se não tiver, propor vídeos focando sobre notificações ao usuário. Ex. Um agendamento tal data e horário mandar uma notificação ao usuário lembrando?

@rocketseat 3 года назад

Faaaaala, Fabio! Beleza? Opa, sugestão anotada aqui! Valeu demais pelo feedback! 💜 😍

@adriano7890 3 года назад

@@rocketseat ensina criar um app de Live ao vivo igual do facecast mano Se vc tiver um site ensinando eu assino

@adriano7890 3 года назад

@@rocketseat eu queria criar um app de Live ao vivo Eu queria uma plataforma ensinando desenvolver o app

@jonathansantosfb 2 года назад

@@rocketseat Up 🤓🚀

@mauriciocmarinho 3 года назад

Essas musiquinhas de fundo deram um clima muito massa à aula. Parabéns pela sacada.

@rocketseat 3 года назад

Curtiu, Maurício? Que massa! Valeu demais pelo feedback! Vou passar pro pessoal! 💜 😍

@rickyalmeida 3 года назад

Fala, Rodrigo! Vou deixar uma sugestão de vídeo, traz pra gente um pouco de automatização de build e publicação com o Fastlane, se possível junto com um GitHub Actions ou similar.

@rocketseat 3 года назад

Faaaaala, Ricky! Beleza? Valeu demais por deixar sua sugestão! Anotado aqui! 😉 💜

@tpizzutti1983 3 года назад

Interessante, Ricky. Super válido.

@sebagalindo9622 3 года назад

Ótima sugestão, aguardando ansioso esse vídeo.

@garganta00 3 года назад

aí vc botou pra fude na sugestão. Brabo demais!

@GCrozariol 3 года назад

Muito massa o vídeo! Nunca tinha ouvido falar sobre o Atomic Design. O mais engraçado é que sempre utilizei esse método sem ao menos saber da sua existência. De qualquer forma, assisti o vídeo todo e realmente... O conteúdo de vocês é muito completo! Parabéns!

@rocketseat 3 года назад

Faaaaaaala, Guilherme! Beleza? Que bacana! Curte o método então! 😉 Valeu demais pelo feedback! 💜 😍

@Hayakawalol 2 года назад

TNice tutorials was a very informative video. You made soft soft soft one hundred tis easier! Thanks alot

@williammendonca9975 3 года назад

Top Rodrigão. Ajuda mto a organizar os componentes e pensar de forma mais simples. Dica de próximos conteúdos: Supabase (Database e Storange) com React Native

@rocketseat 3 года назад

Ajuda demais, né, William? Que show que curtiu! 💜 Pode deixar! Anotei sua sugestão aqui! 😉

@pablodanilomota 3 года назад

Cara, que massa ver vídeos como esse! 👾🚀 Uso esse padrão há um tempo no React e realmente mudou a forma que eu penso nos meus componentes.

@rocketseat 3 года назад

Curtiu, Pablo? Que show! Valeu demais pelo feedback! 💜 😍

@pablodanilomota 3 года назад

@@rocketseat curti demais! haha 💜

@alfirst8089 3 года назад

Saber fazer um boa leitura do design, ter noções de componentização e usar design system, mais que suficiente.

@lucassutelo5396 3 года назад

Sensacional o conteúdo. Obrigado Rodrigo e equipe rocket!

@rocketseat 3 года назад

Que massa que curtiu, Lucas! Nós que agradecemos o feedback! 💜 🚀

@alaelciolucas6838 3 года назад

Bora muito bom cara!!

@rocketseat 3 года назад

Que massa que curtiu, Alaelcio! 💜 😍

@josecoelho1018 3 года назад

Conteúdo top 👌👏

@rocketseat 3 года назад

Que show que curtiu, José! Valeu demais! 💜 😍

@diognisfransiscovaldezcoca7145 2 года назад

OMG ITS WORKED! Guys it really worked. Thank you maboy

@hakimyassine5971 2 года назад

This works. Recommended to try this out. Thanks a lot for your help

@thyaghito 3 года назад

Fala Rodrigo! Parabens pela aula! Cara, uma sugestao boa eh como fazer push notification de uma maneira global, que redirecione pra alguma tela.

@angelilton 2 года назад

que aula sensacional

@insightweb 2 года назад

Muito bom, parabéns pelo vídeo e obrigado pro compartilhar...

@luiziin8765 2 года назад

thanks a lot!!! so nice reverb

@danielvinicius4906 3 года назад

Principais diferenças de ReactJS para React Native e como se adaptar

@rocketseat 3 года назад

Faaaaaala, Daniel! Ótima sugestão! Anotei aqui! 💜 🚀

@tiagora.vieira 3 года назад

Fala Rodrigo, conteúdo muito bom! Nós utilizamos Atomic Design nos projetos da empresa. Seria legal trazer um conteúdo sobre ferramentas para documentação como o Storybook! valeu, abraço!

@rocketseat 3 года назад

Faaaaala, Tiago! Beleza? Que massa que curtiu! 💜 😍 O que acha da experiência? Opa, sugestão anotada! 😉

@joaovitorcaetano6044 2 года назад

Nice tutorial

@alexandrebelem8371 2 года назад

This video really helped me. Thank you very much!

@dyhalmeida1 2 года назад

Fiquei pensando aqui, em um projeto muito grande, teriamos milhares de pastas e milhares de componentes, isso não seria ruim?

@joaodascouves5400 2 года назад

Não necessariamente. Um layout clean e enxuto vai ter um conjunto de atoms bem consistente que vai ser utilizado ao longo de todos os layouts. Imagino uns 50 atoms, 30 molecules e 20 organisms... Devem ser suficientes pra montar qualquer página... Componentes não são tão infinitos assim. Você cria um conjunto de componentes e reutiliza eles em todas as páginas, que essas sim, podem ser aos milhares. Se você estiver criando componentes indefinidamente é pq não está sabendo reutilizar eles corretamente

@henriquemartins8401 3 года назад

Muito bom o conteúdo, e excelente explicação Rodrigo. Seria interessante também se disponibilizasse o link do whismical na descrição do vídeo, como material de apoio

@rocketseat 3 года назад

Faaaaala, Henrique! Que show que curtiu! Rodrigo mandou bem demais, né? 😍 Opa, pode deixar que vou pedir pro pessoal aqui! 💜 🚀

@OBardogatao 2 года назад

Thanks for the help.

@miguelortiz7315 2 года назад

Will start to learn it tomorrow, lets be patient pips! Godbless us haha

@thiagoalencar3237 3 года назад

O mais apropriado para estilos no React Native é Stylesheet ou Styled-Components? Sempre tive estas dúvidas sobre estilizações

@rennanoliveira3443 3 года назад

Acho que não tem um "mais apropriado" que o outro, os dois aplicados da forma certa ajudam bastante. O styled components ajuda na semântica e na questão de fazer estilizações dinâmicas de formas mais simples, além de trabalhar muito bem com temas, mas para projetos menores e sem muita complexidade o StyleSheet acaba indo melhor do que o styled components, por ser mais simples e ser nativo do React Native

@thiagoalencar3237 3 года назад

@@rennanoliveira3443 Ótima resposta, sanou minha dúvida!

@joaopaulo9939 3 года назад

Agora que prometeram o video de animações moti, tem que postar hoje !

@rocketseat 3 года назад

👀 💜

@EdZava 3 года назад

Serial legal um video dando continuacao nesse projeto e adicionando o storybook para ver todos os componentes.

@rocketseat 3 года назад

Faaaaaala, Zava! Opa, anotei sua sugestão aqui! 💜 😉

@mateusturri408 2 года назад

Thanks man!! You've earned my respect

2 года назад

what throws off is the step sequencer. i ntally associate it with a soft/clip whether it's being used or not. also when you do

@AdeilsonTube 3 года назад

Muito bom o conteúdo.... Faltou compartilhar os snippets.... Vlwww

@luanvieira6531 2 года назад

Very helpful

@PatryckAzevedo 2 года назад

TOP

@Futebolmemorable 3 месяца назад

Minha maior dúvida e na parte dos templates, nesse exemplo do vídeo ele esta usando uma lista, mais e quando é apenas um componente de Header. Exemplo, eu tenho um componente de Header dentro do organismo, eu preciso passar esse componente de Header para o template ? Ou posso passar direto para a página?

@paulocbbf 2 года назад

Utilizo uma estrutura de pastas seguindo DDD no meu projeto de RN. Gostaria de saber: faz sentido para o front-end, tal como faz para o back-end?

@ryanassis4043 Год назад

Passando as propiedade assim para os componentes filho, não teria problema com o Prop drilling?

@mateusluiz9685 2 года назад

Thanks

@alaelciolucas6838 3 года назад

No próximo Code/drops ensinar fazer este app do insta ficou da hora vlw fera!!!!

@rocketseat 3 года назад

Faaaaala, Alaelcio! Opa, anotei aqui a sua sugestão! 💜 😉

@DanielVictor-qy9so 2 года назад

Great

@mateus_andriola 3 года назад

Eu vi 20 min de vídeo, mas sobre a parte de PostProps, eu to num projeto de React + TS, e fiz um arquivo index.d.ts, e fazendo isso toda a aplicação tem acesso as tipagens sem precisar importar, assim, tudo que é dado vindo de api fica com os tipos centralizados em um arquivo, eu gostei de fazer isso e queria saber se no React Native também da pra fazer isso?

@joaovictor852 3 года назад

sim

@tutusouzaa 3 года назад

Tenho uma duvida, quando utilizar essa estrutura, como fala para controlar o estado ? Uso um "Context" , "Redux/Recoil" ou sl controlo o estado de cada componente meio que separado?

@chrigoreduardo6561 3 года назад

No aguardo da resposta também!

@iLucasUS 2 года назад

cool tutorial, 100% works, +rep

@wesleybruno4241 3 года назад

Toppp demais. Cara, que tal um code/drops falando sobre redux tolkit?

@johnatabatista3703 2 года назад

Nice

@nicolascouto9968 3 года назад

Sensacional! Será que rola um vídeo com mais GQL?

@luizcarlos1405 3 года назад

O que vocês usam pra gravar a webcam assim? Com uma janela por cima da tela?

@rocketseat 3 года назад

Faaaaala, Luiz! Em mãos: github.com/maykbrito/mini-video-me 😛 💜

@luizcarlos1405 3 года назад

@@rocketseat VALEEEEEEEEUUU! Cês são fera.

@rafaelinacio7148 3 года назад

Faz um codedrop sobre deeplinking no react native

@elviseamancio 2 года назад

Faz um conteúdo falando sobre Expo In App Purchase!

@iorrancastro 2 года назад

É possivel um template chamar um atomo diretamente ? ou a hierarquia deve ser respeitada ?

@dicousdev2592 Год назад

Se você decidir respeitar a hierarquia, provavelmente você vai precisar tampar alguns buracos só para ter esses acessos a esses átomos rs

@Brunocriacoes 2 года назад

por que quando se cria um componente agente cria uma pasta e arquivo index ou invés de ter uma pasta com vários arquivos, ex: componentes/Gravatar.tsx. Para mim fica estranho criar uma pasta para alocar um arquivo apenas

@v0idvlr 2 года назад

É comum utilizar uma pasta com o nome do Componente, e dentro da pasta colocar um arquivo index e um outro arquivo só pra estilização, então fica Gravatar/index.tsx e Gravatar/styles.ts

@mariaeduardagoschmarafon3043 2 года назад

What are the differences from the regural and the free trial one

@lucasviece 3 года назад

poderia fazer um video sobre documentação de components no RN, tipo o docz ou outro

@rocketseat 3 года назад

Faaaaala, Lucas! Sugestão anotada aqui! 😉 💜

@caiofelix623 3 года назад

Conteúdo incrível, só uma duvida quais os snippets que foram utilizados?

@savionina8187 2 года назад

Whenever i use the GMS and put it in the soft, it holds out the note forever! please help, i am very confused

@Franciscormj 3 года назад

Meu Deus como vim para aqui? Kkkk cara, isso que você tá mostrando é programação com design? Não entendo nada desse mundo, mas estou querendo aprender, por onde começo? Gostaria de aprender isso sobre design e programação

@greggie214 2 года назад

works gj

@lucasrobertabreu9209 3 года назад

Muito bom!! Queria saber se tem como fazer um vídeo criando um esquema de drag and drop usando animatedv2

@PhillipLippi 3 года назад

Galera, tenho uma dúvida: O styled-components permite que a gente crie componentes, certo? Mas o React permite que a gente faça a mesma coisa. Quando devo usar um ou outro?

@CarlosEduardo-vm5oc 3 года назад

o componente do styled-components é voltado pra estilização, enquanto o componente do próprio React é voltado pra comportamento, estado, ciclos de vida etc..

@brunoody 2 года назад

resumindo: os átomos já estão prontos, do próprio React, e não precisa refazer kkkk mas o resto gostei mto! top!

@gabrielmd5819 2 года назад

more setups tutorial but not sure how Producer asures up in that departnt.

@Resolveplaytv 2 года назад

+sub

@lucasncamargo 3 года назад

A experiência que tive com Atomic Design não foi legal... É uma abstração um tanto quanto subjetiva e em times maiores o pessoal se perde facilmente nos conceitos e confunde moleculas com ecossistemas, etc... No principio achei legal ter essa granularidade de organização, mas a pratica não fluiu legal... especialmente quando mais pessoas participavam do mesmo projeto.

@viniciusrosa3114 3 года назад

E oq vcs usaram como alternativa?

@principe.borodin 3 года назад

pra mim foi notificado animacoes com moti, o que aconteceu? =/

@Junior.Nascimento 3 года назад

Porque usar types ao invés de interfaces?

@falconiere 3 года назад

top!

@rocketseat 3 года назад

💜 😍

@lukaswhite9397 3 года назад

Firebase e Typescript no React Native - Code/drops #98 Por favor !!!!!

@rocketseat 3 года назад

Faaaaaala, Lukas! Pode deixar que anotamos a sua sugestão aqui! 😍 💜

@15ericson 3 года назад

Ótimo vídeo... só não concordo bom a abordagem de chamar o type do `data` como, por exemplo, no que ocorre no componente Post, PostProps. Acho que ficaria melhor como PostData. Assim, poderíamos passar mais coisas no Props além do `data`.

@TheBrunocb600 2 года назад

I want to learn how to do tNice tutorials but I need equipnt first any recomndations on what I should get or need

@Ambegossi 3 года назад

Cadê os snippets hahaha

@jameshetfield3005 3 года назад

onde vc encontra esse icones?

@andrecoelho2775 3 года назад

O titulo e a descrição estão errados

@rocketseat 3 года назад

Faaaaala, André! Valeu demais por nos reportar! Acredito que já foi corrigido! Qualquer coisa pode nos avisar! 💜

@yozs 2 года назад

get a helping answer thanks.....

@JoaoPedro-ho3yp 2 года назад

or is it for soft pro or sotNice tutorialng

@rafafigueiredo4226 3 года назад

qual emulador ele usa?

@rocketseat 3 года назад

Faaaala, Rafa! Beleza? Ele ta usando o Android Studio! 💜 😍

@willianleman7712 3 года назад

Acho que o video era pra ser sobre atomic, mais o título foi sobre moti

@rocketseat 3 года назад

Ops... 👀 Valeu demais por nos reportar, Willian! Já foi corrigido! 💜 🚀

@willianleman7712 3 года назад

@@rocketseat tamo juntoo!

@Katulo14 3 года назад

play de musica se der da pra dale...

@rocketseat 3 года назад

Sugestão anotadíssima, Matheus! 💜 😍

@kalashnicov0134 2 года назад

Make a 1 hour video of one nice tuto from google

@kaiquevinicius6941 3 года назад

Eu particularmente não gosto do Atomic

@rocketseat 3 года назад

Sério, Kaique? Teve alguma experiência ruim? Se quiser contar, fique à vontade! 😉 💜

@kaiquevinicius6941 3 года назад

@@rocketseat ao meu ver, o Atomic fica ruim quando você precisa: Mudar uma particularidade de algum "atoms" por exemplo, se eu altero um texto, preciso checar todos os componentes que utilizam ele para ver se não teve problema. Outra questão é na hora de criar componente, quando você vai ter um componente com uma particularidade única e essa particularidade te faz criar um arquivo novo só para ele, sendo que ele é usado uma vez só. Mapear os componentes ficam mais exaustivos. Mas isso é só minha visão