Front-end VS Back-end : the full story

intro

Hey there, if you are new to  development and want to start learning in your own, this is the article you need.

this article well give you a general overview to both domains and more !!

why? 

But, first you may ask why shall i read it?

a lot of you may be thinking that concentrating on tech  skills  and  coding  is much more valuable than understanding the domain, and that's wrong. 

Because understanding the whole  concept  will help to learn better and advance your self. and if you didn't start learning yet it 's going to help you to organize your time, resources, and plan well your path.

event if you are moving from a  framework  to an other it became easier! so stop messing around and let's start.  

    

Front-end:

 

after building your static site let's make it alive.

JS is best tool for animating sites. it ensure a DOM (documentations objects models) manipulation such: changing elements values ​​or css properties. basing on event (hover, submit, click ...).

 

the hole concept based on: getting the element from the (it's more practical to stock it variables) .then based associating different method to add, delete, change props within the element (document.querySelector () is my favorite to get element). 

well, java script must have a total series of articles to talk about but this the most important concept to knows. 

like CSS frameworks, same applying to JS. 

for front-end there's a lot i can mention React / Vue / Angular: the best 3 framework / library to handle front-end we won't get into comparing those three they are great and you must know that no matter which framework your choose it 's mostly returning to you to create great thinks. 

 

Frameworks and libraries facilitate the work for us, so generally it's rarely to came back to use pure js. 

But as an advice make sure to have a big project made with pure js in your portfolio. 

This will prove that you understand well java script and how it works! 

API: 

   It stands for Application Programming Interface. we can define it as the intermediere etween front-end and back-end. which allow us to get sevices made in backend (delete create update ...) to use in front-end. so API helps us to cummunicate with the back end that will allow us to make more advanced things! 

the concept of a consuming API in front-end is easy. you fetch an URL, define the type of request (sometime other params also) .this operations takes time so we use async function and if we use "then" 

it is as it is! after the operation completes then we launch a function to store data or ... that depends on the request we handle. and we use "catch" to catch errors if there is. pretty easy no? 

    

Back-end:

Now, after seeing the front-end let's change your way of thinking to adapt to back-end problem. 

you understand now that the main goal o back-end is to use the database to create services that will be transferred via API .then the rest of work will be for front-end developer. 

connecting to data base is the first thing to establish.

then creating a sever .when starting learning you will work on local server. it means it is accessible to only within your local machine.

it's very helpful to well organize your work within folders and files (routes, models, middle-ware, apis ..).

here we speak about scalability: where you can add, reuse ans easily modify parts of your project. especially if it grows bigger. believe it becomes like hell to understand.

 

other part of your work are models, they represent structure of your data stored within database. for example if you define a model student you give it (name, age, class, score ..) 

 

routes are to define the type of actions you want. for each url you give a function and give a type of request (PUT POST DELETE GET ..) so that those URLs will be used in the front-end to serve those functionality 

 

to organize things more in routes, we use controllers, in which we put url's functions so that we make things clear!

 

and other design type you can discover on your own.

an essential concept is authentication.

thanks to, you protect your routes and manage roles .basic functionality you need are creating accounts / login to / logout ... One of the ways to ensure security is JWT (json web token). i hope i will talk more about in future.  

i hope i didn't make things too long but i tried to simplify asap. One last think, i have said that your back-end works only on your local machine so how to make it accessible to every one.

here's come deployment: you ask a server to host your backend! some are free others are paid. 

but if you want to customize your domain name you should pay for. 

In conclusion, both domaine are valuables so chose one a surpass your limits