I built a JavaScript framework

[@austinnar4494]

I built a JS framework with a rich abstraction layer that automatically picks the best JS framework to use under the hood

[@devinlauderdale9635]

underrated comment

[@wlockuz4467]

return frameworks[Math.floor(Math.random() * frameworks.length)]

[@DaneRossenrode]

Definitely underrated.

[@emilianoruizcarletti9381]

@@wlockuz4467 That code produces either a StackOverflow or an OutOfMemoryError

[@memelord4639]

@@emilianoruizcarletti9381 no

[@UliTroyo]

Well, time to update our resumes with 5+ years of Flamethrower experience.

[@satkotech]

Actually, make that 8 years...

[@friedpizza262]

I came here for this comment!

[@xxwafflez]

Please stop beating this joke to the ground every video

[@dabbopabblo]

@Auracle lmfaoooo that jokes underrated asf

[@rehmanarshad1848]

😂😂😂🤣🤣🤣

[@realkyunu]

"Two things are infinite: the universe and the amount of JavaScript frameworks" - Albert Einstein

[@MrMudbill]

But the universe being infinite would already imply that there are infinite JavaScript frameworks... Unless they transcend the universe itself...

[@1ns1ght_l1]

@@MrMudbill Universe written on plain JS by indian programmer

[@andrejcop3229]

"And i am not so sure about the universe"

[@gund_ua]

But all JS frameworks as well as the universe itself depend on node_modules folder which makes it infinitely bigger than the infinite universe.

[@themasterofdisastr1226]

@@gund_ua Well, that is what the Metaverse is for

[@zaks7]

"Last thing the world needs is another JavaScript framwork" - Jeff 2021

[@primetime645]

You either die a hero or live long enough to see yourself become a villain

[@nullpointer1755]

@@primetime645 or you live enough to make your own javascript famework

[@YuriG03042]

these days, are you even an actual javascript developer if you don't put a framework on your portfolio?

[@StemLG]

@@YuriG03042 you guys have a portfolio ?

[@jacobprudent4354]

This isn't the hero that we asked for, but it is the hero we deserve.

[@domnantas]

"I wouldn't recommend using it in production until it reaches Alpha" 10/10

[@ericsigne6575]

Henceforth, to prove you're a JS developer, you'll need to show us the framework you've built

[@iandrake4683]

Which one?

[@decqyd]

in 100 seconds

[@Flashduke]

Let's see Paul Allen's Framework

[@crowdozer]

Job listings bout to read "years of experience is irrelevant, but you must have built at least 5 blazingly fast frameworks"

[@dinhanhx]

but I don't have 5 years experience in my 2-years-old frameworks

[@thenimalu]

You have mastered balancing humour and informative content!

[@simonswiss]

Yeo, agreed!

[@jackytengd2728]

Totally agree :) lol

[@yanukadeneth99]

ikr!

[@WalterKimaro]

I was coming here to say exactly this.

[@turolretar]

Where do you see humour?

[@blovio]

We're watching a web designer decline into insanity in real time on this channel.

[@chucky29949]

insanity? is that a framework?

[@shubhamjain1328]

@@chucky29949 lmao

[@gadsanchez4929]

Better question should be, have you seen a non-insane JS dev?

[@yeikiu]

@@gadsanchez4929 null

[@csbnikhil]

@@yeikiu undefined

[@attackemartin]

These videos lead me directly into burnout without even having to work as a frontend dev fulltime

[@henriquefinger935]

I'm looking at it from the safety of Backend and still am afraid.

[@razvanbuliga4395]

Fck not even started learning html properly but I deff should have not watched this video😂😂 was I motivated before? He'll Yeah. Do I think I have pretty much no chance to land a job in the future? Well... I'm already 28 maybe by the time I'm 40 is doable 😆. Back to the warehouse 🙆‍♂️🤦

[@Hefss]

"I created a framework that creates frameworks" - a javascript deceloper

[@KManAbout]

Node

[@u4yk]

It's a framework factory.

[@blyxyas]

"as ASAP as possible" was a highlight of this video and of my life

[@jaromirprochazka3544]

Your videos are always such rabbit holes to me. I just watch it like 3 times, then google half of the terms bumping into new ones in the process, and after like 3 hours of this I feel like after a half year of University. Thanks a lot for your work❤

[@vojtechstrnad1]

Many great jokes in this video, but this is my personal favorite: "Currently, Flamethrower is in meme status and I wouldn't recommend using it in production until it reaches alpha."

[@etchay]

It's only a matter of time before employers ask you to show the JavaScript Frameworks you have created.

[@arielbatista7ify]

Yeah, that happened in my previous company, the manager hired a tech lead because he created an open source lib that no body needs

[@hbobenicio]

This is my framework: 1. PickOne(React, Angular, Vue, Svelte) # based on company/team bias/affinity 2. Cry a bit in the middle of the project asking why you didn't choose other js framework 3. Keep developing. It will work at the end of the day. 4. Cheers. You avoided all this insane JS fatigue

[@DampeS8N]

Yes. Been doing this sort of thing on the elder scrolls online site for the last year. It has been amazing.

[@TheFreshMakerHD]

Y’all hiring? I got 10 years flamethrower experience

[@satyampatel3713]

@@TheFreshMakerHD need atleast 12 years of experience

[@ruffianeo3418]

In my last web project I used the highly underappreciated "no framework". It's lean and mean and does what I tell it to do. 0 learning curve, too. And flexible! And it will not be out of fashion next week, too, because no one but me knows, it exists.

[@xerotolerant]

Is that by the same guys who did VanillaJS?

[@WhoEvenFilms]

Is it blazingly fast tho

[@MindlessMegaLawl]

Based

[@ChaoticNeutralMatt]

You mad man. This is amazing, both the explanation, and your library.

[@ayushvyas3401]

Can't wait to add 10yrs of flamethrower experience on my resume

[@wadecodez]

Made something like this 6 years ago but it didn't use fancy web components, svelte, or intersection observer. Never found a good use case for it because it always fetched entire pages. In reality, I only needed to fetch sections of pages so I abandoned it then got to lazy to make something better. Cool to see you make something similar!

[@vaibhavnayak3416]

You either use an existing framework or understand js enough to create another js framework - Sun Tzu.

[@acfreeman]

This video truly is as ASAP as possible.

haha :D was looking for this comment

[@ja2347]

I think you can achieve something similar using HTMX and Alpine JS, and am not surprised if no one here head of HTMX. It's awesome!

[@i_am_feenster]

Love this! Web Components have got to be one of the most underutilized and underappreciated html features out there.

[@demwunz]

Web components was an awesome choice, I'm so happy to see it given the respect it deserves

[@AwesomeTingle]

every video you make is top notch my dude, you deserve your success

[@jomy10-games]

This video was not only funny, it also brought up a lot of interesting information. well done!

[@Vedant-M]

Every time I feel confident about my web dev knowledge I watch Jeff's videos and realise how much I have to learn yet 🤕

[@dougrudolph5400]

this video made feel noticed having gone down a nearly identical rabbit hole. I basically did the exact same thing for my site, but used lit instead of svelte. I also decided to do use my own hacked together SSG - which isn't too many extra steps if you consider that every language has it's own package for a mdx transpiler. my SSG is like 100 lines of python. nice vid

[@rne1223]

Mind sharing the github link?

[@j4878]

Ehe, nice!

[@ninjaasmoke]

honestly, for the last few projects I've defaulted to nextjs. it's soo easy to use, deploy and has most of the stuff i need prebuilt.

[@switchlyrics.]

I appreciate how u tackle those chanllenges man,but most devs don't know the power of web components and lightdom also they don't know how other frameworks are memory intensive in state management,and bad in seo.

[@ayushvyas3401]

Waiting for the "Can't wait to add 10yrs of flamethrower experience on my resume" comment.

[@u4yk]

No one did it, so you had to do it yourself.

[@ayushvyas3401]

@@u4yk lmao did it ironically though

[@blueguy5588]

I've been doing this for a minute now and hadn't heard of web components, thanks!

[@falkon8307]

Beta developer: uses already made framework but has to trade off alot of features. Giga chad developer: makes his own framework.

[@justindacosta3d]

Really interesting concept, the prefetch seems like that could consume a massive amount of bandwidth though if you are looking at every possible link. Maybe some way to tag certain links as priority.

[@DaneRossenrode]

Surely it's only prefetching the HTML? Most HTML pages are a tiny fraction of the size of a single image these days, so it's probably still less bandwidth than un-optimised images.

[@jomy10-games]

Was thinking the same, but if it’s not prefetching images, etc, it shouldn’t be that big of a deal

[@aufkeinsten7883]

@@DaneRossenrode Wouldn't it defeat the purpose of improving load times if it only prefetched HTML? Genuine question

[@ichizos9615]

Yes! For desktop users I think it would be better to prefetch it on hover and/or focus events. Considering they are small it should give enough time to start and prefetch most of the needed stuff without prefetching pages that will not be used. For mobile users it would be a little bit slower because the focus event will just run before the click but at least it won't be eating the data if someone is on their mobile internet (not wifi).

[@dabbopabblo]

@@DaneRossenrode hmm when you put it that way it certainly doesn’t seem like as big as a problem for bandwidth, still it could be optimized by maybe predicting the mouse movement by adding its delta between frames to its current position then only prefetching what’s under that position. To be possible that would probably require all links/buttons being added to an array and looped over in 1 second intervals while the user has focus on the tab(for calculating bounds). Which all might be an over complication for not too big of an issue tho

[@alfredogonzalez9420]

I knew the mad man would do it eventually hahah haven't finished the video but already loved it.

[@rubenuijtde]

Did you just say “as as soon as possible as possible” at 4:50? Great explanation by the way!

[@YuriG03042]

he did, on purpose

[@iandrake4683]

Like ASP pages?

[@killerdroid99]

I am currently learning vue and it feels good

[@petedejager]

Loving it too. And Vite.

[@JamesBoullion]

This is the way

[@LC-hd5dc]

@@JamesBoullion "the way" doesn't exist

[@Sasha-vt6jy]

javascript is the most perfect language

[@abdulkaderjeelani]

@Ethan Minja I see that (Sasha's) as a sarcastic comment:)

[@YuriG03042]

@Ethan Minja absolutely r/wooosh

[@Sasha-vt6jy]

@@YuriG03042 lmao

[@cherubin7th]

Tasks for the students: Create your own JS framework, publish it, and promote it on hacker news and Reddit. Then you finished the class.

[@offroaders123]

Gotta say, you are legendary man! Another great video, and even a new JavaScript framework 😂

[@MartinOmander]

It seems to me search engines are pretty good at rendering dynamic content these days. At least that's what the traffic numbers tell me for the dynamic web apps I have in production right now. I even added static HTML to one of them as an experiment. It resulted in no change in search engine traffic. So you may not need server side HTML anymore for SEO. It could help with speed, though. As always, measure the impact in your app before you pick one solution over another.

[@patrickmuenster]

It was super exciting, entertaining, informative and made me feel like I just don't know anything, which leads me right to the edge of depression whereupon I sit down crying at my PHP backend with vanilla JS frontend

[@Bruceylancer]

Nothing wrong with that, as long as it gets the job done. Especially if you need SEO, if you want to use those modern fancy JS frameworks, the only option you have is to build your backend in JS on Node.js. But if you want to keep your backend in any other language, the only option you have for the frontend is vanilla JS. I constantly ask myself, how the web dev industry ended up in this ridiculous state, but it is what it is.

[@unsuspicious_youtuber]

@@Bruceylancer not at all true…

[@Bruceylancer]

@@unsuspicious_youtuber Care to clarify?

[@resqiar]

@@Bruceylancer Why they must use Node? They are loosely coupled between frontend and backend. I use different backend technologies like go and ktor with React and Sveltekit, and it works perfectly fine.

[@Bruceylancer]

@@resqiar I was saying it's the case if you need your website to have good SEO. Of course, you can build a backend API in any language and build your frontend on React/Angular/Vue/whatever. But it would be bad for SEO. So in this case you need SSR, which is only achievable with Node.js frameworks on the backend, so you're stuck with server-side JS. Or you can do the SSR the old-fashioned way, but in this case, you're stuck with vanilla JS on the frontend.

[@abuzarthanvi1381]

As a guy trying to learn JavaScript as a beginner i find this highly informative yet i didn't understand shit 👍🏼

[@r0nni34]

“You either die a hero or you live long enough to see yourself become the villain.”

[@jonathanaspeling9535]

Epic always puts a smile on my dial and some contemplation in the bank

[@ichizos9615]

Frameworks are great until you need anything more than they give you. I don't know why we can't just use different specialized libraries and pick based on the needs... Also: Web Components are awesome!

[@skejeton]

finally someone gets it

[@GreyDeathVaccine]

@@skejeton In PHP world we have PHP Framework Interop Group that creates all kind of standards for called PSRs (basically Interfaces) for things like cache, dependency container, http middleware. There are plenty of frameworks, but the self respecting ones implement this interfaces so you can juggle http-middlewares from different frameworks. 🙂

[@antheus_s]

Web Components are pure gold. It became hard for me to work on anything that doesn't use or support them because I fell in love with the decoupled nature of them and being able to use them everywhere by just writing a wrapper for the framework.

[@OnzeQubit]

This video inspired me to create my own js framework.

[@undivided_unified]

network/server guy - barely understand any of it but your injection of dry wit and sarcasm makes me watch every video and i pretend i understand while havin a good chuckle

[@robertholtz]

That was awesome on so many levels!🔥Perfect mix of useful info and sharp hilarity. “Status: Meme” 🤣

[@toppojaiwant]

That "I just need to get this project done ASAP" after Next.js hit me hard in the heart.

[@arcan762]

"JavaScript is a nearly usable programming language" *said everybody ever

[@ChrisIsOutside]

bloody hell the sarcasm is so thickly layed on I barely notice when you say things like "I just need to get this project done as ASAP as possible" hilarious

[@approxahmed]

Now waiting for the "Flamethrower in 100 seconds" video.

[@aliphian]

Can't wait for v2 when you introduce hooks.

[@nickxidis9571]

Probably heresy to say here but, Hotwire and Turbo has brought me back to Rails for my latest project. It’s been very productive switch from JS frameworks.

[@p__wing]

This resonates loudly with my exact use case. I couldn't be happier right now.

[@react--]

This video is in-line with what I'm doing right now. I have a frontend that fetches it's content from a CMS. Jeff have you tried looking at Payload CMS? Would love to see a video on this, it just released.

[@overholted]

I'm curious about Payload as well.

[@micycle8778]

i get this vibe. i'm getting that "i should make my own programming language" vibe right now.

[@stevemcwin]

Hey Jeff, could you do a video on the Nim programming language please?

[@GreyDeathVaccine]

He have one now 🙂

[@stevemcwin]

@@GreyDeathVaccine I am very aware of that, but thanks anyways!

[@OscarPickerill]

Great. Just had a chat with the bosses and we have now moved out entire production over to Flamethrower

[@romanmunar]

I think you can use url+query, and cookies/headers to manage state between routes on the server using astro and still get static html output.

[@madhououinkyoma]

But there’s some state info that you don’t just want stored on the client side, like authentication

[@romanmunar]

​@@madhououinkyoma Agree. not just authentication, but everything that you don't want the client to override. Makes my point of doing everything on the server more applicable. Just use sessions with secure and same-site set to lax.

[@t3dotgg]

This video feels like a 1 year summary of my dumb Twitter posts but in the best possible way

[@bigmistqke]

I would really like to see more content on CMS integration in your project, and preferably some choices that you can actually self-host instead of locking into an expensive service (like payload). It's such an underdocumented field in webdev and everybody needs it.

[@lasfito]

Yes! I myself was facing this issue the last month.

[@theDurman]

Ever look at Directus? There's also some similar self hosted cms out there. Prismic has a decent free tier as well. I also believe Netlify has a cms too.

[@samuelschwager]

Flamethrower sounds like something that I would actually use for my personal site since I'm already using Hugo.

[@keharacek]

It unironically sounds really interesting 🤔And who wouldn't like to play with a flamethrower? 🔥😎

[@TJDeez]

The "as ASAP as possible" really did it for me btw

[@Jax4492]

One wise man said - "Use Angular. Just use Angular and hope for future versions to get better."

[@CyberQuickYT]

Basically all answers to the flow chart could be svelte kit. It's easy to extend to use markdown like in a static site generator, or write "plain" HTML with components (DRY). It's also easy to hydrate the content (done automatically if there's any client side JS). You can also write endpoints so it can also serve as a backend for your app. And has great SEO and performance. It took me less than an hour to setup markdown rendering in sveltekit for my blog site using mdsvex, which also allows embedding svelte components inside markdown (like mdx which is the same for react).

[@jogoeire]

Hilarious and extremely educational. Love the explanation of frameworks. That must have taken some time. Good luck with FlamerThrower

[@canepaper967]

Definitely the world needed another javascript framework so thank you for that.

[@joelferraz8649]

Well I am doing thing very wrong I guess. I don't use any framework what I do is in the server I build the html fragments using the string template of javascript what made things very similar to php. Then I use a async request to get this fragments and add to the page conteiner with elemt.innerHTML, after that I use a function to update all the event listeners that matter. The page works as any react etc website, only the content that need to change is changed, using this with a good service work makes things to work like a app.

[@seanpaulson9098]

Wish I found this video before I built a SSR framework glad I did it. I learned a lot

[@evilgibson]

@Fireship @4:17 you are forcing a full page reload because you have disabled the cache in the dev tools though. you are telling the site to expire all content each time you send a request.

[@madhououinkyoma]

I doubt it’s just this simple

[@user-wc1sm8cj8s]

man, you're truly a legend

[@Phatrikko]

I'm tempted to redo my personal site with this. I'm a developer but went with WordPress because I didn't want to mess with all the little details. I'd love to use markdown sprinkled with custom stuff to make something from scratch!

[@OzzyTheGiant]

Nowadays, with a static site generator and a headless CMS, it's much easier to build static websites with custom layouts. I feel they just need more exposure. Would like to see Wordpress decline in favor of this method.

[@professor_ozzy]

He said Blazingly fast! I didn't know FireShip was a man of culture as well.

[@rubenheymans1988]

can you also explain why you went from angular to not angular at all ?

[@OzzyTheGiant]

Can't speak for Fireship but I stopped using Angular for many reasons: - File Hell - even though Single File Components technically are supported, it's not to my liking (prefer Vue html tags over Component config properties). - I want to use Vite for all projects now. Angular uses webpack with a heavily configured build system that feels like it takes too much time to learn. - Template syntax is ok but I feel like third-party components force you to write a lot of boilerplate stuff instead of using sensible props and a Slots API like Vue. For example, using Angular Material's Table component required a lot of explicit table row, custom table cell, and secondary row definitions written in html through the use of directives, but in Vuetify, that same table only requires the component itself and just a few modifier properties, and maybe one slot element; the size of the resulting HTML on Vuetify was significantly smaller. Everything else in Angular is pretty good, but I do think its time they slimmed down on these features.

[@bennymeister]

"As ASAP as possible" = "As As Soon As Possile As Possible"

[@davidaragundy4605]

A framework to pick a framework 🤓

[@drsensor]

You forgot one think. "Render everything in "!. That's the true way for making everything highly interactive and accessibility killer.

[@mohamedanwer7312]

As always, a very enjoyable video!

[@simonswiss]

The first minute is action packed!

[@willinton06]

Oh shit it was true

[@StephenGillie]

My serverless JS framework gives you numerous options. Use a pre-built page engine, write your own page engine based on client-side routes (window.location), write JSON instead of HTML as a SPA file, or drop in a sitelet. Works great to build content in static sites, rehydrate them with new data, build full SPA sites, or build SPA-ish sites that reload from the server on every link. Being JSON means SPA files easily support variable replacement, letting you template sites in a way that can't be done with static HTML. Jupyter notebook display support is in beta, and markdown & YAML support is coming soon. Table tools make building tables or adding two columns of data easier in HTML as in Excel or Sheets. And webRequest, an xhRequest wrapper, now has an easy to use caching function, so you can cache data calls - control how often you request data from the server while presenting a faster response to your users. Sparational.js - make faster websites faster.

[@alexxx4434]

The guy unironically promotes yet another JS framework?

[@what-the-hack]

WHAT DID YOU DO? Did you just gave a guide how to create JS frameworks??? You really want to see the world burn.. 🔥

[@OzzyTheGiant]

If only people put this much effort into other languages that need a larger ecosystem (Dart, Go, etc.)

[@vicradon]

HolyOS

[@Julio.Berina]

You had 1 kid, had another kid, now you have 10 kids. I hope you get that funding for your JS framework

[@DottoXD]

another one

[@malbert834]

@Ankha Rule 34 +1

[@Fireship]

🥇 Gold!

[@olmrgreen1904]

Awesome work! I'm absolutely going to test your flamethrower out! :D

[@CypElf]

Can't wait to see job offers asking for 10 years of experience in flamethrower

[@ghetsisschwarz7205]

Idk guys, I have been in WebDev for over 10 years now and I work with vanilla JS and jQuery still - I code Web-Apps with live data fetching in this style and it seems to be working fine :D

[@ThePrimeagen]

Currently deploying Netflix via flamethrower

[@sonkew826]

since this video went up there have been four pull requests on flamethrower, and probably another one since i started typing. guess it's time to program an automated PR review system. good luck man!

[@barbapapazes]

The Content module from Nuxt is just awesome to use Git as a CMS

[@EugeneBuvard]

I what thinking that too. Nuxt-content would work for his project too wouldn't it?

[@Lanadelray42]

“As asap as possible” - As as soon as possible as possible

[@santiagoguastavino346]

You've come full circle Billy. Congrats!

[@finey_otieno]

Do a video on appwrite the open source firebase alternative!

[@dBradbury]

No joke, I've bounced back and forth so many times between Hugo and Svelte (Or before that, Vue and 11ty) trying to deal with this exact problem. Absolutely going to check it out. And love the shade at the beginning and end.