paulhurrle / jangle.github.io

Explanation

This was my first web development project that would initially test my aptitude to build an app using HTML, CSS, and native JavaScript. Later I would need to refactor the app by integrating jQuery’s library, and then totally rebuild the app using AngularJS.

Problem

This project required the building of a Spotify-like app with the capability of displaying album collections and playing audio files. Phase I of the project would involve using native JavaScript to apply all interactivity throughout the site. Phase II would integrate jQuery’s extensive library to refactor much of the existing JavaScript. In Phase III, the entire project would need to be refactored again, this time from the ground up using AngularJS.

Solution

Throughout the project, I used an editor, Atom, to build the backbone of the application, implement styling and responsiveness with CSS, and add interactivity using JavaScript, jQuery, or AngularJS. A landing page, collections page, and album page were created in Phases I and II, which were replaced by templates in Phase III.

Phase I: Native JavaScript

Phase II: jQuery

Phase III: AngularJS

Home.html Template

Home Controller

No music player would be complete without the ability to play audio files.

Results

Regular testing of the app was conducted through the use of browser developer tools. With the help of an experienced front-end developer, I assessed limitations of the app and discovered several ways to enhance usability.

Conclusion

Each phase of this project introduced several new challenges and afforded me opportunities to grow as a developer. One of the significant moments for me was understanding how native JavaScript and jQuery compare in terms of utility, intuitiveness, and their popularity throughout the web development community. Refactoring the project using AngularJS exposed an entirely new framework for building web apps as Single Page Applications (SPAs). The Model-View-Controller concept was both challenging and rewarding in terms of embracing a new perspective of isolating the page content from the methods and properties that make it work. This learning experience prepares me to tackle with confidence any projects in the future that require a new framework or different methodology than what I used previously.