3 common ways to create a website
Nowadays, there are different approaches to create a website from the Developer’s perspective. I would like to briefly describe the most common ways and comparison between them.
Server-side generated
This is the old-fashioned but still valuable method to create a website. All the HTML code generates on a server-side and browser is receiving it as a synchronous server response.
You can use different technologies for the server-side such as PHP, Python, Ruby, Node.js and so on. If you don’t like to create a new code from the scratch, you are more then welcome to use CMS/CMF/Framework based solutions from the huge list below:
CMS/CMF:
- Shopify (PHP)
- WordPress ≥ 4.7 (PHP)
- WebAsyst ≥7.0 (PHP)
- Django CMS ≥3.4 (Python)
- Camaleon ≥2.0 (Ruby)
Frameworks:
- Symfony ≥3.4 (PHP)
- Laravel ≥5.4 (PHP)
- Django ≥1.8 (Python)
- Rails ≥2.3 (Ruby)
As for the client side, you can just use basic technologies like HTML, native Javascript and probably jQuery to simplify some routine JS operations.
Pros:
- Fast server-side generation
- Possibly complicated application logic
- Basic frontend stack of technologies (HTML, JS, likely jQuery)
- Easy indexing by Search Engine bots
Cons:
- Low interactive
- Medium to High server infrastructure requirements
- High coupling of the client and server code
Single Page Application (SPA)
A modern approach is to create an SPA — Single Page Application using Frontend Frameworks. In this case, all the app logic located on the client-side level, all the server-side request are asynchronous. A frontend is highly responsible due to its nature — there is no Server-side HTML generation. In this case, a web app is not spending time for a network communication to show new page or form, all of the pages do not require a page reload. That is why it is called Application.
Backend for an SPA is usually REST API and it might be detached from the frontend which allows you to deploy them on different domains. One of the very popular approaches is to use microservices as a backend here.
Javascript frameworks and libraries:
- React.js ≥ 16.0
- Angular ≥ 4.0
- Vue.js ≥ 2.5
Pros:
- High interactive
- Medium to Low server infrastructure requirements
- Code separation (client side and server side)
- Low coupling of the client and server code
Cons:
- Possibly complicated client-side logic
- Advanced frontend stack of technologies (as above)
- Hard indexing by Search Engine bots
Hybrids
Just combine anything from the server side generation approach with SPA ways and you will create a hybrid website.
As is in the EV cars there are different types of hybrid approaches. Let’s just discuss two of them.
For instance, you can have a Server Side Generated HTML website combined with an SPA working only for the one page. It could be useful if your website has some of the pages with a really interactive and complicated frontend logic. This is similar to a Hybrid Vehicle such as Toyota Prius.
Pros:
- Fast server-side generation
- Possibly complicated application logic
- Easy indexing by Search Engine bots
Neutral:
- Medium interactive
- Medium server infrastructure requirements
Cons:
- Still high coupling of the client and server code
Another way to create a hybrid is to use an SPA with a prerendered code for the first page load, based on a URL. The basic idea is to utilise the same codebase and the same language — just use Node.js with an appropriate plugin. This is similar to a Range Extended Electric Vehicle (REEV) such as BMW i3 with REEV option.
Pros:
- High interactive
- Medium to Low server infrastructure requirements
- Code separation (client side and server side)
- Low coupling of the client and server code
- Fast server-side page prerendering
- Easy indexing by Search Engine bots
- Reusing the same codebase
Cons:
- Possibly complicated client-side logic
- Advanced frontend stack of technologies
Overall
Based on the information provided you can choose a way to create a website based on your needs. For instance, if you need a rich media content website then you would probably need to use an SPA approach. However, if you need to build a standard shopping cart website it is easier to use prebuild solution like Shopify or Magento. If you still would like to have more interactive pages on your online shop you still can use a Hybrid approach with a Server Side Generated HTML plus SPA for some pages.
As for me, I am creating a small informative website as a side project with some logic and I use a hybrid SPA approach including React for the frontend-side, Slim Framework (PHP) for the API and going to add a Node.js prerendering.
If this article was helpful or interesting please hit the clap button and feel free to share it. I’ll be sure to deliver you more articles in the weeks to come.
