Modern Web Frameworks Guide For Decision Makers

Disclaimers and exclusions:

  1. In this article, I will primarily offer web solutions based on the client-side Single Page Application/Progressive Web Application frameworks like Angular, React or Vue.
  2. I will not offer web solutions based on the traditional server-side MVC Web frameworks such as ASP.NET MVC, Django, and Ruby on rails or the Java Spring framework. Additionally, I will not offer solutions based on WordPress or vanilla javascript. Traditional MVC frameworks or no frameworks can also be a great solution for your use case.
  3. Some of the client-side JS libraries/frameworks can be a great solutions like backbone, ember, Aurelia, knockout, ejs, handlebars, JQuery.
  4. This article does not endorse one technology over another.
  5. WebAssemblies technology allows us to use high level languages such as C/C++, C# to create web applications. In my opinion, WebAssemblies currently is not as mature as some other web technologies, so it will not be evaluated in this article.
  6. This article contains my views and opinions; if you plan to use any technology, make sure you do your due diligence and research before deciding to use them in a production application. I will not be responsible for any failures.
  7. It is possible that the company plans to develop a mobile application using either this web technology or a different one. We will discuss the mobile applications approach in a separate article.
  8. There are mobile frameworks based on all the SPA frameworks so the mobile aspect is not evaluated in the comparison.

Introduction

There are many articles on the web explaining the differences between modern web frameworks. They explain the history of the framework, market trends, framework performance metrics, and the code syntax. If you are interested, simply search the web or click the links below:

I suggest creating a document and answering the questions below:

  1. What is the business value of your application?
  2. What are the cost savings or revenue from this effort? What is the ROI? Put a dollar figure to it per time period.
  3. What would be the build/modernization cost? Calculate the approximate dollar amount based on the size and complexity of the app.
  4. How much time can be allocated for this modernization effort? Is there a deadline?
  5. Is the current website working fine? Is it generating revenue that will justify the cost? Is it in maintenance mode?
  6. What technologies are currently being used in the company across the product suites?
  7. What skill sets do my current developers have?
  8. What skill sets can be learned or taught quickly?
  9. What is my development and support training budget?
  10. Are applications deployed on-premises or in the cloud?
  11. How much flexibility, support, and resistance will I have from the management and developers if I am trying to introduce a new technology? (Prepare justification!)

Think high-level plan beyond your web application:

Understand that in order to write a web application, you will need to bring dynamic data (JSON or some other format) to the browser so you have a database (either RDBMS or NoSQL) and some technology to write APIs or Micro-services. What technology do you plan to use? How do you plan to modernize the back end or the middleware? What is the timing of migration of other pieces?

Web application is not all code:

A very important point I would like to make is that web application is not all code-behind language (typescript, javascript, or any other language you will use). It is also HTML markup, CSS styling, images, graphics, fonts, animations, and in some cases, audio, video, accessibility, cross-browser, old browser support, and more. All of this makes your app eye-catching and interactive — So, no matter what framework you choose, you will need to (re)write it. Do you have help that is skilled in these technologies? This effort can even be past half of your entire web codebase!!!

Common Myths:

  • I am a startup so react is more suitable
  • I am an enterprise app so angular makes more sense
  • I don’t like Angular because I had an issue when I was trying to use it 4 years ago
  • Vue is light and fast
  • Angular is heavy and bulky
  • I heard really good things about React.js from my friend

Decision process:

Congratulations! You have identified that you need to use a modern framework.

  1. All frameworks use modern toolsets and languages
  2. All frameworks allow deploying on any cloud platform
  3. All frameworks have a huge community and support system
  1. Dependent libraries may not work properly as the new version released
  2. It can be good or bad depending on how you look at it — good if you are providing input, committing code to open source libraries, and influence it anyways. In case of issues, you may not get a timely answer or support.
  3. Learning curve can be high
  1. React is a DOM manipulation library. Basically, it is allowing you to write components (JS, HTML, and CSS). That’s it! The basic package doesn’t come with anything else — so what about HTTP, routing, animations, etc. There are one or more community projects/packages available that you can research and choose from. React has the largest community. Is this spending time good or bad? Do I want to put the time to research or I want something available out of the box? Do I want choices? Decide for yourself! React comes with TypeScript or JavaScript.
  2. Vue is also a DOM manipulation library, the newest of all and has some micro enhancements compared to other frameworks. Vue also comes with TypeScript or JavaScript.
  1. Build POCs/prototypes/edge cases. See it yourself in action with all the frameworks. Test it on all the browsers. Allow plenty of time for this phase.
  2. Don’t rush to take out any framework out of comparison.
  3. Don’t focus on performance metrics in this evaluation. Rather, focus on productivity, usability of the framework, tools, and community support in case of issues.

Cloud | Web | Mobile | DevOps — Consultant