Web Developing Technlogies Chart

Annotations:

• Essentially what happens inside the browser and inside the browser only! Programs that we installed in our machine are called desktop apps. Software that we install in our cellphone is called Mobile apps. Web apps are the applications that someone can find by typing an address in browser. Web developing is developing apps like these, and Web Technologies are the necessary technologies that someone must know in order to create Web apps. For example when someone types in the browser address bar http://www.facebook.com navigates himself to Facebook web app. But if you install facebook through apple store you have access to facebook's mobile app.

1. Frontend

   Annotations:

   • Web Development is comprised from 2 parts. The Frontend part and the  Backend part.  Essentially Frontend is the part of the Website that runs in browser, not server. Thus is usually the part that every user can interact with. Designing the user interface and what the end user / customer sees at the end. There are many jobs that exclusively ask front end developers only. Key requirements: Sense for design, good user experience knowledge, user interface design. Key technologies:  1.HTML5 (must) 2. CSS3 (must) 3. JavaScript (must for know) 4. Some other framework (Bootstrap, React, Angular, Vue etc). 
   1. HTML 5

      Annotations:

      • A markup language that is a must in order to define the content and what a website contains.  Here the programmer learns how to define the structure and the content of his application, but nothing more. He puts everything together but he doesn't change the appearance or the how good the site will look. As a metaphor we could say that HTML takes care of the barebones, the skeleton and how everything comes together without crumble.  But has nothing to do with how visually appealing the elements of the site will be. (Layout, colors, fonts, animations etc).  The latter is being taken care of from CSS. 
   2. CSS 3

      Annotations:

      • CSS is the styling language. It is responsible for making styling changes to the content that has been defined from HTML. For example in HTML we can write a text. HTML is only capable of including the text to our website but not how the text is going to be displayed  (text-color, size of the letters, layout etc).  The latter and many more can be achieved by CSS which takes care of styling the skeleton and creating a visually appealing user interface.
      1. SASS

         Annotations:

         • SASS or Syntactically Awesome StyleSheets it's not a programming language on it's own. It is just a different 'dialect' of CSS.  This is called a CSS preprocessor. That means that somebody can write instead of CSS, something that looks like it,but in a faster, cleaner and much more efficient way. It is not necessary for someone to learn SASS, as he can achieve everything in normal CSS, although it is highly recommended and required from most job postings in the front end world. Alternative options: LESS, Stylus Advantage: By far the most popular of the three  as it is built in ruby programming languages and thus offers to the programmer an easier way to style it's website.
      2. LESS

         Annotations:

         • An alternative to SASS. Does the same things just in a different way or different syntax.
      3. Stylus

         Annotations:

         • Another alternative to SASS and LESS.
   3. JavaScript

      Annotations:

      • JavaScript is the first programming language that the user's learn and until now is a monopoly for front end web applications. That means that there is no other counterpart (for now, checkout web assembly in 2020 maybe).  It is used in order to add logic and brains to our web app.  If HTML is the skeleton and CSS is the beauty, then JavaScript is definitely the brain.  This language is responsible for accepting data from user (via form, or cookies) and communicate with a server (see backend in order to save these data to a database). Later can have access to this data and even create personalized web pages based on this data.  Profile pages in social media are just an example of personalized pages. 
      1. JQuery

         Annotations:

         • JQuery is a JavaScript library. That means that is JavaScript code that other people have written and we can use it without reinventing the wheel.  JQuery has a lot of utilities, especially when it comes to web animations, interactions, showing/hiding elements from a page and creating dynamic content. That gives the user the feeling that the site is a living organism enhancing thus the user experience. Advantage: Simplicity, very easy to develop in. Alternative options: React.js, Angular.js, Vue.js
      2. React.js

         Annotations:

         • A javaScript framework. Bunch of JavaScript code that has been prewritten from others and we can use it.  Developed by Facebook. Is one of the newest technologies out there (2014) and has taken the world by storm.  The developer can implement with it business logic and advanced concepts regarding the user interface. Pretty much everything front end needs. Advantage: It currently has the biggest gap between supply and demand from all technologies regardless of field. 37% of web developing job postings require some knowledge of React but because i's new there is only 14% of React's developers in the market. This gap of 23% is the biggest in tech job market right now.
      3. Angular.js

         Annotations:

         • Angular.js is another JavaScript framework that is being developed by google. Competitor to React, Vue and others.
      4. Vue.js

         Annotations:

         • Another major framework. Does the same things in a different way.
2. Backend

   Annotations:

   • Backend or server-side is the code that we write in and it is mean to be executed not by the browser in user's machine but in our server where we store the files of our application. The server is responsible for serving our application to every user that requests it (a.k.a. types our address on his browser), and what version of it will it serve. Static, dynamic, personalized etc.  Server-side scripting is responsible also for saving or fetching data from databases, thus the data that the users give can be reused and be fetched back to them at some point. High level of security is also required for sensitive data.
   1. Databases

      Annotations:

      • This is where we store all the information and we don't lose it.  So it can be persistent and give them back to the user. Two different technologies: SQL, and No-SQL.
      1. SQL

         Annotations:

         • SQL database technology. There are two different ways to make the same thing. Store and retrieve data from a database.  The only things that changes is the architecture and the way.  Alternative option: NoSQL
      2. NoSQL

         Annotations:

         • NoSQL is a new way to store and retrieve sensitive information from and to a database.  MongoDB is the specific NoSQL technology that we use and it's advantage is the speed of getting data and delivering it to the server, plus that it works perfect with JavaScript.
   2. Server languages
      1. JavaScript / Node.js

         Annotations:

         • Since 2009 it is also possible to write JavaScript code on the server.  That is amazing because when someone already must have JavaScript knowledge in order to be competent for frontend, he doesn't have to learn a new language to be also competent on the backend.  The only thing he has to learn is 1-2 specific JavaScript dialects and then he is ready for what we call full/stack developement. Tremendously evolving and with node.js cannot someone deteriorate himself solely to web developing, but can look further to desktop apps, and more. Alternative options: Python, Ruby, Java, PHP, C# etc.
      2. Python/ Django

         Annotations:

         • Another language for writing server side code. More elegant and clean, less performant.
      3. Java

         Annotations:

         • Nothing to do with JavaScript. Completely different language.  More performant, but much harder to learn. Takes time and effort to master.
      4. PHP

         Annotations:

         • It was the king of backend developing 15 years ago. Not anymore. Loses value because is not a general purpose language. That means that someone learns it only for web developing and nothing else.
      5. Ruby

         Annotations:

         • By far the easiest to learn and with the more elegant coding style.  Not so performant though and finding what is wrong in case of bugs can be very hard.