building the ui: a comparison of react, vue and marko
TRANSCRIPT
![Page 1: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/1.jpg)
Building the UIA comparison of React, Vue and Marko
Patrick Steele-IdemJune 7, 2017
@psteeleidemNode.js Denver Meetup
Marko creator
![Page 2: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/2.jpg)
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
![Page 3: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/3.jpg)
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
![Page 4: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/4.jpg)
Our website is criticalfor our business
![Page 5: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/5.jpg)
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
![Page 6: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/6.jpg)
So what does eBay's front-end stack look like?
![Page 7: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/7.jpg)
2013-2011-2015
![Page 8: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/8.jpg)
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
![Page 9: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/9.jpg)
Lasso.js
web app
servicespages components
platformUI library
![Page 10: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/10.jpg)
![Page 11: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/11.jpg)
• 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
![Page 12: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/12.jpg)
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
![Page 13: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/13.jpg)
@
![Page 14: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/14.jpg)
![Page 15: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/15.jpg)
![Page 16: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/16.jpg)
Organic
![Page 17: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/17.jpg)
Areas of Commonality
Input DOM/HTML
Custom EventsDOM Events
StateAPI Styles
UI Component
![Page 18: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/18.jpg)
Similar Lifecyle Events
onCreate() → onInput() → render() → onMount()
onInput() → render() → onUpdate()
render() → onUpdate()
First render
New input
Internal state change
![Page 19: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/19.jpg)
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
![Page 20: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/20.jpg)
Counter.jsx Counter.marko
![Page 21: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/21.jpg)
Counter.vue Counter.marko
![Page 22: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/22.jpg)
Custom Tags
1 2
3 4
5
11 2
3
✔ DRY
![Page 23: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/23.jpg)
Custom Tags(with implicit imports)
![Page 24: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/24.jpg)
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
![Page 25: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/25.jpg)
Passing Data
![Page 26: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/26.jpg)
Syntax
OR
![Page 27: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/27.jpg)
Marko Concise Syntax
![Page 28: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/28.jpg)
DOM Events
![Page 29: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/29.jpg)
Custom Events
Subscribe
Publish
![Page 30: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/30.jpg)
Client-side Rendering API
![Page 31: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/31.jpg)
Server-side Rendering API
![Page 32: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/32.jpg)
Here's how I would describe Vue…
![Page 33: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/33.jpg)
Defining a UI Component
Option 1: JavaScript inline strings
![Page 34: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/34.jpg)
Defining a UI Component
Option 2: <script type="text/x-template">
+
In an HTML file far, far away…
![Page 35: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/35.jpg)
Defining a UI Component
Option 3: Single-file .vue components
![Page 36: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/36.jpg)
Defining a UI Component
Option 4: Multi-file .vue components
![Page 37: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/37.jpg)
Defining a UI Component
Option 5: Multiple languages
![Page 38: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/38.jpg)
Defining a UI Component
Option 6: JSX
![Page 39: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/39.jpg)
Registering a UI Component
Option 1: Local registration Option 2: Global registration
![Page 40: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/40.jpg)
Awesome Tooling for Marko
https://atom.io/packages/language-marko
![Page 41: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/41.jpg)
Autocomplete
![Page 42: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/42.jpg)
Snippets
![Page 43: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/43.jpg)
Hyperclick
![Page 44: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/44.jpg)
Prettyprint
![Page 45: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/45.jpg)
Async!
![Page 46: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/46.jpg)
![Page 47: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/47.jpg)
Marko is fast(higher is better)
![Page 48: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/48.jpg)
Why is Marko Fast?
![Page 49: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/49.jpg)
HTML streaming for the server
Writable async stream
Compiled
![Page 50: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/50.jpg)
VDOM rendering for the browser
Async VDOM tree builder
Compiled
![Page 51: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/51.jpg)
Static sub-tree optimization
Created once
Reused for every render
Compiled
![Page 52: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/52.jpg)
Server-side rendering(with seamless isomorphism!)
Server Browser
HTML + { state, input, globals }
![Page 53: Building the UI: A comparison of React, Vue and Marko](https://reader031.vdocuments.us/reader031/viewer/2022030318/5a6ed3487f8b9a70728b66ed/html5/thumbnails/53.jpg)
markojs.com
github.com/marko-js/marko
Gitter: gitter.im/marko-js/marko
Twitter: @psteeleidem / @MarkoDevTeam
Thank you! Please click