Difference between revisions of "Web Development"

From Grundy
Jump to navigation Jump to search
Line 37: Line 37:
== Full Stack Frameworks ==
== Full Stack Frameworks ==
* '''MEAN Stack''' - A collection of JavaScript-based technologies — MongoDB, Express.js, AngularJS and Node.js — used to develop web applications. From the client and server sides to databases, MEAN is a full-stack development toolkit.

Revision as of 00:25, 13 December 2016

Yes we all love the web. Google, Facebook, Amazon all started as websites before growing to what they are now. We have all dreamed about having our own huge website. This page will help you get there.

Front-end vs Back-end

Most people agree that front-end and back-end web development are poles apart, and yet one cannot exist without the other. Their context in web development is pretty evident given their name. More precisely,

  • Front-end - Everything that is visible to you when you open a webpage is a piece of code (HTML file) sent to your browser which is interpreted real-time by your browser. This includes rendering all your styles, displaying text in an organised manner, animations, responsiveness and contacting the server for data.
  • Back-end - The code running on the server which you cannot see as a user. This code is used to generate HTML files, send files and JSON data when requested by front-end.
  • Full Stack - The combination of front-end and back-end development.

As an example, the search bar on Google is the front-end, and the algorithm which searches for results is the back-end.

I know you might be tempted to just do back-end, but trust me, front-end is a lot harder and that's where the real challenge comes.

3 Pillars of Front-end

Front-end works on three types of languages, with the most popular ones being HTML, JavaScript and CSS.

  • Markup Language - Here you specify an organized list of static text and elements you wish to have on your page. Each element is marked by an id and class which is used to refer to that element. HTML is the most popular markup language.
  • Scripting Language - The true "code" of your front-end application which is used to manipulate elements, talk to the back-end, give functionality to buttons, forms etc. JavaScript is the most widely used scripting language. More recently, AngularJS and ReactJS (both are JS libraries) have replaced vanilla JavaScript.
  • Styling Language - The artistic element of your website, giving it color, design and looks. You don't need to be a great coder to know styling. CSS (Cascading Style Sheets) make up most of all modern web styling.

We recommend you to first learn HTML, since both JavaScript and CSS need you to know basic HTML. Luckily, basic HTML is easy to learn within a couple of days.

If you are familiar with programming, the next step would be JavaScript. You should be able to grasp JavaScript easily as JavaScript is similar to many other modern languages. However, if you haven't programmed earlier, be sure you study JS well to understand programming elements.

CSS programming is a whole new ball game and requires a very different skill set. Most of us don't understand it very well and rely heavily on StackOverflow. Truth be told, learning CSS well requires a lot of patience, dedication and love for design.

That being said, it's advisable not to spend too much time learning JavaScript (unless it's your first language) or CSS. Modern web development prefers to use certain libraries built on top of vanilla JavaScript and CSS as we describe in the next section.

Never Use Vanilla CSS and JS

Why? It's slow, inefficient, leads to dirty code, old fashioned and worst of all not cool. After learning the basics, you should seriously consider learning one of these languages if you want to stay in web development.

  • JQuery - a much better way to write JS code, makes animation seamless.
  • AngularJS - Google's own framework for web development. Very clean code, gets several common scripting jobs done with barely any code. Easy to extend and modify existing templates.
  • ReactJS - Hailing from Facebook's labs, this is the modern web developer's paradise. Very fast rendering, easy to write JS / JSX code.
  • Sass - A language in itself which translates to CSS. It makes styling a lot easier and a lot more fun!

Monsters of Back-end

Modern Web Development

Full Stack Frameworks

  • MEAN Stack - A collection of JavaScript-based technologies — MongoDB, Express.js, AngularJS and Node.js — used to develop web applications. From the client and server sides to databases, MEAN is a full-stack development toolkit.