Putting an order in the web app stack technology chaos

I am trying to understand things going on in the web app environment and I came across various technologies that I would like your input to set things into order.

So a web app has: 1) A front end 2) A back end 3) A database

Keep in mind that my main focus is simplicity and business users, i.e. not thousands and millions of users at the same time.

Let me start with the "simple".

A database is irrespective of the front end and as long as your back end is supporting it, right?

Top databases at the moment: MySQL, MongoDB, Oracle, PostgreSQL

(I ignore Microsoft products by the way)

Let's go to the Back ends. This is basically a programming language along with a framework sitting on a server and handling the comms between the front end and the database, correct? From what I saw so far the most popular ones are: Ruby on Rails, NodeJS, Django (Python) and Zend (PHP).

Another question on the back ends is that you can only have 1 framework for you backend per server or you can have Rails and Zend together?

Moving to the front now and the most complicated one. From what I understand everything is HTML5 (HTML+CSS+JS) but it's extended using various frameworks, correct? Several frameworks that I have found as pretty popular are AngularJS, ReactJS, EmberJS, JQueryUI and many more. Are all these frameworks interoperable? That is can you have more than one for your web app?

I also found a few hybrid frameworks such as Meteor and Ionic. From what I understand they provide the same codebase for a web or mobile app. Are these frameworks as good as they claim to be?

Thanks in advance!