When I planned to upgrade the CS1101S DG Website project, selection of the technical stack became a big headache. The current decision is
- Backend: Spring Boot 2.x
- Frontend: Vue.js 2.x + Bootstrap 4.x (integrated with Vue.js using Bootstrap Vue)
In this post, I would like to present the decision-making process.
What are the possible languages, frameworks?
Certainly, there are many different choices. Let’s compare them as follows. To select a backend framework, it is essentially to select a server-side programming language.
- Java (current choice): good for scalability and maintainability, used in many enterprise applications. As a relatively old language, its robustness is no doubt.
- PHP: also a traditional choice. However, its performance is not as good as Java (since Java is a fully compiled language, PHP is parsed into opcode and sent to Zend Engine).
- Ruby: a dynamic-typed language, which becomes famous due to Ruby on Rails. You can write less code to achieve more functionalities. However, its performance is even worse and its development environment is also not trivial to set up.
- Node.js: a newer technology than others. It provides a unified language for both frontend and backend development. It is fast since it leverages JavaScript event loop to create non-blocking I/O.
- Python: clear and compact syntax that is helpful to developers. Similar to Ruby, it has potential performance issues.
Aligned with the above description, the languages provide the following frameworks:
- Java: Spring, Spring Boot, Spring Cloud.
- PHP: Laravel, CakePHP.
- Ruby: Ruby on Rails.
- Node.js: Express, Sails.
- Python: Django.
However, to select a frontend framework, there are usually two steps:
- Select an interface-design framework: whether to use raw HTML+CSS+JavaScript or newer MVVM techniques such as Vue.js. In other words, you need to decide whether to build a single-page application (SPA) or multi-page application (MPA).
- Select a UI element library: whether to use Twitter’s Bootstrap or Alibaba’s Ant Design.
Let’s first decide which interface-design approach to select:
- Raw HTML5+CSS3+JavaScript: easier to learn and straightforward for beginners. It is a more classical approach that you can find a lot of resources online.
- React.js: declarative component-based library. It is developed by Facebook.
- Angular.js: especially useful for building responsive interfaces. It is maintained by Google.
- Vue.js (current choice): a progressive frontend framework. It is contributed by the open-source community.
Then, we will decide the UI element library to build beautiful interfaces:
- Bootstrap (current choice): the most popular CSS+JavaScript mobile-first library in the world. It can also be taken to the next level by using themes, such as those provided by Bootswatch. To integrate it with Vue.js, we can use Bootstrap Vue.
- Ant Design: many polished and usable components for React.js. It is maintained by Ant Financial from Alibaba Group, a Chinese multinational technology corporation.
- Element UI: tuned for Vue.js by Eleme, a Chinese technial company, whose primary service is online food delivery. Its documentation is not as nice as others.