In the JavaScript world you find developers have pretty strong opinions on which front end framework in the best. I haven't seen many developers pit them head to head and do unbiased analyses on them. This article attempts to do just that.

The first order of business is to pick a measure by which all three of these can be evaluated. Performance is one major factor, but has been analyzed to death. As developers we tend to be fanatical about performance, but when you consider that it is likely to be everything other than your framework (APIs, infrastructure, assets) that have a larger impact on performance than the framework itself. Effectively, this makes speed low on my list of considerations.

The most important measure of the choice of a framework is the developer experience. Most of us as developers are implementers. Our job is to take business requirements and implement them in code. To be good, a framework should get out of the way and let me get on with solving the business problem without overly taxing me with making choices about how to deal with the technology.

In order to give me the tools I need to solve a problem a framework should have a clearly defined process of observing SOLID principles. To evaluate this I'll start with a simple set of requirements and implement them step by step in each framework and evaluate how each one goes about observing these principles. To score well with these principles the framework should provide me with a way to do these things, or at least be no harder than vanilla Javascript.

Requirements

I will build a simple widget that pulls weather information in from an API and displays it. It should default to the user's current location, but it should allow the user to type in the name of a different city. It should display the current temperature in Fahrenheit as well as on a temperature gauge. It should display the low and high in fahrenheight, as well as the current 'conditions'. The locale should also be displayed if available.

Let's move on to the implementation!

• Part 1 - REACT