Progressive strategies for integrating Vue into existing backends

A little background

Goals

Help you choose an integration strategy

Help you implement an integration strategy

The tempting strategy...

Frontend has no JS

Frontend is 100% JS

Frontend has no JS

Frontend is 100% JS

?

Middle grounds

  1. Parts of pages (drop in script tag)

  2. Parts of pages (with Vue CLI)

  3. Take over some pages

  4. Take over all pages

1. Parts of pages

(drop in script tag)

  • Gentlest learning curve
  • Nothing has to be rewritten
  • API requests avoided by inlining JSON into props

😄

1. Parts of pages

(drop in script tag)

  • No advanced dev features
  • Many components leads to huge JS file
  • Vue might fight with other JS (e.g. jQuery)

😢

2. Parts of pages

(with Vue CLI)

  • Advanced dev features
  • Still nothing to rewrite
  • Still no API requests necessary
  • Code splitting manages JS file size

😄

2. Parts of pages

(with Vue CLI)

  • Initial setup can be very complex
  • Modern mode no longer automatic
  • No single source of truth for assets
  • Vue might fight with other JS (e.g. jQuery)

😢

3. Take over some pages

  • Setup actually less complex than taking over only parts of pages

😄

  • Setup still not trivial
  • Still no source of truth for assets
  • Difficult to avoid some duplication
  • Backend data requires API requests 
  • Entire pages must be rewritten

😢

3. Take over some pages

4. Take over all pages

  • Simplest setup, next to script tag
  • Single source of truth for all JS, CSS, and other assets

😄

4. Take over all pages

  • The entire frontend must be rewritten
  • A lot of relearning how to build the same features
  • Difficult to manage without a feature freeze
  • Starting here typically creates as many problems as it solves

😢

So what's best?

Parts of pages (drop in script tag)

OR

 

Parts of pages (with Vue CLI)

OR

 

 Take over some pages -> all pages

So what's best?

Parts of pages (drop in script tag) when...

  • No one on the team feels comfortable maintaining a complex integration
  • The app doesn't need much JavaScript
  • You don't have a dedicated frontend team

So what's best?

Parts of pages (with Vue CLI) when...

  • Someone on the team feels comfortable at least learning to maintain a complex integration
  • The app needs a lot of JavaScript
  • You have a dedicated frontend team, so the frontend dev experience is important

So what's best?

Take over some pages -> all pages when...

  • The app needs a lot of JavaScript
  • You have a dedicated frontend team, so the frontend dev experience is important
  • You have apps on several platforms that you eventually want to share code between
  • You want a clearer separation between frontend and backend teams, with only one framework for each team to learn

Learn more

cli.vuejs.org

github.com/chrisvfritz/

vue-enterprise-boilerplate

... other example projects soon? ...

Thanks!

@chrisvfritz

Special thanks to Vuetify and Vue School!

patreon.com/chrisvuefritz

slides.com/chrisvfritz/progressive-integrations-2019-08

Strategies for Integration Vue into Existing Backends

By Chris Fritz

Made with Slides.com

Strategies for Integration Vue into Existing Backends

The MIT License (MIT) Copyright (c) 2018-present Chris Fritz Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

  • 1,131

More from Chris Fritz