I built a JavaScript framework

Learn how to choose a fullstack JavaScript framework by asking questions about your web app in a flow chart. If you're crazy enough, you can even build your own JS framework from scratch like me.
#js #webdevelopment #programming
🔗 Resources
Flamethrower on GitHub github.com/fireship-io/flamet...
Web Components developer.mozilla.org/en-US/d...
JS frameworks comparison • I built the same app 1...
🔥 Get More Content - Upgrade to PRO
Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
🎨 My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font
🔖 Topics Covered
- What is a JS framework?
- How to choose a JS framework?
- Top frameworks for web development
- Tools to build a web app
- How to make static sites faster

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

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

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

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

[@crowdozer3592]

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

[@jacktrusler6506]

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

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

[@hewrchelsea6622]

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

[@KManAbout]

Node

[@u4yk]

It's a framework factory.

[@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 🙆‍♂️🤦

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

[@ayushvyas3401]

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

[@blyxyas]

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

[@ChaoticNeutralMatt]

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

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

[@vaibhavnayak3416]

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

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

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

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

[@jomy10-games]

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

[@acfreeman]

This video truly is as ASAP as possible.

[@AndrasGyarmati]

haha :D was looking for this comment

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

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

[@AwesomeTingle]

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

[@offroaders123]

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

[@i_am_feenster]

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

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

[@robertholtz]

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

[@jogoeire]

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

[@olmrgreen1904]

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

[@r0nni34]

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

[@alfredogonzalez9420]

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

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

[@blueguy5588]

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

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

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

[@georgeyoung108]

I'm curious about Payload as well.

[@p__wing]

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

[@Linkplay9]

Always love to see Svelte in your vids ;)

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

[@falkon8307]

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

[@JoelSilva-gk4hq]

Yo this was an amazing video. Thank you so much. The definition of "edutainment" content: Educational yet entertaining!

[@TJDeez]

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

[@Sasha-vt6jy]

javascript is the most perfect language

[@ethanminja]

Nah, MANY languages are faster than JS, still a good language though AND, many languages are just AS FAST, AS PORTABLE and AND simpler syntax, still a good lang, powers the FUCKING INTERNET

[@abdulkaderjeelani]

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

[@ethanminja]

@@abdulkaderjeelani OOOOFFFFFF, didn't notice, sorry for the party poopin' hehe...

[@YuriG03042]

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

[@jonathanaspeling9535]

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

[@emmanuelidusuyi7089]

Jeff always cracks me up. Amazing video.

[@demwunz]

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

[@kalebayana6275]

Same!

[@OnzeQubit]

This video inspired me to create my own js framework.

[@toppojaiwant]

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

[@timmeehan2365]

Amazing ! I didn't expect you would actually build a library. For SSR and SSG, let's not forget that Angular also has solutions with Angular Universal ;)

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

[@mohamedanwer7312]

As always, a very enjoyable video!

[@cookiemonster208]

I like the idea of making web components a first class citizen in your framework. This potentially makes it very flexible. I also like that you built it with content management in mind. This is one of the issues I have with many other JS frameworks I have tried. I keep having to build content management solutions, or integrate a headless CMS which doesn't quite fit. I would much rather work with markdown files. Good for you! I hope the framework evolves beyond meme status.

[@user-wc1sm8cj8s]

man, you're truly a legend

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

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

[@maxijonson]

New framework? Great time to get these early PRs in guys! 😎 Get that activity graph glowing!

[@canepaper967]

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

[@keharacek]

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

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

[@budkin]

Amazing as always!

[@chrys003]

Listening and watching your videos is so fun. You should prolly start a podcast

[@arcan762]

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

[@ahmedmudkip]

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

[@fredbluntstoned]

Literally what I have been looking for, for ages!

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

[@stevemcwinboi914]

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

[@GreyDeathVaccine]

He have one now 🙂

[@stevemcwinboi914]

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

[@simonswiss]

The first minute is action packed!

[@the_ebdm]

Jeff, you are a madman and I love you for it

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

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

[@FaizanAnwerAli]

In Astro, you could use build a single-page app. You will need to implement react or vue or any other framework. Redirect all links to index.html. You can also use SSR as well. Astro is the game changer literally. Aside from the fact that it uses JSX syntax instead of MD syntax.

[@jasdeepmultani9157]

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

[@Jax4492]

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

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

[@Shadownrun2]

6:10 dude!!! yeeesss I was thinking of this yesterday, like even the most basic things like a navbar, that could be easily be done with html and css is being built with a big and bulky JS framework, it feels like we are walking backwards

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

[@davidaragundy4605]

A framework to pick a framework 🤓

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

[@seanpaulson9098]

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

[@samuelschwager]

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

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

[@willinton06]

Oh shit it was true

[@paulwhiterabbit]

that's interesting, were closer to a cms solution without needing a compute server and database while still be fully dynamic and seo friendly. I hope that page transition become a full-fledged feature supported by all major browsers.

[@dl0.0lb]

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.

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

[@vicradon]

HolyOS

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

[@SlamenCoster]

You always find ways to get me laughing or smiling with each video. This one ended with the hilarious -gotta feed my family somehow - lol

[@DottoXD]

another one

[@malbert834]

@Ankha Rule 34 +1

[@Fireship]

🥇 Gold!

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

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

[@cookiemonster208]

I'm so sick of JavaScript. Been coding in it professionally for the past 15 years. Typescript helps. But not enough. I'm very grateful for Web Assembly, I can now bring better languages to my web dev. (Let me also say that I'm also grateful to JavaScript because it has helped me to pay my bills, and productivity is better than perfection).

[@LC-hd5dc]

my guess is web assembly is gonna be the next hot garbage of the next 2 decades (user pov)

[@santiagoguastavino346]

You've come full circle Billy. Congrats!

[@mostafahamad8054]

good work king, love you

[@abuzarthanvi1381]

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

[@kurtesimo]

I’m going with you! Love it! 👌🏻

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