1

I'm having a difficult time understanding how web applications work. Please help me understand without giving me google definitions. Baby steps/words would be appreciated =) From what I understand so far:

Okay so say we use Flask or Django ( python frameworks) for the backend.- This would be used as a base for our web app.Provides restful requests and some templating(?)

Then we would use HTML and CSS for the basic structure and styling needs?

Why do we need to use Javascript then. Does JS make the page dynamic,interactive,etc?, Like click of a button or something ( give me simple examples).

And then I see people using JS frameworks like Angular,react,ember, etc as a client-side framework. Can someone explain how the backend with python works with front-end with these kind of frameworks?

Like don't tell me what these frameworks are, tell me in simple words/examples what they actually do.

Flask VS Flask+JS VS flask+angular ??

Can i still build an application that does simple things without using Javascript or (angular,react,etc)?

So in conclusion, please give me the ingrediants needed for a web app and what each piece does. So maybe examples of simple apps built JUST with flask, JUST with angular, and one with BOTH.

closed as too broad by user40980, gnat, durron597, user22815, Ixrec Sep 20 '15 at 18:13

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

1

I am not going to comment on the specific frameworks that you have mentioned, but I will try to explain the concept .

The first thing you need to understand that there are two players her :

  • The Server side ( Python, Php, Java )
  • ..and the Client side ( javascript, jQuery, Angular etc .. )

The second thing is to know and distinguish between languages , framework and libraries ( even though in my answer I might ignore that )

After you will understand that , everything else is easy to explain . ( with the introduction of HTML5 - that border between client and server was blurred a bit - but for the sake of the answer I will ignore that )

With a web app, first, the client side acquire and process some data , it can be many things depending on the app itself ( like database queries , data manipulation etc ) - but then , the result is HTML markup and some other code like Javascript and images - and it send this data in the form of HTML over some protocol ( lets say HTTP ) to the client ( Let´s say a Browser ) resulting in the three-tier architecture ( data-logic-presentation) .

When it reaches your browser, the code is rendered into a UI that you ( the user ) can really see and interact with . This is where the HTML and Javascript comes to play in the form of the DOM tree.

You see, some calculations regarding the app ( UI related ) Can be only made on client side for example showing and hiding elements (like error messages at login ) , changing element values, special effects , form submission buttons, dynamic situations and general input related actions etc ... in other words, DOM manipulation.

So why the frameworks ? Well, even if the definition is a bit different , you might want to look at frameworks like some kind of a library that someone wrote with generic functionality , that will help you write the code faster by reusing functions ( or structure ) they have already made available.

( and yes, there is a difference between library and framework, but you asked for a simple layman answer )

Regarding your question

" Can i still build an application that does simple things without using Javascript or (angular,react,etc)?"

Sure you can . But the real answer is it will depend on what you want your web app to do and how it will look . No problem writing a simple web app without javascript . Simple .

But here you have to distinguish between "javascript " and "javascript libraries" or "javascript frameworks" .

Without javascript as a whole , it would be much more difficult , and probably your app would be very limited . without the frameworks, well - yes, it can be done - but it would mean though ,depending on the goal , that you will probably have to write much more code and will probably need higher skills .

Now, back to HTML5 - it could shake a bit the foundations of the above answer, because HTML5 allows for some actions that were formally in the realm of the server side - to be done on client side . But that does not change the concept that some actions must and can be done only on server side , and some , only on client side .

Weather you use frameworks or not and on which side of the app ( or both ) is totally up to you - but with today's standards, it is very hard to ignore them completely - and remember that they are just tools , and tools must be chosen according to the job at hand so for every webapp the answer would be different.

  • Thanks! that was helpful. So what would be examples of common apps we see everyday that are built only on the client side? Apps that are built using both client+server side ( a to-do list? since it requires saving data?)? If say I wanted to build an app which calls a food menu API my college provides, and returns the food servred that week in JSON. I want to make a web app that displays those foods online, and users can click and see the nutrition facts. Would that need a database or can that simply be done only in Javascript, since I'm just calling the APIS? – Angular Sep 20 '15 at 4:18
  • Theoretically, what you described ( regarding food ) can be achived only on client side - but remember that specific for that webapp to work , someone has already made the server side ( in the form of API ) , and also, that you will essentially be "blind" as the operator , because there will be no user-login ( which requires server side ). What you describe is a simple informational web page rather than a web app . a to-do list can be built both ways ( clien- server and also only client) but each has pros and cons that would be too long to discuss here . – Obmerk Kronen Sep 20 '15 at 4:34
  • THis is the app I'm talking about. uwmenu.com What would I have to do in order to make an interactive app like that? – Angular Sep 20 '15 at 4:35
  • well, since it is an open source repository and is hosted on github , you could just go and take a look at the code . – Obmerk Kronen Sep 20 '15 at 4:38
  • I meant could you explain why a backend was used. So Jquery was used instead of angular, for the client-side. but why does an app like this need a database or flask, since it's just displaying things in the browser. I'm just trying to understand the concept – Angular Sep 20 '15 at 4:40

Not the answer you're looking for? Browse other questions tagged or ask your own question.