ANGULAR SIGNALS: TUDO O QUE VOCE PRECISA SABER
āļāļąāļ
- āđāļāļĒāđāļāļĢāđāđāļĄāļ·āđāļ 12 āļ.āļĒ. 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.
Essa verificaçÃĢo de dependÊncia ficou bem interessante no computed, realmente bem inteligente e performatico
NegÃģcio ÃĐ doido!
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
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
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!
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 ðĪðŧðĪðŧ
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!
Excelente conteÚdo sobre signals! Valeu Cristian!
JÃĄ que chega mais!
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
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!
Excelente vÃdeo! Obrigado por compartilhar
Sempre!
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
Top demais
Vlwww LukÃĢo
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
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!
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!
Video simplesmente F@#$.... Sua didÃĄtica ÃĐ muito massa! Obrigado
Feliz por isso mano! NÃĢo paramos por aqui!
Top
Vlwww rei!
Muito obrigado mano!
Vlwww BrunÃĢo
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
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 ?
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
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
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
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!
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 ðĪðŧðĪðŧ
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
},
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.
parece bastante vue
AtÃĐ que sim mano, atÃĐ gosto dos dois pra ser sincero!
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...
à 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.
NÃĢo, Peter, vc nÃĢo entendeuâĶ
th-cam.com/video/ABiLMZbHIkA/w-d-xo.html
que bruxaria ÃĐ essa, jovem?
A negÃģcio ÃĐ doido demais nÃĐ man! Ta doido!
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
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;
})