Hybrid Server Side and SPA applications

Tharshan Muthulingam

https://twitter.com/tharshan_09

hello@scrumgenius.com

SPA Apps

React, VueJS, Angular

 

  • Client side routing
  • Loaded through JS bundle in single index.html page.
  • Server side rendering with NodeJS
  • REST API or GraphQL

SSR Apps

Django, Flask, Laravel

 

  • Server side routing
  • All data and HTML is sent by server
  • Data is fetched through databases via ORM or SQL queries
  • MVC/MVT pattern

Best of both worlds

Server side routing

Data fetching via ORM

View rendering through client side components (ReactJS etc)

Server Side framework Advantages

Optimised ORM queries

Single context/payload from view, not multiple API requests to fetch different sources of data

Easily cachable

Permissions handled by your framework

Client Side framework Advantages

Composition through components 

Easy to build rich user interfaces

Large ecosystem of libraries and UI components

Modals, forms, validation, quicker feedback

OK, how does it work?

Query data on server, collecting the state, and then transform into JSON

A html template renders dynamic content. Loads css and js. The context/state is passed in from the backend, and set JSON value to window.___INITIAL_STATE__

  1. main.js is entry point to app
  2. js files are compiled
  3. css is extracted
  4. js and css files are output
  5. BundleTracker saves a JSON manifest of the latest build

 

Webpack

Load the state and inject into React App using Redux, or other state management library

Implementing bundle tracker for any language

  • Compile webpack
  • Read JSON manifest file
  • Use template library to output script and links tags

Dev workflow (new page)

  1. Create url route on backend
  2. Create view with content on backend
  3. Add context in view to initialState
  4. Add new URL path to match in react router
  5. Create component for router to load

Dev workflow (existing page)

  1. Change context in view
  2. Change frontend page component

frontend - compile and watch for changes...

Pros

  • Fast dev workflow
  • Tighter integration between backend data and frontend
  • Profiling views and optimising backend is easier.
  • No more APIs for all data concerns
  • API for async operations
  • Simple GET and POST
  • Handling permissions are easier through framework
  • Error handling and 404s is much simpler.
  • Closer to MVC/MVT pattern

Cons

  • Most links or actions lead to page refresh
  • JS bundle size is larger
  • Not SEO friendly
  • Form data needs to handled carefully

Thanks

Tharshan Muthulingam

https://twitter.com/tharshan_09

hello@scrumgenius.com

Currently being used in ScrumGenius

 

A software service that helps teams run automatic weekly check-ins and daily stand-ups to help managers to track the engagement and performance of their employees.

Hybrid Server Side and SPA applications

By Tharshan Muthulingam

Hybrid Server Side and SPA applications

Hybrid Django + ReactJS

  • 556