Building the UI: A comparison of React, Vue and Marko

Building the UIA comparison of React, Vue and Marko

Patrick Steele-IdemJune 7, 2017

@psteeleidemNode.js Denver Meetup

Marko creator

About Me

•UI platform lead at eBay•Open source lead at eBay•Creator of marko, lasso, morphdom, etc.•Open source enthusiast

@psteeleidem @patrick-steele-idem

US

A tool is purchased every

A smartphone is purchased every

A watch is purchased every

11 sec5 sec4 sec

UK

A car part is purchased every

A make-up product is purchased every

An appliance is purchased every

1 sec

3 sec

8 sec

DE AU

Data as of Q4 2016

A tire is purchased every

A tablet is purchased every

A Lego is purchased every

17 sec3 sec18 sec

A home décor item is purchased every

A wedding item is purchased every

A car or truck part is purchased every

14 sec

26 sec

4 sec

eBay has massive scale

Frequency of product purchases via desktop and mobile

Our website is criticalfor our business

We build user interfaces

that run in web browsers

using web technologies

As web developers…

and backend data

Vallrender on the server but

V Von all devices

V

reactive, fast and accessibleV

evolving

V

and frameworks/libraries

V

from unreliable remote services

So what does eBay's front-end stack look like?

2013-2011-2015

Node.js usage at eBay

• Node 6.x

• 200 applications and growing

• Node.js platform team of 7 developers

• Very vibrant internal community

• 80 platform modules

• 330 total modules

Lasso.js

web app

servicespages components

platformUI library

• Single-file UI components

• Async and streaming rendering (server)

• VDOM rendering (browser)

• Best-in-class performance

• Clean syntax with zero boilerplate

• Tiny runtime (~10 kb gzipped)

• Isomorphic rendering

Marko v4

2,900+

13,000+ uniqueMarko pages and UI components

Rendering 1 billion+ URLs/day

At eBay:

Active Gitter chat roomwith 385+ members

Core team of 5 developers

50+ contributors

@

Organic

Areas of Commonality

Input DOM/HTML

Custom EventsDOM Events

StateAPI Styles

UI Component

Similar Lifecyle Events

onCreate() → onInput() → render() → onMount()

onInput() → render() → onUpdate()

render() → onUpdate()

First render

New input

Internal state change

vue marko react

npm install vuevue-loader1

markomarko-loader1

reactreact-dombabelbabel-preset-reactbabel-loader1

CDN Distribution Yes No Yes

JavaScript Module Bundler Optional Required Optional

App scaffolding vue-cli marko-devtools2,3 create-react-app2

Installation and Usage

1 Assuming Webpack is used for bundling2 No build configuration required3 Supports server-side rendering

Counter.jsx Counter.marko

Counter.vue Counter.marko

Custom Tags

1 2

3 4

5

11 2

3

✔ DRY

Custom Tags(with implicit imports)

Marko Project Structure

my-app/ components/

counter/{ index.marko, style.less, component.js } app-footer/

routes/ my-ebay/

components/ template.marko search-results/

components/ template.marko test.js

Shared components

Route-specific components

Passing Data

Syntax

OR

Marko Concise Syntax

DOM Events

Custom Events

Subscribe

Publish

Client-side Rendering API

Server-side Rendering API

Here's how I would describe Vue…

Defining a UI Component

Option 1: JavaScript inline strings

Defining a UI Component

Option 2: <script type="text/x-template">

+

In an HTML file far, far away…

Defining a UI Component

Option 3: Single-file .vue components

Defining a UI Component

Option 4: Multi-file .vue components

Defining a UI Component

Option 5: Multiple languages

Defining a UI Component

Option 6: JSX

Registering a UI Component

Option 1: Local registration Option 2: Global registration

Awesome Tooling for Marko

https://atom.io/packages/language-marko

Autocomplete

Snippets

Hyperclick

Prettyprint

Async!

Marko is fast(higher is better)

Why is Marko Fast?

HTML streaming for the server

Writable async stream

Compiled

VDOM rendering for the browser

Async VDOM tree builder

Compiled

Static sub-tree optimization

Created once

Reused for every render

Compiled

Server-side rendering(with seamless isomorphism!)

Server Browser

HTML + { state, input, globals }

markojs.com

github.com/marko-js/marko

Gitter: gitter.im/marko-js/marko

Twitter: @psteeleidem / @MarkoDevTeam

Thank you! Please click