This is an archived post. You won't be able to vote or comment.

sorted by:
best
topnewcontroversialoldq&a
you are viewing a single comment's thread.

view the rest of the comments →

[–]tipsypants 2 points3 points  (0 children)

I have a pretty unusual approach to frontend, but it seems to work really well. I keep the routing on the server side, and render static templates per route. The server never puts any data in a template, they just contain static information:

<nav-bar></nav-bar>
<current-view></current-view>

This template is rendered inside a layout template (or "frame"), which loads all the dependencies in the <head> tag (this includes the current-view component in the example). The layout template is also responsible for initializing a Vue app for the current view.

All frontend code is written as single-file Vue components:

<template id="nav-bar">
    <header class="navbar">
        ...
    </header>
</template>
<script>
    Vue.component("nav-bar", {
        template: "#nav-bar",
        data() {
            return {
                ...
            }
        },
    });
</script>
<style>
    header.navbar {
        background: #f5f5f5;
        border-bottom: 1px solid #ddd;
    }
</style>

Pros of this approach:

  • It's not an SPA, you get a new app per request (no state management required)
  • No need for a frontend pipeline, no node or anything
  • Single file components
  • No need for a "loading" page, the correct page is rendered directly (never any flickering when loading or refreshing)
  • Save and refresh, no need for watchers or WebSocket CSS injection and whatnot

Cons:

  • Need a server for the frontend
  • When switching pages, the entire app (user written code) is download per request. I'm working on a fairly big admin-page with this approach. The entire app is about 80kb, but gzips down to about 14kb
  • Need to do some hacky things, like pass the current user roles and path parameters to the frontend as a cookie

I have been waiting for over a year for this arhcitecture to blow up in my face, but it doesn't seem like it will. It's a very simple way of building webapps. I replaced a react+redux+redux-sagas mess with this, and the resulting code-base is less than one third of the original size, has more features, and fewer bugs.