Eckhardt

Posted on Mar 25, 2019

Thinking like a web developer

#webdev #javascript #api #css

Photo by Fatos Bytyqi on Unsplash

What does it mean to think like a web developer? What are the things you'll come across throughout your career? In essence and with respect to Pareto - what is the 80/20 rule in web development.

The stack

The stack is not really specific to web itself, but you'll often hear web developers say "I'm a full-stack dev" or "I work on the front-end" or "I'm a back-end (sometimes API) developer". Here's what they mean:

Front-end

You spend a lot of time translating designs into HTML and CSS. You'll also quite often take deep-dives into frameworks like React or Vue, bundlers like Webpack and transpilers like Babel.

Back-end

As a back-end developer, you won't spend much time on the visual side of things. You'll look at code a lot and logic will be your best friend. Your tasks will range from database administration to RESTful API's to testing endpoints on a regular!

As a biased Javascript developer I'd mention the tools here, but in the end servers aren't as limited as browsers and many languages and frameworks can be used to accomplish this.

Javascript frameworks

You'll often see memes and jokes about the amount of JS libraries and frameworks created in a day. NPM - Node's package manager, will be a daily tool that you use to install helpful packages into your application.

Some of the larger installs like React and Vue are considered frameworks. Unlike libraries - frameworks are much bigger, calls your code and you're probably going to spend weeks learning them. The good thing is once you know one, you become more employable and your productivity will increase.

Transpile vs. bundle?

This is a thing you'll encounter often in front-end (and sometimes even back-end) development. First, what are they?

Transpile

Transpiling is the process of taking the code you wrote and changing it. Sometimes it's meant to translate into other languages, but in the case of Javascript, you'll most commonly transpile from newer language features that older browsers don't support yet, into a version they do. eg:

const theArray = [2, 10];
const [amount, total] = theArray;

// Transpiled to
var theArray = [2, 10];

var amount = theArray[0];
var total = theArray[1];

Babel is great for this.

Bundle

When you start out with front-end development, you'll usually create an html file. For example:

<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <script src="app.js"></script>
  </body>
</html>

In this case you'll usually just write all your JavaScript in the app.js file, and your css in style.css. This works well if you're writing your JavaScript and CSS in a few files and simply include it in your main html file.

But when the app grows and your list of files are literally insane (if you think about all those packages), it becomes smart to use a bundler, that magically builds all the code for you and you simply include the one or two bundled files.

Relational vs. non-relational

In the world of databases - the place where you persist your website or web application's data.

You'll often hear of relational databases like SQL, which has table-like structures. They usually exist in reference to each other and have rows and columns and specific syntax to manipulate data.

Non-relational databases are more flexible. They don't have fixed structures and you can store any data structures, usually in 'documents'. MongoDb is a common service in the Node.js world.

These services are usually run on the server for security reasons. But there are client-side options available too. Except for the browser's built in localStorage - you could also use a service like Firebase.

It allows you to connect and perform operations on a non-relational database with Firestore queries, straight from the browser. Security would be performed on the firebase console as Firestore rules.

example of Firestore rules

// Allow read/write access on all documents to any user signed in to the application
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth.uid != null;
    }
  }
}

Databases are a huge part of your back-end development and you'll spend a lot of time making your database safe and efficient.

Improving your logic

A huge part of programming in general, which cannot be left out here - is improving your code. No doubt that as the years go by, you'll look at the previous year's code and feel queazy. There's no limit to beautiful, efficient code and achieving it is simple practice and experience.

Specific ways to improve your code

Here are some practical ways you can make sure your code is improving. It's not going to improve over night, but it may help.

Study data structures and algorithms from reputable sources.
Practice by participating in challenges like Code Wars.
Have experienced developers review your code.
Periodically look at your own old code and try to understand it with fresh eyes.
Apply the DRY principles - only repeat things that make more sense to be repeated than to be reusable.
Build stuff.
Look at other code, whether it be from experienced developers in articles and videos, or from Github repositories - look at the structure and principles and compare it to your own.

Git

Git is important for any software developer, and cannot be left out. GitHub is a version control hosting service that allows you to use git commands to commit and push your code. It tracks versions so that it's easy to maintain. Some things you'd want to know in git:

Branching
Forking
Command Line Interface
Pull/Fetch
Contributing

Git can prove very useful and is almost a requirement when collaborating on any project.

REST API's

REST

REST is a principle developed as a means for creating Web services. Basically, it's the way clients and servers communicate to manipulate resources. The communication is an article of it's own but generally it's a way to GET, POST (or send), PUT etc. data between server and client.

HTTP

HTTP is the transfer protocol used on the world wide web. 'Hyper Text' documents are transferred from server to client in a request-response model. Every time we enter a web address into the browser (the client) it sends a request to the server (Sometimes a request is made to only some data). The server responds with the requested resource if it exists and other checks are passed.

JSON

Javascript Object Notation is a form (structure) of data - it is structured like Javascript objects, hence the name. It looks something like:

{
  "people": [
    {
      "name": "John",
      "email": "john@doe.com"
    },
    {
      "name": "Jane",
      "email": "jane@doe.com"
    }
  ]
}

Many of today's HTTP requests are for a bunch of JSON data and on the client (browser) that data is processed and rendered.

As a web developer it's important to understand REST, HTTP and JSON. You'll use these principles often when developing a web service.

Designing API's

To bring it home, API's are developed using all these principles. A Node.js 'application programming interface' (or API) is often developed with services like Express, MongoDb and other helper libraries.

Routes are defined at the end of a URL like /home or /about and each route serves a purpose to the requester. Either GET, POST, PUT, DELETE etc. can be used when making the request to specify what the requester wants from the server and the server responds duly - with the code you so diligently wrote from all that practice.

Hosting

All this code, whether it be front-end or back-end, needs to be hosted up on the internet.

There are many hosting providers available. and for static front-end HTML, CSS and Javascript you can go with pretty much any of them (some are better than other). But a lot of providers still only provide PHP servers, which is great if you're writing PHP.

You'll simply build your static files, connect to your server via FTP and send over the files to be served on a domain name. And voila.

Hosting Javascript services

Javascript (Node) servers are a bit different. There aren't many providers that allow root access on their servers, where you could install and run a Node server.

For this we have a few other container-like services like Docker, Now or Heroku. Also, AWS and Google Cloud offer services.

Javascript frameworks like Meteor and Nuxt SSR, require to be hosted on servers that allow Node.js services.

Web development has so many faces. From finding your place in the stack, to mastering frameworks - there is a lot to think about.

So what does a web developer think like?

This post wasn't supposed to tell you about some breakthrough mental map. It also wasn't meant to teach you any stack, framework or language. It was written to get you to start thinking like a web developer. We have A LOT to think about and as a beginner, there is A LOT to learn. This was the broad stroke or the spark that prompt you to dive deeper, or maybe not...

It's a complicated and fast-paced lifestyle, but if it's for you, you'll know it from your first Hello World.

This post was heavily biased towards Javascript and Node.js, there are many other languages and services to built your architecture with. But if I'm going to promote web development, I'm going to do it the way I fell in love with it. Hit me up on Twitter @eckhardtdreyer

DEV Community