At eBay we are re-inventing how we build our web front-end in a way that scales to hundreds of teams and can handle eBay-scale traffic. Each team manages and develops their own independent application. Over the past few years, teams have been migrating to a Node.js stack using Marko as the view layer. Marko is open source and has enabled teams to build reactive, UI component-based apps that stream HTML from the server to deliver SEO-friendly pages that load quickly and minimize the time to first byte. How does Marko compare to popular alternatives such as React and Vue? How are we using Marko? How can you get started with Marko? What other tools are we using?

1. Building the UI
A comparison of React, Vue and Marko
Patrick Steele-Idem
June 7, 2017
@psteeleidem
Node.js Denver Meetup
Marko creator

2. 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

3. U
S
A tool is purchased
every
A smartphone is purchased
every
A watch is purchased
every
11
sec
5
sec
4
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
sec
3
sec
18
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

4. Our website is critical
for our business

5. We build user interfaces
that run in web browsers
using web technologies
As web developers…
and backend data
V
allrender on the server but
V V
on all devices
V
reactive, fast and accessible
V
evolving
V
and frameworks/libraries
V
from unreliable remote services

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

7. 2013-2011-2015

8. 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

9. Lasso.js
web app
servicespages components
platformUI library

11. • 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

12. Marko v4
2,900+
13,000+ unique
Marko pages and UI components
Rendering 1 billion+ URLs/day
At eBay:
Active Gitter chat room
with 385+ members
Core team of 5 developers
50+ contributors

13. @

16. Organic

17. Areas of Commonality
Input
DOM/
HTML
Custom Events
DOM Events
StateAPI Styles
UI Component

18. Similar Lifecyle Events
onCreate() → onInput() → render() → onMount()
onInput() → render() → onUpdate()
render() → onUpdate()
First render
New input
Internal state change

19. vue marko react
npm install vue
vue-loader1
marko
marko-loader1
react
react-dom
babel
babel-preset-react
babel-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 bundling
2
No build configuration required
3
Supports server-side rendering

20. Counter.jsx
Counter.marko

21. Counter.vue
Counter.marko

22. Custom Tags
1 2
3 4
5
1
1 2
3
✔ DRY

23. Custom Tags
(with implicit imports)

24. 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

25. Passing Data

26. Syntax
OR

27. Marko Concise Syntax

28. DOM Events

29. Custom Events
Subscribe
Publish

30. Client-side Rendering API

31. Server-side Rendering API

32. Here's how I would describe Vue…

33. Defining a UI Component
Option 1: JavaScript inline strings

34. Defining a UI Component
Option 2: <script type="text/x-template">
+
In an HTML file far, far away…

35. Defining a UI Component
Option 3: Single-file .vue components

36. Defining a UI Component
Option 4: Multi-file .vue components

37. Defining a UI Component
Option 5: Multiple languages

38. Defining a UI Component
Option 6: JSX

39. Registering a UI Component
Option 1: Local registration Option 2: Global registration

40. Awesome Tooling for Marko
https://atom.io/packages/language-marko

41. Autocomplete

42. Snippets

43. Hyperclick

44. Prettyprint

45. Async!

47. Marko is fast
(higher is better)

48. Why is Marko Fast?

49. HTML streaming for the server
Writable async stream
Compiled

50. VDOM rendering for the browser
Async VDOM tree builder
Compiled

51. Static sub-tree optimization
Created once
Reused for every render
Compiled

52. Server-side rendering
(with seamless isomorphism!)
Server Browser
HTML + { state, input, globals }

53. markojs.com
github.com/marko-js/marko
Gitter: gitter.im/marko-js/marko
Twitter: @psteeleidem / @MarkoDevTeam
Thank you! Please click