Upload
patrick-steele-idem
View
955
Download
0
Embed Size (px)
Citation preview
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