5 Tips for Using Angular More Efficiently

  Рет қаралды 22,177

NeverBenBetter

NeverBenBetter

Күн бұрын

These are the top 5 Angular tips that I came up with after reflecting on my most valuable lessons and epiphanies about Angular, TypeScript and Angular project structure. These are practical tips and tricks that will teach you how to best utilize services and components while minimizing the amount of written code.
CONTENTS:
TIP #1 - 1:58
Example - 3:25
TIP #2 - 4:34
Example - 5:13
TIP #3 - 7:43
Example - 9:04
TIP #4 - 11:11
TIP #5 - 13:31
Example - 16:38
To learn more about the example app in this video:
masteryportfolio.com
Angular in 2 Minutes:
• ANGULAR explained SIMP...
Why I chose Angular:
• Angular is BETTER than...
MY GEAR
Sony ZV 1
amzn.to/2DXxrRV
Fifine Condenser Recording Microphone
amzn.to/2E7bboc
#programming #webdevelopement #angular

Пікірлер: 44
@akilmontrope2431
@akilmontrope2431 4 жыл бұрын
What kind of backend would you suggest? Would you use Nestjs or Firebase?
@neverbenbetter8225
@neverbenbetter8225 4 жыл бұрын
I’m using Firebase. I started using it because it was free, but I really like it and the NoSQL database structure has really been good for my project. Also, Angular and Firebase are both Google products and Angular Fire is the officially endorsed library for using Firebase in Angular projects. I will definitely make a video about Angular Fire in the near future (especially since the documentation for AF is not the best. I think supplementing with some videos is a good idea.)
@neverbenbetter8225
@neverbenbetter8225 4 жыл бұрын
But to be fair, I haven’t tried another backend yet so I can’t exactly compare.
@blabla-kk8bl
@blabla-kk8bl 3 жыл бұрын
Django is the best
@tahaqazi5595
@tahaqazi5595 Жыл бұрын
This is an amazing video. I’ve seen people do a lot of low level videos on starting a project or a todo website, but there are barely any videos on how to actually manage a decent project, What are best practices and how to plan a project even? This is all great advice. Need literally all of it as I was struggling with getting past the beginner-intermediate level stuff.
@wolfisraging
@wolfisraging 3 жыл бұрын
seriously man, the best angular practices I've found yet. Thanks a ton. I bet if you start some coding playlist (like tutorials or projects and stuff) you'd definitely get a whole lot of subscribers. And I would love to see that. :)
@neverbenbetter8225
@neverbenbetter8225 3 жыл бұрын
Thank you. This is encouraging and gives me ideas.
@DrJimmyBob
@DrJimmyBob 3 жыл бұрын
Excellent video. You deliver good information quickly and you're examples do a great job of grounding the concepts. Keep it up!
@neverbenbetter8225
@neverbenbetter8225 3 жыл бұрын
That’s encouraging. Thank you so much!
@saidalachgar8837
@saidalachgar8837 Жыл бұрын
Good explanation with a well arranged presentation, thank you 🙏
@kishorkadavil550
@kishorkadavil550 3 жыл бұрын
Great tutorial. You definitely deserve more...
@chrisfelix9065
@chrisfelix9065 2 жыл бұрын
Your videos, not just this one deserves a love not just a like ❤️
@MrCristianocampos
@MrCristianocampos Жыл бұрын
Great tips!
@thesweetvishu
@thesweetvishu 3 жыл бұрын
good one...
@rembautimes8808
@rembautimes8808 2 жыл бұрын
Thanks for this video, just subscribed
@giorgimerabishvili8194
@giorgimerabishvili8194 3 жыл бұрын
Just discovered this great channel! Thank you!
@neverbenbetter8225
@neverbenbetter8225 3 жыл бұрын
Thank you so much. I hope you enjoy what’s ahead.
@ianvink
@ianvink 2 жыл бұрын
Can you provide the source code? I'd love to look thru the example. Excellent video.
@DASsoulstryker
@DASsoulstryker Жыл бұрын
Starting to watch ur vids, not many people talking about angular
@NuncNuncNuncNunc
@NuncNuncNuncNunc Жыл бұрын
There a few ways to be even more efficient. First, use angular's built-in AsyncPipe. I think most of the unsubscribe issues brought up here will be eliminated. This will especially eliminate the need for a superclass just to unsubscribe. That superclass can be dangerous because it relies on child classes to call the super method of life cycle hooks if the child overrides them. Second, use a data service instead of a data component. Each of the components using the data service can, in their ngOnInit method, map the common data to the form they need with RxJS pipe/map. Again no subscription needed just use the new observable with an AsyncPipe in the template. This pattern will also eliminate the need to have special functions like @6:30 to update data as it can all be handled in the map function.
@frontend3409
@frontend3409 Жыл бұрын
AD3. 10:45 so every new subscription in parent component you should set to the same this.anotherSubscription property?
@saiprathap9550
@saiprathap9550 Жыл бұрын
Hey hi 👋 it's amazing 🤩 tips , can u plz make videos on state management in Angular ngrx & when to go for it
@user-bc1qs7rj9v
@user-bc1qs7rj9v Жыл бұрын
Can you please share the example of all 5 tips?
@durairajrajendiran9725
@durairajrajendiran9725 Жыл бұрын
Hi @NeverBenBetter Hi this is Durairaj Rajendiran, if I use data services and receive data through subscription of observables. If I unsubscribe what will happen? Is the connection only closed or data also cleared from the stack?
@MyName-ur3ir
@MyName-ur3ir Жыл бұрын
thanks for this stream! would love to see source code.
@BetoShiver
@BetoShiver Жыл бұрын
Thanks for this. Tip 3# is gold! can you please share the source code for hat unsubscriber class?
@zebcode
@zebcode 3 жыл бұрын
Please could you consider breaking this up into chapters? I know how to lazy load modules but I want to hear the other ideas without having to try and find them by scanning the video timeline.
@neverbenbetter8225
@neverbenbetter8225 3 жыл бұрын
Noted. I will keep this in mind, moving forward.
@zebcode
@zebcode 3 жыл бұрын
@@neverbenbetter8225 any chance you could apply it to this video retospectily?
@YouTikki
@YouTikki Жыл бұрын
18:59 Here you use getter functions - but aren't these run each time Angular does change detection? Wouldn't that mean that they're essentially called all the time?
@ToJak91
@ToJak91 Жыл бұрын
If they are used from the template, yes. And they are pretty hard to spot when you're just looking in the code aswell.
@piresashwin
@piresashwin 3 жыл бұрын
Thank your for these amazing tips. Will it be possible to explain in more details the DataWidget component ideas as well as the applications of it. I have a question. If a parent has to pass data which is being used by 2 child components. will the observable/service make calls to the API twice? For E.g. DataComponent D1, D2, D3 -> Widget 1 Tracking: D1, D2 -> Widget 2 Tracking D1,D3 D1,D2,D3 - Are fetched using REST APIS Will D1 Rest API be Called for Widget 1 and Widget 2?
@neverbenbetter8225
@neverbenbetter8225 3 жыл бұрын
There is only ever one instance of a service (unless it is a component service, in which case it is attached to the individual components and “lives” with the component. You have to specify component services as such, so otherwise there is only ever one.) As a result, everything in the service’s constructor will only execute once. So for example, if you retrieve data from your backend, even if that data is used by two or a thousand components, there will only be one call. I am always using my services to subscribe to data streams. That means a transaction is occurring anytime a change is made on the server. Because the subscription is in the service, I am being very efficient by doing this. On the other hand, if I subscribed to those streams in my components, that would be disastrous for my server fees. If I had a thousand components and EACH component independently retrieved changes as they were made... I bet you see where I am going. I hope I answered your question. Thanks for the specific idea for a new video. I will add it to the queue!
@piresashwin
@piresashwin 3 жыл бұрын
@@neverbenbetter8225 Thanks for the reply. I am incorporating your tips in my current application. It would be great if you can make a video explanation for the same.
@hansschenker
@hansschenker 3 жыл бұрын
You could also choose angular Templates to do the different Form Types (event type ...) and when the user select an event type you load that Template! see: kzbin.info/www/bejne/aITRh6uGmq-Xrac
@Semma_Bore
@Semma_Bore 4 жыл бұрын
Can you make a video on unsubscribe technique which you used..
@neverbenbetter8225
@neverbenbetter8225 4 жыл бұрын
hari prasad thanks for letting me know that’s something you would be interested in. Yes. I can do that.
@Semma_Bore
@Semma_Bore 4 жыл бұрын
@@neverbenbetter8225 Yeah.. That was interesting because i am using a little complex way of unsubscribing.
@CodingAbroad
@CodingAbroad Жыл бұрын
Soon we’ll stamp out React. Angular will take the world
@timelimitexceeded0
@timelimitexceeded0 2 жыл бұрын
Can see a lot of bootstrap 😂😂
@BrutalHumorSocial
@BrutalHumorSocial Жыл бұрын
They're not called "life-style hooks" 🤣
@robottrainer
@robottrainer 2 жыл бұрын
Actually, the best practice is to make any data transfer into a service component. Also, you don't extend classes for just a function, you extend a class for the variable inheritance you use, like a button. You will extend the button class to add button types for ex. Another point, for your unsubscribe, it's highly suggested to push to a subject, not unsubscribe the subscription raw, you destroy them on page change, you don't want to destroy all the subscriptions like what he did. You could have also avoided all the super nonsense, with just inputs and outputs between components, which would have saved you more lines of code, and useless function tests you didn't need to write. Lastly, you didn't need to worry about async changes, if you just used ngonchanges lifecycle hook with inputs between components, subscribe to that to refresh the data displayed on the view. You basically just wrote an es6 typescript app using angular default webpack config, change title xD.
@neverbenbetter8225
@neverbenbetter8225 2 жыл бұрын
What is wrong with “unsubscribing raw”?
RXJS Operators Explained with Examples: switchMap, map + More
9:07
NeverBenBetter
Рет қаралды 29 М.
Smart Sigma Kid #funny #sigma #comedy
00:40
CRAZY GREAPA
Рет қаралды 23 МЛН
Red❤️+Green💚=
00:38
ISSEI / いっせい
Рет қаралды 86 МЛН
WORLD'S SHORTEST WOMAN
00:58
Stokes Twins
Рет қаралды 100 МЛН
Top 10 Tips For New Angular Developers
21:18
Program With Erik
Рет қаралды 50 М.
How To Make Angular Code More Reusable
19:14
Decoded Frontend
Рет қаралды 27 М.
3 Tips To Write Clean Code (from an ex-Google software engineer)
17:12
Clément Mihailescu
Рет қаралды 193 М.
Angular Code Review Best Practices - Refactoring From Junior Level to Senior
27:10
Angular Performance Optimization using Pure Pipes (2020, Advanced)
13:00
Decoded Frontend
Рет қаралды 30 М.
Why Firebase? HOW to determine whether YOU should use FIREBASE
8:29
RXJS Real Examples - 1.  How to Use Observables to Manage User Data
23:02
The easier way to code Angular apps
9:54
Joshua Morony
Рет қаралды 65 М.
Smart Sigma Kid #funny #sigma #comedy
00:40
CRAZY GREAPA
Рет қаралды 23 МЛН