Orbital Milestone 1

As Jon and I will be busy throughout the months of June and July, we have dedicated the past few weeks to work full-time on Feedbaker. In a short span of 3 weeks, we spent a total of more than 250 hours working on Feedbaker.

Feedbaker

In building Feedbaker, we learnt and made use of many technologies and components that helped simplify coding and collaboration. The rest of this post will be a summary of the components we used, some of which may have been mentioned in previous posts with greater detail.

 

Git

Our team has a git repository hosted at Github. This helps us to collaborate as we work together on different parts of the app and also logs each change made so that the other team member is aware.

 

Node.js

Node.js is a platform built on Chrome’s JavaScript V8 engine. Our team made extensive use of Node.js as we built Feedbaker. Not only is Feedbaker served through Node.js, we also use other packages that run on Node.js to help build, test and develop Feedbaker.

 

Yeoman is a Node.js module that helps scaffold modern web applications. Our team used the angular-fullstack generator to kickstart our project. This generator helped us to scaffold a webapp that runs on an Express server, with AngularJS as the client-side JavaScript MVC framework and MongoDB as the database.

 

AngularJS

AngularJS allowed us write cleaner and more efficient code by separating the logic layer from the presentation layer. It also enabled the reuse of UI components — which means we do not have to edit multiple files if, for example, we would like to add an additional item to the common navigation bar.

 

Sass

Sass (Syntactically Awesome Style Sheets) is an extension of CSS3 which adds nested rules, mixins and more. Feedbaker uses the SCSS syntax for Sass.

 

Bootstrap

Feedbaker uses the Sass-powered version of Bootstrap. With Bootstrap, our team is able to easily extend the base theme to develop a responsive web application without having to deal with too much CSS media queries.

 

Grunt

Grunt is a JavaScript task runner that automates the app’s development, testing and building process. As part of the build process, Grunt automatically compiles Sass into CSS and injects bower dependencies into the app. It does this by watching certain files for changes, and refreshes the webapp once the build process completes. When the app is being built for production, Grunt takes care of minifying HTML, CSS, JavaScript and even images. It also concatenates the many JavaScript and CSS files into a single file. All this is done to optimise the page loading time. Minification increases the page load speed by reducing the file size, while concatenation does the same by reducing the number of requests made to the server.

 

JSHint

JSHint is a JavaScript code quality tool. It helps to detect errors and potential problems as we code, and at the same time enforces JavaScript best practices. JSHint works with Grunt to alert our team of any potential issues with our code.

 

Express

Express is a web application framework for node. Feedbaker uses express to serve both static pages and dynamic content.

 

Nginx

Our team also configured Nginx as a reverse proxy for our web application. This allows us to host multiple node applications on a single server.

 

Socket.IO

To enable real-time display of poll results, Feedbaker uses WebSockets to allow for low-latency bi-directional connection between client and server. Socket.IO helps establish a WebSocket connection and allows data to be pushed to the client when fresh data is available.

 

Passport

Passport is an authentication middleware for NodeJS. It works seamlessly with Express to handle user authentication. In our app, we used Passport to authenticate users with their NUS OpenID.

 

mongoDB

MongoDB is a NoSQL database. Feedbaker uses MongoDB to store user data and cache session information.

 

Mongoose

Mongoose is a MongoDB object modeling tool designed to work in an asynchronous environment. Our team used Mongoose to interface with MongoDB, simplifying things such as validation of models.

 

Forever

Forever is a simple CLI tool for ensuring that a given script runs continuously. Our team makes use of this node module in our production server to keep the Feedbaker application running.

 

Bower

Bower is a package manager for front-end packages. It eliminates the need to commit vendor codes into the repository. Bower maintains a list of front-end packages the app needs in a file called bower.json. Dependencies are resolved automatically and are downloaded straight from the package maintainer’s git repository.

 

npm

npm is the official package manager for Node.js. Similar to Bower, npm takes care of all the packages needed to build, test and deploy the webapp. npm also tracks these packages in the app’s package.json.