I have been sitting on writing this text for two years. In my coronary heart this was the article I used to be going to jot down even earlier than I learn @swyx’s quintessential Svelte for Websites, React for Apps. After I signed on to hitch the Marko crew again in March 2020 (I do know, excellent timing to relocate for work) one thing was very clear to me. I’d have the chance to work on two of probably the most exemplary approaches to what the way forward for JavaScript frameworks may seem like.
Some questioned why I’d tackle engaged on a second framework however I by no means noticed a battle. In some ways, they could not be extra totally different. Each design choice made with totally different set of tradeoffs, the place the “proper” reply for every is allowed to be totally different. However the cause this excited me a lot was that Solid and Marko represented probably the most highly effective approaches on the axes that matter. A pincer motion of types for the JavaScript framework world.
Evan You, creator of Vue gave an excellent discuss on tradeoffs of frameworks the place he positioned Vue as that center floor between React and Angular. It is best to elucidate this as a bunch of impartial ranges however the actuality is we reside in a multi-dimensional world and one answer is not all the time absolutely on one facet for all choices. However we as builders carry on altering our perspective to drag out these 2D comparisons.
So the duty was easy: Do not change the world, change the attitude. And as a substitute of being centered on the center and being every part to everybody give attention to the extra achievable activity at being one of the best model within the locations which can be divisive. Nothing unsuitable with backing a number of horses.
So Websites Vs Apps?
Effectively, this has been the dichotomy of the net for a very long time. It even predates Single Web page Apps, though that’s the reason it has come into focus a lot the previous decade. Now we have seemingly two very totally different use instances attempting to leverage the identical know-how. So it does make sense that possibly there’s a method to make this unified even when it hasn’t been possible. And the frameworks/libraries I am speaking about right now signify each side to a tee.
Marko for Websites
Marko was created at eBay someday within the early 2010s and was open sourced in 2014. It was constructed for eCommerce and the demanding nature of assist international prospects the place not each machine and community is made equal. An enormous emphasis positioned on web page load, being the primary JavaScript framework to introduce each Out of Order Streaming and Partial Hydration proper from its inception.
Marko additionally was one of many earliest compiler-based frameworks as its origins had been from server facet templating languages. It was very clear from its starting it was in the end a language fairly than a framework; a line of pondering that wasn’t actually popularized till Svelte did similar half a decade later.
Marko is a Superset of HTML the place the entire world lives in Single File Elements and a brand new consumer can enter this world just by altering the extension of the HTML recordsdata they acquired from a designer to .marko or utilizing the HTML they copied and pasted from StackOverflow. Elements are auto found and the impression of including JavaScript feels minimal. It has all of the traits folks utilizing server templating languages are used to however it’s absolutely isomorphic to turn out to be interactive within the browser robotically.
And it sends the least JavaScript with out pondering. Its “Islands” are computerized, and its streaming as straightforward as including an <await> tag with a promise. Its Multi-Web page ahead strategy is not fearful about persistent consumer state or consumer routing and simply works like a web site the way in which you’d count on. It has the tersest syntax that allows you to write the least code of all JavaScript Frameworks. It is a simple method to get unmatched web page load efficiency with out getting away from the simplicity, that ultimately we’re simply making pages in a web site.
Stable for Apps
https://www.youtube.com/watch?v=J70HXl1KhWE
Solid got here from a really totally different residence. First created as a facet challenge in 2016 after I was at a startup creating non-public Social Media. It was a protracted lived challenge that wanted to maintain on altering and pivoting to search out its buyer. Whereas we may by no means rewrite what we had we’d shortly rip out and exchange components. Stable was modular from the beginning, constructed to work with Internet Elements as a component-agnostic answer. It advanced to shedding that weight because it got here into its personal.
Stable’s energy is that every part is a primitive, proper right down to the JSX. Elements are simply features, <div> are simply HTMLElements, and state is simply reactivity. It scales right down to a jQuery substitute and as much as concurrent time-slicing, with the portability to run on non-web platforms utilizing the identical strategies. There is no such thing as a VDOM or required abstractions. It’s a chameleon that’s precisely what it must be when it must be.
Whereas it leverages compilation, solely the JSX is compiled. It is rather a lot a “Simply JavaScript” library. Every part is constructed upon composing easy primitives and each nook has an escape hatch for full management over how your software runs. The icing on the cake is this fashion of modelling issues can also be extraordinarily performant making Stable a benchmark king in all environments it runs on.
This adaptability has made it straightforward to port libraries, and for folks to choose into compiling right down to Stable from their most popular DSLs. And it has been championing this composable primitive strategy effectively earlier than trendy tendencies like Hooks. It offers “Simply JavaScript” a brand new life in a world trying like it’s heading deep into customized DSLs and compiled languages and returns to builders all of the management they should execute on probably the most demanding of purposes.
False Dichotomy?
I admit I lured you right here beneath a false pretense. If something we have seen JavaScript centric net applied sciences collapsing on themselves. At first there was a transparent distinction between Static(SSG) and Dynamic(SSR) experiences however that has disappeared, and shortly the distinction between Websites(MPA) and Apps(SPA) will as effectively.
After we are seeing Solid acing page load metrics in impossibly expensive pages when used with Astro, one thing traditionally solely Marko may pull off:
Or Marko bringing unimaginable consumer facet rendering efficiency and composability with its new compiled reactivity that rivals even Stable, you begin realizing we’re simply seeing a path to lastly unify the alternative sides of the spectrum.
And this makes me hopeful, as a result of these frameworks philosophically could not be extra totally different. Language vs Library, HTML vs JavaScript first, Mutability vs Immutability, Implicit vs Specific state updates, 2-way data-binding vs Unidirectional stream. And regardless of these variations we’re right here.
It will even not be unfair to assert that Marko is extra svelte than Svelte, or Stable is extra reactive than React. These frameworks sit on the the alternative edges with totally different values and philosophy however they each have unmatched efficiency, the smallest bundle sizes, and may serve use instances that span the entire spectrum. If these frameworks can do that any framework in between may as effectively.
Conclusion
Is not it nice that quickly we may reside in a world the place Website vs App will not impression your selection of instrument on technical advantage? Nor JSX vs Customized DSL, or a HTML-first vs JS-first mentality? Certain, there’ll all the time be preferences and options that cater on developer expertise. However you may select the framework that speaks to you, and I would not be capable to persuade you that there is a “winner”. There’s a path right here no matter what philosophy you maintain near your coronary heart.
It took me giving Marko an opportunity to see this. To problem my preferences and examine of the world. As with Solid I checked out an strategy that appeared to do all the best issues years forward of its time and leveraged that have to discover what one of the best model of that appears like. Now, I see that potential to various levels in different frameworks. There actually is a solution right here for everybody. And that’s thrilling. The net is actually an incredible place.