Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

3,220 views

Published on

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?

Published in: Technology
  • Be the first to comment

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

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

×