ANGULAR SIGNALS: TUDO O QUE VOCE PRECISA SABER
HTML-код
- Опубликовано: 30 сен 2024
- 🔥 Olá, Devs! No vídeo de hoje, vou mergulhar no mundo da 🌐 #Angular16 e seu recurso inovador: 🛠️ #AngularSignals. Se você está cansado das limitações do Zone.js, então você vai amar os Signals!
🚀 Este recurso incrível oferece performance superior e inteligência aguçada na detecção de alterações. Sim, é a nova era da #Reatividade no Angular!
⚡ Vou desvendar como usar esse recurso e quais ⚠️ cuidados você deve tomar para maximizar sua eficiência. Não perca!
👨🏫 Boa aula e para mais conteúdo como este, siga-me no LinkedIn! 👇
/ cristian-silva-vieira
Mano, quando for possível, faz um shorts pra explicar melhor o pq do uso do protected ao invés do public na criação de variáveis que serão utilizadas no DOM.
Angular está chegando tarde nessa ideia. O conceito foi lançado pelo Vue 3 em 2021 como reactive objects, depois foi copiado por outros frameworks, como Solid.js e Preact, e agora está sendo lançado no React e no Angular como se fossem novidades inovadoras, mas já é o padrão em outros frameworks faz tempo...
Acho que tinha que vir antes também, mais simples de usar os Signals, o que fico feliz, é a integração e o trabalho bem feito da Google…
@@cristianwilliamdev Pois é, eu sempre gostei de muita coisa no Angular, mas gostava mais do Vue por coisas desse tipo. Agora vamos precisar acompanhar os updates que se seguirão relacionados a tudo isso.
Simplesmente iluminou 1000 problemas que que precisava solucionar de maneira mais eficiente. Aliás ngModel = Banana na caixa [()] * by Loiane Groner (nunca mais esqueci rsrs)
@@douglasdlrex lendaaaaa demaisssss vlw mano, vou usar hahaha
Só pelo fato de não precisar se inscrever para receber os valores e depois ficar preocupado em se desinscrever, o signal já matou a pau.
Uma dúvida, quer dizer então que utilizando o toObservable a partir de um signal, não é necessário dar um subscribe para receber as atualizações?
Sim sim, sua Inscrição seria gerenciada pelo proprio Signal.... Seja Feliz agora sahusuhahusa
Eu guardo seus vídeos nos favoritos do Chrome pra voltar e revisar os conteúdos kkk
Quase como um handBook
Favor não excluir os vídeos
Shuahsuahuashu Boaa mano! Dahora saber disso! Tmj mano!
Eu guardo no coração
Por algum motivo o mutate, foi removido no angular 17. Agora para atualizar o valor eu acho que temos que usar o update mesmo, mas nada que não seja possível resolver. ex:
this.pessoa.update(atual => {
atual.nome = 'Fulano'
return atual;
})
Essa verificação de dependência ficou bem interessante no computed, realmente bem inteligente e performatico
Negócio é doido!
Da para utilizar @Input como signals?
Mano, o @Input, até da, mas seria um pouco mais complexo, visto que voce teria que fazer um get; set; dele... Mas daria sim
galera agora o observable vai ficar inutilizavel? como iria fazer um fetch na api com signal?
Calmaaaa mano, na verdade não vai ficar inutilizável, ele ainda funciona muito bem com eventos e tal, tipo, um observable para o ValueChanges de um form... Mas para chamadas em API, eu acredito que o Angular irá implementar algo para que os devs utilizem o fetch para chamadas HTTP caso queiram, mas por enquanto, será Observables mesmo...
@@cristianwilliamdev muito obrigado cara tirou bastante das minhas dúvidas, seus videos são muito bons!
Não, Peter, vc não entendeu…
Adoreiii, muito bom mesmo!!!!
Didática incrivel e ótimos exemplos
Cris será que pode fazer um video falando de chamadas de API com Signals e comparar com o uso do RxJS
Já até anotei aqui, teremos, será maneiro demais! Obrigado mesmo mana!
Você é brabo 💪
Onde vc busca suas referências? Além da documentação, é claro.
Mano principalmente as documentações, aí eu gosto de testar antes pra passar as experiências aqui!
Feliz por ter curtido mano!
Já deixando o like e parabenizando pelo vídeo
Chega a notificação eu já venho correndo porque sei que é conteúdo top.
Parabéns Cristian estas aulas e dicas ajuda muito
Vlwww mano! Obrigado demais pelo apoio 🤘🏻🤘🏻
Angular Signal === react usestate 😂😂😂
sahusahusahu de certa forma sim mano, no caso, o Angular tem uma otimização de performance quando usa o signal, minimizando o numero de render no template, agora no react não sei como funciona isso por baixo dos panos
Amigo você me deu muita inspiração em aprender, e estudar inglês. Você vai fazendo as coisas rápido com tanta fluidez que inspira.
Caraca, ai sim mano! Fico feliz de ser uma referencia pra voce! Vai me contando da evolução, ficarei feliz em saber! Tmj mano!
Curti demais esses Signals. Vou reduzir o uso de Subjects e BehaviorSubjects. E NUNCA MAIS vou chamar função no meu template kakakakkaakaa
Suhahushsahusahu Agora com Signals pode chamar ahahah No caso, "funcoes" originadas de Signals kkkkk
Bela aula amigo, uma dica é nas aulas usar thema original vs code, ou maximo um Dracula fonte original pq pra quem ta aprendendo comsegue bater rapido olho e nao se perde no código. Obrigado pelo conteudo.
SAhusahuhusauhs mano, pra ser sincero, eu prefiro esse tema que modifiquei exatamente pelo fato de não ser todos que usam kkkkkk
@@cristianwilliamdev Sou senior dev, e nós ja conseguimos ler até txt, disse.mais pq objetivo do curso é ensinar né, e lembro até hoje quando meu chefe me mostrava as coisas na IDE dele e como atrapalhava compreender rapido o código, funções, variaveis blocos.
@@cristianwilliamdev hoje em dia eu mudo toda hora que vou programar de traumatizado que fiquei. Hoje é dia do Matrix kkk
Cristian, parabéns pelo conteúdo, sou dev backend e entusiasta na parte do front com Angular, tenho um projeto pessoal de pedido de venda que estou usando NGRX, reducers, actions e effects, o Signal substitui o uso dessa LIb terceira ?
pergunta aleatória, qual plugin esta usando para remover e adicionar as depencias nos imports no topo?
Salve lenda! Então, isso não é plugin nem nada, é uma configuração que uso no vs code que chama organize imports, eu deixo configurado para fazer isso quando eu salvo o arquivo...
Adiciona isso no settings.json
"editor.codeActionsOnSave": {
"source.organizeImports": true
},
Vídeo salvo para assistir depois do trampo. Mano, preciso dizer, sua didática é impecável!!
Vlwww demais mano! Fico feliz que gosta 🤘🏻🤘🏻
@@cristianwilliamdev opa blz? so de curioso podia me dizer qual tema vc ta usando no vscode? gostei das cores quero testar, e se tiver mais alguma extensao/configuracao relevante tbm por favor
ruclips.net/video/ABiLMZbHIkA/видео.html
que bruxaria é essa, jovem?
A negócio é doido demais né man! Ta doido!
Excelente conteúdo sobre signals! Valeu Cristian!
Já que chega mais!
Excelente vídeo! Obrigado por compartilhar
Sempre!
parece bastante vue
Até que sim mano, até gosto dos dois pra ser sincero!
Muito esclarecedor o seu vídeo! Parabéns! Poderia fazer um exemplo de sinais para autenticação, como logar, deslogar, enfim mostrando como gerenciar o estado de autenticação com o sinal.
Opa, é uma boa ideia Leandro, vou considerar aqui na lista de ideias! Vlww mesmo mano!
É necessário ser standalone pra usar signals?
Não mano, não tem essa necessidade não, o que importa é a versão do Angular
@@cristianwilliamdev Blz mano obg curti demais o conteúdo vamos implementar na empresa pra ontem ja.
Muito obrigado mano!
Vlwww Brunão
Que aula maneira, cara, brigadão, tem pouco conteúdo de angular no BR, ainda mais de tech nova dele.
Uhuuu ai sim! Tmj mano!
Video simplesmente F@#$.... Sua didática é muito massa! Obrigado
Feliz por isso mano! Não paramos por aqui!
Cristian poderia fazer um projeto estilo o que você fez do spotify com signals? poderia ser um projeto menor no caso só pra ver como fica no mundo real
Salveee mano! Claro, na verdade estou preparando mais um clone mas irei soltar em LIVE, bem daqui a pouco, quando chegar aos 3k de Inscritos... Já que chega manow
Top demais
Vlwww Lukão
Oi Criss, Angular Signals enforce Immutability in v17, so mutate will be removed
Mutate?
@@cristianwilliamdev, acho que @mugatu2017 quis dizer que na versão 17 do Angular o método mutate() de signals foi retirado. Descobri isso quando estava testando signals no StackBlitz, cuja versão do Angular era a 17. E o método não era reconhecido, depois fui buscar informações a respeito e é isso mesmo, retiraram. Achei ruim, estava querendo usar no meu projeto (versão 16) e iria utilizar exatamente o mutate, mas com a retirada na versão 17, nem vou usar. Pretendo utilizar o update como vc deu a dica nesse vídeo!
Eu nunca consegui entender qual é a diferença entre update e mutate. Deve ser por isso que vai ser retirado. Para mim nao tem diferença nenhuma
Boaaaa galera! Vlw por lembrar 🤘🏻👏🏻👏🏻
@@LeandroTassinari assisti esse vídeo do @cristianwilliamdev que eu entendi a diferença por ele, apesar que agora já era...
Esse signals me lembrou muito o ref do vuejs, muito bom
Simmmm, o UseState do React também hahaha dahora demais a ideia!
@@cristianwilliamdev é bem maneiro, e essa nova forma do angular identificar as alterações pra renderizar no html vai ajudar muito na otimização, só falta melhorar a integração com a ngmodel
Top
Vlwww rei!
Parabéns pelo vídeo Cristian, já deixei o like.
Aproveitando o gancho e até sugerindo talvez uma pauta para um próximo vídeo, o que você acha de construir componentes no angular com a abordagem de smart and dumb componentes ? Tenho a impressão que é um trade-off, porque por um lado ele separa as responsabilidades, mas por outro você cria 3x mais componentes.
Ainda mais agora com signal e juntando com @Input e @Output, vish rs
Tem algum Style Guide quanto a isso ?
Mano é um excelente tema! Anotado aqui, gosto de falar de conceitos de arquitetura 🤘🏻🤘🏻