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

Показать описание

From UtahJS Conf 2019 in Sandy, Utah

React, Vue, JQuery, Angular(2)... There are a lot of libraries and frameworks available to web developers today that provide a myriad of benefits and solutions, but they all have a learning curve.

This talk will teach you how to accomplish all of this without having to import any packages, learn any libraries, or set up any framework environments using JavaScript functions that are natively available and supported in all major browsers.

Рекомендации по теме

Комментарии

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

cartersteinhoff

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.

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

TreeLuvBurdpu

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.

weroro

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.

chrisanderson

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

bilalafridi

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.

johnnymeza

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?

marcusbrsp

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

luserdroog

SVELTE - not as bad as you'd think

soaring_dove

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

hsider

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

barathadhithya

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

nullcheque

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

damienretro

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.

Oswee

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

obetreyes

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

self-purpose

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

carval

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();
}
};

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.

ryanolson

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!

aidanbenbow

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

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

WebComponents Will Outlive Your JavaScript Framework | Prime Reacts

I made a realtime web framework

SSR web components without frameworks - Vanilla Node Js TUTORIAL

Everything You NEED to Know About WEB APP Architecture

Web Component creation without a framework

Should you use HTML, CSS, JavaScript or Frameworks for your next Website?

HTML CSS and Javascript Website Design Tutorial - Beginner Project Fully Responsive

DeepSeek R1: FREE AI codes better than OpenAI o1! #deepseek

I built 10 web apps... with 10 different languages

Live-Coding Web Apps (PWAs)—Without Frameworks #usetheplatform #nomigrations

Top 6 CSS Frameworks to Learn in 2025 | Best CSS Framework for Web Development | Edureka

Qwik can do what other frontend frameworks can't (Miško Hevery)

FREE Web+API Hosting on Expo

Backend web development tutorial for beginners | How to create a website? Part 2 [ login page ]

SSR Web Components with Vanilla Node JS - NO FRAMEWORK

HTML WYSIWYG editor | | Top 5 Free Html editor with JavaScript framework

Best CSS libraries and frameworks 2023

React Native in 100 Seconds

#91: Learning Bootstrap 4 from w3schools.com | Bootstrap! the best Framework of HTML CSS JavaScript

Tailwind in 100 Seconds

Vanilla JS: You Might Not Need a Framework by Max Firtman | Preview

HTML CSS Full Course 2025 | HTML CSS Tutorial | Web Development Course | HTML CSS | Simplilearn

Django Rest framework in 20 second