Week 2: Modularization (with AMD)

In Class

RequireJS

Clone and pull down this repo
Download RequireJS and add it to the project, place it in the vendors dir
Set the entry point for the application to main.js
Add a requirejs.config method
Set the baseUrl to the js dir
Create a path for "jquery" to "vendors/jquery.min"
Do the same for Bootstrap

Refactor Playlist

Wrap the Playlist in a define method that depends on jquery
Wrap the main.js code that initializes a Playlist in a require()
Make sure to inject the Playlist into that require block
Check to see if it works
Remember to remove all of the <script> tags on the original index.html, in their place should be the single <script> for require

Separate Out DOM vs Business Logic

DOM functions go in PlaylistView.js
Business logic functions will stay in Playlist.js
Include the Playlist module in the PlaylistView module
Use PlaylistView in main.js to initialize, just as before

For this exercise, "business logic" functions are anything that doesn't touch the DOM. So Playlist.js should not include jquery.

Bonus: Create a Song.js module

Create the module, just give it a title
Refactor the Playlist to use that Song module

The playlist session storage should be storing an object for the song like {title: "Highway to Hell"}