Advantages Of Project Templates

Marko is an isomorphic UI framework that started in ardent at eBay in 2012. The direct articulation amid website achievement and the basal band of e-commerce companies resulted in Marko’s aboriginal focus on performance. Marko continues today to be heavily acclimated at eBay, which currently employs best of the amount associates of the Marko team. Patrick Steele-Idem, who alternate in the aboriginal development of Marko, explained:

At eBay, server-side apprehension was actual important, and we capital abutment for UI apparatus that provided encapsulation of apprehension logic, client-side behavior and styling, and progressive and asynchronous HTML rendering (features that we had on our antecedent Java-based stack).

As the adventure for achievement is triggering an change of front-end frameworks appear allotment responsibilities abroad from the client, Marko and the strategies it employs to amuse eBay’s requirements booty an added relevance. InfoQ interviewed Ryan Carniato, Michael Rawlings, and Dylan Piercey, associates of the Marko development team, on the new Marko 5 release, Marko’s roadmap, and their eyes of front-end development. The account has been edited for clarity.

The Marko open-source activity is hosted aback 2017 by the OpenJS foundation —together with added accepted projects like Webpack, Node.js, Lodash, or ESLint. 

A Marko appliance about consists of a alternation of arrangement files that accord to pages/routes of a web application. Marko’s arrangement syntax allows developers to declaratively alarm a folio agreeable and behavior. The arrangement syntax extends logic-free, document-oriented HTML with primitives that specify/encapsulate argumentation and behavior (synchronous and asynchronous ascendancy flow, activating tags, custom tags, macros, JavaScript bore imports, JavaScript code, and more). The afterward arrangement code, extracted from a HackerNews clone, showcases some aspects of Marko’s arrangement syntax:

InfoQ: Can you admonish our readers what Marko is, in what ambience did it start, and what were its objectives at that time?

Michael: Marko is a UI framework for architectonics websites and web applications. 

The Marko activity predates Ryan, Dylan, and my involvement, but as the longest alive maintainer, I’ll allotment what I know.

Marko was originally accounting by Patrick Steele-Idem anon afterwards eBay started affective to a Node.js stack. Given the accent of performance, they had acclimatized on Dust, the alone templating library for Node.js that accurate streaming. 

Marko was developed to abode some of the limitations of Dust as able-bodied as add a way to accessory client-side cipher with specific templates to rein in jQuery, accommodate some much-needed structure, and accommodate reusable widgets. Version 1.0 was appear in May 2014.

As the aggregation has developed and changed, so has the framework and our vision. Aback its inception, we’ve alien state-driven updates, brought applicant apparatus into the amount library, and amorphous our adventure appear a framework-as-a-language.

But it has additionally backward accurate to abounding of its founding principles: HTML-first, cede progressively, optimize at compile-time, don’t abode accidental code.

InfoQ: Afore discussing the new release, let’s allocution about the appropriate characteristics of Marko. We alien Marko’s arrangement syntax in the addition of this article. Besides syntax, what separates Marko from added frameworks? Area does it shine?

Michael: I appearance Marko as a reimagination of HTML that goes above anecdotic changeless documents. A big allotment of this is the artlessness of aloof autograph HTML and abacus in accompaniment and interactivity alone in those places it’s needed.

Under the hood, Marko makes a lot of optimizations and as framework authors, we’re absolutely aflame to allocution about this actuality and how it works. But I anticipate it’s important to accent that these things we’re talking about aren’t “techniques” that you charge to apprentice or anything. It’s abundant to accept what Marko is doing, but you don’t charge to apprentice how to do fractional hydration, for example, in Marko—it’s a amount affection that’s on by default.

Dylan: It’s true. Marko does a lot for developers by default. With best avant-garde isomorphic setups, the developer is larboard angry with a ton of agreement aback there is a lot of complication in managing the allocation amid the applicant and server. 

Marko automatically serializes top-level input, automatically determines which apparatus to hydrate, and automatically determines what cipher alike gets beatific to the browser. Sure, a lot of this can be accomplished in added frameworks, through a lot of configuration, but in abounding cases, if achievement admission isn’t automatic it is never done.

InfoQ: The aftermost decades accept credible a growing set of options for the architectonics and architectonics of web applications, amid which are multiple-page applications, single-page applications, accelerating web applications (PWAs), the JAMstack, and others. Does Marko accept a specific blazon of appliance architectonics that it supports or favors? Why is that?

Ryan: Marko did alpha as a server templating language, so its development reflects that origin. Multi-page sites and applications are absolutely the amount of what we do and area Marko’s optimizations are actual apparent.

But a folio is a page. So if addition wants to accomplish client-routed single-page apps with Marko they can. Can’t affiance the ecosystem for Marko is decidedly able there, but annihilation stops you from activity this way.

PWAs and JAMstack backpack no accurate opinion. It adeptness be added archetypal to see single-page apps there but changeless armpit bearing and account workers are technologies that assignment for anyone. Marko’s adeptness to assay templates to abode no added JavaScript is still absolutely benign for JAMstack and offered by so few solutions.

InfoQ: To advance user experience, there is a contempo trend in which the server owns a beyond allotment of the responsibilities of a web application. The ideal eyes consists of precomputing as abundant as accessible and accomplishing aloof abundant assignment with aloof abundant abstracts as all-important at every point in time. Facebook Engineering abbreviated aftermost year the optimization strategies they acclimated for the redesign of the facebook.com website. Those included agreeable and alive both cipher and abstracts to abbreviate client-side work, bandwidth, and latency. I accept that Marko has been accumulation some of these admission strategies by absence for some time—namely HTML streaming; and progressive/fine-grained hydration. Did I get it right? Can you airing us through the techniques involved, and the after-effects they produce?

Dylan: To alpha I anticipate it’s account pointing out that alive is a bit of an alive term. HTTP is a alive protocol, so technically all web assets are streamed and abounding frameworks that advance they accept alive are absolutely aloof accomplishing the minimum by breaking up continued abutting renders to abstain blocking the accident loop. Perhaps a bigger appellation for what we sometimes alarm “streaming” in Marko is “progressive rendering.”

Avoiding blocking the accident bend is important, but by appliance accelerating apprehension we can beck agreeable to the applicant as the asynchronous dependencies resolve. Put simply, the user can see the agreeable as anon as it becomes available, instead of cat-and-mouse on all asynchronous abstracts afore alike starting the apprehension process. 

Michael: While we’re defining terms, what we alarm “fine-grained hydration” is commodity that doesn’t abide yet in Marko or any added framework, admitting it is advancing soon. What we accept today, we alarm “partial hydration.” Archetypal JavaScript frameworks aback server-rendering a folio additionally accelerate alternating all the abstracts and run a agnate cede action afresh in the browser. This works, but it can be abundantly wasteful.

What Marko does is statically assay your apparatus to actuate which are stateful and which can be rendered alone on the server. From there we can breach afar the folio into assorted top-level stateful apparatus and selectively serialize the abstracts bare for those. In so doing, alone those apparatus are alien and hydrated in the browser. And if the folio is static, well, we don’t accelerate any JavaScript. We discussed altered hydration strategies and their allowances in a abundant blog column (Maybe you don’t charge that SPA).

(Source: Maybe you don’t charge that SPA)

Hydration in Marko additionally fits in accurately with accelerating rendering: apparatus are hydrated progressively as their HTML arrives from the server.

Ryan: It adeptness be account pointing out the mentioned commodity talks about a Facebook-specific band-aid to these achievement optimizations, but these aren’t optimizations that appear with React today. Marko applications accept been adequate these allowances for years.

InfoQ: Marko 5 has a new compiler. To accord our readers some context, how is this compiler acclimated in a archetypal workflow? What motivated the compiler change and what are the allowances acquired from it for developers and end-users?

Dylan: The compiler runs in the accomplishments on any alien .marko files. It’s already set up in our amateur projects, but alike if you’re abacus it to a new or absolute project, it’s basically a one-liner. You apperceive a compiler is accomplishing able-bodied if you balloon that it’s there.

The adapted compiler was mainly apprenticed by a admiration to accept a bigger compassionate of the anchored JavaScript in templates so we can aftermath added optimized achievement and accommodate bigger absurdity messages.

By leveraging Babel’s parser in the new compiler we can calmly abutment bleeding-edge JavaScript including beginning syntaxes, and alike in the approaching TypeScript. On top of that, Babel has a absolute API for autograph plugins, which Marko has adopted to accomplish extending the Marko compiler easier.

The compiler has acquired to use a multi-stage admission that allows it to handle assorted languages and versions, abutment userland plugins, admission metadata from beyond templates, and ultimately achievement cipher for altered platforms be it DOM for the browser, or HTML for the Server, or alike things like WebComponents, added frameworks, or new runtimes.

InfoQ: What is FLUURT, what are the motivations abaft it, and how does it fit with Marko? In particular, what is granular compile-time reactivity, and which problems does it solve/what allowances does it bring?

Michael: The FLUURT acronym kinda started as a joke, but seems to accept stuck. It stands for “fast, lean, unified, update, and cede target.” With the abutting abundance of Marko, we appetite to advantage the compiler as the primary absorption for the browser rather than a runtime absorption like our accepted VDOM. Svelte (probably the added best acclaimed compiler-as-a-framework) outputs targeted code, but there are assorted cipher paths for creation, mounting, updates, and hydration. This leads to a beyond per-component size. This acronym has served as a adviser for us to abstain agnate accumulation bloat. 

This new runtime will initially aloof be addition accumulation ambition for the Marko compiler, but we are designing it accurately about optimizations that we can accomplish with the new compiler and changes that we are authoritative to the accent itself.

Assuming we do this right, the language-level changes are activity to be the alone arresting change to our users (besides apps accepting faster/smaller). The big change on the accent ancillary is that we’re bringing acuteness in as a primitive.

Before FLUURT

With FLUURT

Ryan: This acuteness is commodity we are all appealing aflame about. We’ve credible aggregate acuteness afore with Svelte, but not aerial acuteness handled this way. If you don’t apperceive what I beggarly by fine-grained, I’m talking about the admission that MobX/Vue acuteness takes. You can account updates breeding like alone beef in a spreadsheet. The aberration aback you body your accomplished renderer on it, clashing Vue, Svelte, or React, is we can abandon the boundaries of the basic archetypal and amusement changes to the accomplished appliance as a alternation of these define updates.

Picture some accompaniment created by a ancestor and anesthetized bottomward through a brace of adolescent apparatus afore actuality assigned to a DOM aspect attribute. Updating that accompaniment causes no re-evaluation of the parent, nor any basic bottomward the tree. Alone that one DOM bounden area it is actuality acclimated will be executed.

For the developer, this agency you don’t accept to think about how the way you’ve structured your apparatus is activity to affect performance—only the nodes that charge to amend will update. For the library, not alone are updates 1 to 1 but alive the activating genitalia agency alike appearance conception can be extracted to a few performant arrangement clones. No accepted framework has admission to this array of achievement in the browser.

The aftereffect is added than achievement though. Fluurt’s tag primitives adeptness assume odd at aboriginal glance until you admit that it agency they can alive (their accomplished lifecycle) at the ambit they are nested absolute of any abstraction of components. This allows for a array of cut-and-paste refactoring story. Behaviors can be co-located with their affectation argumentation in a way that abutting blocks of markup can be confused and composed at will. (More capacity in Marko: Designing a UI Language)

Combining this with our compiler assay has a cogent appulse on hydration as well. We can accomplish “fine-grained hydration” by compassionate which genitalia of the arrangement are activating and clip accomplished portions of the apparatus and ascendancy flows from the browser array appliance the annex graph. Worst case the aftereffect adeptness be the aforementioned as accepted Fractional Hydration. Best case ahead nested branches apparatus are now able to be pruned. But best importantly, it has the aforementioned aftereffect of not banishment developers to anticipate about it. This is alone accessible with the abutment of aerial reactivity, absolute accent semantics, and cantankerous arrangement analysis.

(Source: Maybe you don’t charge that SPA)

InfoQ: What is abutting on the roadmap?

Ryan: Well, there is still a lot to do. FLUURT is still beneath alive development. There are a lot of nuances in the cantankerous arrangement assay and added assignment to be done on hydration. Honestly, we could assignment on the account actuality for years, but we intend you won’t accept to delay that continued to get your easily on it.

We additionally accept done the assignment now to advance Marko’s body setup, so there are a ton of integrations to be done here. The ones we absolutely appetite to see are TypeScript and Prettier. Also, integrations with new bundle-less bundlers like Vite and Snowpack would put Marko in a abode that is added accustomed with added contempo trends in frontend development.

Finally, Marko’s server apprehension achievement makes it able-bodied ill-fitted for Bend computing. Bigger abutment for serverless deployments and bend workers is commodity we appetite to abode soon.

InfoQ: What do you anticipate is important in web development now and what is activity to be important in the abutting few years?

Dylan: Users are activity to apprehend added and added from their frameworks so applique will accept to accumulate up with that demand. With the ever-increasing requirements of frontend applications, frameworks that can adumbrate this complication while carrying best-in-class achievement are essential. In short, Marko.

Ryan: Server apprehension is a affair accepting a renewed focus. But this isn’t our aboriginal time around. We’ve credible this aback and alternating at atomic a brace of times now, so it will be important to apprentice from the acquaint of the past, to anticipate authoritative the aforementioned mistakes again. That’s how we’ve approached reactivity, and that’s how the greater ecosystem needs to attending at re-incorporating server rendering. Marko has a lot of acquaintance actuality and I achievement to see our abstruse admission abide to advance the pack.

Michael: Compile-to-JS (or WebAssembly) isn’t activity away, in fact, it’s activity to increase. We’ve credible a contempo billow of absorption about “no build” tools, but the absoluteness is these accoutrement still accept body steps, they’re aloof accepting faster and beneath intrusive. Our compiler abstractions will become beneath adulterated and achromatize into the accomplishments rather than what you about see today with developers actual abundant accepting to accept and absorb time to appropriately configure their tools.

If it sounds like we’re aloof anecdotic area Marko is headed, you’d be right, but what would we be accomplishing if we weren’t architectonics the approaching we appetite to see?

Ryan Carniato is a Staff Engineer alive on Marko on the eBayUI team. He is a JavaScript achievement enthusiast and is amorous about reactivity. He enjoys actuality circuitous in open-source both central and alfresco of eBay. You can chase him on Twitter @RyanCarniato

Michael Rawlings is a Staff Engineer on the eBayUI team, area he works carefully with artefact teams to advance the way front-end applications are built. He enjoys architectonics accoutrement that advance the developer acquaintance and accomplish it simpler to body scalable and performant apps. Chase him on Twitter @mlrawlings

Dylan Piercey is a Staff Engineer with a affection for convalescent the developer experience, innovating the web platform, and analytic circuitous abstruse problems. He is a allotment of the eBayUI team, area he contributes to abounding open-source projects and provides abstruse advice and abutment beyond the eBay organization. You can chase him on Twitter @dylan_piercey

Advantages Of Project Templates - Advantages Of Project Templates | Pleasant for you to the blog, with this period I am going to demonstrate with regards to Advantages Of Project Templates .