Application structure and the making of an open source SPA


Loklak Webclient would be the biggest SPA repo I have ever seen. Probably because of these two reasons:

  • Application structure was designed to be scalable from the beginning.
  • Application is as much independent as possible from external APIs

As the first reason is covered the in the previous part, this week we will take a look at the second version.

There are three API we are using locally in for Loklak Webclient

  • Iframely: To render data with rich content, we needed a service to debug the resource. Iframely was chosen because it’s open source and its node js implementation fits our repo perfectly.
  • Node-Oauth-shim: Twitter is using Oauth 1, which make it harder to implement Oauth to Twitter from the client without exposing application secret keys, hence, an oauth-shim service is needed. One very popular choice is Although is open source, its application structure didn’t fit our application, and also is an overkill one. The only vanilla Javascript solution left is Hello.js and its Node-Oauth-shim service. The repo is highly recommended on Github, so as expected, the service works perfectly without any critical errors.
  • Loklak GeoLocation: this is a developing service at Loklak Server Api. At first we used OSM/GoogleMap APIs, however their implementation involves the whole library for a very small use of geo location, so we decided to look for another ways. Meanwhile, Loklak server cache are getter bigger and bigger so GeoLocation is more than just possible. Try this query!

Other than APIs, an application can’t “flourish” without external libraries. There are three place libraries are included in our application

    • If a node package is available, it is saved in node_modules and included with the help of Browserify
    • If not
      1. If it is required for other operations than the angular application, include it in a script tag, before the angular script.
      2. Else, include in app/components/ to be bundled together with the angular application

This way, with the help of build tools, we are able to minimize the number of http requests and the bandwidth to load Loklak Webclient, and make the world a better place 🙂

Application structure and the making of an open source SPA

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.


├── 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