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

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:

Web application is not all code:

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:

  1. All frameworks allow writing component-based web software
  2. All frameworks use modern toolsets and languages
  3. All frameworks allow deploying on any cloud platform
  4. All frameworks have a huge community and support system
  1. Software changes too often
  2. Dependent libraries may not work properly as the new version released
  3. 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.
  4. Learning curve can be high
  1. Angular is famous as an opinionated framework. That said, it comes with a lot of packages and dependent libraries, which is a double-edged sword. You don’t have to compare and choose a library with your limited experience. Framework has already built the best for you. In my experiences, I have used some of the dependent packages for example routing or animations without any problems. If you don’t need a library, you simply don’t use it and it will not be included in your final bundle (aka tree shaking). Angular is one of the best frameworks out there, but it is unpopular because they rewrote the framework when it became more well-known, leaving many frustratedly rewriting all their code. However, they have now revived their glory with their recent versions Angular 8/9. Angular uses TypeScript as a code language which is a type-safe version of JavaScript and easy to understand and use. Angular uses separate files/sections for code-behind and markup so it is easy to read.
  2. 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.
  3. 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. Involve the development team as early in your decision-making process as possible.
  2. 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.
  3. Don’t rush to take out any framework out of comparison.
  4. 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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store