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:
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.
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:
- Mongolab/ MongoDB.
- Materializecss, a Material Design framework.
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 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.
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.
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.
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.