Тёмный

Framework Free - Functional HTML Rendering and State Management in Vanilla JS - Drew Warren 

UtahJS
Подписаться 6 тыс.
Просмотров 28 тыс.
50% 1

Опубликовано:

 

29 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 57   
4 года назад
You spoke beautifully :). A couple of developers I met say "I'am coding in the X framework" meanwhile they have basic misunderstandings about the programming language in which the framework was written. I think the first step is NOT to learn a framework, the first step is to learn and understand the language itself. Competence begins here i think and then there are no pointless debates about which framework is better.
@assetogram
@assetogram 4 года назад
Szklenár Ferenc very well said :)
@randomuser66438
@randomuser66438 4 года назад
I took the other way. Learned jQuery and then obsessed with its inner workings. Anyways, you're right. Understanding underlying tech is well important.
4 года назад
@@randomuser66438 Totally understand you and nothing wrong with it. You know people need an entry point into programming (and into anything), otherwise he/she would never have started at all. Personally i started JavaScript also with jQuery as did many other programmers at the time. jQuery is an awesome tool, nothing wrong with it, someone did it to solve some problem. It's an evolution. Later comes someone who is inspired by that idea and figure out a better solution to that problem. I note that over time, more problems arise and these are no longer solved by something that was not born. So when jQuery lived its golden age, it was an awesome tool. JavaScript was very cumbersome to perform most simple tasks. In contrast, jQuery could solve the same thing in a few lines. We need something to start with at all and accept that we won't be able to play among the pros instantly. When we start to learn a new thing then we are amateurs at this point, we can not avoid this by choosing some fancy modern framework or programming language. We have to go through a couple of bad days and a couple of sleepless nights especially at the beginning, until we realize that a comma is missing from that line :) :) :) (Based on real story :)). We become professional by continuing to learn and gaining deeper and deeper understanding of the desired subject. Let me quote from Neil deGrase Tyson: "Knowing enough to think you are right, but not knowing enough to know you are wrong." The eternal amateurs who do not continue to learn will always be convinced that they are right and know better than you. The only problem is that there are still very few truly outstanding professionals in any field. And we stand there as a beginner in front of a lot of "pros" and listen (or read) in amazement to the bullshit they "know" to be true. So there is nothing wrong with making mistakes along the way while becoming more and more professional. Most people don’t make a “mistake” because they’re “professional” right away and know they’re right.
@bartfalzarano9385
@bartfalzarano9385 2 года назад
So if you want to program professionally, you definitely should start with a frame work. If you want to build some janky website with jsx injection vulnerabilities then that’s a personal project.
@cartersteinhoff1994
@cartersteinhoff1994 3 года назад
Watching this demo made me incredibly grateful we have modern front end frameworks.
@TreeLuvBurdpu
@TreeLuvBurdpu 7 месяцев назад
The hardest thing about framework free is finding the right search term to find the topic by. I'VE BEEN LOOKING FOR THIS!
@weroro
@weroro 11 месяцев назад
15:13 It's easy. As a rule of thumb, innerHtml is slow because the browser needs to reparse the html (even though it is being set to '' ). element.removeChild , however, directly modifies the DOM without any parsing needed. Therefore removeChild is faster.
@bilalafridi4721
@bilalafridi4721 4 года назад
lol I never feel this much difference between higher order functions before. The example is awesome
@johnnymeza5454
@johnnymeza5454 4 года назад
Thanks for making this video. I'm using Web Components with just vanilla JS to build a dashboard UI. I like the idea of having a render function where you pass in your state. I've come across the problem of needing a store for my state, like Redux. I have some ideas how I might make it but I'm also trying to see what other devs are doing.
@chrisanderson687
@chrisanderson687 Год назад
At 14:12: there is a bug: in sayBonjour(), you cannot set the outerHTML on newHello because it has no parent node. It needs to be appended to the container first, then you can set outerHTML.
@self-purpose
@self-purpose 2 месяца назад
everyone should make their own framework in vanilla js , you're already dependent on the js language , why become dependent on 3rd party libraries and companies? i don't see why one would love more abstraction, as a programmer you interact with hardware and manipulate it so don't forget that, the C language is still the best representation of what's happening under the hood
@zorro161
@zorro161 10 дней назад
This is why I am here..I just don’t feel like I am learning when I use frameworks.. they are good for getting a job but I think they make me forget about a lot of programming concepts and I don’t want to be a “React engineer ” lol I want to be a js programmer or a PHP programmer you get me ?
@damienretro4416
@damienretro4416 3 года назад
Nice. I'm getting a bit tired of "framework-hell"
@nullcheque
@nullcheque 2 года назад
Saaaaaame
@BrunoCodeman
@BrunoCodeman 2 года назад
So say we all
@marcusbrsp
@marcusbrsp 4 года назад
I like this presentation because it presents an alternative to using a framework, which is pretty much a given wherever you look these days. I too am an advocate for framework free web development. I would've loved to see some findings about this approach when it comes to SEO. Are search engines better these days at reading JavaScript than it was 5-10 years ago?
@brymstoner
@brymstoner 2 года назад
yes. you can use dom manipulation to set all the attributes seo will look out for
@hsider
@hsider 3 года назад
Great talk, frameworks should be minimal and let you implement functionalities that one actually need, svelte my be the way to go.
@klutch4198
@klutch4198 4 года назад
This video changed everything!!!
@luserdroog
@luserdroog Год назад
Nit: in the "blank canvas" code, a self-closing tag like "" is valid only in XML, not HTML. It should be "".
@tiagoneto8658
@tiagoneto8658 4 года назад
Great Talk! You did great!
@sumanth3036
@sumanth3036 8 месяцев назад
What is that music at the starting?
@evans8245
@evans8245 4 года назад
SVELTE - not as bad as you'd think
@adavizealiyu4811
@adavizealiyu4811 4 года назад
awesome talk
@barathadhithya2442
@barathadhithya2442 Год назад
Hey Warren. Awesome presentation. Where could I find the source code ?
@nullcheque
@nullcheque 2 года назад
7:50 where tf is the booming laughter to this... someone cue the laugh track!
@aidanbenbow6682
@aidanbenbow6682 9 месяцев назад
Great talk! I'm also trying to make the world a better place through learning JS in order to help me achieve my ultimate goal of sharing with people about the hope and transformation Jesus makes in your life if you repent and believe in him!
@carval51
@carval51 3 года назад
I still use vanilla but the things I love about framework is how easy it is to make smaller component instead of big component. I really not care about spa factor but those component breakdown is great and make things faster. for beginner though I agree vanilla is always the best to explore before. react suck though it just n1 made by fb but when you use it, it super suck angular worst jquery eh okay I guess vue the best so far so easy to make anything with it flutter never try it but heard it good
@obetreyes9187
@obetreyes9187 3 года назад
amazing, in my opinion would be great if you use document fragments to append elements to the dom
@ryanolson7
@ryanolson7 4 года назад
I like the idea of the talk. However, there were some things I noticed that I thought were misleading/wrong. 1. Using the map function on an array does not mean you're using a higher-order function. This is a higher-order function in use with a map. (dumb example but it shows it -- notice the function returning a function so that you can access something else using JavaScript closures). function convert(converter) { return function (item) { return converter.convert(item); }; } const converter = { convert(item) { return item.reverse(); } }; items.map(convert(converter)); 2. Having a function does renders some things to the DOM doesn't inherently make things "functional programming". You start to get into some functional concepts / patterns in state management but I didn't see any pure functions in your slides. Even your state management had side-effects. On the plus side, I do think that the errors are much better with vanilla javascript. Readability is huge. It's nice to be able to learn from others' websites.
@GVale-ss6nq
@GVale-ss6nq 4 года назад
Most array methods (if not all) are high order functions themselves, like map, filter etc. There's a good explanation about it on Eloquentjavascript.net on the high order functions section
@Oswee
@Oswee 4 года назад
Why he is not using DocumentFragments to inject whole branches? And i thought that querySelector is one of the most inefficient way to select nodes.
@blessdarah1256
@blessdarah1256 4 года назад
Why would you say that?
@Oswee
@Oswee 4 года назад
@@blessdarah1256 What?
@blessdarah1256
@blessdarah1256 4 года назад
@@Oswee Please help me understand how querySelector is very inefficient?
@Oswee
@Oswee 4 года назад
@@blessdarah1256 I guess, you don't need that.
@blessdarah1256
@blessdarah1256 4 года назад
@@Oswee Okay...
@howuseehim
@howuseehim 29 дней назад
I am not doing all that
@theoligarchist1503
@theoligarchist1503 4 года назад
down voted for trading one mess with another i.e. Functional Sickness.
@justfly1984
@justfly1984 5 лет назад
If you are lonely warrior, and do not care about accessibility, people who has no access to new computers or phones, performance, SEO, or typescript, or npm package ecosystem advantages, or any stuff which brings values to frameworks and libraries developed by community, this video is for you.
@klutch4198
@klutch4198 4 года назад
@Seth House haha
@davide4607
@davide4607 4 года назад
This comment makes no sense whatsoever, literally zero.
@randomuser66438
@randomuser66438 4 года назад
If you really don't care about those with cheaper hardware and connection, you should use a shiny framework that does a billion computations a second and adds 10 extra seconds in load time.
@carval51
@carval51 3 года назад
@@randomuser66438 I would argue that framework do help in some cases, they make coding and maintaining code is easier. vannila is great I would say but maintaining website in vanilla like for example changing footer would be soo annoying rather than using simple framework.
@nandoflorestan
@nandoflorestan 3 года назад
You know, chastising React for being too big for the honorable purpose of writing Hello World on a green background... is hardly fair. I can honestly say I learned nothing from this talk.
@ninjaplavi
@ninjaplavi 3 года назад
True. Also, the guy is reading the whole time. :D
Далее
Algorithms and JavaScript for Beginners - Tyler Clark
23:51
How is this Website so fast!?
13:39
Просмотров 720 тыс.
Ryan Dahl introduces JSR at DevWorld 2024
29:13
Просмотров 115 тыс.
You don't need a frontend framework
15:45
Просмотров 130 тыс.
How to create a Web Component using Vanilla JS
17:45
Просмотров 68 тыс.
The Weird History of JavaScript
12:09
Просмотров 1,2 млн