Githubber - Application that lists github repositories for a given user
App is taking advantage of RXJS and Observables in Angular 2
Some of the features in the search :
- Do not trigger the search request on every key stroke, wait until user stops typing
One should not trigger the search endpoint more often than needed. Basically one only wants to hit it once the user has stopped typing instead of with every keystroke. We need to call:
debounceTime(500)500 is the value in miliseconds
- Don’t trigger the same search query twice or more in a row It would be a waste of resources to send out another request for a search term that the application already shows the results for. Fortunately Rx helps with that. All what is needed to do to achieve the desired behavior is to call
distinctUntilChanged()Technology stack:
-
NPM for package manager
-
TypeScript for transpiling, types and es6 features
-
Typings as TypeScript definition manager
-
Gulp for task automation
-
Browsersync for development server & reload
-
SystemJS as module loader
-
Codelyzer as linter
-
Karma as test-runner
-
Jasmine as test framework
-
Istanbul for test coverage
WIP Protractor for E2E Tests
- Githubber click to check it out
*Required:
Install packages:
npm installStart up the server:
gulp or gulp serve-dev (default task)
The browser will popup and serve the application. Every changes to the file will refresh the browser automatically and it'll also compile your changed TypeScripts files to Javascript files.
Run the command
gulp testand it'll compile all TypeScript files, start Karma, then remap Istanbul coverage so that it shows TypeScript coverage, not the transpiled Javascript coverage.
All build tasks will run the
gulp test, the bundle will only be created if the test passed.
You can create production build by running:
gulp buildor you can create production build and then serve it using live-server by running:
gulp serve-buildIt uses SystemJS Builder to bundle the application so it's ready for production use