This application is intended to be a slideshow to pull images from Flickr and display them as a slideshow to the user.
- Install npm - https://www.npmjs.com/
- Install bower - http://bower.io/
- Install a node webserver -
npm install -g http-server
- Clone this repo
- Run
npm install
- Run
bower install
cd src
- Run
http-server
from the root of the project.
Run npm test
to start the Karma test runner and watch the source files.
- Create a flickr account and upload 5 images
- Setup an AJAX request to get those images from Flickr
- Display images on the page, with left and right arrows to go previous / next
- Use bower to install jQuery
- Replace all DOM interaction / event handling / Ajax / etc with jQuery
- Use a lightbox plugin to display the slideshow
- Use bower to install Bootstrap
- Style the app using Bootstrap CSS
- Use Bootstrap classes to create three different display styles:
- 2 columns for mobile
- 4 columns for desktop
- 12 columns for wide screens
Install and configure the QUnit Testing frameworkCreate a separate HTML file (tests.html
) to display test resultsWrite unit tests for the jQuery logic
*This Phase was abandoned due to QUnit shortcomings. Moving to a Karma/Mocha/Chai setup
- Use npm to install Karma, Mocha, and Chai
- Create the basic test infrastructure
- Use
package.json
to implement anpm test
task which will run the Karma tests. See the npm-scripts docs for details - Create a simple test to verify the suite runs properly. Example:
it('should pass', function(){
expect(true).to.equal(true);
});
- Convert the application to AngularJS, leaving jQuery as a dependency leveraged by Angular.
- Create AngularJS constructs using a TDD procedure:
- Service to handle the data retrieval from Flickr
- Controller to handle view logic
- Directive for the slide show and slides
Note: It's considered best practice to build the app in pieces/components. Meaning that, ideally, we create a service to retrieve the data. Then, create a controller that uses that service to access the data. Finally, a directive is created, which excepts the data now present in the controller, and outputs the appropriate HTML. Each of these pieces should be tested and reviewed before the next is built.
This phase will introduce the concept of build automation, by using Gulp to add JS / CSS linting.
- Add pipeline-validate-js and a introduce a
gulp js:lint
task to lint all JS insrc/
- Add pipeline-validate-css and a introduce a
gulp css:lint
task to lint all CSS insrc/
- Add a third task that runs both tasks, called
gulp build
Create an application package build ready a production deployment. The idea of a deployment build in web applications is to prepare the application code in a way that provides the ulitmate experience for the user, while keeping the stress on the hardware, both front- and back-end, to a minimum.
For this build to be successful, we need a gulp task that creates a stand-alone, launchable application, located within a /dest
directory (which is not commited to the repo). The files in this directory should be:
- Linted
- Concatenated (2 files: 1 for bower components, 1 for application code)
- Minified (file names:
vendor.min.js
,app.min.js
) - Included in index.html