Architecture of Open source systems #1: Umami: An open source Google Analytics Alternative

As I have gained experience building software I have realized that most important skill I can build is understanding existing code bases. You can learn about a new technology stack or framework much faster by reading existing code base that uses those technologies and trying to build an existing app in a step by step manner. Today, I wanted to learn how to build a web analytics service like Google Analytics. Google Analytics is the most widely used web analytics service on the web. I found a popular open source project umami.

Umami is a simple, fast, privacy-focused alternative to Google Analytics.

We will first start by understanding the project from outside in and then we will build the backend of umami in a step by step manner.

Tools Used

  • VS Code
  • Node.js
  • DBeaver for creating ER diagram and as database client – Link
  • Httpie
  • Git
  • MySQL

Project Details

  • Github Repo – https://github.com/mikecao/umami
  • 11,296 stars
  • 1,580 forks
  • 132 contributors
  • 47 releases on Github. Last 15 days ago
  • 1379 commits
  • The project is 1 year and 10 months old. First commit was made on 17th July 2020
  • Close to 10,000 lines of modern Javascript code(used Tokei). This includes both backend and frontend
  • MIT license

Technology Stack of Umami

  • Node.js 12+. Modern Javascript codebase.
  • Nextjs as backend web framework for REST APIs
  • Prisma as ORM
  • Postgres or MySQL as database
  • Reactjs as frontend framework

Next.js is a framework to build server-rendered React web applications. It takes building React based web applications to the next level. The main reasons you would want to use Next.js are:

  • Zero config but you can easily override defaults
  • Extensible
  • Server-side rendering
  • Build both dynamic and static websites with a single framework
  • Supports all modern browsers
  • Convention over configuration
  • Code splitting
  • SEO Optimized
Continue reading “Architecture of Open source systems #1: Umami: An open source Google Analytics Alternative”

Day 26: TogetherJS–Let’s Code Together

Today for my 30 day challenge, I decided to learn a cool new JavaScript library from Mozilla called TogetherJS. A few months ago, I wrote an online Java editor for the latest version of Java i.e. version 8. Today, we will learn how to add collaborative features to the TryJava 8 application using TogetherJS. Read the full blog here https://www.openshift.com/blogs/day-26-togetherjs-lets-code-together

Day 23: TimelineJS–Build Beautiful Timelines

Today it took me a lot of time to find the right topic that I was comfortable with. I started with brain, then looked at Twitter Server, but finally I zeroed down on TimelineJS. So, today for the 30 day challenge, we will learn how to build a beautiful timeline for this blog series using TimelineJS. Read the full blog here https://www.openshift.com/blogs/day-23-timelinejs-build-beautiful-timelines

Day 19: Ember–The Missing EmberJS Tutorial

So far in this series we have looked at BowerAngularJSGruntJSPhoneGap, and MeteorJS JavaScript technologies. Today for my 30 day challenge, I decided to learn a framework called Ember. In this blog post, we will learn how to build a single page social bookmarking site using Ember. This tutorial will be covered in two posts — first post will cover the client side and persist data to HTML 5 Local Storage and in the second post we will use a RESTful backend deployed on OpenShift. I will write the second post in next few days. Read the full blog here https://www.openshift.com/blogs/day-19-ember-the-missing-emberjs-tutorial

Day 7 : GruntJS LiveReload : Take Productivity To Another Level

On day 5 of my 30 technologies in 30 days challenge I talked about using GruntJS to perform repetitive tasks. Today, we will extend the example covered in that blog with html templates and livereload server. In this blog, we will first cover how we can use an html template with grunt-markdown plugin and then I will cover how we can take productivity to the next level by using grunt-watch plugin. Please read my earlier blog on GruntJS in case you are not familiar with GruntJS. Read the full blog at https://www.openshift.com/blogs/day-7-gruntjs-livereload-take-productivity-to-the-next-level

Day 5 : GruntJS : Let Someone Else Do My Tedious Repetitive Tasks

Today I decided to learn GruntJS. GruntJS is a JavaScript based command line build tool. It can help us automate repetitive tasks. We can think of it as JavaScript alternative to Make or Ant. It can perform tasks like minification, compilation , unit testing, linting, etc. As more and more development moves towards client side, it makes a lot more sense to use tools which can help us become more productive. In this blog, I will show how we can use GruntJS to minify javascript files. Then using GruntJS markdown plugin we will convert a markdown document to HTML5 document. Let’s get started. The full blog series can be tracked on this page.

Why should we care?

The main reason why we should learn GruntJS is that developers by nature are lazy creatures. They make mistakes when doing repetitive tedious manual tasks. Continue reading “Day 5 : GruntJS : Let Someone Else Do My Tedious Repetitive Tasks”

How To Enhance Location Aware Apps with Google’s Directions Service

In my previous blog post, I talked about how we can use HTML 5 GeoLocation capabilities to build location aware applications with JAXRS and MongoDB at the backend. Today, we will extend the LocalJobs application we built in that blog post with Google’s Direction Service. It is recommended that you first read my previous post and then continue with this blog entry. The Directions Web Service allows applications to obtain Driving, Bicycling, and Walking directions through an XML/JSON REST interface. All of the features of the Map API v3 Directions service are supported, including “avoid highways”, “avoid tolls”, and waypoint optimisation.To see the application in action, just go to http://localjobs1-t20.rhcloud.com/. Enter skills such as java , php , mongodb , etc. and press the “Find Jobs” button. The Browser will then ask you to allow the application to use your computer’s location. Click on “allow” and you will see results as shown below:

Read full blog at https://www.openshift.com/blogs/how-to-enhance-location-aware-apps-with-googles-directions-service

Learning JavaScript Programming Language Functions Part 3

Intent of My Blog

Today, i heard the third lecture on javascript functions  by Douglas Crockford. This blog is third in this series. Please refer to first and second post regarding the history and statements in javascript.

Functions in JavaScript

Today i have seen the third lecture of the series.Checkout this lecture

Key points from the presentation are:-
  1. function are first class object
  2. function can be passed, returned and shared just like any other value.
  3. function inherit object and store name value pair.
  4. function are container like objects
  5. functions are equivalent to Lambda
  6. Lambda has enormous expressive power
  7. Unlike most power constructs, lambda is secure
  8. function statement var foo = function foo(){// statements to execute}
  9. In JavaScript, one function can contain other functions.
  10. An inner function has access to the variable and parameter of function that it is contained within.
  11. This is called static scoping or lexical scoping
  12. JavaScript also supports Closure
  13. The scope that an inner function enjoys continues even after the parent function has returned.This is called Closure
  14. Closure are one of the most powerful features of JavaScript
  15. JavaScript is the first lambda language to go mainstream
  16. when a function is called with too many arguments, the extra arguments are ignored
  17. When the function is called with too less arguments, the missing values are set to undefined
  18. Methods can be invoked in four ways
  19. Function Form –> functionObject(argument)
  20. Method Form –> thisObject.methodName(arguments) and thisObject[“methodname”](arguments)
  21. Constructor Form –> new Function(“x”,”y”,”return x*y”)
  22. Apply form –> functionObject.apply(thisObject, arguments)
  23. When a function is invoked, it also gets a special parameter called arguments.
  24. arguments contain all of the arguments from the invocation
  25. It is an array like object (it is not a full array)
  26. arguments.length gives the number of arguments passed.
  27. In JavaScript, you can extend the built-in types(like String, Boolean)
  28. Do not use eval function
  29. Built in wrapper types like String, Boolean, Integer are not useful
  30. Global variables are evil
  31. Implied global are evils too.
  32. Always use functional scope.

These were some of the points from the talk.

Learning Javascript Programming Language Part 2

Intent of my Blog

This blog is a second in the series of my learning javascript programming language. In the first blog i discussed and shared the history of the javascript programming language. For learning javascript, i am following Douglas Crockford videos on YUI theater and book “JavaScript: The Definitive Guide 4th Edition”. In this blog, i will share some of the things that i learned about the language.

Get Started

Today i have seen the second lecture of the series. Checkout this lecture

Key Points from the Presentation are :
  1. The statements in javascript are separated from each other with semicolon. If you place each statement on the separate line, javascript allows you to leave the semicolon.But it is a good idea to put semicolon.
  2. Expression statements are expressions which have a side-effect.
  3. Statements discussed are :- if, switch, while, for, throw, try/catch/finally, function, var, return
  4. If statements is the control statement that allows JavaScript to make decisions,or to execute statements conditionally.
  5. If statement is written like this  if(expression) statement
  6. if the expression is null, undefined, 0,”” or NaN it is converted to false.
  7. Switch statement in JavaScript are different from switch statement in C,C++ or java. In those languages, the case expression must be compile time constant.They must evaluate to integer or other integral types and they must evaluate to same type.
  8. JavaScript switch statement is not nearly as efficient as the switch statement in C, C++, and Java. Since the case expressions in those languages are compile-time constants, they never need to be evaluated at runtime as they are in JavaScript. Furthermore, since the case expressions are integral values in C, C++, and Java, the switch statement can often be implemented using a highly efficient “jump table.”
  9. There is a special version of for loop which exists for objects
    for(var name in object){
    of(object.hasOwnProperty(name)){
    // do something
    }
    }
    
  10. In the var statement, if no initial value is specified for a variable, the value of the variable is undefined
  11. throw statement can throw error or any subclass of error
  12. throw can also be useful to throw a string that contains an error message, or a numeric value that represents some sort of error code.
  13. Do not use with statement because the code that uses with is difficult to optimize.
  14. The try/catch/finally statement is JavaScript’s exception-handling mechanism. The try clause of this statement simply defines the block of code whose exceptions are to be handled. The try block is followed by a catch clause, which is a block of statements that are invoked when an exception occurs anywhere within the try block. The catch clause is followed by a finally block containing cleanup code that is guaranteed to be executed, regardless of what happens in the try block. Both the catch and finally blocks are optional, but a try block must be accompanied by at least one of these blocks.
  15. Every function will have a return statement, sometimes return will return some value and sometime it will be return without any expression.
These were some the important points from the talk. I have not covered functions and objects in this blog. I will share those in future posts.

Learning JavaScript Programming Language Part 1

Intent of my Blog

So finally, i have decided to learn “JavaScript Programming Language”, the world most popular language. In my five years of software development career, i have always tried to run away from learning and working on javascript. But today, i have decided that i will start learning javascript from the beginning. So, in this blog series on javascript i will be sharing my learning on javascript.

Get Started

I googled a bit, to find out the best resources to learn javascript and find out the video series by Douglas Crockford.

So, in today’s post i will be writing down the key points from his lecture.I would recommend that you should listen this presentation.

Key Points from the Presentation:-
  1. JavaScript is completely independent of Java.It has nothing to do with java except the name resemblance. (Please listen to presentation to find out why)
  2. It is not a scripting language but a complete Functional Programming Language
  3. It is the most Popular Programming Language
  4. JavaScript has design errors
  5. All the books on JavaScript in market are bad except JavaScript the Definitive Guide 4th Edition.
  6. The first name of JavaScript was LiveScript which was created by Netscape
  7. LiveScript was the first language to be put into the browser.
  8. NetScape and Sun Microsystems joined hands and renamed LiveScript to JavaScript
  9. NetScape and Sun Microsystems joined hands to beat MicroSoft
  10. Microsoft reverse engineered JavaScript to create a language called JScript
  11. JavaScript is a small but sophisticated language
  12. Key Ideas :-
  • Load and go definition – This means that programs are executed as source code as text
  • Loose Typing
  • Object as generic container
  • Prototypal Inheritance — Which means Objects can inherit objects
  • lambda -Function as first class objects
  • Linkage through global variables

13.  When you use parseInt function always use radix parseInt(“08”,10)
14. JavaScript is case sensitive
15. JavaScript syntactically belongs to C family
16. == and != do type coersion
17. === and !== are faster and more reliable.
18. Bitwise operators are slower because JavaScript does not have Integers to first 64 bit floats are converted to 32 bit integer and then reconverted to 64 bit float.

These were some of the important points from the talk.
I will share my learning on javascript as i move along.