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__
- main.js is entry point to app
- js files are compiled
- css is extracted
- js and css files are output
- 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)
- Create url route on backend
- Create view with content on backend
- Add context in view to initialState
- Add new URL path to match in react router
- Create component for router to load
Dev workflow (existing page)
- Change context in view
- 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