What I Learned From Building a Framework

GitHub Repo - github.com/awesome-club/not-a...
Building a minimalistic JS Framework.
💬 Topics:
- What are the basics of JS Frameworks;
- Rendering;
- Signals and Reactivity;
- Frontend best practices;
- How to build a JS library from scratch;
- Frontend dev mistakes to avoid.
📖 Blog Article - www.awesome.club/blog/2024/wh...
⭐ The code is heavily inspired by:
- htmx.org/
- alpinejs.dev/
- www.solidjs.com/
- vanjs.org/
Join us - / @awesome-coding
#javascript

Пікірлер: 91

  • @ceving865
    @ceving8656 ай бұрын

    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.

  • @abdirisakmohamed5664

    @abdirisakmohamed5664

    6 ай бұрын

    Relax man. he's not building the next React competitor😂

  • @aotearoa74

    @aotearoa74

    6 ай бұрын

    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.

  • @Rivederchee

    @Rivederchee

    3 ай бұрын

    @@aotearoa74 Plain JS is a fair competitor of React.

  • @0xPanda1
    @0xPanda16 ай бұрын

    now you need to build a vscode extention for it

  • @awesome-coding

    @awesome-coding

    6 ай бұрын

    This is actually a really good idea for a video - Thank you!

  • @greyshopleskin2315

    @greyshopleskin2315

    6 ай бұрын

    Unneeded. Make a neovim plugin

  • @hanzofuma

    @hanzofuma

    6 ай бұрын

    Well it should be an LSP plugin.

  • @mayanksharma6927
    @mayanksharma69276 ай бұрын

    I'd love a more detailed video teaching these concepts in detail if possible. Very useful, thank you

  • @awesome-coding

    @awesome-coding

    6 ай бұрын

    Sure thing! I'm planning more in depth topics this year. By the way, you can check my Explained playlist ( kzread.info/head/PLi0P3bAJieris4x636iTMg3Ti3N7-aTH6 ) where I'm going through some of these concepts in more detail.

  • @aotearoa74

    @aotearoa74

    6 ай бұрын

    +1 A video of a deep-dive into signals would be interesting too:)

  • @awesome-coding

    @awesome-coding

    6 ай бұрын

    @@aotearoa74 FYI - I have a Signals in depth look video you might find useful: kzread.info/dash/bejne/lImtltqiepObe7w.html

  • @DavidAlsh
    @DavidAlsh6 ай бұрын

    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

  • @awesome-coding

    @awesome-coding

    6 ай бұрын

    This sounds really interesting! I'd love to see a repo with your work if you are willing to share it.

  • @mich_thedev

    @mich_thedev

    5 ай бұрын

    That is so fucking cool

  • @mich_thedev

    @mich_thedev

    5 ай бұрын

    I myself went ahead to build NixixJS when I couldn't understand how use state in React worked

  • @harshilparmar9076
    @harshilparmar90766 ай бұрын

    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!

  • @lopsanggurung5870
    @lopsanggurung58706 ай бұрын

    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.

  • @awesome-coding

    @awesome-coding

    6 ай бұрын

    All good points - thank you!

  • @lopsanggurung5870

    @lopsanggurung5870

    6 ай бұрын

    @@awesome-coding Hope you'd teach all these in your upcoming video.

  • @luis96xd
    @luis96xd6 ай бұрын

    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!

  • @awesome-coding

    @awesome-coding

    6 ай бұрын

    Glad you liked it! I really appreciate your comment! Thank you!

  • @seggsfault
    @seggsfault6 ай бұрын

    We need more of this, Awesome video ❣

  • @awesome-coding

    @awesome-coding

    6 ай бұрын

    More to come! Thank you for your feedback!

  • @TechBuddy_
    @TechBuddy_6 ай бұрын

    Awesome video Oh and Happy new year 🎉

  • @awesome-coding

    @awesome-coding

    6 ай бұрын

    Thank you! Happy New Year!!!

  • @nomadshiba
    @nomadshiba6 ай бұрын

    i would use MutationObserver, since other frameworks and libraries or just vanilla js can change the dom

  • @awesome-coding

    @awesome-coding

    6 ай бұрын

    Interesting - definitely an avenue worth exploring.

  • @narrei666
    @narrei6666 ай бұрын

    when do you prefix variables with dollar sign?

  • @awesome-coding

    @awesome-coding

    6 ай бұрын

    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.

  • @ryanleemartin7758
    @ryanleemartin77586 ай бұрын

    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.

  • @awesome-coding

    @awesome-coding

    6 ай бұрын

    Good point!

  • @loquek

    @loquek

    6 ай бұрын

    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 🙌

  • @awesome-coding

    @awesome-coding

    6 ай бұрын

    @@loquek Good points! By the way: - Tell me you are wold without telling me you are old - "I deeply miss Macromedia Flash" 😂✌

  • @ryanleemartin7758

    @ryanleemartin7758

    6 ай бұрын

    @@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.

  • @vaisakhkm783
    @vaisakhkm7836 ай бұрын

    Awesome framework :)

  • @awesome-coding

    @awesome-coding

    6 ай бұрын

    Thank you!

  • @naranyala_dev
    @naranyala_dev6 ай бұрын

    exploration is not bad, exploration is the journey, enjoy the journey

  • @awesome-coding

    @awesome-coding

    6 ай бұрын

    100%

  • @MikeNugget
    @MikeNugget6 ай бұрын

    Would be great to make tutorial how to make minimal framework

  • @Sibearian_
    @Sibearian_6 ай бұрын

    I AM going to use ur framework

  • @Sibearian_

    @Sibearian_

    6 ай бұрын

    In production

  • @joseph0x45

    @joseph0x45

    6 ай бұрын

    😂

  • @Don_XII

    @Don_XII

    6 ай бұрын

    @@Sibearian_😂😂😂

  • @vaisakhkm783

    @vaisakhkm783

    6 ай бұрын

    😂 i am already excited about the countless nights i am going to be spending on fixing production failures

  • @awesome-coding

    @awesome-coding

    6 ай бұрын

    @vaisakhkm783 have a little faith in my skills!

  • @vpetryniak
    @vpetryniak6 ай бұрын

    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.

  • @finnbarm

    @finnbarm

    6 ай бұрын

    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.

  • @awesome-coding

    @awesome-coding

    6 ай бұрын

    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": - kzread.info/dash/bejne/dGWHts-sXdGZqbg.html (Java) - kzread.info/dash/bejne/f6OqzLiwd8Sfdpc.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 - kzread.info/dash/bejne/qn-hrrxyk6y9o9Y.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 :)

  • @Septumsempra8818
    @Septumsempra88186 ай бұрын

    Brilliant! Now we need a router.

  • @awesome-coding

    @awesome-coding

    6 ай бұрын

    And a state manager, and client side rendering, and a few more useful tings

  • @vaughan6562
    @vaughan65626 ай бұрын

    2024 , year of the micro framework

  • @awesome-coding

    @awesome-coding

    6 ай бұрын

    I actually believe this will be a trend - everybody is eager to clean up their act and remove bloat and clutter.

  • @tapabratapalchowdhury507
    @tapabratapalchowdhury5076 ай бұрын

    is really dsa necessary to learn ?

  • @awesome-coding

    @awesome-coding

    6 ай бұрын

    dsa?

  • @tapabratapalchowdhury507

    @tapabratapalchowdhury507

    6 ай бұрын

    @@awesome-coding Data Structures and Algorithms

  • @awesome-coding

    @awesome-coding

    6 ай бұрын

    @@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!

  • @tapabratapalchowdhury507

    @tapabratapalchowdhury507

    6 ай бұрын

    @@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 ?

  • @evccyr
    @evccyr6 ай бұрын

    Awesome's Awesome videos

  • @awesome-coding

    @awesome-coding

    6 ай бұрын

    Thank you!

  • @roooooooooooooooooooooooooooot
    @roooooooooooooooooooooooooooot6 ай бұрын

    Do you have a discord server?

  • @awesome-coding

    @awesome-coding

    6 ай бұрын

    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.

  • @allan_archie
    @allan_archie6 ай бұрын

    Vue had it right all along

  • @awesome-coding

    @awesome-coding

    6 ай бұрын

    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.

  • @wlockuz4467
    @wlockuz44676 ай бұрын

    0:10 "...nobody will end up using it" Famous last words.

  • @awesome-coding

    @awesome-coding

    6 ай бұрын

    😂😅

  • @anyadatzaklatszjutub
    @anyadatzaklatszjutub6 ай бұрын

    good job man, awesmoe, inspired me to do the same

  • @awesome-coding

    @awesome-coding

    6 ай бұрын

    Thank you!

  • @napapt
    @napapt6 ай бұрын

    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

  • @johndoe5113

    @johndoe5113

    6 ай бұрын

    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.

  • @awesome-coding

    @awesome-coding

    6 ай бұрын

    Thank you for the suggestion!

  • @doc8527

    @doc8527

    6 ай бұрын

    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.

  • @awesome-coding

    @awesome-coding

    6 ай бұрын

    @@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.

  • @uuu12343
    @uuu123436 ай бұрын

    How DARE you say that I wont use your framework >:(

  • @awesome-coding

    @awesome-coding

    6 ай бұрын

    😂

  • @jediikk
    @jediikk6 ай бұрын

    Have you just recreated HTMX in front of our eyes?

  • @awesome-coding

    @awesome-coding

    6 ай бұрын

    All in under 200 lines of code! :))

  • @Dino-Kupinic
    @Dino-Kupinic6 ай бұрын

    hey, I like your videos. But could u use other "stock" videos? Always seeing the same ones in your videos feels lazy

  • @awesome-coding

    @awesome-coding

    6 ай бұрын

    Thanks for your feedback! I'll renew the batch in 2024 ✌️

  • @anuragannu8930
    @anuragannu89306 ай бұрын

    great video, but try to create a detail one, or try to teach each block or step a little bit more.

  • @awesome-coding

    @awesome-coding

    6 ай бұрын

    It's on my list! Thank you for your suggestion!

  • @coolemur976
    @coolemur9766 ай бұрын

    You can "create" your own framework. But you cannot support it. And you cannot use it in business. Welcome to real life.

  • @awesome-coding

    @awesome-coding

    6 ай бұрын

    It looks like there are very few things you can actually do in the real life 😅

  • @vigneshwarrv
    @vigneshwarrv4 ай бұрын

    Dude why this video is not getting enough traction !!!!!

  • @awesome-coding

    @awesome-coding

    4 ай бұрын

    That's what I'm always asking myself after every new video 😅

  • @waelltifi-2023
    @waelltifi-20236 ай бұрын

    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

  • @awesome-coding

    @awesome-coding

    6 ай бұрын

    😅 in all honesty it has its highs. After all, it's a pretty easy lifestyle.