Codecov and Gemnasium support for Loklak Webclient

To follow good development practices,  Codecov and Gemnasium support were recently added to loklak_webclient.

Codecov gathers the coverage reports, from all languages, and aggregate the results in a single cohesive report. it helps to find how much code is covered by your tests, sends the information back to developers, to ensure good code quality.

To Add Codecov support to loklak_webclient, I used codecov multilingual bash command. Since coverage report is to be sent to Codecov after Travis CI executes the test suite on the repository, following code was added to .travis.yml.

after_success:
  - bash <(curl -s https://codecov.io/bash)

Gemnasium keeps track of projects dependencies. Since it has extended its support to NodeJS projects on github, it was ideal choice for loklak_webclient. I will be adding Gemnasium support for several other loklak repositories in future.blog3_1

Badges for both integrations were added to Readme.md.

Codecov and Gemnasium support for Loklak Webclient

A peek at loklak webclient

To demonstrate the capability & the purpose of loklak, we need a multifunctional and also practical web application to utilize and visualize the search result. This is where loklak webclient comes in.

In short, the webclient aims to:

  • Enable tweeting features, including rich contents those can be stored and processed, exclusively by the loklak server
  • Provide a fully functional twitter walls, like e.g. tweetbeam or tweetwall.
  • A Search front and comprise of default twitter search filter, along with additional functionality e.g. a map of search results, rich content search results.

With so many features in one web application, the answer for seamless UX is: Single Page Application, and thank to @julianfox, we had an amazing Angular app skeleton to start with.

Let’s take a look at the original skeleton.

App is the center of creation. This subdir contains the pre-built static file of your application. Angular components are separated and bundled the nodejs way, with the help of browserify.

├── components

├── constants.js

├── controllers

├── directives

├── filters

├── main.js

├── on_run.js

├── routes.js

├── services

└── templates.js

With this level complicity, automation is essential, this is where gulp comes in. The skeleton provide automation tasks for all the important aspects of development, production and deployment, e.g bundling, minifying, linting,  testing, watching and so-on.

tasks/

├── browserify.js

├── browserSync.js

├── clean.js

├── deploy.js

├── development.js

├── fonts.js

├── gzip.js

├── images.js

├── lint.js

├── live.js

├── minify-css.js

├── production.js

├── styles.js

├── test.js

├── unit.js

├── views.js

└── watch.js

I hope the first look at the application structure did not scare you away. It took me almost half a month to have an idea what’s going on, especially in the angular components, and then in the automation. But honestly this will always be my new model for SPA skeleton in the future, because it embraces the principle of modularity and extensibility, which are so hard to achieve in the modern web development.

Like what you see? Join the development team discussion here on gitter.

A peek at loklak webclient