What makes a Full-Stack Developer and how to become one over 1 weekend -Part 1
By: Shuaib Masoud
Tags: Backend, Full Stack Development, Back End Developer, C Sharp Programming, UI

So welcome back you’ve read my intro article and liked how it opened for a small series of how to become a Full Stack Developer … howdy and let’s take off !

Before we start I know it can takes years to master a skill and full stack development is no exception. However we have already discussed in tech esp web tech we live in one of the fastest growing industries.

So without further a due let’s jump right in so you can get coding, improve your job prospects and skills quicker! One more final thing…I won’t be showing full length code for large websites or whatever here we will keep it simple and this will help us not deviate far from he concept I am trying to explain.

Hone you JS (or backend web language)

This means before we look at the UI or controllers or middle layer it’s always better in my opinion to begin with the backend and business logic and for that you need a scripting language or programming language i.e. python, perl, c# etc. etc. but it needs the ability to be able to build the front end or send data to API’s via HTTP. The one’s I

mentioned above all can. With that said let’s look at a quick example of what our backend could be and to keep things simple I will try to give 2 examples using probably the two most used languages on the web and off the web — that is JavaScript and C#. Let’s first look at the C# example in the backend and how it would play it’s part as part of the full stack development.

What I have below is a C# MVC application’s Controller and this Controller is called CarsDataController. And you maybe thinking this is meant to be the back end how did we jump into the controller already?? It was intentional and the reason being is .Net apps (C++, C#, VB etc.) can be very complex and low level in the backend and more often it’s mostly environment based items or IDE related and not much relevant to the backend of the app. Also the Controllers in our example (C# MVC) most refer to this as the backend and you can have your business logic (models, data connections, API fetching) as well as the controller (code that controls flow, serves data, push model to pther layers or front end) all together in one or few methods and in one class.

Apologies if some of the terms above go into programming or .Net world quite a bit but the key takeaway is to understand the code below, in one class, and one method — the method Index or Quotes can fetch data and return a data model to the client (UI or anything else) or just also return static views all in one go.

Backend in a traditional language — C#

using Microsoft.AspNetCore.Mvc; using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; namespace dataClient.Controllers { public class CarsDataController : Controller { private readonly AutoContext autoContext = new AutoContext(); // GET: Autos public ActionResult Index() { List<AutoInfo> autoInfos = empContext.dataContext.ToList(); return View(autoInfos);

} public IActionResult Quotes() { return View(); } } }

Backend in JavaScript

As an alternative here is a JS backend — a very simple backend I’d have you know too:

Above is a JS function that can be called from any frontend at any point in the application as you like and when called (and as the name on the tin says) it fetches data. Also the data API in this instance that we fetch for is end point the responds with cat data and shows cat’s facts. I am sure at this point all you cat lovers (or animal lovers in general) will give me some claps….

Backend + Middle tier (controller) + Front end (client) in JS

From here if you wanted the data that was returned from the API can be sent directly to the middle layer for further filtering or process or it can be pushed directly to the front end for presentation. In our JS example the returned data is currently in the console and got there as part of the fetch chaining/Promise style mechanism and on exactly this line here .then(data => console.log(data)); however we can send it to a middle layer or controller like so:



fetch('

.then(response => response.json())

.then({ console.log(data);

//push data to controller via the variable data

dataControllerdata(data);

});

} fetchData = (url) => {fetch(' https://cat-fact.herokuapp.com/facts ').then(response => response.json()).then({ console.log(data);//push data to controller via the variable datadataControllerdata(data);});

//let's say our data when received contains user info and we need a //user name to display in popup on login we do this

dataControllerdata(data) => { for(var i in data){ if(data[i].user.email === cookie.email){ alert('welcome to your dashboard ${data[i].user.username} ') } } }

And that’s it for the JS — we wrote a simple backend that fetches data, passes it to a controller for processing and send only the desired data (user(username)) to the front end i.e. we did our backend and middle layer in one go you can argue. For larger websites or apps the fetch and controllers will/could/should have their own classes and ideally be exportable as code modules when and where needed. You can also see it’s easier to add the front end and middle tier together into the backend in JS code.

I know the only front end here is arguably the alert() code however we can inject into HTML like so:



fetch('

.then(response => response.json())

.then({ console.log(data);

//push data to controller via the variable data

dataControllerdata(data);

});

} fetchData = () => {fetch(' https://cat-fact.herokuapp.com/facts ').then(response => response.json()).then({ console.log(data);//push data to controller via the variable datadataControllerdata(data);}); //let's say our data when received contains user info and we need a //user name to display in a page div on login we do this

dataControllerdata(data) => { for(var i in data){ if(data[i].user.email === cookie.email){ var title = document.getelementById("username"); title.append("welcome to your dashboard ${data[i].user.username} ") } } }

In our C# example above we deconstruct the car data from the AutoContent database into local object called autoContext then we fetch the data and push (format) it into a List format like so:

List<AutoInfo> autoInfos = empContext.dataContext.ToList();

Finally we send it to the client or a view in our case like so:

return View(autoInfos);

and to display the data in the MVC app we have many options but since we know it will come in a list format so we can write our HTML like so to display it to show the car ID and name only in a table:

<table> <tr> <th>CarId</th> <th>CarName</th> </tr> @foreach (AutoInfo autoInfo in Model) { < tr > < td > @autoInfo.CarId </ td > < td > @autoInfo.CarName </ td > </ tr > }

That’s it for the backend end, middle layer (controllers) and the front end too!

You are now officially a Full Stack Developer since you can work on all ends of the dev stack! Amazing.

Extras??

Yes we all love extras don’t we? Whatever that maybe the extras here will be a new clean UI for our app code we’ve built above. Below are two versions that you can try for cleaner ‘marble’ UI, one for the MVC C# web app and one for the JS app and believe it or not we will use a cool modern CSS and HTML5:

JS

We can the code above to HTML page but we first have to create one. Here’s a template you can use which I found on W3Schools.com below.



<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

* {

box-sizing: border-box;

}

.row::after {

content: "";

clear: both;

display: table;

}

[class*="col-"] {

float: left;

padding: 15px;

}

html {

font-family: "Lucida Sans", sans-serif;

}

.header {

background-color: #008B8B;

color: #ffffff;

padding: 15px;

}

.menu ul {

list-style-type: none;

margin: 0;

padding: 0;

}

.menu li {

padding: 8px;

margin-bottom: 7px;

background-color: #008B8B;

color: #ffffff;

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

}

.menu li:hover {

background-color: #0099cc;

}

.aside {

background-color: #33b5e5;

padding: 15px;

color: #ffffff;

text-align: center;

font-size: 14px;

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

}

.footer {

background-color: #008B8B;

color: #ffffff;

text-align: center;

font-size: 12px;

padding: 15px;

}

/* For mobile phones: */

[class*="col-"] {

width: 100%;

}

only screen and (min-width: 600px) {

/* For tablets: */

.col-s-1 {width: 8.33%;}

.col-s-2 {width: 16.66%;}

.col-s-3 {width: 25%;}

.col-s-4 {width: 33.33%;}

.col-s-5 {width: 41.66%;}

.col-s-6 {width: 50%;}

.col-s-7 {width: 58.33%;}

.col-s-8 {width: 66.66%;}

.col-s-9 {width: 75%;}

.col-s-10 {width: 83.33%;}

.col-s-11 {width: 91.66%;}

.col-s-12 {width: 100%;}

}

only screen and (min-width: 768px) {

/* For desktop: */

.col-1 {width: 8.33%;}

.col-2 {width: 16.66%;}

.col-3 {width: 25%;}

.col-4 {width: 33.33%;}

.col-5 {width: 41.66%;}

.col-6 {width: 50%;}

.col-7 {width: 58.33%;}

.col-8 {width: 66.66%;}

.col-9 {width: 75%;}

.col-10 {width: 83.33%;}

.col-11 {width: 91.66%;}

.col-12 {width: 100%;}

}

</style>

<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css"> <script src="

</head>

<body>

<div class="header">

<h1>Chania - <div id="username"> </div></h1>

</div>

<div class="row">

<div class="col-3 col-s-3 menu">

<ul>

<li>The Flight</li>

<li>The City</li>

<li>The Island</li>

<li>The Food</li>

</ul>

</div>

<div class="col-6 col-s-9">

<h1>The City</h1>

<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>

</div>

<div class="col-3 col-s-12">

<div class="aside">

<h2>What?</h2>

<p>Chania is a city on the island of Crete.</p>

<h2>Where?</h2>

<p>Crete is a Greek island in the Mediterranean Sea.</p>

<h2>How?</h2>

<p>You can reach Chania airport from all over Europe.</p>

</div>

</div>

</div>

<div class="footer">

<p>Resize the browser window to see how the content respond to the resizing.</p>

</div>

</body>

</html> * {box-sizing: border-box;.row::after {content: "";clear: both;display: table;[class*="col-"] {float: left;padding: 15px;html {font-family: "Lucida Sans", sans-serif;.header {background-color: #008B8B;color: #ffffff;padding: 15px;.menu ul {list-style-type: none;margin: 0;padding: 0;.menu li {padding: 8px;margin-bottom: 7px;background-color: #008B8B;color: #ffffff;box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);.menu li:hover {background-color: #0099cc;.aside {background-color: #33b5e5;padding: 15px;color: #ffffff;text-align: center;font-size: 14px;box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);.footer {background-color: #008B8B;color: #ffffff;text-align: center;font-size: 12px;padding: 15px;/* For mobile phones: */[class*="col-"] {width: 100%; <a href="http://twitter.com/media" class="dm lf" rel="noopener nofollow">@media</a> only screen and (min-width: 600px) {/* For tablets: */.col-s-1 {width: 8.33%;}.col-s-2 {width: 16.66%;}.col-s-3 {width: 25%;}.col-s-4 {width: 33.33%;}.col-s-5 {width: 41.66%;}.col-s-6 {width: 50%;}.col-s-7 {width: 58.33%;}.col-s-8 {width: 66.66%;}.col-s-9 {width: 75%;}.col-s-10 {width: 83.33%;}.col-s-11 {width: 91.66%;}.col-s-12 {width: 100%;} <a href="http://twitter.com/media" class="dm lf" rel="noopener nofollow">@media</a> only screen and (min-width: 768px) {/* For desktop: */.col-1 {width: 8.33%;}.col-2 {width: 16.66%;}.col-3 {width: 25%;}.col-4 {width: 33.33%;}.col-5 {width: 41.66%;}.col-6 {width: 50%;}.col-7 {width: 58.33%;}.col-8 {width: 66.66%;}.col-9 {width: 75%;}.col-10 {width: 83.33%;}.col-11 {width: 91.66%;}.col-12 {width: 100%;} https://code.jquery.com/jquery-3.1.1.min.js</a> " integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> Chania - The Flight

The City

The Island

The Food The City Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city. What? Chania is a city on the island of Crete. Where? Crete is a Greek island in the Mediterranean Sea. How? You can reach Chania airport from all over Europe. Resize the browser window to see how the content respond to the resizing.

I added the username space for where it’s to be displayed from JS data — this is this bit:

<h1>Chania - <div id="username"> </div></h1>

Nothing else is to change anything above except we need to decide when the user will be displayed from the JS data into the above HTML and we have a few options:

It can be user triggered and to do so:

<button onClick=“fetchData();” > fetch data and display the username </button>

You will the above code creates a button and on click of that button it fetches the JS embedded in the HTML and finds the fetchData function we created and processes whatever is in that function. or on page load i.e. once page has loaded load it automatically. If we wanted we can also auto fetch when the page has loaded — the example below uses the Browsers Window Library object and has event listeners for common situations:

window.addEventListener('load', (event) => {

fetchData();

});

That will give your JS front end a much cleaner UI.

C#

Now for the MVC View we can pretty much do the same with a bit of a tweak:



<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

* {

box-sizing: border-box;

}

.row::after {

content: "";

clear: both;

display: table;

}

[class*="col-"] {

float: left;

padding: 15px;

}

html {

font-family: "Lucida Sans", sans-serif;

}

.header {

background-color: #008B8B;

color: #ffffff;

padding: 15px;

}

.menu ul {

list-style-type: none;

margin: 0;

padding: 0;

}

.menu li {

padding: 8px;

margin-bottom: 7px;

background-color: #008B8B;

color: #ffffff;

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

}

.menu li:hover {

background-color: #0099cc;

}

.aside {

background-color: #33b5e5;

padding: 15px;

color: #ffffff;

text-align: center;

font-size: 14px;

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

}

.footer {

background-color: #008B8B;

color: #ffffff;

text-align: center;

font-size: 12px;

padding: 15px;

}

/* For mobile phones: */

[class*="col-"] {

width: 100%;

}

only screen and (min-width: 600px) {

/* For tablets: */

.col-s-1 {width: 8.33%;}

.col-s-2 {width: 16.66%;}

.col-s-3 {width: 25%;}

.col-s-4 {width: 33.33%;}

.col-s-5 {width: 41.66%;}

.col-s-6 {width: 50%;}

.col-s-7 {width: 58.33%;}

.col-s-8 {width: 66.66%;}

.col-s-9 {width: 75%;}

.col-s-10 {width: 83.33%;}

.col-s-11 {width: 91.66%;}

.col-s-12 {width: 100%;}

}

only screen and (min-width: 768px) {

/* For desktop: */

.col-1 {width: 8.33%;}

.col-2 {width: 16.66%;}

.col-3 {width: 25%;}

.col-4 {width: 33.33%;}

.col-5 {width: 41.66%;}

.col-6 {width: 50%;}

.col-7 {width: 58.33%;}

.col-8 {width: 66.66%;}

.col-9 {width: 75%;}

.col-10 {width: 83.33%;}

.col-11 {width: 91.66%;}

.col-12 {width: 100%;}

}

</style>

<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css"> <script src="

</head>



<div class="header">

<h1>Cars View- <div id="username"> </div></h1>

</div>

<div class="row">

<div class="col-3 col-s-3 menu">

<table> * {box-sizing: border-box;.row::after {content: "";clear: both;display: table;[class*="col-"] {float: left;padding: 15px;html {font-family: "Lucida Sans", sans-serif;.header {background-color: #008B8B;color: #ffffff;padding: 15px;.menu ul {list-style-type: none;margin: 0;padding: 0;.menu li {padding: 8px;margin-bottom: 7px;background-color: #008B8B;color: #ffffff;box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);.menu li:hover {background-color: #0099cc;.aside {background-color: #33b5e5;padding: 15px;color: #ffffff;text-align: center;font-size: 14px;box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);.footer {background-color: #008B8B;color: #ffffff;text-align: center;font-size: 12px;padding: 15px;/* For mobile phones: */[class*="col-"] {width: 100%; <a href="http://twitter.com/media" class="dm lf" rel="noopener nofollow">@media</a> only screen and (min-width: 600px) {/* For tablets: */.col-s-1 {width: 8.33%;}.col-s-2 {width: 16.66%;}.col-s-3 {width: 25%;}.col-s-4 {width: 33.33%;}.col-s-5 {width: 41.66%;}.col-s-6 {width: 50%;}.col-s-7 {width: 58.33%;}.col-s-8 {width: 66.66%;}.col-s-9 {width: 75%;}.col-s-10 {width: 83.33%;}.col-s-11 {width: 91.66%;}.col-s-12 {width: 100%;} <a href="http://twitter.com/media" class="dm lf" rel="noopener nofollow">@media</a> only screen and (min-width: 768px) {/* For desktop: */.col-1 {width: 8.33%;}.col-2 {width: 16.66%;}.col-3 {width: 25%;}.col-4 {width: 33.33%;}.col-5 {width: 41.66%;}.col-6 {width: 50%;}.col-7 {width: 58.33%;}.col-8 {width: 66.66%;}.col-9 {width: 75%;}.col-10 {width: 83.33%;}.col-11 {width: 91.66%;}.col-12 {width: 100%;} https://code.jquery.com/jquery-3.1.1.min.js</a> " integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> Cars View- <tr> <th>CarId</th> <th>CarName</th> </tr> @foreach (AutoInfo autoInfo in Model) { < tr > < td > @autoInfo.CarId </ td > < td > @autoInfo.CarName </ td > </ tr > } </div>





</div> <div class="footer">

<p>Resize the browser window to see how the content respond to the resizing.</p>

</div>

NOTE: Before you shout in the comment section some stuff won’t work please note the examples are all for testing purposes and may not fully work for YOUR use case. However if you feel like only small bits work and need help then feel free to ask questions in the comments. I love helping out as much as possible.

I hope you loved this article and hope I kept to my promise by turning you (the seasoned or beginner dev) into a Full Stack (web) Developer in one weekend.

Coming up…

Part 2 — Building a Full Stack Application as part of your journey into Full Stack Development