Components of Web Development (Starters Guide)
“Many times developers ask me how to start with web development especially with JavaScript. In this blog, I will try to explain the basic components required for building web applications, application strategies planning, and give some insights into the main functional blocks and their general use cases”.
People often feel that if they know C# or Java they already have a pretty soild understnding of how Javascript works.But it’s a trap! When compared to other mainstream langauges,JavaScript is much much more functionally oriented.Some concepts differ fundamentally from those of most other langauges.The growing community and minds its helping the langauge to grow.
# How to start with JavaScript
In order to start with web development, we should know some on the basics that how a browser works. Take a look at the animation below.
On behalf of the user, (1) the browser formulates a request that is sent to a server,(2) The server returns the resources/page requested by the client (3) The resources returned i.e. HTML, CSS, and JS files are processed by JS Engine of the respective browser. (4) Event Listeners and timers are set up to listen to the user interaction with the web page.
Ok, So far we are good as we understood how bowser works lets checkout how to setup dev environment to start with JavaScript.
Now to start with the basic web app we only require three file JS, HTML and CSS. But, As our application grows in size and feature its very difficult to manage this files.Even in some cases you might require a 3 rd party library to build functionality and feature.So,I such you will require a “Dependency Manager” that will help you manage all the dependencies for you.
# Dependency Managers in JS
In JS there are two dependency managers that are available and widely used they are NPM & YARN. This will help us manage our project dependencies. I will not go in-depth we’ll write a separate blog on it.
By this, we are good to start Let create a project. I’ll be using npm as a package manager and will use a nodemon as a dev dependency to start our development server.
# Building your first project
To start with let create an HTML file that will have all the HTML code. and link the style sheets and js file (bundled-files) as shown below.
I have mentioned the details of how to configure the npm and set up it as we will be creating a separate blog for the same, also we are working on the quick setup JS application that will allow you to create a JS app instantly.
Please let us know your reviews on the sample !!!
Thank you !!!
Happy Coding !!!