"Become an expert web developer in just six weeks", "Learn to build a fully functional web app in one hour", "You don't need to code to make software" and other numerous and sketchy captions are responsible for situations where a software development enthusiast who started out last week would say they have thoroughly learned HTML, CSS and JavaScript and ready to jump into learning a JavaScript Library or Framework. because they are done right? Obviously far from what is obtainable!!!

A lot of us had been in learning environments where we needed to get a grasp of whatever it was we were taught or supposed to learn as soon as possible and keep the acquired knowledge in our head as close as the study resource as possible in other to deliver a near perfect copy of the study resource. This belief of knowing every bit of a course of study before practice is the opposite of what is required of a software developer, but the best combo from time immemorial among software developers and like fields had been to practicalize every single step as they get a grasp of a swallowable chunk of information. This leads to why I have put up this blog post. I would love to start out with what is the duty of a front-end developer actually is, in no particular order

1. Collect user input, verify and send to the backend in some cases
2. Collect responses from the backend service if there is a need to

3. And create a usable interface with ease of use. The list goes on.

   That being said there is a list of concepts you should be confident with to pick up a front-end library, I will be making references to React as a front-end library most of the time because that's what I am most comfortable with.

   A friend would always say "When you are building a web application, assure you are building it for people who do not want to put their brains into use", that was funny at first but made sense later when I saw interfaces whose designs are plain and extremely clear to understand, but these piece of software is misused to a large extent. That takes me to a list of concepts a developer must know to pick up a front-end library

1. Asynchronous JavaScript / Promises: Every developer starts with the easiest implementations in the software technology to wrap their heads around the process, but when it gets to I/O operations, which may include getting data from a remote API, collecting user responses, storing data in a database system, file processing, etc. Then there is a need to get acquainted with asynchronous Javascript with the use of promises, this allows the developer to create logic that makes room for your program to wait for data that is not made available immediately when requested for.

2. Rest and Spread Operators: Though not a must-have but can save you a ton of time, The concept of Rest and Spread was first introduced in JavaScript ES6, and it allows a developer to perform lots of actions that would require a lot more work without the use of Rest and Spread. Rest can be used in cases where

//accept parameters of unknown count into a function
function doSomething(...args){
      //do something
       console.log(args.length)
}

//selecting certain elements in an object and creating a new object with them
//combined with destructuring
const obj = {
                name: "Joe",
                age: 34,
                skills: ["HTML", "CSS" ,"JavaScript","GO"],
                }

const {skills,...otherProperties} = obj;
//otherProperties == {name: "Joe", age: 34}

The Spread operator on the other hand can be used to

//concatenate arrays or objects
let array1 = [1,2,3,4,5];
let array2 = [...array1, 6,7,8] // [1,2,3,4,5,6,7,8]

let obj = {name:"Jerry"};
obj = {...obj, age: 24, weight: "3kg"}

At first, the Rest operator can be difficult to differentiate from the Spread, but to keep things simple here are the very clear differences

• Rest is used to refer to items of unknown count as in the case of Rest arguments or refer to the remaining items in an array or object.
• On the other hand, the Spread operator is used to take out the key and property pairs in an object or the items in an array and us them in another array, object or as arguments in a function.

3. Object Oriented Programming ( OOP ): Object Oriented Programming is one of the most misunderstood concepts for JavaScript developers just starting out, but I assure you, your mind is tricking you to believe it is a mysterious practice. OOP according to Tech-Target "Object-Oriented Programming (OOP) is a computer programming model that organizes software design around data, or objects, rather than functions and logic. An object can be defined as a data field that has unique attributes and behavior". OOP in JavaScript is built around Classes which is very similar to classes in languages such as Java, Python, Dart, etc, and these classes can have properties and methods and are used as a blueprint to create objects. This comes in handy in a framework like Angular where OOP is in heavy use.

4. Scheduling ( setInterval, setTimeout ):: There is always a situation where you would want your code to wait for a specified amount of time or perform an action again and again after a period of time that's where Scheduling comes in, as an example, when you want to keep the user updated with the time in real-time or when a user is taking timed tests on your application the setInterval and setTimeout come in handy.

//when a user has 30 seconds to answer a question, the following implementation can used //to switch them to the next question when they run out of time
function switchToNextQuestion(){
      //logic to switch to next question
      ...........
}

//note that JavaScript data object works 
//with milliseconds instead of seconds so I had to 
//multiply by 1000 to convert to seconds
setTimeout(switchToNextQuestion,1000 * 30);

setInterval on the other hand can be used to ensure that the displayed time is updated as much as possible

let displayTime = new Date().toLocaleString()

function updateTimeAndDate (){
      displayTime = new Date().toLocaleString()
}

setInterval(updateTimeAndDate,1000)

5. Exception handling: Exceptions aka errors are bound to exist even in the most well-implemented piece of software. They can come from the engineer, the hosting service, poor internet connection, insufficient or incomplete data from the database, and most times from the user when they use the software wrongly or just let their cats sit on their keyboard and type away. So there is a pressing need to carter for such cases and keep the software product functioning as fine as supposed.

6. Callback functions: The term can be misleading at first, but from my experience, a callback function is simply a function passed into another function as an argument, nothing strange and the chances are high you have used several callback functions without knowing it, for example

//as used above

//switchToNextQuestion is a callback function
// because is it passed as a parameter into setTimeout
setTimeout(switchToNextQuestion,1000 * 30) 

//same as updateTimeAndDate
setInterval(updateTimeAndDate,1000)

Also in a library like react arrays and objects are used a lot because most of the time data is returned from a remote API and most likely will come in a JSON format and arrays and their methods can be used to do a great job utilizing such information, as an example

import axios from "axios";

function myComponent(){
const posts = await axios.get("https://post_url.com")

return <div>
            {
                posts.map((post, index)=> 
                        <PostCard  
                                    key={inded}
                                    title={post.title} 
                                    body={post.body}
                                    image={post.image}/>
                        )}
      </div>
}

And with several other array methods like .forEach, .some, .filter, .find, .reduce, etc

7. Network : Unless your application is some kind of very simple calculator or a TODO app or something similar that performs just a simple task it is near impossible for your application to not be connected to any form of the network be it HTTP, Web-Socket, WebRTC or any other form of connection in other to communicate with another piece of software or other users. So a very good knowledge of networking is required.

8. And loads of patience: This cannot be over-emphasized. Obviously, nothing good comes easy so you would have to go the extra mile and stay sane when you cannot find the bug that is right there staring you right in the face and when you have followed a guide or tutorial carefully step by step and you keep getting errors on lines you did not write, also noting that the best developers use Google and StackOverflow more frequently than beginners, it is not a school test feel free to check google as regular as possible as long as you are improving and not relying wholly on what you will find online.

Hope you enjoyed every byte. Has a nice day