Silly video! Every job is too easy if you ignore all problems. The problems are: cyclic dependencies, mutually exclusive states, promises, garbage collection. This video says nothing about that.
I don't think it's silly at all. The whole point of it is to build your own framework as a learning exercise (and not to come up with the next framework to rival React, etc). Learning by building is a great strategy. The issues you raise are all valid though and I don't see why this "toy framework" can't be used as a platform/ starting point for experimenting with solutions to those issues.
Sure thing! I'm planning more in depth topics this year. By the way, you can check my Explained playlist ( ua-cam.com/play/PLi0P3bAJieris4x636iTMg3Ti3N7-aTH6.html ) where I'm going through some of these concepts in more detail.
Haha I love this. I did something similar, wrote a framework to help me learn how they work. I ended up writing a framework leans on a compiler to convert templating syntax into the equivalent React code (preact) and it worked really well. At compile time you can statically modify property mutations to getters/setters that trigger re-renders. I am now writing a lighting fast bundler in Rust and will add my framework compiler (transformer) as a Rust plugin for that bundler haha. No one will use it, but I have learned so much in the process
Feature Requests:- 1. Lifecycle methods. 2. :if, :else-if and :else directives, so that the element would get mounted and unmounted from the dom rather than display block or none. (Idea, may be use for this like how alpine.js does.) 3. how to perform enter, exit animation in element mount and unmount.
Happy New Year! I was just wondering you've started 2024 by building a framework. So I can't imagine how significant it's going to be for the rest of the year!
My personal opinion, which is very personal, is that after 15+ years of webdev, web standards is awesome BUTTTT, it's also the slowest moving object in the room. I deeply miss Macromedia Flash, which had type support, built in documentation and comments, build API etc... as someone who wants to build immersive, different and interesting interfaces... web standards will leave you wanting in this domain. That's not to say it's not amazing for highly accessible web documents... or run of the mill displaying of semantic data. Frameworks aren't trying to keep secrets from you, it's solving problems you might not even have run into yet, and if that's the case for you, that's great 🙌
@@loquek Great points, particularly the slow moving nature of standards! I don't literally mean framework vendors are literally keeping secrets. It's just that as the need for frameworks and build steps is reduced, it's not in their interest to advertise it.
This is a good question! There are no "official" guidelines for this. In general, I follow these two rules: - When working with "special" objects that are in one way or another reactive. RxJS Observables usually end in a $. State is a proxy object containing a collection of signals. This is why I decided to use the $ in this case. - Maybe more common is to use $ variables when working with DOM elements. This clearly denotes that a specific variable or collection contains DOM elements.
@@tapabratapalchowdhury507 Ah, got it. Yes! Honestly, in my opinion these are a must. While not obvious at first, while your experience grows and you'll be involved in more complex work, having a very good grasp of these building blocks will be really useful!
@@awesome-coding I know Array and matrices ,Strings , searching , sorting and recursion will this good for freshers and can you please tell me in which topics cover dsa to get good packages ?
Hello. Can you please recommend a good video crash course for Java? I wrote C/C++ and TypeScript a lot. So do not need to listen for 4 hours what a variable is. Just sans something fast, maximum information in smallest time about Java. So that I can learn fundamentals quickly.
Hey! If you have experience with C/ C++ learning Java will be a breeze. The way I usually dive into a new language is to look at some live coding sessions. I have a few small ones on my channel where I'm looking at the "core features": - ua-cam.com/video/B1STms-n3yU/v-deo.html (Java) - ua-cam.com/video/MovjVwGa9F4/v-deo.html (Kotlin) By the way, if you want to get into the JVM world, I suggest you look at Kotlin (a lot of job openings, and way more expressive than Java). Here is me building a REST API with Kotlin and Ktor - ua-cam.com/video/xKmLZ9cIWss/v-deo.html Now, regardless of your previous experience, if you really want to go deep into the language, I always recommend this book - www.amazon.com/Head-First-Java-Brain-Friendly-Guide-dp-1491910771/dp/1491910771 Hope this helps :)
Well an improvement would be to avoid so many loops on the DOM elements, at 3:40 I can count 6 redundant loops that could be converted to 1 using the Arrays.reducer function
The purpose of using these array methods is to make the code more readable. He could also just write the code imperatively to improve performance, but it would create less maintainable code, which is not a very high priority for an educational video and unideal for most codebases.
It's a bit weird to me that your intention is correct for performance purpose, but the end solution is purely wrong. "Array.reduce" as the name suggests is to compute/reduce to a value from the array. From the code itself with multiple filter/forEach, it's clear that it's not directly computing anything as an end result, and it's also trying to do something above the regular array function. So the solution is to use the regular "for loop" instead of messing around array function. Using "reduce" is an abuse and less performant in the worst case. Also, he's doing a lot of [...el.attirbutes] for unknown reason, this part is highly skeptical for me, and it seems like the video author misunderstood about the use case of immutability (I blame "React" here :P). I could be wrong though. Maybe he did it for good reason.
@@doc8527 Hey! I'm glad you mentioned [...el.attributes] - this is a really good question. So the idea is this: el is a DOM element. el.attributes is of type NamedNodeMap which doesn't have access to your usual filter / forEach / map array methods. So by using [...el.attributes] I am destructuring the Node Map intro an actual array which has access to those nice to use methods. I'm sure that this is not the most efficient / optimal approach, and you can iterate NamedNodeMaps directly, but it's not as clean and nice as the implementation I did in my opinion.
I did for a while, but it was not really taking off, and it took time for me to maintain it. You can reach out to me via Twitter at any time - twitter.com/AwesomeCodeClub When the community will grow a bit more, I'll try to bring back the discord server as well.
i feel so sorry for the people who actually think this developper life is a good life ... i am a web developper and i am only doing it to have a chance to leave the 3rd world , if i was born in the 1st world , i would never enter this field
Silly video! Every job is too easy if you ignore all problems. The problems are: cyclic dependencies, mutually exclusive states, promises, garbage collection. This video says nothing about that.
Relax man. he's not building the next React competitor😂
I don't think it's silly at all. The whole point of it is to build your own framework as a learning exercise (and not to come up with the next framework to rival React, etc). Learning by building is a great strategy. The issues you raise are all valid though and I don't see why this "toy framework" can't be used as a platform/ starting point for experimenting with solutions to those issues.
@@aotearoa74 Plain JS is a fair competitor of React.
now you need to build a vscode extention for it
This is actually a really good idea for a video - Thank you!
Unneeded. Make a neovim plugin
Well it should be an LSP plugin.
I'd love a more detailed video teaching these concepts in detail if possible. Very useful, thank you
Sure thing! I'm planning more in depth topics this year.
By the way, you can check my Explained playlist ( ua-cam.com/play/PLi0P3bAJieris4x636iTMg3Ti3N7-aTH6.html ) where I'm going through some of these concepts in more detail.
+1 A video of a deep-dive into signals would be interesting too:)
@@aotearoa74 FYI - I have a Signals in depth look video you might find useful: ua-cam.com/video/bUy4xiJ05KY/v-deo.html
Haha I love this. I did something similar, wrote a framework to help me learn how they work. I ended up writing a framework leans on a compiler to convert templating syntax into the equivalent React code (preact) and it worked really well. At compile time you can statically modify property mutations to getters/setters that trigger re-renders.
I am now writing a lighting fast bundler in Rust and will add my framework compiler (transformer) as a Rust plugin for that bundler haha.
No one will use it, but I have learned so much in the process
This sounds really interesting!
I'd love to see a repo with your work if you are willing to share it.
That is so fucking cool
I myself went ahead to build NixixJS when I couldn't understand how use state in React worked
Feature Requests:-
1. Lifecycle methods.
2. :if, :else-if and :else directives, so that the element would get mounted and unmounted from the dom rather than display block or none. (Idea, may be use for this like how alpine.js does.)
3. how to perform enter, exit animation in element mount and unmount.
All good points - thank you!
@@awesome-coding Hope you'd teach all these in your upcoming video.
Wow, amazing video! You really know the basics or core concepts of a language, everything was well explained and I think it is awesome, thanks!
Glad you liked it! I really appreciate your comment! Thank you!
Happy New Year! I was just wondering you've started 2024 by building a framework. So I can't imagine how significant it's going to be for the rest of the year!
The DOM apis and web standards good enough now. This is the secret that frameworks don't want you to figure out. It's not evil, it's just inertia.
Good point!
My personal opinion, which is very personal, is that after 15+ years of webdev, web standards is awesome BUTTTT, it's also the slowest moving object in the room. I deeply miss Macromedia Flash, which had type support, built in documentation and comments, build API etc... as someone who wants to build immersive, different and interesting interfaces... web standards will leave you wanting in this domain. That's not to say it's not amazing for highly accessible web documents... or run of the mill displaying of semantic data.
Frameworks aren't trying to keep secrets from you, it's solving problems you might not even have run into yet, and if that's the case for you, that's great 🙌
@@loquek Good points!
By the way:
- Tell me you are wold without telling me you are old
- "I deeply miss Macromedia Flash"
😂✌
@@loquek Great points, particularly the slow moving nature of standards!
I don't literally mean framework vendors are literally keeping secrets. It's just that as the need for frameworks and build steps is reduced, it's not in their interest to advertise it.
We need more of this, Awesome video ❣
More to come! Thank you for your feedback!
exploration is not bad, exploration is the journey, enjoy the journey
100%
I AM going to use ur framework
In production
😂
@@Sibearian_😂😂😂
😂 i am already excited about the countless nights i am going to be spending on fixing production failures
@vaisakhkm783 have a little faith in my skills!
Awesome video
Oh and Happy new year 🎉
Thank you!
Happy New Year!!!
i would use MutationObserver, since other frameworks and libraries or just vanilla js can change the dom
Interesting - definitely an avenue worth exploring.
Brilliant! Now we need a router.
And a state manager, and client side rendering, and a few more useful tings
2024 , year of the micro framework
I actually believe this will be a trend - everybody is eager to clean up their act and remove bloat and clutter.
Would be great to make tutorial how to make minimal framework
0:10 "...nobody will end up using it"
Famous last words.
😂😅
when do you prefix variables with dollar sign?
This is a good question! There are no "official" guidelines for this.
In general, I follow these two rules:
- When working with "special" objects that are in one way or another reactive. RxJS Observables usually end in a $. State is a proxy object containing a collection of signals. This is why I decided to use the $ in this case.
- Maybe more common is to use $ variables when working with DOM elements. This clearly denotes that a specific variable or collection contains DOM elements.
Awesome framework :)
Thank you!
Vue had it right all along
I'm not sure if "all along applies" since they had 3 major releases, all of them containing braking changes, but I get what you are saying.
Just a minute; your voice is so simillar to Cars On (Asphalt 9 - Unite Legends)... So you are that same person?
I am not :D
Awesome's Awesome videos
Thank you!
is really dsa necessary to learn ?
dsa?
@@awesome-coding Data Structures and Algorithms
@@tapabratapalchowdhury507 Ah, got it.
Yes! Honestly, in my opinion these are a must. While not obvious at first, while your experience grows and you'll be involved in more complex work, having a very good grasp of these building blocks will be really useful!
@@awesome-coding I know Array and matrices ,Strings , searching , sorting and recursion will this good for freshers and can you please tell me in which topics cover dsa to get good packages ?
How DARE you say that I wont use your framework >:(
😂
You can "create" your own framework. But you cannot support it. And you cannot use it in business. Welcome to real life.
It looks like there are very few things you can actually do in the real life 😅
Hello. Can you please recommend a good video crash course for Java?
I wrote C/C++ and TypeScript a lot. So do not need to listen for 4 hours what a variable is. Just sans something fast, maximum information in smallest time about Java. So that I can learn fundamentals quickly.
I'd recommend building a project instead. The syntax isn't all that different from C++ in many ways so I don't think you'll have problems.
Hey! If you have experience with C/ C++ learning Java will be a breeze.
The way I usually dive into a new language is to look at some live coding sessions.
I have a few small ones on my channel where I'm looking at the "core features":
- ua-cam.com/video/B1STms-n3yU/v-deo.html (Java)
- ua-cam.com/video/MovjVwGa9F4/v-deo.html (Kotlin)
By the way, if you want to get into the JVM world, I suggest you look at Kotlin (a lot of job openings, and way more expressive than Java).
Here is me building a REST API with Kotlin and Ktor - ua-cam.com/video/xKmLZ9cIWss/v-deo.html
Now, regardless of your previous experience, if you really want to go deep into the language, I always recommend this book - www.amazon.com/Head-First-Java-Brain-Friendly-Guide-dp-1491910771/dp/1491910771
Hope this helps :)
Have you just recreated HTMX in front of our eyes?
All in under 200 lines of code! :))
Well an improvement would be to avoid so many loops on the DOM elements, at 3:40 I can count 6 redundant loops that could be converted to 1 using the Arrays.reducer function
The purpose of using these array methods is to make the code more readable. He could also just write the code imperatively to improve performance, but it would create less maintainable code, which is not a very high priority for an educational video and unideal for most codebases.
Thank you for the suggestion!
It's a bit weird to me that your intention is correct for performance purpose, but the end solution is purely wrong. "Array.reduce" as the name suggests is to compute/reduce to a value from the array. From the code itself with multiple filter/forEach, it's clear that it's not directly computing anything as an end result, and it's also trying to do something above the regular array function. So the solution is to use the regular "for loop" instead of messing around array function. Using "reduce" is an abuse and less performant in the worst case.
Also, he's doing a lot of [...el.attirbutes] for unknown reason, this part is highly skeptical for me, and it seems like the video author misunderstood about the use case of immutability (I blame "React" here :P). I could be wrong though. Maybe he did it for good reason.
@@doc8527 Hey! I'm glad you mentioned [...el.attributes] - this is a really good question.
So the idea is this:
el is a DOM element. el.attributes is of type NamedNodeMap which doesn't have access to your usual filter / forEach / map array methods. So by using [...el.attributes] I am destructuring the Node Map intro an actual array which has access to those nice to use methods.
I'm sure that this is not the most efficient / optimal approach, and you can iterate NamedNodeMaps directly, but it's not as clean and nice as the implementation I did in my opinion.
great video, but try to create a detail one, or try to teach each block or step a little bit more.
It's on my list! Thank you for your suggestion!
Do you have a discord server?
I did for a while, but it was not really taking off, and it took time for me to maintain it.
You can reach out to me via Twitter at any time - twitter.com/AwesomeCodeClub
When the community will grow a bit more, I'll try to bring back the discord server as well.
hey, I like your videos. But could u use other "stock" videos? Always seeing the same ones in your videos feels lazy
Thanks for your feedback!
I'll renew the batch in 2024 ✌️
good job man, awesmoe, inspired me to do the same
Thank you!
Dude why this video is not getting enough traction !!!!!
That's what I'm always asking myself after every new video 😅
i feel so sorry for the people who actually think this developper life is a good life ... i am a web developper and i am only doing it to have a chance to leave the 3rd world , if i was born in the 1st world , i would never enter this field
😅 in all honesty it has its highs. After all, it's a pretty easy lifestyle.