I built a JavaScript framework
VloĆŸit
- Äas pĆidĂĄn 15. 08. 2022
- 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 - VÄda a technologie
I built a JS framework with a rich abstraction layer that automatically picks the best JS framework to use under the hood
underrated comment
return frameworks[Math.floor(Math.random() * frameworks.length)]
Definitely underrated.
@@wlockuz4467 That code produces either a StackOverflow or an OutOfMemoryError
@@emilianoruizcarletti9381 no
"Last thing the world needs is another JavaScript framwork" - Jeff 2021
You either die a hero or live long enough to see yourself become a villain
@@primetime645 or you live enough to make your own javascript famework
these days, are you even an actual javascript developer if you don't put a framework on your portfolio?
@@YuriG03042 you guys have a portfolio ?
This isn't the hero that we asked for, but it is the hero we deserve.
Well, time to update our resumes with 5+ years of Flamethrower experience.
Actually, make that 8 years...
I came here for this comment!
Please stop beating this joke to the ground every video
@Auracle lmfaoooo that jokes underrated asf
đđđđ€Łđ€Łđ€Ł
"Two things are infinite: the universe and the amount of JavaScript frameworks" - Albert Einstein
But the universe being infinite would already imply that there are infinite JavaScript frameworks... Unless they transcend the universe itself...
@@MrMudbill Universe written on plain JS by indian programmer
"And i am not so sure about the universe"
But all JS frameworks as well as the universe itself depend on node_modules folder which makes it infinitely bigger than the infinite universe.
@@gund_ua Well, that is what the Metaverse is for
"I wouldn't recommend using it in production until it reaches Alpha"
10/10
Henceforth, to prove you're a JS developer, you'll need to show us the framework you've built
Which one?
in 100 seconds
Let's see Paul Allen's Framework
Job listings bout to read "years of experience is irrelevant, but you must have built at least 5 blazingly fast frameworks"
but I don't have 5 years experience in my 2-years-old frameworks
We're watching a web designer decline into insanity in real time on this channel.
insanity? is that a framework?
@@chucky29949 lmao
Better question should be, have you seen a non-insane JS dev?
@@gadsanchez4929 null
@@yeikiu undefined
You have mastered balancing humour and informative content!
Yeo, agreed!
Totally agree :) lol
ikr!
I was coming here to say exactly this.
Where do you see humour?
"I created a framework that creates frameworks" - a javascript deceloper
Node
It's a framework factory.
These videos lead me directly into burnout without even having to work as a frontend dev fulltime
I'm looking at it from the safety of Backend and still am afraid.
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 đââïžđ€Š
It's only a matter of time before employers ask you to show the JavaScript Frameworks you have created.
Yeah, that happened in my previous company, the manager hired a tech lead because he created an open source lib that no body needs
"as ASAP as possible" was a highlight of this video and of my life
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."
Can't wait to add 10yrs of flamethrower experience on my resume
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.
Is that by the same guys who did VanillaJS?
Is it blazingly fast tho
Based
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â€
You either use an existing framework or understand js enough to create another js framework - Sun Tzu.
Yes. Been doing this sort of thing on the elder scrolls online site for the last year. It has been amazing.
Yâall hiring? I got 10 years flamethrower experience
@@TheFreshMakerHD need atleast 12 years of experience
This video truly is as ASAP as possible.
haha :D was looking for this comment
Did you just say âas as soon as possible as possibleâ at 4:50?
Great explanation by the way!
he did, on purpose
Like ASP pages?
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.
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.
Was thinking the same, but if itâs not prefetching images, etc, it shouldnât be that big of a deal
@@DaneRossenrode Wouldn't it defeat the purpose of improving load times if it only prefetched HTML? Genuine question
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).
@@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
You mad man. This is amazing, both the explanation, and your library.
The "as ASAP as possible" really did it for me btw
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!
javascript is the most perfect language
@Ethan Minja I see that (Sasha's) as a sarcastic comment:)
@Ethan Minja absolutely r/wooosh
@@YuriG03042 lmao
This video was not only funny, it also brought up a lot of interesting information. well done!
Every time I feel confident about my web dev knowledge I watch Jeff's videos and realise how much I have to learn yet đ€
Love this! Web Components have got to be one of the most underutilized and underappreciated html features out there.
every video you make is top notch my dude, you deserve your success
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've been doing this for a minute now and hadn't heard of web components, thanks!
Awesome work! I'm absolutely going to test your flamethrower out! :D
Gotta say, you are legendary man! Another great video, and even a new JavaScript framework đ
âYou either die a hero or you live long enough to see yourself become the villain.â
This resonates loudly with my exact use case. I couldn't be happier right now.
Yo this was an amazing video. Thank you so much. The definition of "edutainment" content: Educational yet entertaining!
I am currently learning vue and it feels good
Loving it too. And Vite.
This is the way
@@JamesBoullion "the way" doesn't exist
I knew the mad man would do it eventually hahah haven't finished the video but already loved it.
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
Mind sharing the github link?
Ehe, nice!
Hilarious and extremely educational. Love the explanation of frameworks. That must have taken some time. Good luck with FlamerThrower
Waiting for the "Can't wait to add 10yrs of flamethrower experience on my resume" comment.
No one did it, so you had to do it yourself.
@@u4yk lmao did it ironically though
That was awesome on so many levels!đ„Perfect mix of useful info and sharp hilarity. âStatus: Memeâ đ€Ł
âAs asap as possibleâ -
As as soon as possible as possible
That "I just need to get this project done ASAP" after Next.js hit me hard in the heart.
Beta developer: uses already made framework but has to trade off alot of features.
Giga chad developer: makes his own framework.
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.
Definitely the world needed another javascript framework so thank you for that.
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
Web components was an awesome choice, I'm so happy to see it given the respect it deserves
Same!
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.
Yes! I myself was facing this issue the last month.
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.
Jeff always cracks me up. Amazing video.
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!
finally someone gets it
@@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. đ
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.
I'm curious about Payload as well.
Epic always puts a smile on my dial and some contemplation in the bank
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.
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.
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.
Always love to see Svelte in your vids ;)
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.
"JavaScript is a nearly usable programming language"
*said everybody ever
Tasks for the students: Create your own JS framework, publish it, and promote it on hacker news and Reddit. Then you finished the class.
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.
As a guy trying to learn JavaScript as a beginner i find this highly informative yet i didn't understand shit đđŒ
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
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.
@@Bruceylancer not at all trueâŠ
@@unsuspicious_youtuber Care to clarify?
@@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.
@@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.
This video inspired me to create my own js framework.
The first minute is action packed!
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 ;)
Now waiting for the "Flamethrower in 100 seconds" video.
Hey Jeff, could you do a video on the Nim programming language please?
He have one now đ
@@GreyDeathVaccine I am very aware of that, but thanks anyways!
Literally what I have been looking for, for ages!
Flamethrower sounds like something that I would actually use for my personal site since I'm already using Hugo.
As always, a very enjoyable video!
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.
But thereâs some state info that you donât just want stored on the client side, like authentication
â@@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.
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!
Wish I found this video before I built a SSR framework glad I did it. I learned a lot
It unironically sounds really interesting đ€And who wouldn't like to play with a flamethrower? đ„đ
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.
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.
One wise man said - "Use Angular. Just use Angular and hope for future versions to get better."
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!
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.
New framework? Great time to get these early PRs in guys! đ Get that activity graph glowing!
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
A framework to pick a framework đ€
Oh shit it was true
Amazing as always!
Listening and watching your videos is so fun. You should prolly start a podcast
@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.
I doubt itâs just this simple
can you also explain why you went from angular to not angular at all ?
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.
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
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).
my guess is web assembly is gonna be the next hot garbage of the next 2 decades (user pov)
HolyOS
Please make video on your journey as a developer and the ups-downs you faced. btw love watching your video and it inspires a lot đđ»
Iâm going with you! Love it! đđ»
another one
@Ankha Rule 34 +1
đ„ Gold!
WHAT DID YOU DO? Did you just gave a guide how to create JS frameworks??? You really want to see the world burn.. đ„
If only people put this much effort into other languages that need a larger ecosystem (Dart, Go, etc.)
good work king, love you
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.
man, you're truly a legend
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).
This is exactly what I was looking for!!!!