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