• One main project this summer, Kanbanzilla
• What the project is
• What it's for, with some background info
• How it was built

• An internal tool that provides a Kanban board to triage bugs in Bugzilla.
• Integrated so that changes made to the board are reflected in Bugzilla and vice versa.

• Scheduling system for JIT Production
• Work-in-progress limited pull system
• Set of steps in the development process
• Work is pulled into subsequent steps 
• Doesn't prescribe doing anything radically different

• Roughly translates into "signboard" or "signal card" in Japanese.
• Originally a scheduling system developed by Taiichi Ohno for Toyota factories.

• Obviously a different process
• But the underlying idea of managing a production pipeline is the same

1. Visualize
2. Limit WIP
3. Manage Flow
4. Make Policies Explicit
5. Implement Feedback Loops
6. Improve Collaboratively, evolve experimentally

• Bug Tracking System
• Need something done? File a bug.
• Lots of bugs to manage and we need to resolve them

• yodiz
• kanbanize
• kanban-tool
• trello
• leankit
• targetprocess
• breeze
• swift-kanban
• GreenHopper / Jira
• Kanbannery
• I Lied, there's a lot

• Using any one of these tools requires updating data in two places and keeping them in sync
• Change the board, go change Bugzilla.
• Change Bugzilla, go change the board.
• Don't like that, we want a board that just works.

• On its' own, Bugzilla maps fairly well to a Kanban process.
• Boards could be composed of existing Bugzilla components
• Statuses could become the columns on the board.
• Unconfirmed, New, Assigned, Ready, Resolved, Verified, Reopened
• But there were a few intermediary steps that were desired.

• Map to one or more statuses
• Or have no status mapping and instead become a "virtual" column that was backed by some whiteboard data
• Verified serves as an archive of sorts

• Thin layer on top of Bugzilla REST API
• Creating and sharing boards
• Auth

username=me@mozilla.com&password=lolnope 

userid=1234&cookie=mGjlksad94 

• Most experienced with
• Doing things the angular way produces an application that is flexible, and easily reasoned about.
• Support for testing
• Community

• Two-way data-binding.
• Directives (web components)
• Filters
• Services
• Dependency Injection
• Extends HTML

• Not jQuery
• Instead of reaching into the DOM to make the UI reflect the model, focus on manipulating data, and let data-binding and directives render that data for you.
• When we do need to touch the DOM, this can be encapsulated as a directive, a web component of sorts.

 <calendar></calendar>

 angular.module('myApp')    .directive('calendar', function () {        return {            restrict: 'E', // or 'A', or 'C'            scope: {},            templateUrl: 'views/calendar.tpl.html',            link: function (scope, elem, attrs) {                 // directive functionality            }        }    });

 <input type="text"
            id="board-search"
            class="input-medium search-query"
            placeholder="Search..."
            grow-when-clicked="300"
            ng-model="query">

• Performance
• Use promises for a lot of features in angular
• Truly Re-usable Components

• Angular makes it really easy to start getting things working
• BUT, larger apps require some consideration when using those "easy" features.

 <input ng-model="query"> <ul>   <li ng-repeat="item in items | filter:query"></li> </ul>

• Frequent model changes and re-rendering.
• If we have a lot of data, then typing gets sluggish.
• Probably want to type more than one character anyway.

• != Throttling
• Coalesce several signals into one
• Can ignore the signals until some completion delay has elapsed, then trigger the update/signal

 <input ng-model="query" debounce-model-update="400">

• Stop trying to render all 10,000 items at once
• Not just a performance problem, also a UX problem
• Try pagination or infinite scrolling to render only a subset of the collection at any one time.

 getDataForUser('me', function (err, result) { ... });

 var dataPromise = getDataForUser('me');

 $routeProvider   .when('/board/:id', {      templateUrl: 'views/board.html',      controller: 'BoardCtrl'   });

 angular.module('myApp')   .controller('BoardCtrl',     ['Board','$routeParams', function (Board, $routeParams) {     Board.getBoardData($routeParams.id).success(function (result) {       $scope.boardData = result.data     });}]);

• Have 1.5 weeks left in my internship
• Kanbanzilla is being deployed
• Optimizations like the debounce stuff not included yet.

• Upgrade to Angular 1.2
• Animations
• Simplify Code and some perf stuff
• UI Changes
• Sort order of bugs
• Custom Columns
• Apply filters to queries when creating boards, more than just component selection