Start From Scratch: The Fundamentals.

Screen Shot 2016-05-09 at 10.42.12 AM

Start from Scratch, an event where brilliant girls gathered together to code, happened last weekend, 30th April. After the event, I promised to do a series of posts on the App that we built with the girls, and also so that anyone else interested can join in. If you have not yet, you can see the demo of what we should achieve after it all here.

This post serves the purpose of giving a brief introduction to Web Applications and their development, and is written in a language suitable for beginners. If you are a beginner interested in Web Application development, this series will be quite helpful.

Web Applications are applications that are stored on a server and  can be accessed over the internet through browsers e.g Chrome. Servers are programs that serve files to users in form of web pages in response to their requests. Some common files that make up a website/web pages include HTML files (.html extension), Style files(.css extension) and Scripts(.js extension)


Types of Web Applications:

Static Applications/Websites.

These are websites that do not change at all. They have no activity on them and cannot interact with a user. The only animation you will see on these websites are when they are loading when you visit the page or when you hit the refresh button.

Dynamic Applications/Websites.

These are websites that have some interactivity and can change their content based on what a user does. A database driven website is an example of such an application. Web pages are programmed to communicate with a database that stores data which can be used to update content on the website. When content in the database changes, the respective pages then update automatically without the intervention of a user.

The application we will build at the end of this series is a dynamic database driven website.

Prerequisites and setting up.

For this application we will build using the following frameworks/tools. I’ll explain what each does:

  • Nodejs.
  • Mongolab/ MongoDB.
  • Ajax.
  • Materializecss, a Material Design framework.

Nodejs

Nodejs is an open-source, runtime environment used to build server-side applications. Simply put, it is what we will use to create our web server. You will need to install it from here and this quick guide helps you set up on Windows.

MongoDB.

MongoDB is a NoSQL database that uses the document model. What does this mean? Traditionally, databases store data in structured tabular form (rows and columns), MongoDB, however, stores data in JSON-like format called documents.

json
JSON format.

You can download MongoDB from here and this guide helps you set up on Windows.

Ajax.

Assume you are surfing on Facebook, you see an interesting status update and you’d like to see all the comments. When you press the view previous comments link, the section drops down and you are able to comfortably read the comments. Notice, the page does not reload afresh, just a section of it got updated. Ajax helps to achieve such functionalities.

Ajax therefore is a method of communicating with the server/database, getting data and updating sections of a website without doing a full page reload.

It is not a programming language, but more of a technique. A technique that implements a number of technologies.

Material Design.

Lastly, we will implement a Material Design framework known as MaterializeCSS. But first, what is Material Design? Material Design is a design language by Google that implements grid-based layouts, responsive transitions/animations and lighting/shadow effects .

A good UI (User Interface) and UX (User Experience) are imperative when developing your application.

The above are what we will use throughout this series. Don’t worry if the terms are too strange at the moment, with time you will get to understand them. One other important thing is, aside from HTML and CSS, JavaScript is a language you will definitely have to learn if you are delving into Web Apps. 80% of the code we are going to write is going to be in JavaScript. That is scary to know if you have never written a line of code in JavaScript. Worry not, you can begin learning it today at codecademy and with time you will catch on.

Programming is a field that requires constant curiosity and learning. Sometimes it will get frustrating but if you keep persisting you’ll always pull through the challenge. Looking forward to seeing you all in the next post.

Github project repository.

You may also like

Leave a Reply

Your email address will not be published. Required fields are marked *