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

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]

Szklenár Ferenc very well said :)

[@randomuser66438]

I took the other way. Learned jQuery and then obsessed with its inner workings. Anyways, you're right. Understanding underlying tech is well important.

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

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]

Watching this demo made me incredibly grateful we have modern front end frameworks.

[@weroro]

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.

[@TreeLuvBurdpu]

The hardest thing about framework free is finding the right search term to find the topic by. I'VE BEEN LOOKING FOR THIS!

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

[@bilalafridi4721]

lol I never feel this much difference between higher order functions before. The example is awesome

[@johnnymeza5454]

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.

[@marcusbrsp]

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]

yes. you can use dom manipulation to set all the attributes seo will look out for

[@klutch4198]

This video changed everything!!!

[@sumanth3036]

What is that music at the starting?

[@barathadhithya2442]

Hey Warren. Awesome presentation. Where could I find the source code ?

[@evans8245]

SVELTE - not as bad as you'd think

[@luserdroog]

Nit: in the "blank canvas" code, a self-closing tag like "" is valid only in XML, not HTML. It should be "".

[@damienretro4416]

Nice. I'm getting a bit tired of "framework-hell"

[@nullcheque]

Saaaaaame

[@BrunoCodeman]

So say we all

[@tiagoneto8658]

Great Talk! You did great!

[@nullcheque]

7:50 where tf is the booming laughter to this... someone cue the laugh track!

[@hsider]

Great talk, frameworks should be minimal and let you implement functionalities that one actually need, svelte my be the way to go.

[@Oswee]

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]

Why would you say that?

[@Oswee]

@@blessdarah1256 What?

[@blessdarah1256]

@@Oswee Please help me understand how querySelector is very inefficient?

[@Oswee]

@@blessdarah1256 I guess, you don't need that.

[@blessdarah1256]

@@Oswee Okay...

[@adavizealiyu4811]

awesome talk

[@self-purpose]

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]

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 ?

[@obetreyes9187]

amazing, in my opinion would be great if you use document fragments to append elements to the dom

[@carval51]

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

[@ryanolson7]

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]

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

[@howuseehim]

I am not doing all that

[@aidanbenbow6682]

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!

[@theoligarchist1503]

down voted for trading one mess with another i.e. Functional Sickness.

[@nandoflorestan]

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]

True. Also, the guy is reading the whole time. :D

[@justfly1984]

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]

@Seth House haha

[@davide4607]

This comment makes no sense whatsoever, literally zero.

[@randomuser66438]

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]

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