In this article we will take an in-depth look at the differences and similarities between and from the perspective of the maintainers of Marko. Marko React Table of Contents • • • • • • • • Example Similarities Differences Syntax Components API Custom tags Async Compiler Tools Why Marko? 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 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 , Marko consistently outperforms React by a significant margin on both the server and in the browser. JavaScript our benchmarks Example The following code highlights some of the differences between Marko and React JSX using a somewhat contrived UI component as an example: React JSX Marko Similarities Marko and React have the following in common: UI component-based JavaScript and HTML markup can be intertwined No restrictions on JavaScript (use ES5 or ES2015+, your choice) Virtual DOM rendering in the browser DOM diffing/patching is used to reconcile views Both support keyed element matching UI components can have input properties UI components can have internal state Changes to state trigger an asynchronous update to the DOM Updates to the DOM are batched Compatible with central application state stores such as Redux and MobX UI components can be embedded using custom tags Declarative event binding (no needed) domEl.addEventListener() Support for all DOM events Event delegation utilized internally for DOM events that bubble IE9+ support Similar lifecycle events for UI components JSX and Marko both compile to JavaScript Differences At a high level here are some differences: Differences in rendering Marko renders to a virtual DOM in the browser and directly to an HTML stream on the server (Marko supports multiple compilation targets). Improved performance: Marko supports asynchronous rendering with for improvements in actual and perceived page load times. Improved performance: of HTML early flushing React requires an additional client-side re-render if a page is initially rendered on the server while Marko does not. Improved performance: Marko automatically serializes UI component state and input down to the browser so that the browser can pick up right where the server left off. Improved ease of use: Marko is suitable for rendering an entire HTML page on the server with support for tags such as and . Improved ease of use: <doctype> <html> Differences in syntax Marko uses the syntax and the syntax is offered for React. Improved ease of use: HTML-JS JSX Marko supports both a concise syntax and a familiar HTML syntax. Improved ease of use: JSX requires strict XML while Marko aligns with less strict HTML that web developers are used to. Improved ease of use: With Marko, HTML attribute values are parsed as JavaScript expressions. Improved ease of use: all Marko supports simple directives for conditionals, looping, etc. Improved ease of use: JSX is “just JavaScript” but requires expressions that preclude the usage of JavaScript statements such as in certain places. JSX limitation: if/else/for Differences in compilation Marko supports multiple compilation outputs (Marko VDOM and HTML streaming are currently supported). Improved performance: Marko compiles UI components to JavaScript modules that export a rendering API. Improved ease of use: Marko supports a robust API for controlling how custom tags and custom attributes get compiled and it supports compile-time transforms based on a friendly Abstract Syntax Tree (AST). Expanded capabilities: JSX is just syntactic sugar that translates elements to function calls while the Marko compiler has full control over how things are compiled and optimized. Improved performance: createElement() React requires all UI components to be explicitly imported before they can be used as custom tags while Marko supports both explicit importing and implicit importing. Improved ease of use: Marko has a modular runtime and the compiler generates code that only imports the parts of the Marko runtime that are needed for much smaller builds. Improved performance: Marko supports optional compile-time checks to ensure that only allowed attributes are passed to custom tags. (React only provide validation at render-time) Improved ease of use: PropTypes Marko validates tag names at compile-time. Improved ease of use: all Marko provides its own compiler that integrates with Node.js and JavaScript module bundlers while React JSX requires babel and custom babel transforms. Improved ease of use: Differences in UI components No explicit extending of JavaScript classes in Marko (in contrast to in React). Reduced boilerplate: class Counter extends React.Component Modifications to UI component state are synchronous with Marko while . Improved ease of use: the rules for React are more complicated Marko watches UI component state objects to allow state to be modified directly (e.g., ). Improved ease of use: this.state.count++ Marko supports single-file UI components combining JavaScript behavior, CSS styling (with support for CSS preprocessors) and HTML markup. (React requires using one of the many if you want styles in the same file as your component and there is no standard in the community) Improved ease of use: CSS in JS solutions Marko supports a seamless transition from a single-file UI component to a multi-file UI component. Improved maintainability: Marko assumes UI components are pure by default and skips re-rendering when input properties and state are unchanged (React requires extending ). Improved performance: React.PureComponent Differences in event systems React utilizes while Marko utilizes real DOM events. Reduced complexity: synthetic events Custom events are emitted using the in Marko (e.g., ). Improved ease of use: EventEmitter API this.emit('myCustomEvent', arg1, arg2) Marko has a consistent approach for listening to both native DOM events and custom events. Improved ease of use: React requires passing around references for custom events while Marko automatically delegates emitted custom events to event handler methods on components. Improved ease of use: Function Marko provides a simple mechanism for binding additional arguments to event handler methods and will be the component instance. Improved ease of use: this Differences in compatibility Marko has no support for native mobile similar to React Native (although with Marko VDOM rendering, this is possible). Marko limitation: Marko requires a JavaScript module bundler (such as , , or ) to be used in the browser since Marko UI components compile down to JavaScript modules. (we consider using a JavaScript module bundler a best practice) Marko limitation: Lasso Webpack Rollup Browserify In the sections below we will take a closer look at some of the differences between Marko and React. Syntax 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 while most React apps use the JSX syntax. HTML-JS 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 React JSX In React JSX, all attribute values are parsed as string values unless is used. {} Marko With Marko, attribute values are parsed as JavaScript expressions. The following Marko code is equivalent to the React JSX code above: all Syntax: inline JavaScript React JSX React JSX starts with JavaScript and allows XML elements to be inlined as shown below: Marko 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: Lines prefixed with are directly added to the compiled JavaScript output inside the compiled function (for JavaScript code that should run for every render). Lines prefixed with are directly added to the compiled JavaScript output outside the function (for code that should only run when the template is loaded). $ render() static render() once 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 Caveat: Since JSX is closer to JavaScript than HTML, React DOM uses property naming convention instead of HTML attribute names. camelCase For example, becomes in JSX, and becomes . class [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) tabindex [tabIndex](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex) As a result of this caveat for React, . tools for converting HTML to JSX exist React JSX Marko Syntax: conditionals JSX is syntactic sugar on top of JavaScript, but it requires expressions, so simple things like an statement don’t work on their own within a JSX element. As a result, you must either use a ternary expression, an immediately invoked function expression, function call expression, or the experimental expression (stage 0 at the time of writing). This is not an issue for Marko, and directives such as and can be used anywhere as shown below: if/else/for do {} if() for() React JSX Marko Marko also allows directives to be used as attributes for a more condensed template: Syntax: looping React JSX Marko 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: Marko HTML syntax Marko concise syntax Marko mixed syntax The HTML syntax and the concise syntax can be used together: React JSX React does not offer a concise syntax. Components Marko starts with simple HTML and allows UI component logic to easily be layered on top. React JSX A 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: Marko 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: API 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: Custom tags React JSX With React, all custom tags for UI components must be explicitly imported: Marko Marko supports a mechanism for for UI components based on the project directory structure. Marko walks up the directory tree to discover all 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: automatically discovering custom tags components/ .├── components/│ ├── hello.marko│ └── good-bye.marko└── index.marko The tag and the tag nested below the directory will automatically be made available to the at the root: <hello> <good-bye> components/ index.marko This approach also allows editors and IDEs to offer autocompletion for custom tags. Async Even after rendering has started, Marko allows parts of the view to be rendered asynchronously using the tag as shown in the following Marko template: [<await>](http://markojs.com/docs/core-tags/#codeampltawaitgtcode) Compiler 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: Compile-time code transforms 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: The tag can then be used as shown below: <markdown> In this example, after the template is compiled, the library is no longer needed at render-time. marked Tools Marko and React offer a variety of developer tools. The are constantly evolving, but Marko currently provides tools for unit testing UI components, precompiling files and generating configuration-less apps (similar to ). 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 developer tools .marko create-react-app IDE and editor support 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, for both HTML and custom tags, to quickly jump to referenced files and methods, and to keep your code readable. Autocomplete Hyperclick Pretty printing Why Marko? Here are just a few reasons you should consider using over React: Marko Marko requires much less boilerplate. Marko has much better performance based on our benchmarks. Marko offers a clean and powerful syntax that aligns with HTML while also allowing the full power of JavaScript. Marko has much less complexity and a very small runtime. Marko has a much lower page weight for faster page loads. Marko has strong integrations with Node.js. Marko allows for extremely powerful IDE and editor plugins (see the as an example). Marko plugin for Atom Marko has a powerful compiler that allows new features to be added without introducing bloat. eBay relies heavily on Marko and it is being used to build ebay.com (including the mobile web). Marko has a strong and growing community on and in . GitHub Gitter Interested in learning more about Marko? If so, you can get additional information on the . Join the conversation and contribute on and follow us on . Marko website GitHub Twitter If you liked this post, please hit the ❤️ button below. And, if you want to keep up with more about Marko on Medium, click the “ Follow ” button next to my profile.
