What's happening today:

  • Quiz: Apple's HIG
  • Guest Lecture: Johnathan Sutter
  • Demo: Rapid Prototyping

Simpletax.ca

Homepage

Key Points from Questions

  • Don't assume your design is perfect, expect to change
  • Use qualitative feedback to improve your app (show your app to as many people as possible)
  • Deploy early, often and in small doses
  • List all features, do a cost benefit analysis (time to implement vs. impact for users)
  • When you're considering adding a feature, consider what features can be removed
  • Two types of regression: remove forever or remove to improve
  • Use analytics to find out if your users are finding features, using features and how long it takes them to complete tasks
  • Trello is a good feature / todo manager
  • ...
  • If you remember something important from this discussion, please email me

Dev Tools are Optional!

We are going to be looking at a lot of tools in this course, but you need to keep in mind these are optional.

The tools we are showing you, are in fact intended to make your life more simple and are some of the most popular tools in industry today.

There may be a learning curve when incorporating a new tool into your workflow, sometimes the benefit outweighs the time taken to learn the tool, sometimes not. These are decisions you have to make!

Don't expect that things just run out of the box and stop panicing when they don't. Developer Tools are inherently opinionated and will often look and run like Greek to you the first time you try to use them.

Tools at a Glance

  • Bower

    Powerful front end package manager, quickly and easily import frontend libraries and frameworks

  • Grunt

    Command line interface for building a production version of your app and also local server testing

  • Yeoman

    An application and test helper generator for web applications

  • Browserify

    Uses require and commonjs modules to manage your frontend dependencies, replaces Bower

  • LESS

    CSS Preprocessor that adds extra features and generates valid CSS

Rapidly Create an Angular App

Setup Folder and File Structure

    mkdir ang-test
    touch index.html
    mkdir js
    touch js/controllers.js
    bower install angular
    bower install bootstrap
		
Start at tutorial Step 2

Notes

  • Don't forget to include angular and bootstrap in your index.html
  • Check that folders and files match with script src="???" and link href="???"
  • Always run with chrome dev tools open to the JS console
  • Check and fix ALL errors (usually in red)