web development with JS basic.

Must know before professional web development

In this article we will know some basic things that are important to know before doing production level web development. In addition to writing programs, you need to know some basic things for professional web development. These are

  1. Coding Style
  2. Comments
  3. Error handling
  4. Cross Browser testing
  5. Balancing client and server caching

Coding Style

Coding style is most important to develop a professional web application and also for a company. If you are an employ of a web development company you must follow there coding styling instructions or follow a standard style. Otherwise, it is difficult to read by other developers. In future it’s very heard to add new feature if your coding style is not proper.

some syntax show below

some important syntax

Above these, you should put semicolon after a statement.

A single line conditional statement like if(condition) doSomeThing() never give curly bracket(Ex-1). Without curly bracket never split statement.(Ex-2)

example:

  1. if(condition) { doSomeThing() } //wrong

if(condition) doSomeThing() //right

2. if(condition)

doSomeThing() // wrong

if(condition) {

doSomeThing() //right

}

Learn more

Comments

Comment is a very common think in coding world. For more understandable code, we write comment beside or top of the code. But if we not follow any standard rolls of writing comment, it can make our code dirty. So we should follow any standard roll or if you get job any company you should follow there rolls. We know in JavaScript we write comment in two ways. 1. one line (//something) , 2. Multiline(/* something*/).

some rolls I discus with you:

  1. We should avoid comment writing in code. because it take extra space and show extra text, it’s look like dirty. We should make separate function for separate work and also give function name similar with work, it’s very useful for production level development. In future it will very easer to update or add new features. Developer easily understand what is doing this function.
  2. If your code is very difficult to understand for other developer, then you should write comment beside to line or top of this code.

Learn More

Error Handling

Error handling is most important thing about web development. When you developed a professional web application for your client or company you must handle error of your code. Otherwise it can’t become user friendly. For handle any error we mainly use try-catch method.

let’s learn about try-catch briefly.

Syntax:

try {

//code

} catch(error) {

//error

}

  1. At first try {…} is executed. If there is no error in code then catch(error) is ignored.
  2. If catch any error in code then stop execute try and skip it and execute catch(error) and generate error output.

When find any error ,it generate an error object. This object has two part name and message. Name is error title and message is error details.

try-catch execute synchronously. If an exception happens in “scheduled” code, like in setTimeout(), then try-catch won’t catch it(Ex-1). Cause It run only one time. But if you declare try-catch inside setTimeout() it will execute(Ex-2).

example

  1. try {

setTimeout(something(), 1000)

} catch(error) {

console.log(error)

} // dose not work

2. setTimeout(() => {

try {

//code…..

} catch(error) {

console.log(error)

}

}, 1000) // work

the main important thing is try-catch only give you runtime error. If your code syntax or fundamentals error find, it don’t show any error.

Learn more

Cross Browser Testing

For develop professional web application, as a developer you must need to test cross browser. Couse as a developer you should think about your developed application users. How they visit this application, which browser they use. It’s very normal that everyone do not use same browser. As a result as a developer you should test cross browser to confirm that, your application looking good and user friendly in most of browser that user use.

It’s impossible to test in all browser. The application should work entirely in the last few versions of the most popular desktop and mobile (iOS, Android, Windows phone) browsers — this should include Chrome (and Opera as it is based on the same rendering engine as Chrome), Firefox, IE/Edge, and Safari. It should also provide an acceptable experience on IE 8 and 9, and be accessible with WCAG AA compliance.

why we need cross browser test?

  1. Sometime browser have bugs and engineers implement features differently. Though now a day browsers maintain a standard but sometime difference and bug occurs.
  2. some browsers may have different levels of support for technology features than others.

example: look at the image

difference between browsers features and processing method of code

As well as many JavaScript code are execute different way in different browser. So, before launch your project, you must need cross browser testing.

Learn more

Balancing client and server caching

What is Caching? When user make same request many time to the server this common requested result store locally for certain time, It’s call caching. So that if user again request for this data, then application show data without fetch from database. As a result the application work first and get data for user immediately.

In client side and server side you can store cache store.

Client cache

If you include cache store in client side, when user send any request, it first go to cache and try to match with stored data, if any data match with request then return data in user display and the request do not pass to server. For that, application work firster and give user friendly performance.

Server cache

If server side has cache store, it store most requested data in locally. It also work same process. If user again request for any data, then server try to match request URL, if matched any URL then give the result from cache, otherwise it fetch data from database. As a result application run first and user friendly.

Sometime cache data slow to change. Especially if you leverage a data delivery network. It has some privacy issue also. To fixed privacy issue it take few time to propagate.

It’s very important to balance caching between client and server to develop a firster application.

Learn more

Bonus

JavaScript values

it’s important to learn as a JavaScript developer that, in JavaScript there are 2 types of value.

  1. ​Primitive Values​
  2. ​Objects and Functions​

Primitive value

Number and String are the primitive value in JavaScript.

example :

console.log(“Hello”) // string

console.log(2) // number

Learn more

​Objects and Functions​

Other value are objects or functions.

console.log([]) //object

console.log({}) //object

console.log(x => x*2) //function

Learn more object

Learn more function

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store