Serverless and Scalable Art Projects Built with Angular and Hosted on Google Cloud

You will be introduced to a very small project I posted and a brief tech stack that was used. I called it “Dear Vincent”, it is a web app for drawing figures using Math! Of course, from the title, it is obvious that I used Angular and TypeScript for the application and I hosted it (for free so far!) on the Google Cloud Platform (GCP) using App Engine.

Short content:

  1. Project details
  2. What is Angular Framework
  3. What is GCP App Engine

Dear Vincent – Project Details

Before we move forward to IT side of Angular and Google Cloud, let’s look briefly at the Dear Vincent example project itself. Why Dear Vincent? No idea :). First, a few screenshots:

Dear Vincent heart screenshot
Dear Vincent flower screenshot

The above figures were created by using custom math equations. The algorithm is simple, there are two axes on the canvas, X and Y of course. And, by using separate equations for each axis, the application will iterate through a set range of values with a specified step. For each calculation, it will draw a dot.

By default, dots on canvas will be connected by lines, but I added an option to see the dots also. Also, the app features different coordinate systems. For example, the flower on the screenshot was created by using the Polar coordinate system and the picture of a heart was drawn with Cartesian coordinates in place.

The project was created in about half a day, or 2 cups of coffee time. And it is live, check it out HERE!

A Quick Introduction to Angular Framework

angular brand image

Angular is an open-source web framework developed by Google in 2016. It uses TypeScript as the main programming language. A few big advantages of using Angular vs plain Javascript + HTML + CSS approach is a very reach library base which speeds up development dramatically, incredible tooling, and a very modular approach to code organization and development in general.

Let’s look at the main features:

  • Angular has it’s own command-line interface
    • Used to create/debug/build/test/extend/etc Angular applications
  • Angular framework uses components.
    • By default, CLI tool will generate a component TypeScript class, template (HTML), style (CSS) and a unit test file.
  • Components can represent a little part of the web page or an entire web page.
    • One component can contain other components.
  • Angular uses modules to organize components together into meaningful sets.
    • Modules can be lazy-loaded which is used to increase the loading speed of big web apps.
  • Angular app compiled into obfuscated JavaScript code for the most part.

Is it easy to use? Yes!

  1. Install Node.js with npm package manager on the local environment
  2. Install Angular CLI by running:
npm install -g @angular/cli

3. Generate angular project by running:

ng new my-art-app

4. Add your creative (or very serious) app content in form of HTML, CSS, TypeScript.
(getting started codding and in depth tutorials available here)

5. Debug application with hot reload (apply changes without restarting):

ng serve -o

6. Build production version of the app ready to be deployed:

ng build --prod

Few words about Google Cloud and its App Engine

App Engine is a masterpiece of automation, deploying apps to App Engine is candy. So, in a very simple scenario, the deployment will require a project created on the GCP, a single tiny config file, and one single command using GCP command-line tools.

Btw, the sweat deployment command: 

gcloud app deploy

Let’s look what App Engine provides for our little art project:

  1. App Engine is a scalable, serverless platform – means all the underlying infrastructure managed by Google, and users manage only what’s deployed, includIng scalabilIty!
  2. App Engine supports many modern coding languages.
    For other languages, users can deploy docker containers with any custom environment
  3. Each version of the user app is saved, and traffic can be split between different versions.
  4. Pay only for resources used – technically price will be $0, because of free quota available for each resource. If you’ve got some traffic and exceded free quota, then price will raise depend on instance type and their number.
  5. My favourite, App Engine is super easy to use, just check any getting started guide online!

Epilogue

Once again, the app available HERE
If you are interested in source code, I keep it HERE

Please, feel free to ask me anything in the comments, cheers!