Marko vs React: An In-depth Look – Patrick Steele-Idem – Medium

Marko vs React: An In-depth Look  #MarkoJS #reactjs

  • In the sections below we will take a closer look at some of the differences between Marko and React.SyntaxBoth Marko and React JSX allow HTML markup and JavaScript to be combined into a single file and both support building web applications based on UI components.
  • The following Marko code is equivalent to the React JSX code above:Syntax: inline JavaScriptReact JSXReact JSX starts with JavaScript and allows XML elements to be inlined as shown below:MarkoMarko starts out in HTML, but it allows JavaScript to be inlined in a clean and maintainable way.
  • Here’s how the Marko syntax options compare:Marko HTML syntaxMarko concise syntaxMarko mixed syntaxThe HTML syntax and the concise syntax can be used together:React JSXReact does not offer a concise syntax.ComponentsMarko starts with simple HTML and allows UI component logic to easily be layered on top.React JSXA React UI component is typically implemented as a class that extends React.Component:React also supports a more concise functional component:However, if state or lifecycle events are needed then a functional UI component must be converted to a class component:MarkoHere is the same component in Marko:Behavior can easily be added to any Marko UI component:Marko also allows JavaScript behavior, CSS styling and HTML markup to be embedded in the Marko template as a single file UI component:APIMarko compiles component to JavaScript modules that export an API for rendering the component as shown below:The same UI component can be rendered to a stream such as a writable HTTP response stream:The user’s of a Marko UI component do not need to know that the component was implemented using Marko.Contrast this with React as an example:On top of that, React requires that a different module be imported to render the exact same UI component on the server:Custom tagsReact JSXWith React, all custom tags for UI components must be explicitly imported:MarkoMarko supports a mechanism for automatically discovering custom tags for UI components based on the project directory structure.
  • While Babel allows code transformations of JavaScript, the Marko compiler provides support for resolving custom tags declaratively and the Marko AST provides for very powerful and simple transformations as shown in the following code for rendering Markdown to HTML at markdown tag can then be used as shown below:In this example, after the template is compiled, the marked library is no longer needed at render-time.
  • Marko provides first-class support for the Atom editor with syntax highlighting, Autocomplete for both HTML and custom tags, Hyperclick to quickly jump to referenced files and methods, and Pretty printing to keep your code readable.

In this article we will take an in-depth look at the differences and similarities between Marko and React from the perspective of the maintainers of Marko. Example • Similarities • Differences
Syntax…

@MarkoDevTeam: Marko vs React: An In-depth Look #MarkoJS #reactjs

On the surface, Marko and React have a lot in common and both are trying to solve very similar problems. Specifically, both Marko and React allow developers to build web applications based on UI components and both free developers from having to write code to manually update the DOM. While many of the features in Marko were inspired by React, Marko and React offer very different usability and performance characteristics. Marko was designed to avoid almost all boilerplate and is more closely aligned with HTML. In almost all cases, a Marko UI component will require less lines of code than its React JSX equivalent while maintaining readability and allowing the same expressiveness as JSX. In addition, Marko is highly optimized for use on the server and in the browser and has a much smaller weight:

Because the Marko JavaScript library is much smaller than React, it will require less time to load and parse and this will drastically improve page load times on slow connections or on older devices. Based on our benchmarks, Marko consistently outperforms React by a significant margin on both the server and in the browser.

The following code highlights some of the differences between Marko and React JSX using a somewhat contrived UI component as an example:

At a high level here are some differences:

In the sections below we will take a closer look at some of the differences between Marko and React.

Both Marko and React JSX allow HTML markup and JavaScript to be combined into a single file and both support building web applications based on UI components. Marko utilizes an HTML-JS syntax while most React apps use the JSX syntax.

React JSX makes JavaScript more like HTML and Marko makes HTML more like JavaScript.

In the end, both Marko and React allow JavaScript and HTML to be intertwined.

Syntax: attributes

is used.

With Marko, all attribute values are parsed as JavaScript expressions. The following Marko code is equivalent to the React JSX code above:

Syntax: inline JavaScript

React JSX starts with JavaScript and allows XML elements to be inlined as shown below:

Marko starts out in HTML, but it allows JavaScript to be inlined in a clean and maintainable way. Unlike other template languages, Marko aims to allow the full power of JavaScript. The following Marko code is equivalent to the React JSX code above:

function (for code that should only run once when the template is loaded).

Syntax: HTML support

With Marko any valid HTML markup can be used inside a Marko template. This is not the case with React. The following quote is from the React documentation:

property naming convention instead of HTML attribute names.

As a result of this caveat for React, tools for converting HTML to JSX exist.

can be used anywhere as shown below:

Marko also allows directives to be used as attributes for a more condensed template:

Syntax: looping

Syntax: HTML shorthand

Marko supports a shorthand based on CSS selectors for less code.

React does not support these helpful shorthands.

Syntax: concise

Marko supports a concise syntax that drops angled brackets and ending tags in favor of indentation. Here’s how the Marko syntax options compare:

The HTML syntax and the concise syntax can be used together:

React does not offer a concise syntax.

Marko starts with simple HTML and allows UI component logic to easily be layered on top.

React also supports a more concise functional component:

However, if state or lifecycle events are needed then a functional UI component must be converted to a class component:

Here is the same component in Marko:

Behavior can easily be added to any Marko UI component:

Marko also allows JavaScript behavior, CSS styling and HTML markup to be embedded in the Marko template as a single file UI component:

Marko compiles component to JavaScript modules that export an API for rendering the component as shown below:

The same UI component can be rendered to a stream such as a writable HTTP response stream:

The user’s of a Marko UI component do not need to know that the component was implemented using Marko.

Contrast this with React as an example:

On top of that, React requires that a different module be imported to render the exact same UI component on the server:

With React, all custom tags for UI components must be explicitly imported:

directories and it will also automatically discover custom tags exported by installed packages. This approach negates the need for explicitly importing a custom tag to reduce the amount of code needed in a Marko template. For example given the following directory structure:

at the root:

This approach also allows editors and IDEs to offer autocompletion for custom tags.

tag as shown in the following Marko template:

Marko compiles a template differently based on whether or not it will be used on the server or in the browser. For example, given the following template:

Compiled for the server:

Compiled for the browser:

The Marko compiler was built to support compile-time code generators for custom tags and it also provides support for compile-time transforms. While Babel allows code transformations of JavaScript, the Marko compiler provides support for resolving custom tags declaratively and the Marko AST provides for very powerful and simple transformations as shown in the following code for rendering Markdown to HTML at compile-time:

components/markdown/code-generator.js:

tag can then be used as shown below:

In this example, after the template is compiled, the marked library is no longer needed at render-time.

files and generating configuration-less apps (similar to create-react-app). Currently, there are no Marko developer tools that integrate with the browser, but this is something we would like to see in the future. We will go into more detail on the Marko developer tools in a future post.

Marko offers syntax highlighting across all major IDEs and editors, as well as on GitHub. Marko provides first-class support for the Atom editor with syntax highlighting, Autocomplete for both HTML and custom tags, Hyperclick to quickly jump to referenced files and methods, and Pretty printing to keep your code readable.

Marko vs React: An In-depth Look – Patrick Steele-Idem – Medium