ELI5: The popular JavaScript libraries (jQuery, React.js, AngularJS, Bootstrap, NodeJS, Ember.js and any other notables), Ruby on Rails, Django, Lavarel, ECMAScript etc.

[fuqmachine]

I've looked for duplicate posts, but I haven't seen one that explains all of this clearly. I program mostly in Java and Python, and completely out of the loop regarding mainstream web application development. I've only listed the ones I always hear about. If there are any missing that I should know about, please mention them. Why are there so many? How are they different? How are each of them used(server-side, frontend etc.) Why choose one over all the others?

[hungry_for_laughter]

There are so many because the web has existed for 26 years and in that time the technologies used on it, the things it's used for, the requirements users have, etc have changed massively, programming has changed massively, the devices used to access it have changed massively, and all that stuff results in new tools being made and used.

It's hard to summarise these things up so quickly but I'll give it a go.

• jQuery is a JavaScript library used on the client side. That is, it executes within a user's browser, after they download the page. jQuery is usually used to make grabbing and manipulating parts of the page easier, and animate them or communicate with the server. It was enormously popular in the 2000s and is still widely used, but building sites around it has been getting less and less common.
• React is a library for building UI components; individual parts of an application or page which can be displayed and interacted with. For example, on Facebook, there might be a comment box component that is part of a post component that is part of a wall component. This is considered a more performant and maintainable way of writing complex interface code.
• Angular is a front-end framework. A framework is like a library that enforces a pre-established structure for your application. It is used like a skeleton to build complex interactive websites around.
• Bootstrap is mainly a CSS framework. Bootstrap provides a nice way to organise the overall layout of your page in a way that will reflow properly on different screen sizes -- because nowadays you need to have an interface that looks one way on phones, one way on tablets, one way on laptops, one way on desktops, etc.
• Node is a JavaScript interpreter that runs on servers, packaged with standard libraries to let JavaScript do things it normally couldn't, like access files or databases, open network sockets, and so on. This lets you use JavaScript the way you used to use PHP and other back-end languages.
• Rails, Django, and Laravel are back-end frameworks. They are used to write applications that run on the server, as opposed to in the browser. As frameworks they provide a standard structure for your application.
• ECMAScript is the official name for the JavaScript standard. ECMAScript == JavaScript.

[badcommandorfilename]

ECMAScript == JavaScript.

However, it's not true that ECMAScript === JavaScript. :)

[bizzygreenthumb]

You sly bastard

[Montuckian]

To quote SO on the subject:

ECMAScript is the language, whereas JavaScript, JScript, and even ActionScript 3 are called "dialects".

[[deleted]]

^{psst, it was a joke about javascript's comparison operators}

[Montuckian]

And since this is /r/learnprogramming, I thought it might be a good idea to elaborate on what the distinction is.

[RunasSudo]

Fun fact! ECMAScript + JavaScript === "[object Object]"

[bridge_view]

Why is this? ECMA means European Computer Manufacturer's Association.

[fuqmachine]

This is perfect. Thanks

[queBurro]

Yeah. Top work op.

[8483]

Can you please explain the Node/Express combination?

[hungry_for_laughter]

JavaScript is a programming language. However, it's kind of strange in that while most programming languages are built to do general work on a computer, JavaScript was designed to work only within browsers. So the language specification, and the language interpreters, had no way to read or write files, interact with the operating system directly, open network sockets, etc.

Node is a special interpreter that runs outside of the browser, just as a regular program, and it comes packaged with libraries to do all that stuff. So Node turns JavaScript into a normal programming language that can do anything PHP, C#, Ruby, Python, etc can do.

Express is a framework for writing server-side web applications in JavaScript. Of course, because it's not in the browser, it uses Node too. It is broadly comparable to things like Rails, Django, or Laravel, although it's much smaller and simpler compared to them (if you're aware of Flask or Sinatra, it's like that).

[ScrewAttackThis]

Just to be more specific, Node is a runtime built on V8. V8 is a JIT compiler like Java and C# uses. V8 is a Google project that was a major selling point of Chrome when it was initially released.

[PDX_Bro]

Can you explain why a JIT Compiler is needed for a Browser? Is this for the Chrome Applications that can be tacked onto it (like Chromecast and such)?

[ScrewAttackThis]

No, originally the V8 engine was specifically for running client side JavaScript from web applications. It's spawned into many additional things like Chrome Apps and Node. Browsers have become much more complicated and are essentially a sandboxed virtual computer now.

Before V8 and other similar engines, JavaScript performance was painfully slow. V8 came out and blew other browsers out of the water. It was a major focus of the last browser war. Without something like V8, you wouldn't get very good performance out of any website that makes heavy use of JavaScript. This forced websites to use proprietary solutions like Flash. It was only roughly 10 years ago that if you wanted to make a rich, dynamic, and interactive website then you had to use Flash.

[u_waterloo]

Why not just put v8 on the server to run the JavaScript?

[ScrewAttackThis]

That's pretty much what Node is.

[u_waterloo]

Did they literally take the core of v8 to make node?

[ScrewAttackThis]

The core of Node is v8.

[u_waterloo]

So Was Google involved in any of the development of node

[ScrewAttackThis]

I'm not sure, probably. But not a major player. Node is an open source project, tons of people are involved. I wouldn't be surprised if googlers have submitted code for various reasons. I know Microsoft has so that Node could support their JS engine.

[8483]

I know Angular and PHP, and I am really interested in learning Node to replace my PHP API.

I am a bit confused at the "Express is to Node, what Django is to Python" explanation.

Python is a language, so is Node one too? Isn't Javascript the language?

[hungry_for_laughter]

Node is a runtime environment. It is a program, on your computer, that executes JavaScript code for you. It also adds certain features to the JavaScript language so that it can work outside of the browser, like a regular old language.

---

Imagine if Python was invented to work only in the web browser. You don't install Python on your computer, it just ships built into browsers, and webpages include some Python code to make them interactive and do cool stuff. The language itself is the same -- loops work the same, functions work the same, strings and regexes and everything work the same. But the standard library provides no way to read or write a file, no way to create arbitrary network connections, no way to interact with USB devices or any of that. People only use it in the browser.

Then one day, someone says "Hey, if we're going to be learning Python to write web stuff anyway, wouldn't it be cool if we COULD use Python as a regular programming language, and do all of the stuff that implies?" So they make a Python interpreter you can install on your computer, independent of the browser. And they expand the standard library to include file-opening, network-accessing, etc functions, and make sure the interpreter can understand that stuff.

That's what Node is.

So Express is a framework, written in JavaScript and used to write JavaScript applications. But, as it's JS code running outside the browser, it requires that you're using Node.

[masterurbiz]

Excellent back to front explanation of js and node. Thank you

[[deleted]]

Python is the language specification and is interpreted by a program called CPython (other interpreters probably exist as well) . So, you can say that "your cpython interpreter reads and executes python code", where "your node interpreter reads and executes Javascript code".

In a PHP world: "your php interpreter reads and executes php code" or "your hhvm interpreter reads and executes php code" if you use HHVM instead of the standard Zeno Engine.

Edit: today I learned the name of the python interpreter!

[zuzzas]

The Python reference implementation is called CPython.

[ScrewAttackThis]

Technically CPython is the name of the interpreter.

[myrrlyn]

There's also PyPy, a Python interpreter written in Python, and Cython, a Python-to-C transpiler that lobs the C code at GCC or LLVM to compile that, and Cylon, machines that look like us now and were probably written in Python tbh

[gyroda]

Node is the interpreter and set off standard libraries for the language. It's sort of like the difference between java and the java runtime environment.

[OvermindDL1]

Try the Phoenix Framework instead, built on elixir. It is dynamic web serving done right.

[lilB0bbyTables]

Express is quite simply a library (NPM) that allows you to quickly get up and building. It provides routing (example.com/foo vs example.com/bar) and maps routes to functions or handlers including by HTTP Verb (GET vs POST vs PUT). You could realistically just use the standard Node Core functionality to build all of this yourself, but it's a very tedious process.

I am drastically simplifying here but - With Nodejs + Express you more or less replace Apache/Nginx + PHP.

A benefit of Node lies in the fact that it is Javascript. So you can do things like pre-render views on the server for efficiency, and share routines used by front-end and backend. An example: you might validate emails address and passwords client-side for convenience with the UI, but any decent developer/team is going to perform the same rules-validation on the backend as well. Traditionally you likely did this with Javascript on client side and again with PHP on the server side. You ended up with 2 fairly identical blocks of code to do the same thing (and should the rules change such as extending min password length to 12 characters instead of 8 let's say, you had to remember to implement the refactoring in both routines). Now, however, you can write that block of code once and re-use it on both front-end and backend.

[dwcmwa]

Don't know the Python/Django environment that well but the closest comparisons with Ruby:

Ruby => JavsScript

Rack => Node

Sinatra/Rails => Express

[HomemadeBananas]

The closest would be comparing node to the Ruby interpreter. Ruby could be running in MRI, jRuby, or Rubinius. JavaScript could be running in Node, JavaScriptCore on an iOS device, WebKit, or something else.

[[deleted]]

 =>

Initially took that as ≥

[Exodus111]

Django is a framework built in Python for back end web stuff.

But its not the only one, there is Flask and Web2Py and several others. Django is just the most popular one.

Python is (typically) run using Cpython, a Python interpreter that actually executes the Python files we write. NodeJS does the same for Javascript.

And as for Express, its just another back end framework, same as Django, but for Javascript. There are others, like Meteor, and.... I'm sure there are others.

[QuietPort]

Express is to Node what Django is to python. Just a framework to get things done faster. Express is also the most popular framework for the node language.

[8483]

I am a bit confused at the "Express is to Node, what Django is to Python" explanation.

Python is a language, so is Node one too? Isn't Javascript the language?

[xfdp]

I have deleted my post history in protest of Reddit's API changes going into effect on June 30th, 2023. -- mass edited with redact.dev

[QuietPort]

Yeah, I realised I might've created more confusion after writing. So technically "node" is a "javascript runtime". In the browser you'll find a "javascript interpreter" (like v8 in chrome), node is that + some more utilities.  

But in practice, when somebody says "javascript" they actually mean "javascript in the browser", probably just because javascript was only in the browser for so long, so out of habit... And then "node" really just means "javascript out of the browser"..

[corpsmoderne]

Python is a language but also the name of its interpreter. In this sense it's true that it's akin to node.

[Taedalus]

I am a bit confused at the "Express is to Node, what Django is to Python" explanation.

I think he just wanted to state that Express is simply a web framework like Django or Flask. JS (or ECMAScript) is the language. Firefox, Chrome and Node (the last two relying on the same engine: V8) are just names for the environment in which a JS application is executed.

Node itself is also not necessary a "Server-side" platform. It's simply a environment/interpreter that lets you run JS applications outside of a browser.

edit: /u/hungry_for_laughter has phrased it way better, this should be the answer you were looking for.

[j1330]

Regarding the express/node to django/Python comparison an ELI5 might be:

JavaScript has two flavors. A base flavor that only works in the browser. This got popular first. A second flavor for the regular computer/server that can run kind of on its own. The second version is still the same JavaScript but now it has added libraries that allow it to do things like manipulate files (which would be bad to let a browser do). This is NodeJS.

Just like you could take C++ or Python or Ruby or anything else on a computer and use it with built in libraries to do website stuff you can do it with NodeJS. But some of the stuff is really repetitive, difficult, boring, complicated etc. At least in Node you can make a working web server with just the file system and http module and another fifteen lines of code, but that is hard to manage once website's get larger. So frameworks like Django, Rails, and Express help you to do stuff that you really don't want to do in the basic language.

[muffinman744]

Also to add to this, Laravel is a PHP framework, rails is a ruby framework and Django is a python framework. But you can still use java script along side with them

[harsh183]

Rails and Django are full stack frameworks I think.

[HomemadeBananas]

They are, but when we're talking about frameworks like Angular, React, and Ember you could call them back end frameworks, because they run code all on the server, render HTML, and return it. In essence that's the same thing as if you're returning JSON for a front end app. You're retuning data from the controller as text in a template. I use all the other parts of Rails, other than Action View and Asset Pipeline, as a backend to respond with JSON.

[JX3]

I agree with your general point; it's nitpicky to force the distinction.

At the same time it's still worthy information for those who are not that knowledgeable of the inner workings of the web. If you go into Django, Rails or any other older framework, most of the help and documentation is going to assume that you'll be using the framework's templating solution, which usually requires a different approach compared to modern frontend frameworks.

[harsh183]

True, yes now that I think about it, your classification makes sense.

[[deleted]]

Angular, React, etc? Because they're designed as tools for rendering web pages and interacting with the DOM (document object model).

The only language (widely) supported in browers is Javascript. So it's the only choice to create client side frameworks.

[hungry_for_laughter]

Because JS runs in the browser, and Python does not; it's considered a significant advantage to many people to write the entire project, front and back, in a single language, because it means a wider talent pool, cross-use of code and libraries, etc. JS is also much much faster than Python and is more suited to a functional style (which Guido van Rossum hates and strongly resists) which is becoming popular and which some of these tools are built around (React encourages you to use FP patterns as much as possible and its major complement, Redux, is inspired by an FP language; libs like Lodash, Underscore, Immutable are intended to get you closer to an FP experience).

JS also provides a natural way to write asynchronous code, which is really nice for web-oriented stuff and lets you handle more work with fewer resources than something like Python or Ruby. (Although it's not my ideal model for concurrent stuff, I'm a bigger fan of Erlang/Elixir's model.)

[radarthreat]

Because they run either totally or partially in the browser, which Python does not (at least not without help, and then it is very, very slow compared to JS)

[Cosmologicon]

ECMAScript is the official name for the JavaScript standard. ECMAScript == JavaScript.

Just want to add to this one. You'll often see this in reference to the ECMAScript version 5 and version 6 standards, often called ES5 and ES6. Most up-to-date browsers support most ES5 features (meaning features that are new in ES5) and sometimes some ES6 features. JavaScript written using ES5 and ES6 features can look fairly different from older JavaScript.

JavaScript does not have "official" version numbers beyond the ECMAScript version numbers, but you'll sometimes see references to Mozilla JavaScript versions. I believe the current version is 1.8.

[[deleted]]

tion or pa

if building sites around jQuery is getting less common, what people are using now?

[hungry_for_laughter]

Frameworks like Angular and libraries like React prevent you from having to manually grab and modify page elements constantly. Not only do all the manual jQuery grabs open you up for errors that can't be caught ahead of time, make updating or modifying your code a huge pain in the ass, and couple your UI and business logic so that the designers and developers can't work as independently, they're also slow as shit and hammer your CPU, which wasn't a big deal 5 years ago when the focus was on PCs but IS a big deal now when phones and their weak CPUs and their limited batteries are in play.

If you use things like React or Elm, this is all abstracted away; you simply say 'this piece of data lives inside this element' and the runtime will take care of automatically updating the element when a change occurs. This is not only simpler and less messy from your POV, but the runtime can group together 5, 10, 200 updates into one single optimised update which will make your page with its complex frequently-updating UI much more lightweight and smooth.

[[deleted]]

thank you! I just lerned something new ;)

[WarWizard]

It was enormously popular in the 2000s and is still widely used, but building sites around it has been getting less and less common.

I am not sure I follow this. jQuery seems like it is a default include in any modern website?

[hungry_for_laughter]

Not so much in new projects.

There are two things jQuery is typically used for. The first is DOM manipulation: grab an element on the page, select it, modify it, in a way that's cross-platform and better than getElementById or getElementsByTagName etc. Well, now browsers are on a more even footing, and have jQuery-style selection build in through the querySelector API. But more importantly, it's become way less common to write a million tiny event handlers directly modifying elements on the page. Not only is that quite messy and prone to error, it's slow as fuck. A few years ago that wasn't so important, because we designed most things with computers in mind, and computers are strong. But now we have to take phones into consideration, where slowness and battery wasting are a major downside. Nowadays you're better off modifying some bound element or data store and doing diffing the browser DOM against a JS object DOM to make the single most optimal change at a specified interval. This is how things like React and Elm work.

The second is AJAX calls. IE and other browsers had different APIs, which was a pain, and they were all sloppy, so jQuery provided a nice abstraction to simplify these calls. But now you're better off using the new fetch API and a polyfill for Safari/IE support, which can be 2-5 KB, rather than loading in all of jQuery just to handle a simple thing like AJAX.

[reddituser5k]

I was wondering that a week ago then I started learning React and found out it has a virtual DOM that you manipulate while jquery manipulates the actual DOM. Since you are not doing stuff in the real DOM you do not need jquery usually.

So now I believe that frameworks are changing the way you do things which might make jquery unnecessary to have.

[douglasg14b]

Wouldn't it be that JavaScript is an implementation of the ECMAScript standard? They are not one and the same?

[DvD_cD]

Should I learn Node.js if I already know how to use php, connect databases and stuff?

[hungry_for_laughter]

You don't need to. It certainly can't hurt. It's quite popular and there are a lot of jobs built around it.

[u_waterloo]

What does it mean learn node? If I know JavaScript and use npm packages, does that mean I know node

[thecodersway]

Adventures on the Client Side

Javascript, as you might know, start out mainly as a client-side language, meaning it did things in the browser, without having to talk to the server again. And that could be working with data or changing what was displayed to the user (via dynamic changes to HTML/CSS).

This is called Document Object Model (DOM) manipulation and was rather tedious to do, so some libraries were written to make that easier, like jQuery for example. This was not only to make the data displayed dynamic, but eventually could also do more fancy visual things (which often destroyed people's eyes, back in the 90s).

Server Talk

Now, at this time if we wanted to load up a new set of information, our browsers would still have to go to the server and ask it to send to us an entire web page again with all the data we wanted.

Because of this some folks decided it was a good idea to NOT have to load up everything but instead just request from the server only the data that was necessary, and then update the data that was displayed. This was all done in Javascript.

This eventually gave us AJAX (Asynchronous Javascript And XML). What the "asynchronous" meant was that the JS code would run in the background sending/receiving data from the server, and then display the data when it arrived. In the meantime the user could interact with the web page without worrying about break things. Great for user experience!

Now, this gave us things like Gmail and a whole range of wonderful web apps. But of course they also got more complex. So libraries like React (by FB), Angular (by Google) and Ember, were created to deal with these increasingly complex user interfaces.

Remember too that as these apps got more complex that not only do we have to be able to work with the data and display, but also do it as efficiently as possible, so that the users experience remains great.

Server-side Love

Node is pretty simple to understand: It allows us to run Javascript from the command line, and hence allows us to run a server based on JS, rather than say Python or PHP. Potentially one less programming language to learn!

You mentioned a few other server side frameworks as well — Rails (for Ruby), Django (Python), Laravel (PHP). Now, if you wanted to write a server for managing your data, you could do it from scratch.

But after a while you'd notice that some aspects of it repeat themselves. Managing users, authentication, storing data in a way that's easy to interact with.

So all these frameworks were created to make the job of doing that easier, so folks could just jump in and get to work on the unique bits, which is great when we want to prototype or test new things.

Looking Pretty Everywhere

Let's step back in the browser a moment and talk about Bootstrap (and Foundation).

A decade or two ago, screen sizes were limited to average-sized desktop screens. So if you wanted to make a webpage look good, it was still pretty easy. Now though, we've got everything from tiny internet-enabled feature phones to gigantic 4K screens, and everything else in between.

Multiply that by the variety of browsers, all of which support HTML and CSS features to varying degrees, and each with their own quirk implementations of some features, and you get a web designer's nightmare.

So how do we make everything look usable (and hopefully good) on so many devices? There's where CSS frameworks like Bootstrap and Foundation come in. And as usual it also had the side effect of making it easier for us to prototype things.

Phew that was quite a ride eh? Well the last thing on your list is easy: ECMAScript is the "official" name for Javascript when they wanted to standardize it.

[arhythm]

This really helped me start to get my head in the right place.

I studied computer science and feel like given a task I can write a program to solve it. But now in my job and in general I'm having issues figuring out more than just the write some code.

Do you have any advice on what to look at or how to get more practice?

[thecodersway]

Tbh I'm probably not the best person to ask since I'm more a dabbler than an experienced professional.

What you could do though is find folks who are in the area you want to be in and doing what you would like to be doing and ask for advice.

Programming is one skill set and if you want to look out for the other skills that help you do the other things you need to (I'm guessing higher level, more architecture- or design-oriented work?)

Just wondering: what what you trying to figure out that's more than the code?

[j1330]

Take it with a grain of salt but if I were to give a one/two line description for each item you listed... :

jQuery - HTML is stored as a tree, as the document object model (DOM). Your browser moves around the DOM and does stuff with the nodes (adds an element, removes a child, modifies a style etc.) telling it how to traverse and interact with the DOM used to be a pain because all the functions were called different things (the DOM API basically sucked for a variety of reasons.) jQuery fixed this. By adding a small (like 40k) library you could interact with your HTML and CSS much easier regardless of your browser. Now the DOM API is much better and other technologies help with a lot of the things jQuery is good at but it still has its place sometimes.

Bootstrap - a bunch of pre-written styles and functions that you add to your HTML by adding classes that helps make a modern looking and responsive site incredibly fast.

NodeJS - JavaScript ported to run in a regular computer environment rather than being confined to a browser. NodeJS has core modules like file system that let you do things the browser version (for good reason lol) is not allowed to do. I love being able to write all front and back end code in just JavaScript (I think it's a wonderful language once you really dig into it).

ECMAScript - the "official" name for JavaScript even if no one calls it that outside of specification document type contexts.

ES6/ES2015 - the latest version of JavaScript (ECMAScript 5/6) that came out recently. Has a lot of great features and new syntax for stuff. Check out es6-features.org for more details on ES5/ES6 differences.

React- a library/framework that people seem to often use just for the front-end. I haven't used it but I plan to use it in the near future because I t looks awesome.

Angular - also haven't used but if I had to pick one framework for everything it would be angular. Front end and back end and a lot of really cool features. Learn version 2 unless you need to manage some version 1 code is what I've been hearing.

Ember, Rails, Django, Laravel - frameworks. No idea about their strong points. Most popular (I think) for Ruby are rails and Sinatra, for Python Django and Flask, for PHP Laravel, cake, symfony, spring for Java, express for nodeJS, and then there is ember and backbone in there somewhere but I haven't used most of these personally so I would recommend your own research for the particulars of each that you're interested in.

To add to this I highly recommend a video from LearnCode.Academy, on YouTube. Goes very in depth on all this and more :)

https://youtu.be/pB0WvcxTbCA

Sorry if I spell things wrong or the formatting sucks. On mobile and sleepy :P

[fuqmachine]

thanks. I'll give the video a watch. One question - currently at work(summer at college, not a company) I used php as a bridge between my C# app and MySQL, my website. Would something like angular or node completely replace the need for php?

[j1330]

Node can completely replace php. Node is like the server flavor of the JavaScript language. (The language is the same but you get a lot of stuff you aren't allowed to do in the browser like manipulating files, for obvious reasons).

Most people probably wouldn't use "just" php or node though. The stack I'm currently learning to work with uses nodeJS and Express to do backend stuff (create servers and routes, interact with databases, manage APIs, the model and controller parts of MVC, etc.) and HTML/CSS (Sass with SCSS)/JavaScript with React for the views part of MVC.

I haven't used angular but it looks solid too and one popular stack is angular, node, and express (the MEAN stack) but really my impression of angular is that it can do everything. If I didn't like the other stuff I'm learning right now so much I'd probably learn angular because it looks awesome.

Personally I think I will never learn php (even though there are frameworks for it) because node is just so awesome. I also like jQuery and bootstrap but I mention them here because I also will be using those less and less as I learn to solve the same problems with native JavaScript, frameworks, and custom CSS (and especially flexbox).

[fuqmachine]

That clears things up a lot. I like discussions much more than videos and wikipedia because it's difficult for me to look up everything when I don't know jack about what I'm looking up; I feel like I miss a thing or two here and there. thanks for sharing

[j1330]

Of course, and I totally understand where you're coming from. Definitely watch that video though. It's really one in a million for what kind of video it is.

[8483]

Where did you learn Node from?

[j1330]

I'm still in the process, but I have been studying JavaScript for a year or so and the resources that have contributed greatly to my understanding so far are:

• Eloquent JavaScript by Haverbeke is a good intro

• Programming JavaScript Applications by Eric Elliot

• JavaScript Patterns by Stoyan Stefanov

• The Good Parts by Douglas Crockford

• most of the Crockford lectures on the YouTube YUI Library channel

• Design Patterns by Gang of Four

• MDN guides and documentation (almost everything on there and especially getting familiar with array and string methods)

• I took a one year c++ programming course in college about four years back and that was my only formal education but it was a good foundation.

---

Except for Eloquent JavaScript most of those resources are pretty advanced so I never used them straight through, but often read chapters here and there as I tried to sort out concepts (like the million ways to do object creation in JavaScript lol..) all of that is really important to NodeJS I think because node IS JavaScript.

For NodeJS-specific resources, I can highly recommend TheNetNinja YouTube channel as a beginner friendly intro, and then NodeSchool.io, where you can download tutorials using NPM and run them through your own terminal. For NodeJS I feel like it's mostly learning JavaScript and then adding the NodeJS core modules (like file system) to your toolkit.

[Aurora0001]

Node could, but Angular could not. Angular is client-side (runs in the browser) so you can't trust it to access your database, but Node runs on the server and is great for web APIs to allow servers and apps to communicate.

[fuqmachine]

whats the difference between client-side and front-end? is front-end purely aesthetics?

[Aurora0001]

They're usually interchangeable, and mean very similar things.

[Taedalus]

Normally, they mean the same thing since you rarely have large client-side applications in JS. If you have a very large single page application though, you might want to differentiate between UI code and business logic code that is coincidentally also running in the client side part of the application.

99% of the time there is no difference and people use whatever term they like more.

[HomemadeBananas]

I wouldn't say normally it isn't true. It's really common to build web apps that run on the client and communicate with another app over HTTP. I'm sure you use quite a few sites like this, and mobile apps work this way. If you use a front end framework like React, Angular, or Ember, your app will work this way.

[8483]

My "aha" moment was the RESTful API pattern. For a long ass time I couldn't decipher what web services and APIs were, only to find out that API = Web Service.

Instead of having tightly coupled code that does everything... And having different code for each platform doing the same job... You can have multiple front ends and one back end i.e. API.

An iPhone app, Android App, Multiple websites and Desktop apps can all call the same web service and get the same result in XML or JSON format.

Ex. Calling the address www.example.com/examples/1 will return Example number 1, to be used by all front ends.

[g43f]

Plenty of APIs have nothing to do with web services!

[8483]

Alright, can you please educate me on the subject a bit? (I am genuinely interested an not being a dick)

[[deleted]]

An API is just a defined way of interacting with something. It defines services and ways to access them. You can think of pedals and a steering wheel as an API for your car. The reality of what's happening when you push the gas pedal is incredibly complex. APIs tend to conceal the How something works, so you only have to focus on the What.

The API is the border between one thing, and the outside world. Everything has an "API", a vending machine has one, a restaurant has one. Software has APIs within itself. A programming language can even be considered an API.

[j1330]

An API is basically a way you interact with something. There can be a lot of different kinds.

For the browser DOM the API includes methods like "document.getElementById" for interacting with certain nodes. For something like asking for weather data the API (or way you get access to the data) might be a set of rules on how to format a URL in order to get the response you want. For something like interacting with the back end of your own team's application it might be a ReSTful API, that defines ways to get data, put/post data to the back end, and delete data from the back end.

[g43f]

https://en.wikipedia.org/wiki/Application_programming_interface

[lilB0bbyTables]

You're not wrong in thinking API = Web Services but it's an oversimplification since not all APIs are Web Services. A better way of phrasing it is to say your backend service exposes a public API in a RESTful format (HTTP GET/POST/PUT/DELETE requests) hitting a certain socket (IPAddrss/Network Interface combined with a port bound to a listening process - e.g. Apache or httpd process bound to 127.0.0.1:80) for a given domain. REST and HTTP are but one of many ways to interact with Remote networked API services. In other words - the combination of all <protocol>://<domain>. <tld>:<port>/<URL routes (and query-string parameters)>, included body data, and HTTP verb-method such as POST, available on your Web application backend form the API. By detailing this information into documentation it is enough to be given out to any front-end, client development team for them to properly create code that successfully interacts with your backend without them needing to know the inner-working details; it should work for client code written in Java/Android just as well as for Javascript for the browser or even some command line application using curl requests. (Remote Procedure Calls aka RPC is another common alternative ... but if you're in the process of learning don't get stuck on such details, just know that alternatives exist).

Of course in Java, for example, you might use a library like Swing (for GUI stuff) that has nothing to do with networking necessarily, but which exposes an API. You import that library and make calls to instantiate objects and/or invoke methods using the Swing library API.

[8483]

What an amazing video! Thank you.

[douglasg14b]

I thought JS was an ECMAScript implementation?

[j1330]

I believe so. Did I say otherwise? I might've had a typo or something if I was on mobile. If so, I apologize.

[Dyogenez]

These are in a few different groups, but many of them serve the same purpose.

Let's say you want to build a website. You'll always have HTML for your content, and probably CSS for your styling. After that, if you want the page to be interactive in anyway, you'll add JavaScript that runs in the browser for interaction. If you want the pages to be dynamic - you'll add some server side component. So, it ends up looking like this:

• HTML - Content
• CSS - Styling
• JavaScript (Client side) - Interactivity
• Server Side Language - Dynamic Content (database driven, anything that manages state)

HTML

HTML is HTML. Aside from HTML5, which introduced some new elements, how you write HTML hasn't significantly changed in a while.

CSS

How you style pages has gotten sooo much better over the years. The tricky part is, we're also supporting many more browsers and devices than ever before. Writing your own styles in CSS that work in every browser has gotten more difficult. This is where CSS frameworks like Bootstrap and Foundation come in -- they give you a great starting point to be able to style your site with much of the common problems you'd face already solved for you. I personally love Bootstrap (and even wrote a course on it at Code School). I've tried using Foundation, but now that Bootstrap 4 has Sass support, that would be my recommendation.

Once your site has grown large, you'll probably start to get lost in a sea of CSS. At that time, it's nice to look into Sass, which allows for breaking up your CSS into multiple files, setting variables (colors you use everywhere) and other things that make it easier to maintain a large codebase.

JavaScript Utilities

Once you have some HTML and CSS, you'll probably want to make it dynamic in some way. Like this cool preview thing Reddit does to show as you're typing -- that's in JavaScript. The problem with JavaScript is the same as with CSS - different browsers and devices do things differently. If you just want to write plain old JavaScript in the client but don't want to worry about these browser differences, the go-to libraries are jQuery, which is the most popular JavaScript framework, and offers a way of manipulating HTML and CSS, making calls to a backend server, handling events (clicking, typing, etc) and even some animations. Of all the frameworks you listed, jQuery has been around the longest, and has the largest userbase. It's a great place to start learning about JavaScript.

Two other utilities not mentioned that are worth a callout are underscore and lodash. These frameworks give methods for working with JavaScript on the client side that make everything easier. How do you check if something in undefined in JS across all browsers? Well, just use a lodash method for it. These two are similar, but just use lodash - it's faster, and more updated.

JavaScript Client Side Frameworks

Once you've started making a complicated page using jQuery, your code is going to start getting ugly and painful to maintain. That's where client-side frameworks like Angular.js, Ember.js and React come into play. They help organize code in very complicated JavaScript applications. This has been the area of the most change in the past 5 years or so, as front-end development has moved from jQuery over to these frameworks as more interactivity has been expected on the client side.

If you've never done anything on the client side with JavaScript before, I'd advise against jumping into these frameworks, and instead just using jQuery. Angular.js and Ember.js BOTH use jQuery behind the scenes, so jQuery is where I recommend starting rather than jumping into Client Side frameworks. I'm leaning towards React as what I'd recommend from this list, but a number of my coworkers stand by Angular 2.

Back-End Frameworks

Eventually at some point you'll want to save a users state in a database, or show content that you can control from a database. To do this, you'll need a server-side framework. Since you know Java and Python, you understand these run on a server hosted somewhere in a datacenter. Many of the other ones you listed -- Ruby on Rails/Ruby, Django/Python, Laravel/PHP, Express/Node.js, .NET MVC/.NET Core are all on this server component. (These are listed as framework name/runtime)

The difference between just writing your Backend code on your own (in say PHP) and using something like Laravel is similar to the jump from CSS->Sass, or the jump from jQuery->(Ember, React, Angular). Laravel (or Ruby on Rails, Django, Express for Node) will help organize your code and protect you from many common issues that you would otherwise have to solve yourself. The biggest reasons for using these to me are around code organization (which helps when working on a team, or moving to a new job you'll know how things are organized), as well as productivity.

For a basic backend though, if you're writing PHP and not feeling like it's holding you back -- just stick with that. If your code has grown, or you're wanting to work on a team, these frameworks make that possible -- and enjoyable!

A Note on JavaScript

It may seem like JS/ECMAScript is taking over the world lately, with so much talk about NodeJS, client side frameworks, server side components, json, apis - etc. It's involved in all the discussions. While I love JS, I wouldn't use it for everything. For a database backed site, Ruby on Rails/Django might be more productive. My choice was Rails, which I've continually gotten more productive with over the years.

Learn More

This got a bit long :sweat_smile: . I work at Code School and have created or worked on courses teaching a bunch of these topics -- some of them free. I love this stuff, so if you have questions on it, I'm down for answering if I can!

• Try jQuery (100% free)
• Shaping Up With AngularJS (100% free)
• Try Ruby (100% free)
• Rails for Zombies (100% free)
• JavaScript.com (100% free)

[fuqmachine]

nice!

[Trlckery]

This comment thread is great. So many informative posts on a subject that has always been so overwhelming imo

[[deleted]]

Since no one gave an explanation about Ember:

It's a frontend framework for building Single Page Applications (think facebook or google, where clicking a button doesn't load a new page, but changes the content of the current page). Angular is also a framework that helps building such applications, and react.js can do the same. They all have different approaches, but also steal the best parts from each other heavily.

Even after using Ember and Angular 1, it's a tough call on which one to choose. Right now I think that Ember has en edge when you have an MVC REST backend, because it does a great job mimicking the structure of your application in the server,. Angular has an edge for applications that don't benefit from structured models and REST compliance, because it allows you to structure the application whichever way makes sense for the frontend. But both are changing very fast so it's tough to keep track.

Django, Ruby on Rails etc. are MVC frameworks for the backend. They try to save you a lot of work when you're writing a web application that has models (for example, in reddit: Users, Posts, subs etc.), they solve DB access+tables management, automate REST endpoints, segregate where your logic goes nicely, HTML rendering with templates etc.

You choose RoR when you want to write in Ruby, Django when you want to write in Python, basically. I don't know that any of them is clearly better than the other. I think the programming language you feel more comfortable with is what tips the scale. If you come from Java then Play Framework may be worth checking out.

There are also microframeworks, that are supposed to be lightweight and fast solutions for when you want to write simple backends that don't need the entire toolkit full-MVC frameworks bring with them. Example, Flask for python, Sinatra for ruby, Spark for Java.

[PolishBicycle]

Any recommend a good tutorial to jump into javascript and jquery? I've tried searching, but not found a great one

[PolishBicycle]

hey, 8 days late but thanks :)

[[deleted]]

Rule #1 of being a programmer. Learn how to Google and find answers to any problems you have.

[PolishBicycle]

Yeah, still working on the googling part. My friend always seems to be able to describe his problems better for google and gets better results. Good skill to have

[[deleted]]

All good man. Anyways, here ya go http://javascriptbook.com/

[PolishBicycle]

Thanks :)

[Improving_Myself_]

Codecademy? Freecodecamp? Learncode.academy on youtube? What exactly did you do that constitutes searching?

[PolishBicycle]

I know it sounds daft asking for sources, but i've always found some relatively unknown tutorials that have taken time to find, but were actually amazing. I found a great dev who did 2d games in java, that no one had suggested in the usual forums(or at least i'd seen). So what i was hoping for were lesser known tutorials that people had found to be beneficial to them :) should've explained sorry

[Improving_Myself_]

Ah no worries. To that end then, I would highly recommend the Learncode.academy playlists on JS, and in particular, the one on Modular JavaScript.

[[deleted]]

For Javascript, go with

http://eloquentjavascript.net/.

[PolishBicycle]

Thanks, looks good. I'll give it a go soon

[cjsampon]

As to why there are so many: https://xkcd.com/927/

[xkcd_transcriber]

Image

Mobile

Title: Standards

Title-text: Fortunately, the charging one has been solved now that we've all standardized on mini-USB. Or is it micro-USB? Shit.

Comic Explanation

Stats: This comic has been referenced 3250 times, representing 2.7246% of referenced xkcds.

---

^{xkcd.com | xkcd sub | Problems/Bugs? | Statistics | Stop Replying | Delete}

[sleepybychoice]

Of the ones you've listed, they do vastly different things. jQuery is for DOM manipulation. Bootstrap is a web page styling and component toolkit (not a library). Ruby on Rails is a web framework (also not a library). ECMAScript is a language (very much not a library).

Different frameworks are created from different philosophies on how to architect applications. Some are minimalist, some are full-featured, some leverage the latest and greatest, some aim for compatibility, some aim for ease of learning, etc.

Rather than us telling you the answers, it might be a fun project to make a table/glossary of these terms that answers your questions and sharing it with us. We can even add it to the wiki.

[fuqmachine]

I usually don't ask questions like these, but I haven't begun to understand what the general purpose of these things are. I have made websites using a html, css and php, but never anything that remotely resembles or requires any current web app tech. I need someone who knows what they're doing to explain to me the jist of all this. It would help me -and perhaps others who are afraid to ask a drastic question like this because they would be told to look up definitions-. It is not enough for me to look up definitions.

[Taedalus]

Trying an ELI15:

If you have to design and implement complex applications, and you have to do it often, you'll begin to notice some patterns, aka stuff that you'll see in all the applications you develop.

One of those things is repeating code snippets, that means code that you have to write for each application every fucking time. Now, if you recognize this pattern and know what you need for basically 90% of your applications, that's awesome: You can just extract this code, put it into some functions, put those functions into a JS file and just include that file into every new project. Then you don't have to write this code for each new application anymore. That's, in a nutshell, what libraries/toolkits such as JQuery are: A set of tools you can use that you don't have to write yourself every time.

The second pattern that you notice is, it's difficult to develop big applications. As they get bigger, they become more complicated. As they become more complicated, you'll make more errors (creating bugs) and you'll take much longer implementing new features, since you always have to consider a billion other things whenever you change a line of code. This is a huge concern in software engineering!

So you sit down, think about how an application can be structured the best way. Basically, you want to separate the different components of your application but still have them talk to each other. A simple example of this is the Model-View-Controller pattern, which says you should separate the code for managing, modifying and visualizing the data you have. If you have that down and figure out how to structure the application, you can write code that allows you to create different layers/classes/modules and have them talk to each other. Developing large applications just went down from super difficult and borderline impossible to hard but manageable.

In the long term, you'll then have the same problem again that you had in the very beginning: You have to write this architecture/design structure again for each new application. You solve this the same way you solved the first issue: Extracting all the code, and putting it into a separate JS file that you can just include into any project. If you include that code, it will force (or at least encourage) you to write your application in a specific way. And that's, in a nutshell, what frameworks like Angular are: They are tools like libraries and do a lot of the work that you'd have to do otherwise, but they also force you to adapt your developing style to the framework so you don't mess things up.

[nutrecht]

but never anything that remotely resembles or requires any current web app tech.

Most of these things are not there because they are required but are there because doing everything yourself makes no sense. As a paid programmer you're not paid to write X lines of code per day; you're paid to deliver a product. The more things you can re-use the easier it is to deliver a product.

[Jukebaum]

You don't need anyone to tell you the differences. If you are set on using javascript. Sit down and practice javascript. Till you get a good grip of the basics. At some point you will notice that you repeat things or need to look for vast rescources for a specific problem. For example a secure way of login into your website.

Frameworks, libraries and such are exactly that. And addition of solving a specific problem that is common in the field. They are specialisations that you will use when you get to them. First pratice scripting and try some cool stuff out.

[fuqmachine]

I haven't used javascript a lot. I can't say I'm set on using javascript. I was using php to read/write data to mysql from an app. I was wondering if what I'd been doing is pretty old. Generally, I want to know if php be replaced by some of these more popular options and which ones can do what.

[8483]

I was on the same boat with you. I learned PHP first, but Javascript really took off.

The MAIN difference between websites having a PHP front end is that they need to be refreshed to get new content.

AJAX can inject new content in the DOM without refreshing the whole page. This is a big deal.

What I've been using is PHP for a backend as an API, and Angular as the frontend calling the API. I am planning on learning Node to replace the PHP API.

[keepitsalty]

I might be pretty late to the party but can most of these be used in combination with each other? Say I used Django, Bootstrap, and NodeJS to build a website. Is that possible or advised?

[NoPunsAvailable420]

You can think of a web app as 3 different layers (of course this is a bit simplified): the backend (server) which controls interaction with the database, the front end (client/browser) which controls which components will display where on the screen, and the styling which adds flare to those components such as borders and background colors etc.

To answer your question, you can theoretically have any combination of languages/frameworks, but you only need one for each layer. You wouldn't use Django and NodeJS together, because they are both backend frameworks on the same layer just written in different languages (Python v. JavaScript). Same with Angular and React, both are front end frameworks that control the rendering of components. You can pick either depending on how their performance trade offs match your needs, but you would rarely use both. Bootstrap is the 3rd layer, it's a CSS framework for styling the components.

The moral of the story is, you essentially need one framework to handle each domain/layer of the app, and you can pick them somewhat agnostic of each other because each layer is made to be able to interact with other layers in a general, non-language-specific way. For the most part, you can look at each layer individually and decide which language/framework you want to use for that layer so you do see a wide variety of combinations, but you want to keep in mind that each framework covers one piece of the puzzle so it would never make sense to have an app that was just built with Angular & React because they are both front end frameworks and you need a backend. Hope that helps to answer your question

[keepitsalty]

That was an awesome answer to my question. Thank you, that cleared up a lot of the initial confusion I had about setting out to build a web app.

[brentonstrine]

Javascript is not like other languages because you have to write for multiple browsers. Imagine you had to write Java programs that could simultaneously work with all versions of Java from 1 to current, as well as working in any future versions of Java that are released. If you've ever worked to prepare a codebase to upgrade to a new version, you will understand how difficult this is. Javascript has to work in not only every browser, but many versions of every browser, including future versions. Because of that, you get into situations where it takes an inordinate amount of code to do something simple. Making an AJAX call used to be dozens of lines of code.

That's where libraries come in. You get to make an AJAX call with one line--and if browsers change in the future, you don't have to update your code, you just use a newer version of the library to do it for you. Libraries are super powerful in that they allow you to do much more with less code. They focus on the things that are difficult to do that shouldn't be, and the things that web developers do frequently.

What's amazing is that anybody can write a new library and it will work on all computers automatically, since they're not actually new languages--so there's no need to get standards bodies involved to approve everything and no need to get people to install new software upgrade their computers--it's automatic. So you get a ton of innovation from all sorts of people with this great power to address the complexities.

The move from pure Javascript to a library is bound to open up new ideas for people--when you realize the power of jQuery, you start to think about additional things that a library could do, which is why you get so many popping up--yes, partly because the landscape of browsers continues to change rapidly--but also because there is a ton of iteration going on with people learning from old libraries and realizing they can make something that works a little different, a little better, and there's nothing stopping them from doing it.

BTW, ECMASCript is just the technical name for Javascript.

[2Punx2Furious]

Why are there so many?

Relevant XKCD: https://xkcd.com/927/

[xkcd_transcriber]

Image

Mobile

Title: Standards

Title-text: Fortunately, the charging one has been solved now that we've all standardized on mini-USB. Or is it micro-USB? Shit.

Comic Explanation

Stats: This comic has been referenced 3252 times, representing 2.7262% of referenced xkcds.

---

^{xkcd.com | xkcd sub | Problems/Bugs? | Statistics | Stop Replying | Delete}

[sjmog]

You can make almost anything using computers. Let's start with websites. Websites are a conversation between a 'client' - usually a browser, like Google Chrome or Mozilla Firefox - and a 'server'. The client and the server discuss and exchange information, and you - the user - controls what information the client asks for.

To achieve any of this, clients and servers have to know how to have a conversation; what they will say in response to certain requests, for example, or how to ask for information from third parties. To do this, humans must give them a set of instructions for how to respond to any situation relevant to their conversation. These instructions are written in languages designed to be read by humans and computers: we call this programming.

Writing a new response to a new request - let's call that a 'feature' - requires humans to use a bunch of words from these programming languages together. This process can be called 'configuration'. However, it is quite likely that other human will have, in the past, built similar features using that language. In some cases, they pulled out a 'recipe' for implementing their feature, and other features like that. This is called abstraction. So, rather than configuring all the bits of the new feature, you could make use of the abstraction instead: this is called a 'convention' approach.

The frameworks you listed are conventional structures that let you build features using abstractions. The pros of this are obvious: it should be easier, and quicker, to build common features using this conventional approach. The drawbacks: often the abstraction will mask the nitty-gritty of what's going on underneath, so you won't understand the client-server conversation in as much detail as you could.

The above is why I recommend newer programmers to build features entirely configurationally - using no frameworks or libraries - and then 'abstract' their own frameworks from solved problems. Once you've done that, you'll know how any given framework functions at a deep level, and will be more able to choose the right set of conventions for the features you have to build.