JavaScript is a nearly perfect programming language the only thing it's missing is a good framework for building websites now I've got a body count like Will Chamberlain when it comes to JavaScript Frameworks I've tried nearly all of them and each one does some nice tricks but none of them are marriage material they all have their trade-offs which I'll explain throughout this video so you can understand what drives a developer to the point of Madness where they're left with no choice but to create their own JavaScript framework in my case God told me to do it
allow me to introduce you to Holy JS actually never mind somebody already took that name on npm let's go ahead and pivot to the devil and call it flamethrower I think that really captures the essence of JavaScript programming now at this point you may be wondering if I'm joking the sad reality is no I did actually create a game-changing platform for building blazingly fast highly interactive experiences on the jam stack I also raised millions of dollars for my company flamethrower Inc to Hype it up I stole 99 of my ideas from other tools but I'm
going to tell you that everything else sucks give it an MIT license and then call you out if you try to steal it so one day I might be as successful as remix alright that part was a joke about some Twitter drama but what I really want to teach you in this video is the trade-offs between all the different major JavaScript Frameworks out there here's the normal flowchart I would go through when choosing a framework for a new project the first question to ask is is the project highly interactive like are you building an app
with user authentication with all kinds of data that can be manipulated by the current user if the answer is no it sounds like you're building a regular website AI in which case you don't need a JavaScript framework life will be much easier with a static site generator like Hugo or 11t and if you do end up needing JavaScript you can always drop in something like Alpine or petite view as opposed to a heavyweight framework or an even better option could be Astro which generates static HTML but allows you to bring in interactivity from any framework
as needed now if you are building a highly interactive app the next question you might ask is does it need to be search engine friendly or does it need to render HTML and data on a server if the answer is no then just use your favorite framework to build a single page application if you don't need to render content in advance for search Bots then you can focus 100 on the front end ux however if you do need SEO then your next question will be how often does the content change if it's like a Blog
where the content doesn't change very often it sounds like you have a jam stack application it typically makes more sense to pre-render your content and cache it on a CDN then allow a JavaScript framework to hydrate it and take over after the initial page load Frameworks like next.js and spell kit can do this in in SSG mode but you also have tools like Gatsby that are dedicated to this use case although it's kind of fallen from Grace recently now if your content is highly Dynamic and constantly changing then you'll likely need full server-side rendering to
regenerate the static content on the server whenever a new request comes in this is what tools like nexjs next and spill kit are designed to do and if you're not exactly sure how your project is going to evolve I would default to a full SSR framework that gives you a simple framework for choosing the right framework but things can get a lot more complicated from here what I'm building is a platform to host my courses it requires user authentication and is highly interactive and also needs to have really good SEO the content doesn't change all
that often so that would lead us to the jam stack option I started working on the project with spelled kit which is an awesome framework but is more general purpose and doesn't have a ton of features for Content management compared to something like Hugo that leads to the question of how do I manage tons of content one option is I could stick with spell kit and just re-implement all these content management features on my own don't get me wrong I love Reinventing the wheel as much as the next JavaScript developer but one other issue is
that I'm worried these Frameworks won't be fast enough when rendering a lot of markdown the creator of 11t made a good Benchmark comparing them option b would be to pay for a headless CMS like contentful or sanity but then I have to add another paid service to my stack strappy is another good option that you can self-host but then I have to manage a separate server and database just to manage my content what I really want to do is just write all my content and work down and manage it in a git repository GitHub is
actually an awesome free content management system for developers although that's not its intended use that line of thinking takes me back to static site generators which are the best at handling markdown and templating Astro seems like a perfect choice here but it brings up one other question which is how do I share data or state between different routes on Astro you'll notice that when you navigate you get a full page load for each route that means the JavaScript reboots and even if you use something like Nano stores or spelled stores the information from the previous
route is lost it's not like next.js where the client-side router takes over and renders the UI with JavaScript on all routes after the initial page load this can be a problem if you're managing authentication state with Json web tokens in something like Firebase and want to show the current user up in the nav bar along with some data from a database that might update in real time so basically that leads us back to next.js or any other framework that fully hydrates after the initial page load there's also new Cutting Edge Frameworks like quick and solid
start that could be good options in the future but I just need to get this project done is ASAP as possible and of course the most efficient way to do that is to build your own JavaScript framework the question that led to this is how do I take a static site ensure JavaScript functionality and data between routes with zero latency on the page transition and without the need for a framework to take over the entire Dom in other words I want a spa-like router for static sites and that's basically what I built it has zero
dependencies and relies entirely on browser native technology like fetch a long time ago when I first started working as a web developer there was a library called pjax that would asynchronously fetch fragments of HTML from your server and update the Dom rather than do a full page reload this approach evolved into a library called turbo links which is still very popular today and receives more npm downloads than most JavaScript Frameworks out there the way it works is when you click on a link it prevents that default Behavior then uses fetch to grab the page you
want to navigate to it swaps out the body of the page then updates the head with the delta or changes on the new page that means if you already executed JavaScript on the previous page like a global State Management Library it doesn't need to be re-executed on the next page load that's really interesting behavior and I'll explain why in just a minute but was the main inspiration for my framework well actually it's just a library technically the reason I didn't just use turbo links is because it's rather large and does a bunch of stuff that
I don't really need and there's a few special features that I wanted to add to my library to create a truly next-gen holistic platform one of the biggest things that annoys me about modern web development is that when you're building a big content-driven site 99 of the UI is static HTML that doesn't do anything however the common approach is to take this HTML and manage it 100 in a JavaScript framework there are some definite benefits to doing that but it requires all kinds of special tooling things like virtual Dom and requires you to stay married
to just one framework as a polygamist I demand more for my framework we can actually take an entirely different approach that's natively supported in all browsers using web components a lot of people like to talk about web components for various reasons but basically it's just a browser API for creating custom elements that encapsulate their own JavaScript and CSS there are Frameworks dedicated to building web components like lit and stencil but all the major Frameworks can compile to web components as well one awesome thing about web components is that you can use them anywhere like regular
HTML elements you can even use them in markdown without any extra plugins or dependencies on top of that you can use them between Frameworks for example I could build a web component with svelte and then access it from a react and angular app in my case web components are awesome because I can use a static site generator then add interactivity to my templates by simply declaring my custom elements it's kind of like the islands architecture where you have islands of interactivity but one thing to keep in mind is that web components will never be server
rendered they're only rendered on the client although interestingly you can project server rendered content in a web component which I think would be perfectly indexable by search engines now here's where things get really cool when you combine web components with the router they render instantly between route changes what I have here is a statically generated site with a counter web component generated by spelled that gets its data from a spelled store when the router is disabled it does a full page load and the current count is lost when we go to the next page now
if we enable the router notice how the count data is not lost between route changes just like a single page application not to mention the page transition feels much faster for the end user in this code base I have an 11t project inside of which has an extra app directory that contains a filter app configured to compile to custom elements from a development standpoint the only thing you really need to do differently is Define a tag for each component then you export each component individually the last thing I'm doing is starting the flamethrower router by
calling it as a function the router has a couple of extra features that you wouldn't find in something like turbo links for one it will find all of the visible links on the page and automatically tell the browser to pre-fetch them the browser will automatically download these pages in the background so they're ready to render as soon as a user clicks on a link that's made possible with prefetched link tags and I also use the intersection Observer API to only pre-fetch the links that are visible on the screen because those are the ones the user
is more likely to click in other words as you scroll down it will lazily pre-fetch the links that come into view if you want to see the actual latency between route changes set log to true and it will add a timer to every fetch operation it should be blazingly fast like well under 100 milliseconds in addition I threw in a little bonus feature that takes advantage of the new page transitions API this API isn't supported in browsers yet and you'll need to enable it with a flag but basically it allows you to animate natively between
page transitions kind of like you would expect in a native mobile app as you can see by default it does a Crossfade animation the bottom line though is that this router has allowed me to create my own little meta framework using svelt compiled to web components along with Hugo a static site generator which gives me awesome CMS features with extremely fast builds with routing that feels like a single page application that's pretty much it the real question is who's coming with me who's coming with me who's coming with me this is a proven technique and
used on big sites like dev2 with turbo but currently flamethrower isn't meme status and I wouldn't recommend using it in production until it reaches Alpha I have the luxury of doing weird experimental stuff like this but if you're building a serious app for yourself don't go chasing waterfalls stick to the libraries and Frameworks that you're used to like next spell kit Astro and so on now that I've hyped up my game-changing JavaScript framework my next step is to abandon it then ask for donations via open Collective to start an SEO link Farm which is the
most reliable way to fund open source I've got to feed my family somehow thanks for watching and I will see you in the next one
