Progressive strategies for integrating Vue into existing backends

A little background

Goals

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?

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

Thanks!