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