Abstract Programming with Javascript - Designing a notifications interface

What is abstraction?

Programming is all about abstraction. In fact the more abstract your code is the more powerful your application will be and the more efficient that code will be. This helps improve speed, code understandibility and code simplicity, as well as convenience and ease of programming, amongst many other advantages.

I will first explain in context what code abstraction is and then we will go hands on with an example and then finally with what we learn, we will apply it by designing a simple but powerful notifications interface.

Code abstraction makes use of a form of generalized programming, to achieve a certain task or tasks, while keeping the method of doing so non-specific. What this means essentially is writing code to achieve a wide variation of similar tasks all together instead of writing separate code for each task individually. Then, the more abstract, or generalized our method of programming is, the more powerful it will be in our program.

An example

For example if we wish to create a method to design notifications that pop up every time an event occurs, say a user gets a new friend request, instead of trivially writing lines of code to execute the notification, "you have a new friend request" and then for a different event, "you have a new message", we can create a method that executes a generalized notification system. We spare the specifics from the method and instead pass the specifics as parameters to our method. This way we can then call this abstract method everytime an event occurs and pass the parameter "you have a new message" to our method, saving us a ton of code and making our code a lot more powerful.

If that wasn't very clear, fear not we will demonstrate with a hands on example that you will be able to easily understand and use right away.

For beginners, this may seem odd. Why not just run a small method that displays notifications on every event that occurs? We anyways need to run a method for every event that can occur in our program so why not add an extra few lines of code that executes the notification?

The answer is simply code repetition but can more effectively be understood with the following application.

Designing a notifications interface

In this example we'll be using the world's most used programming language to build our interface aka Javascript (and jquery). As well as html to display results to, so essentially a web app.

Let's say we have a few actions which the user can perform and a few events which can happen without the user doing any action. Our app needs to perform the following.

Actions

• A save button action
• An send message action
• Commented on post

Events

• Received a message
• Received a notification

Let's see how we can create a notifications interface solving these requirements.

function notification(text,link,duration) {
    var notif = '<div class="notifcontainer"><p>'+text+'</p><br><a href="'+link+'">view here</a></div>'; 
    notif.appendTo('body');
    setTimeout(function() { 
        $('.notifcontainer').fadeOut() 
    },duration)
}

Let's understand what we wrote here. In the first line, we define a function called notification and create 3 arguments, text, link and duration, which will contain values of the parameters that will pass from our individual actions and events. For example if on a certain action we want the message of the notification to say "you have a new message", we will set our first parameter "text" to this message:

var text = 'You have a new message!';

The we want the link for this notification to redirect to the inbox when the user clicks on it so we set the value of our second argument "link":

var link = 'path/to/inbox.php';

Finally, our third argument simply determines the duration before which the notification will automatically dissappear. (Think of it like facebook notifications that appear at the bottom left corner and dissappear after a few seconds). So we set the value of our thirs argument "duration":

var duration = 5000;

Our second line creates a general container for a notification and inserts a p tag and an acnhor tag. The p tag is injected with our argument "text" so it receives the notification text from other actions and events and the anchor tag is injected with the link of the appropriate link of where to redirect user when he clicks on the notification.
The third line simply appends our new notifications container div to our body in the html, containing the text and link values set in actions or event methods.

Finally, our last line uses a setTimeout function which effectively makes the new notification dissappear after agiven duration. This is where our duration argument comes into play. The value that is set will determine how long the notification will stay visible on the page.

Now let's look at our actions and events functions to complete the functionality of our interface.

First our save button:
Say it has the class 'savebtn'.

$('.savebtn').on('click', function() { //when user clicks on save button
    var text = 'your post has been successfully saved!';
    var link = 'path/to/post.php';
    var duration = 5000;
    notification(text,link,duration);   
});

The above code runs everytime the user clicks on the save button and the text and link variables are then set and passed as parameters to our notification function.

Now we see why our interface is much more powerful now. Instead of adding a notifications container with specific text, a link and a duration we simply create an abstract method that creates notifications and pass the specifics from each individual action or event.

Let's see this for events:

function newMsg() { //user receives a new message
    var text = 'You have a new message';
    var link = 'path/to/inbox.php';
    notification(text,link,4000);
}

The function runs when the user has received a message and our notifications interface runs also and receives the parameters above.

The rest of our actions and events works in the same exact way and allows our code to be more efficient and organized.

Finally we can add some css to style our notification container and make it appear at the bottom left corner as is commonly seen in web apps.

.notifcontainer {
    position: fixed;
    bottom: 30px;
    left: 30px;
    padding: 30px;
    box-sizing:border-box;
    box-shadow: 0 1px 5px rgba(0,0,0,0.25);
    background:#fff;
    border-radius: 10px;
}
.notifcontainer a {
    font-size: 12px;
    color: blue;
    text-decoration: none;
}

That's it for this one, stick around for part 2 where i will use abstraction to create other more powerful interfaces and functionalities.

I hope you enjoyed this post and i'll see you in the next one!