Why Creating SPA-Based Websites?
by Thomas Urban
- Separate Code Development From Hosting Your Website: All your website's functionality can be developed using your favourite integrated development environment such as Visual Studio Code or Webstorm.
- Strong Ecosystem: Developing web frontends usually relies on a certain framework such as ReactJS, Angular or VueJS. Either of these come with a huge amount of third-party components and extensions to be integrated into your website project. With a powerful ecosystem of npm, the package manager of NodeJS, it takes very few steps to add components to your project and have them integrated into the generated code.
- Version Your Code: Versioning your code might be hard when you actually would have to version the files of your content management system as well. This is a whole different story regarding your code and your code, only.
Leaner Setups: Developing code requires setups that can be highly automated. Setting up frontend development is a matter of running two or three tasks. And since your content management system won't have to compile documents from content to include certain design themes etc. setting up the content management system will become a lot easier as well. Just focus on basic functionality, user management and content control. Don't care that much about themes.
Leaner setups simplify scaling up your set of servers for staged release of website as well as the members of your development team.
Such lean setups on behalf of a content management system will cause less headache next time there is a major upgrade to be installed for you don't have to customize the content management system as much as you would have done before.
- More Features: Switching from page to page won't imply switching from HTML document to HTML document anymore. This enables your frontend to have custom animations and other kinds of visual effects while transitioning from one page to the next one.
- Faster Page Switching: Due to requesting content for next page, only, the time to load next page will be reduced most significantly. It might be possible to fetch all content of a small website at once and stop fetching any further content while user is navigating around resulting in a near-zero-delay for switching from page to page.
- Faster Loading Time: Even though an SPA has to load the code and design prior to fetching the content to be presented, it is possible to cluster any such application so code and design isn't fetched unless required for presenting some requested content. This will strongly improve the initial loading time of your website while keeping times for switching from page to page as low as possible, too. Using modern tools such as WebPack splitting your application into clusters of code has become a convenient and simple task.
Security: Attacking your website would require to attack the code files. Neither these code files nor the initially delivered HTML document rely on certain content anymore. They are static. Delivering them require very simple web servers, only. And due to their static content it's possible to automatically detect attacks by comparing checksums over actually delivered files with checksums from an internal database. Fixing code is as easy as re-deploying them from your local version control system.
By separating code and content - or frontend and backend - it's possible to use different servers to provide these parts of your website. Thus hacking the content management system won't instantly put your code files in jeopardy. And any attacker needs very different strategies to attack a web content management system on one side and a most simple file server on the other side. Just compare recent vulnerabilities detected in WordPress as the most popular content management system as of today and nginx fully suitable for serving static files. As of today, there is no registered vulnerability for nginx in 2018 and 23 in total since 2009, but 10 on behalf of WordPress in 2018 and 189 in total since 2009. What software would you like to serve your website's backbone with regards to its security?
- Green IT: Well, that might be a bit off, but serving static files is a very simple task. You don't need tons of RAM and superfast CPUs to handle tens of thousands of request per second for downloading code files this way. So you can stick with smaller and older hardware, or concentrate code files of several websites on a single small server. In addition the content management system won't have to compile documents for each and every user resulting in a lot less operations required to deliver requested content. In fact, using proxies for caching content in static files will have a significant effect on performance as well while preventing unneccessary load from your valuable hardware for hosting backend software.