Forem: Jorge Ramón

The problem with array cloning in Javascript (and how to solve it)

Jorge Ramón — Tue, 23 Jun 2020 06:34:12 +0000

Suppose you have to write a function in Javascript that given an array as parameter, it returns a copy. For example:

function copy(array) {
  // magic code...
}

const array = [1,2,3];
const newArray = copy(array);
console.log(newArray); // [1,2,3]

This function can be very useful because you can modify the new array without modifying the old one:

newArray.push(4);
newArray[0] = 0;

console.log(array); // [1,2,3]
console.log(newArray); // [0,2,3,4]

Very easy, right? I'm pretty sure you already got one or two solutions in mind while reading this, I have 3 solutions to share with you, let's check them out.

1. Using a for/while loop

The simplest way is create a new empty array and use a loop to push each element from the old array to the new one:

function copyWithLoop(array) {
  const newArray = [];

  for (let item of array) {
    newArray.push(item);
  }

  return newArray;
}

const array = [1,2,3];
const newArray = copyWithLoop(array);
console.log(newArray); // [1,2,3];

2. Using `Array.prototype.slice` method

According to MDN web docs:

The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified.

OMG 😱 It's exactly what we are looking for. Let's give it a try:

function copyWithSlice(array) {
  return array.slice();
}

const array = [1,2,3];
const newArray = copyWithSlice(array);
console.log(newArray); // [1,2,3];

3. Using `Object.assign` method

According to MDN web docs:

The Object.assign() method copies all enumerable own properties from one or more source objects to a target object. It returns the target object.

So, if it works with Object, it should work with Array too, right?...

function copyWithAssign(array) {
  return Object.assign([], array);
}

const array = [1,2,3];
const newArray = copyWithAssign(array);
console.log(newArray); // [1,2,3];

And yep, it works too 😱😱! How can we do it better?

3. Use ES2015 Spread Operator

Spread Operator was introduced in ES2015 and it allows any iterable element (such as an array or object) to be "expanded" in places where zero or more arguments are expected.

function copyWithSpread(array) {
  return [...array];
}

const array = [1,2,3];
const newArray = copyWithSpread(array);
console.log(newArray); // [1,2,3];

And guess what? It works 🎉✨!

All solutions look good but just to be sure, let's write some tests using Jest:

import {
  copyWithLoop,
  copyWithSlice,
  copyWithAssign,
  copyWithSpread
} from "./lib";

describe("copyWithLoop", function() {
  test("Testing an empty array", function() {
    const array = [];
    const newArray = copyWithLoop(array);

    newArray.push(0);

    expect(newArray).not.toEqual(array);
  });

  test("Testing a populated array", function() {
    const array = [1, 2, 3];
    const newArray = copyWithLoop(array);

    newArray.push(0);
    newArray[0] = -1;

    expect(newArray).not.toEqual(array);
  });
});

describe("copyWithSlice", function() {
  test("Testing an empty array", function() {
    const array = [];
    const newArray = copyWithSlice(array);

    newArray.push(0);

    expect(newArray).not.toEqual(array);
  });

  test("Testing a populated array", function() {
    const array = [1, 2, 3];
    const newArray = copyWithSlice(array);

    newArray.push(0);
    newArray[0] = -1;

    expect(newArray).not.toEqual(array);
  });
});

describe("copyWithAssign", function() {
  test("Testing an empty array", function() {
    const array = [];
    const newArray = copyWithAssign(array);

    newArray.push(0);

    expect(newArray).not.toEqual(array);
  });

  test("Testing a populated array", function() {
    const array = [1, 2, 3];
    const newArray = copyWithAssign(array);

    newArray.push(0);
    newArray[0] = -1;

    expect(newArray).not.toEqual(array);
  });
});

describe("copyWithSpread", function() {
  test("Testing an empty array", function() {
    const array = [];
    const newArray = copyWithSpread(array);

    newArray.push(0);

    expect(newArray).not.toEqual(array);
  });

  test("Testing a populated array", function() {
    const array = [1, 2, 3];
    const newArray = copyWithSpread(array);

    newArray.push(0);
    newArray[0] = -1;

    expect(newArray).not.toEqual(array);
  });
});

And the result is...

All tests passed 😁... but wait! I didn't test Objects but meh, it should be the same 🙄.

import {
  copyWithLoop,
  copyWithSlice,
  copyWithAssign,
  copyWithSpread
} from "./lib";

describe("copyWithLoop", function() {
  // Testing an empty array still passes :)

  test("Testing a populated array", function() {
    const array = [{ a: 0 }, { b: 1 }, { c: 2 }];
    const newArray = copyWithLoop(array);

    newArray[0].a = -1;

    expect(newArray).not.toEqual(array);
  });
});

describe("copyWithSlice", function() {
  // Testing an empty array still passes :)

  test("Testing a populated array", function() {
    const array = [{ a: 0 }, { b: 1 }, { c: 2 }];
    const newArray = copyWithSlice(array);

    newArray[0].a = -1;

    expect(newArray).not.toEqual(array);
  });
});

describe("copyWithAssign", function() {
  // Testing an empty array still passes :)

  test("Testing a populated array", function() {
    const array = [{ a: 0 }, { b: 1 }, { c: 2 }];
    const newArray = copyWithAssign(array);

    newArray[0].a = -1;

    expect(newArray).not.toEqual(array);
  });
});

describe("copyWithSpread", function() {
  // Testing an empty array still passes :)

  test("Testing a populated array", function() {
    const array = [{ a: 0 }, { b: 1 }, { c: 2 }];
    const newArray = copyWithSpread(array);

    newArray[0].a = -1;

    expect(newArray).not.toEqual(array);
  });
});

And the obvious result is 🙄...

What?! How?! 🤯

Well, the solutions really created a whole new Array (that's why empty array tests pass) but both arrays share the same object references 🤯:

After some research I found out the solution and is... convert the array to a string and convert it back to an array.

Yep, you read it right, this is by far the best solution at the moment. Let's see if it really works!

4. Using `JSON.parse + JSON.stringify` methods

function copy(array) {
  return JSON.parse(JSON.stringify(array));
}

And now let's write some tests:

import { copy } from "./lib";

describe("copy", function() {
  test("Testing an empty array", function() {
    const array = [];
    const newArray = copy(array);

    newArray.push({});

    expect(newArray).not.toEqual(array);
  });

  test("Testing a populated array", function() {
    const array = [{ a: 0 }, { b: 1 }, { c: 2 }];
    const newArray = copy(array);

    newArray[0].a = -1;
    newArray.push({ d: 3 });

    expect(newArray).not.toEqual(array);
  });
});

And the result is ...

All tests passed 🎉🎉✨✨!

This function can be used to copy objects too, BTW.

And there you have it 😎, it's funny how a very simple problem can be very tricky to solve.

That's all for now, folks! Hope you learn something new today and see you in the next post.

Learning Programming Languages with Code Challenges

Jorge Ramón — Mon, 02 Dec 2019 04:41:06 +0000

I don't know about you but sometimes I get bored by using the same tools over and over again.

So to have fun I wanted to learn a new programming language but as you may think I don't have the time to do so, maybe buying an Udemy course or watch some videos on YouTube are good idea but still... I wanted to do more than just writing Hello World.

But there was a bigger problem... which programming language should I be learning? I had the following options in mind:

Golang, is a fast, statically typed, compiled language that feels like a dynamically typed, interpreted language.
Rust, is a modern systems-level programming language designed with safety in mind. It provides zero-cost abstractions, generics, functional features, and plenty more.
Crystal, is a programming language with the following goals:
- Have a syntax similar to Ruby (but compatibility with it is not a goal).
- Be statically type-checked, but having to specify the type of variables or method arguments.
- Be able to call C code by writing bindings to it in Crystal.
- Have compile-time evaluation and generation of code, to avoid boilerplate code.
- Compile to efficient native code.
Kotlin, is a general purpose, open source, statically typed “pragmatic” programming language for the JVM and Android that combines object-oriented and functional programming features.
Elixir, is a dynamic, functional language designed for building scalable and maintainable applications.

Hard decision, isn't it? but then I got an idea 💡... What about learning all those programming languages at once?

This is an experiment to see if it's possible to learn many programming languages at once by solving the same code challenge.

The rules

Before go on, we need some rules in order to do the experiment the best as possible:

Pick a non-trivial challenge.
Write a pseudocode solution following Cal Poly pseudocode standard.
Write the code for each programming language.
Write unit tests for each programming language.
Explain what I learned.

If you know a better solution or code improvement of any programming language feel free to leave a comment and it will be mentioned in the next post. It's about continual improvement 🤓.

Code Challenge
Pseudocode Solution
Golang implementation
Rust implementation
Crystal implementation
Kotlin implementation
Elixir implementation
Conclusion

Code Challenge: FizzBuzz

Let's start easy, FizzBuzz is a small game that interviewers use to determine whether the job candidate can actually write code. Here is the description:

Write a program that prints the numbers from 1 to 100. But for multiples of three print "Fizz" instead of the number and for the multiples of five print "Buzz". For numbers which are multiples of both three and five print "FizzBuzz".

Pseudocode Solution

FOR each number "i" from 1 to 100
  IF i is divisible by 3 AND is divisible by 5 THEN
    PRINT "FizzBuzz"
  ELSE IF i is divisible by 3 THEN
    PRINT "Fizz"
  ELSE IF i is divisible by 5 THEN
    PRINT "Buzz"
  ELSE
    PRINT i
  ENDIF
ENDFOR

Golang Implementation

Solution: `fizzbuzz/fizzbuzz.go`

package fizzbuzz

func FizzBuzz(number int) (string, bool) {
    if number%3 == 0 && number%5 == 0 {
        return "FizzBuzz", true
    } else if number%3 == 0 {
        return "Fizz", true
    } else if number%5 == 0 {
        return "Buzz", true
    } else {
        return "", false
    }
}

What I've learned

package keyword must be the first line in every Go program.
In this case the package name is fizzbuzz (same as directory name) because this is an utility package (i.e. it's not standalone executable).
To export the fizzbuzz function, its name must start with uppercase letter. Lowercased function names are private functions (i.e. can be only used in the same file).
A function must start with func keyword.
Like using Java or Javascript I wanted to return nil (null) if the given number is not divisible by 3 or 5 but that was a big mistake because the compiler throws the following error: cannot use nil as type string in return argument. So, since functions can return more than one value then fizzbuzz function returns two values; the first one (string) is the result text (Fizz, Buzz or FizzBuzz) and the second one (boolean) means if the operation was done successfully.
% (modulus) operator is used to check if the given number is divisible by 3 or 5.
if statements has no parenthesis.

Unit Tests: `fizzbuzz/fizzbuzz_test.go`

package fizzbuzz

import "testing"

func TestFizzCases(t *testing.T) {
    cases := [10]int{3, 6, 9, 12, 18, 21, 24, 27, 33, 36}

    for _, n := range cases {
        result, _ := FizzBuzz(n)
        if result != "Fizz" {
            t.Errorf("Error, %v should be 'Fizz'", n)
        }
    }
}

func TestBuzzCases(t *testing.T) {
    cases := [10]int{5, 10, 20, 25, 35, 40, 50, 55, 70, 80}

    for _, n := range cases {
        result, _ := FizzBuzz(n)
        if result != "Buzz" {
            t.Errorf("Error, %v should be 'Buzz'", n)
        }
    }
}

func TestFizzBuzzCases(t *testing.T) {
    cases := [10]int{15, 30, 45, 60, 75, 90, 105, 120, 135, 150}

    for _, n := range cases {
        result, _ := FizzBuzz(n)
        if result != "FizzBuzz" {
            t.Errorf("Error, %v should be 'FizzBuzz'", n)
        }
    }
}

What I've learned

testing is the built-int package to do tests (lol).
Every test function name must start with Test keyword and latter name should start with uppercase letter (for example, TestMultiply and not Testmultiply)
:= is a short variable declaration (for example, i := 0 is the same as var i int = 0).
[N] T { v1, v2, ..., vN } is the way to declare an Array with fixed size N of type T with v1, v2, ..., vN as values.
Every test function has the same parameter.
There is no assert function or something like that, if the test fails it must use the t.Errorf function with a message.
range is the way to iterate over an Array or Slice (dynamic sized array), the first return value is the index and the second one is the value itself.
When a function returns more than one value, you can't ignore any of them (for example, result := FizzBuzz(n) is wrong because it returns two values).

Rust Implementation

Solution: `fizzbuzz/src/lib.rs`

pub fn fizzbuzz(number: i32) -> Option<&'static str> {
    if number%3 == 0 && number%5 == 0 {
        return Some("FizzBuzz");
    } else if number%3 == 0 {
        return Some("Fizz");
    } else if number%5 == 0 {
        return Some("Buzz");
    } else {
        return None;
    }
}

What I've learned

To create a new project just run cargo new [project-name] --lib(lib flag because it's not a standalone executable) and it will create the basic folder structure and the lib.rs file.
pub keyword is the way to export anything.
fn keyword is for functions.
There is no null value in Rust, so the best way to do the same is using the Option type. To give a value it must be Some(value), to give a "null" value it must be None.
if statements has no parenthesis
The type of a simple string needs the 'static lifetime (I don't know what does that mean... yet).

Unit Tests: `fizzbuzz/src/lib.rs`

#[cfg(test)]
mod tests {
    use super::*;

    #[test]
    fn fizz_cases() {
        let cases: [i32; 10] = [3, 6, 9, 12, 18, 21, 24, 27, 33, 36];

        for number in cases.iter() {
            let result: Option<&'static str> = fizzbuzz(*number);

            if let Some(text) = result {
                assert_eq!(text, "Fizz");
            } else {
                assert!(false);
            }
        }
    }

    #[test]
    fn buzz_cases() {
        let cases: [i32; 10] = [5, 10, 20, 25, 35, 40, 50, 55, 70, 80];

        for number in cases.iter() {
            let result: Option<&'static str> = fizzbuzz(*number);

            if let Some(text) = result {
                assert_eq!(text, "Buzz");
            } else {
                assert!(false);
            }
        }
    }

    #[test]
    fn fizzbuzz_cases() {
        let cases: [i32; 10] = [15, 30, 45, 60, 75, 90, 105, 120, 135, 150];

        for number in cases.iter() {
            let result: Option<&'static str> = fizzbuzz(*number);

            if let Some(text) = result {
                assert_eq!(text, "FizzBuzz");
            } else {
                assert!(false);
            }
        }
    }
}

What I've learned

#[whatever] is an attribute, useful to add metadata to a module, crate or item. In this case the module is using cfg attribute to add metadata to the compiler.
#[test] attribute is used to mark functions as unit tests.
mod whatever { ... } is the way to create a module. By default is private (unless pub keyword is added).
let keyword is used to create a variable (immutable by default).
[T;N] = [v1, v2, ..., vN] is the way to create an Array with fixed size N of type T with v1, v2, ..., vN as values.
for in iterates over an Iterator, so array.iter() returns an Iterator.
Maybe you are wondering why by calling fizzbuzz function I need to use *number and not number, well that's because array.iter() returns an Iterator with references (so, number variable type is &i32 and not i32).

Crystal Implementation

Solution: `fizzbuzz/fizzbuzz.cr`

module FizzBuzz
    def fizzbuzz(number)
        if number%3 == 0 && number%5 == 0
            return "FizzBuzz"
        elsif number%3 == 0
            return "Fizz"
        elsif number%5 == 0
            return "Buzz"
        else
            return nil
        end
    end
end

What I've learned

Syntax is very similar to Python and Ruby.
A module is a way to group functions and classes. It's more like a namespace.
def keyword is the way to create methods or functions.
nil is the null type.

Unit Tests: `fizzbuzz/spec/fizzbuzz_spec.cr`

require "spec"
require "../fizzbuzz"

include FizzBuzz

describe "FizzBuzz" do 
    it "should be 'Fizz' for multiples of 3" do
        [3, 6, 9, 12, 18, 21, 24, 27, 33, 36].each do |number|
            result = fizzbuzz(number)
            result.should eq("Fizz")
        end
    end

    it "should be 'Buzz' for multiples of 5" do
        [5, 10, 20, 25, 35, 40, 50, 55, 70, 80].each do |number|
            result = fizzbuzz(number)
            result.should eq("Buzz")
        end
    end

    it "should be 'FizzBuzz' for multiples of 3 and 5" do
        [15, 30, 45, 60, 75, 90, 105, 120, 135, 150].each do |number|
            result = fizzbuzz(number)
            result.should eq("FizzBuzz")
        end
    end
end

What I've learned

Import a package (spec in this case) or file (fizzbuzz solution) is very similar to Node.js.
include is very similar to Java's static import, I would have had to write every fizzbuzz call like Fizzbuzz::fizzbuzz without it.
Test look very similar to Mocha Framework in Javascript.

Kotlin Solution

Configuration: `fizzbuzz/gradle.build`

plugins {
    id 'org.jetbrains.kotlin.jvm' version '1.3.31'
}

repositories {
    mavenCentral()
}

dependencies {
    implementation('org.jetbrains.kotlin:kotlin-stdlib:1.3.31')
    testImplementation('org.junit.jupiter:junit-jupiter-api:5.4.2')
    testRuntime('org.junit.jupiter:junit-jupiter-engine:5.4.2')
}

test {
    useJUnitPlatform()
}

What I've learned

Gradle configuration is just like any Java project, meh.
I tried to use built-in Test suite but I couldn't find out how, so I ended up using JUnit 5.

Solution: `fizzbuzz/src/main/kotlin/FizzBuzz.kt`

fun fizzbuzz(number: Int): String? {
    if (number%3 == 0 && number%5 == 0) {
        return "FizzBuzz"
    } else if (number%3 == 0) {
        return "Fizz"
    } else if (number%5 == 0) {
        return "Buzz"
    } else {
        return null
    }
}

What I've learned

I didn't need to create a class and I really liked that, just like any scripting programming language.
func keyword is the way to create a method/function.
Primitive types use uppercased letters.
String? return type is declared because it can be null.

Unit tests: `fizzbuzz/src/test/kotlin/FizzBuzzTest.kt`

import org.junit.jupiter.api.Assertions.assertEquals
import org.junit.jupiter.api.DisplayName
import org.junit.jupiter.api.Test

class FizzBuzzTest {

    @Test
    @DisplayName("It should be 'Fizz' for multiples of 3")
    fun shouldBeFizzForMultiplesOfThree() {
        val cases: IntArray = intArrayOf(3, 6, 9, 12, 18, 21, 24, 27, 33, 36)
        cases.iterator().forEach {
            assertEquals(fizzbuzz(it), "Fizz")
        }
    }

    @Test
    @DisplayName("It should be 'Buzz' for multiples of 5")
    fun shouldBeBuzzForMultiplesOfFive() {
        val cases: IntArray = intArrayOf(5, 10, 20, 25, 35, 40, 50, 55, 70, 80)
        cases.iterator().forEach {
            assertEquals(fizzbuzz(it), "Buzz")
        }
    }

    @Test
    @DisplayName("It should be 'FizzBuzz' for multiples of 3 and 5")
    fun shouldBeFizzBuzzForMultiplesOfThreeAndFive() {
        val cases: IntArray = intArrayOf(15, 30, 45, 60, 75, 90, 105, 120, 135, 150)
        cases.iterator().forEach {
            assertEquals(fizzbuzz(it), "FizzBuzz")
        }
    }
}

What I've learned

intArrayOf is the way to create an Array of Integers and the type is IntArray.
val is for readonly variables.
There is no way to iterate over the array itself, it's only through an Iterator.
forEach method receives a function and if there isn't an explicit parameter in the function definition then it will be named it by default.

Elixir Solution

Solution: `fizzbuzz/lib/fizzbuzz.ex`

defmodule Fizzbuzz do

  def fizzbuzz(number) do
    cond do
      rem(number, 3) == 0 && rem(number, 5) == 0 -> "FizzBuzz"
      rem(number, 3) == 0 -> "Fizz"
      rem(number, 5) == 0 -> "Buzz"
      true -> nil
    end
  end
end

What I've learned

defmodule is the way to create a module (a group of functions, think about a class in OOP).
Functions and variables are created with def keyword.
cond is like a switch statement but with boolean conditions.
Elixir is a functional programming language, so everything is a function.
nil is the null type.
rem is the way to calculate modulus.

defmodule FizzbuzzTest do
  use ExUnit.Case
  doctest Fizzbuzz

  test "should be 'Fizz' for multiples of 3" do
    Enum.each([3, 6, 9, 12, 18, 21, 24, 27, 33, 36], fn x -> 
      assert(Fizzbuzz.fizzbuzz(x) == "Fizz") 
    end)
  end

  test "should be 'Buzz' for multiples of 5" do
    Enum.each([5, 10, 20, 25, 35, 40, 50, 55, 70, 80], fn x -> 
      assert(Fizzbuzz.fizzbuzz(x) == "Buzz") 
    end)
  end

  test "should be 'FizzBuzz' for multiples of 3 and 5" do
    Enum.each([15, 30, 45, 60, 75, 90, 105, 120, 135, 150], fn x -> 
      assert(Fizzbuzz.fizzbuzz(x) == "FizzBuzz") 
    end)
  end
end

What I've learned

fn is an anonymous function (like a lambda).
Enum module is useful to work with Collections.

Conclusion

Golang, Rust were the hardest ones, but I can't wait to learn more about them.
Kotlin is much like Java and was the only programming language that needed an external build system to run the code.

Thank you so much for reading, Did you like the experiment? 🤓.

Here is the Github repository:

jorgeramon / learning-languages

Repository of "Learning Programming Languages with Code Challenges" post series.

Learning Programming Languages with Code Challenges

Programming Languages

Challenges

Fizz Buzz

Write a program that prints the numbers from 1 to 100. But for multiples of three print "Fizz" instead of the number and for the multiples of five print "Buzz". For numbers which are multiples of both three and five print "FizzBuzz".

View on GitHub

Everything you need to know about Node.js

Jorge Ramón — Fri, 05 Jul 2019 01:06:37 +0000

Node.js is one of the most popular technologies nowadays to build scalable and efficent REST API's. It is also used to build hybrid mobile applications, desktop applications and even Internet of Things.

I have been working with Node.js for about 6 years and I really love it. This posts tries to be an ultime guide to understand how Node.js works.

Let's get started!!

The World Before Node.js
The C10K Problem
Node.js and the Event Loop
The Problem with CPU Intensive tasks
Worker Threads

The World Before Node.js

Multi Threaded Server

Web applications were written in a client/server model where the client would demand resources from the server and the server would respond with the resources. The server only responded when the client requested and would close the connection after each response.

This pattern is efficient because every request to the server takes time and resources (memory, CPU, etc). To attend the next request the server must complete the previous one.

So, the server attends one request at time? Well not exactly, when the server gets a new request, the request will be processed by a thread.

A thread in simple words is time and resources the CPU gives to execute a small unit of instructions. With that said, the server attends multiple requests at once, one per thread (also called thread-per-request model).

To attend N requests at once, the server needs N threads. If the server gets the N+1 request, then it must wait until any of those N threads is available.

In the Multi Threaded Server example, the server allows up to 4 requests (threads) at once and when it receives the next 3 requests, those requests must wait until any of those 4 threads is available.

A way to solve this limitation is add more resources (memory, CPU cores, etc) to the server but maybe it's not a good idea at all...

And of course, there will be technological limitations.

Blocking I/O

The number of threads in a server isn't the only problem here. Maybe you are wondering why a single thread can't attend 2 or more request at once? That's because blocking Input/Output operations.

Suppose you are developing an online store and it needs a page where the user can view all your products.

The user access to http://yourstore.com/products and the server renders an HTML file with all your products from database. Pretty simple right?

But, what happens behind?...

When the user access to /products a specific method or function needs to be executed to attend the request, so a little piece of code (maybe yours or framework's) parses the requested url and searches for the right method or function. The thread is working. ✔️
The method or function is executed, as well as the first lines. The thread is working. ✔️
Because you are a good developer, you save all system logs in a file and of course, to be sure the route is executing the right method/function you log a "Method X executing!!" string, that's a blocking I/O operation. The thread is waiting. ❌
The log is saved and the next lines are being executed. The thread is working again. ✔️
It's time to go to the database and get all products, a simple query such as SELECT * FROM products does the job but guess what? that's a blocking I/O operation. The thread is waiting. ❌
You get an array or list of all products but to be sure you log them. The thread is waiting. ❌
With those products it's time to render a template but before render it you need to read it first. The thread is waiting. ❌
The template engine does it's job and the response is sent to the client. The thread is working again. ✔️
The thread is free, like a bird. 🕊️

How slow are I/O operations? Well, it depends.
Let's check the table below:

Operation	Number of CPU ticks
CPU Registers	3 ticks
L1 Cache	8 ticks
L2 Cache	12 ticks
RAM	150 ticks
Disk	30,000,000 ticks
Network	250,000,000 ticks

Disk and Network operations are too slow. How many queries or external API calls does your system make?

In resume, I/O operations make threads wait and waste resources.

The C10K Problem

The Problem

In the early 2000s, servers and client machines were slow. The problem was about concurrently handling 10,000 clients connections on a single server machine.

But why our traditional thread-per-request model can't solve the problem? Well, let's do some math.

The native thread implementations allocate about 1 MB of memory per thread, so 10k threads require 10GB of RAM just for the thread stack and remember we are in the early 2000s!!

Nowadays servers and client machines are better than that and almost any programming language and/or framework solves the problem. Actually, the problem has been updated to handle 10 million clients connections on a single server machine (also called C10M Problem).

Javascript to the rescue?

Spoiler alert 🚨🚨🚨!!
Node.js solves the C10K problem... but why?!

Javascript server-side wasn't new in the early 2000s, there were a few implementations ontop of the Java Virtual Machine like RingoJS and AppEngineJS, based on thread-per-request model.

But if that didn't solve the C10K problem then why Node.js did?! Well, it's because Javascript is single threaded.

Node.js and the Event Loop

Node.js

Node.js is a server-side platform built on Google Chrome's Javascript Engine (V8 Engine) which compiles Javascript code into Machine code.

Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. It's not a Framework, it's not a Library, it's a runtime environment.

Let's write a quick example:



// Importing native http module
const http = require('http');

// Creating a server instance where every call
// the message 'Hello World' is responded to the client
const server = http.createServer(function(request, response) {
  response.write('Hello World');
  response.end();
});

// Listening port 8080
server.listen(8080);

Non-blocking I/O

Node.js is non-blocking I/O, which means:

The main thread won't be blocked in I/O operations.
The server will keep attending requests.
We will be working with asynchronous code.

Let's write an example, in every /home request the server sends a HTML page, otherwise the server sends 'Hello World' text. To send the HTML page is necessary to read the file first.

home.html



<html>
  <body>
    <h1>This is home page</h1>
  </body>
</html>

index.js



const http = require('http');
const fs = require('fs');

const server = http.createServer(function(request, response) {
  if (request.url === '/home') {
    fs.readFile(`${ __dirname }/home.html`, function (err, content) {
      if (!err) {
        response.setHeader('Content-Type', 'text/html');
        response.write(content);
      } else {
        response.statusCode = 500;
        response.write('An error has ocurred');
      }

      response.end();
    });
  } else {
    response.write('Hello World');
    response.end();
  }
});

server.listen(8080);

If the requested url is /home then using fs native module we read the home.html file.

The functions passed to http.createServer and fs.readFile are called callbacks. Those functions will execute sometime in the future (the first one when the server gets a request and the second one when the file has been read and the content is buffered).

While reading the file Node.js can still attend requests, even to read the file again, all at once in a single thread... but how?!

The Event Loop

The Event Loop is the magic behind Node.js. In short terms, the Event Loop is literally an infinite loop and is the only thread available.

Libuv is a C library which implements this pattern and it's part of the Node.js core modules. You can read more about libuv here.

The Event Loop has six phases, the execution of all phases is called a tick.

timers: this phase executes callbacks scheduled by setTimeout() and setInterval().
pending callbacks: executes almost all callbacks with the exception of close callbacks, the ones scheduled by timers, and setImmediate().
idle, prepare: only used internally.
poll: retrieve new I/O events; node will block here when appropriate.
check: setImmediate() callbacks are invoked here.close callbacks: such as socket.on(‘close’).

Okay, so there is only one thread and that thread is the Event Loop, but then who executes the I/O operations?

Pay attention 📢📢📢!!!
When the Event Loop needs to execute an I/O operation it uses an OS thread from a pool (through libuv library) and when the job is done, the callback is queued to be executed in pending callbacks phase.

Isn't that awesome?

The Problem with CPU Intensive Tasks

Node.js seems to be perfect, you can build whatever you want.

Let's build an API to calculate prime numbers.

A prime number is a whole number greater than 1 whose only factors are 1 and itself.

Given a number N, the API must calculate and return the first N prime numbers in a list (or array).

primes.js



function isPrime(n) {
  for(let i = 2, s = Math.sqrt(n); i <= s; i++)
    if(n % i === 0) return false;
  return n > 1;
}

function nthPrime(n) {
  let counter = n;
  let iterator = 2;
  let result = [];

  while(counter > 0) {
    isPrime(iterator) && result.push(iterator) && counter--;
    iterator++;
  }

  return result;
}

module.exports = { isPrime, nthPrime };

index.js



const http = require('http');
const url = require('url');
const primes = require('./primes');

const server = http.createServer(function (request, response) {
  const { pathname, query } = url.parse(request.url, true);

  if (pathname === '/primes') {
    const result = primes.nthPrime(query.n || 0);
    response.setHeader('Content-Type', 'application/json');
    response.write(JSON.stringify(result));
    response.end();
  } else {
    response.statusCode = 404;
    response.write('Not Found');
    response.end();
  }
});

server.listen(8080);

prime.js is the prime numbers implementation, isPrime checks if given a number N, that number is prime and nthPrime gets the nth prime (of course).

index.js creates a server and uses the library in every call to /primes. The N number is passed through query string.

To get the first 20 prime numbers we make a request to http://localhost:8080/primes?n=20.

Suppose there are 3 clients trying to access this amazing non-blocking API:

The first one requests every second the first 5 prime numbers.
The second one requests every second the first 1,000 prime numbers.
The third one requests once the first 10,000,000,000 prime numbers, but...

When the third client sends the request the main thread gets blocked and that's because the prime numbers library is CPU intensive. The main thread is busy executing the intensive code and won't be able to do anything else.

But what about libuv? If you remember this library helped Node.js to do I/O operations with OS threads to avoid blocking the main thread and you are right, that's the solution to our problem but to use libuv our library must be written in C++ language.

Thanksfully Node.js v10.5 introduced the Worker Threads.

Worker Threads

As the documentation says:

Workers are useful for performing CPU-intensive JavaScript operations; do not use them for I/O, since Node.js’s built-in mechanisms for performing operations asynchronously already treat it more efficiently than Worker threads can.

Fixing the code

It's time to fix our initial code:

primes-workerthreads.js



const { workerData, parentPort } = require('worker_threads');

function isPrime(n) {
  for(let i = 2, s = Math.sqrt(n); i <= s; i++)
    if(n % i === 0) return false;
  return n > 1;
}

function nthPrime(n) {
  let counter = n;
  let iterator = 2;
  let result = [];

  while(counter > 0) {
    isPrime(iterator) && result.push(iterator) && counter--;
    iterator++;
  }

  return result;
}

parentPort.postMessage(nthPrime(workerData.n));

index-workerthreads.js



const http = require('http');
const url = require('url');
const { Worker } = require('worker_threads');

const server = http.createServer(function (request, response) {                                                                                              
  const { pathname, query } = url.parse(request.url, true);

  if (pathname === '/primes') {                                                                                                                                    
    const worker = new Worker('./primes-workerthreads.js', { workerData: { n: query.n || 0 } });

    worker.on('error', function () {
      response.statusCode = 500;
      response.write('Oops there was an error...');
      response.end();
    });

    let result;
    worker.on('message', function (message) {
      result = message;
    });

    worker.on('exit', function () {
      response.setHeader('Content-Type', 'application/json');
      response.write(JSON.stringify(result));
      response.end();
    });
  } else {
    response.statusCode = 404;
    response.write('Not Found');
    response.end();
  }
});

server.listen(8080);

index-workerthreads.js in every call creates a new instance of Worker class (from worker_threads native module) to load and execute the primes-workerthreads.js file in a worker thread. When the prime numbers' list is calculated the message event is fired, sending the result to the main thread and because the job is done the exit event is also fired, letting the main thread send the data to the client.

primes-workerthreads.js changes a little bit. It imports workerData (parameters passed from main thread) and parentPort which is the way we send messages to the main thread.

Now let's do the 3 clients example again to see what happens:

The main thread doesn't block anymore 🎉🎉🎉🎉🎉!!!!!

It worked like expected but spawning worker threads like that isn't the best practice, it isn't cheap to create a new thread. Be sure to create a pool of threads before.

Conclusion

Node.js is a powerful technology, worth to learn.
My recommendation is always be curious, if you know how things work, you will make better decisions.

That's all for now, folks. I hope you learned something new about Node.js.
Thanks for reading and see you in the next post ❤️.

AlaSQL: A Real Database for Web Browsers (and Node.js)

Jorge Ramón — Wed, 30 Jan 2019 16:08:40 +0000

"Wait, what?!"

Yes, that was my reaction too when I read it on Twitter.

In this post I will explain you what is AlaSQL and test if it works as expected.

What is AlaQSL?

AlaSQL is a lightweight client-side in-memory SQL database. It was written in pure Javascript, supports JOIN, GROUP, UNION, IN, ALL and many more operations.

Is it fast? Of course it is! It takes advantage of the dynamic nature of Javascript and
uses optimization methods. According to the author:

Queries are cached as compiled functions.
Joined tables are pre-indexed.
WHERE expressions are pre-filtered for joins

Does it work in most of Web Browsers? Sure! It works in all modern versions of Chrome, Mozilla, Safari and even IE. You can use it on Node.js too.

Does it support NoSQL databases? Yes!! You can create JSON tables and work with JSON objects.

You can get more information in AlaSQL github repository:

AlaSQL / alasql

AlaSQL.js - JavaScript SQL database for browser and Node.js. Handles both traditional relational tables and nested JSON data (NoSQL). Export, store, and import data from localStorage, IndexedDB, or Excel.

AlaSQL is an unfunded open source project installed 200k+ times each month. Please donate your time. We appreciate any and all contributions we can get.
Have a question? Ask the AlaSQL bot or post on Stack Overflow.

AlaSQL

AlaSQL - ( à la SQL ) [ælæ ɛskju:ɛl] - is an open source SQL database for JavaScript with a strong focus on query speed and data source flexibility for both relational data and schemaless data. It works in the web browser, Node.js, and mobile apps.

This library is perfect for:

Fast in-memory SQL data processing for BI and ERP applications on fat clients
Easy ETL and options for persistence by data import / manipulation / export of several formats
All major browsers, Node.js, and mobile applications

We focus on speed by taking advantage of the dynamic nature of JavaScript when building up queries. Real-world solutions demand flexibility regarding where…

View on GitHub

Installation

Using NPM:
npm install --save alasql

Using CDN:



<script src="https://cdn.jsdelivr.net/npm/alasql@0.4"></script>

And that's all. Very simple, huh?

Usage

First, import alasql into your code:



// CommonJS style
var alasql = require('alasql');

// ES6 style
import * as alasql from 'alasql';

// Global variable style
window.alasql

And then, start writing SQL:



alasql("CREATE TABLE test (language INT, hello STRING)");
alasql("INSERT INTO test VALUES (1, 'Hello!')");
alasql("INSERT INTO test VALUES (2, 'Aloha!')");
alasql("INSERT INTO test VALUES (3, 'Bonjour!')");

const results = alasql("SELECT * FROM test WHERE language > 1");
console.log(results);

// Output:
// [{ "language":2, "hello":"Aloha!" },{ "language":3,"hello":"Bonjour!" }]

You can even run queries over an array of objects:



const data = [{ id: 1, amount: 10 }, { id: 2, amount: 20 }, { id: 1, amount: 30 }];
const results = alasql('SELECT id, SUM(amount) AS total FROM ? GROUP BY id', [data]);
console.log(results);

// Output:
// [{"id":1,"total":40},{"id":2,"total":20}]

Awesome, right?

Example

Let's create a new React application using npx create-react-app tool and implement a basic TODO list application:



import React from 'react';

class App extends React.Component {

  constructor(props) {
    super(props);

    this.state = { todo: [] };
  }

  addTodo() {
    const { todo } = this.state;
    const { inputTodo } = this.refs;

    todo.push(inputTodo.value);
    inputTodo.value = "";
    this.setState({ todo });
  }

  removeTodo(index) {
    const { todo } = this.state;

    todo.splice(index, 1);
    this.setState({ todo });
  }

  render() {
    const { todo } = this.state;

    return (
      <main className="container">
        <h1 className="mt-4">TODO List</h1>
        <div className="row mt-4">
          <form className="form-inline">
            <div className="form-group mx-sm-3 mb-2">
              <label for="inputTodo" className="sr-only">Todo</label>
              <input type="text" ref="inputTodo" className="form-control" id="inputTodo" placeholder="Todo"/>
            </div>
            <button type="button" className="btn btn-primary mb-2" onClick={ e => this.addTodo() }>Add</button>
          </form>
        </div>

        <div className="row">
          <table className="table table-bordered">
            <thead>
              <tr>
                <th>TODO</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {
              !todo.length &&
              <tr>
                <td colspan="2" className="text-center">
                  No data available
                </td>
              </tr>
              }
              {
              todo.length > 0 && todo.map((x,i) => (
              <tr>
                <td>{ x }</td>
                <td>
                  <button className="btn btn-danger" onClick={ e => this.removeTodo(i) }>
                    x
                  </button>
                </td>
              </tr>
              ))
              }
            </tbody>
          </table>
        </div>
      </main>
      );
  }
}

export default App;

The result is:

It works like a charm, but if I reload the page, I lost all my TODO list.
Let's use AlaSQL to persist those TODOs.

First, let's import AlaSQL and use componentWillMount hook to create the table:



import React from 'react';
import * as alasql from 'alasql';

class App extends React.Component {

  // Constructor ...

  componentWillMount() {
    alasql('CREATE TABLE todo (id INT AUTOINCREMENT PRIMARY KEY, text STRING)');
  }

  // Lines of code ...
}

export default App;

Everytime the component is loaded, AlaSQL will create the table.

Now, we need to implement a method to get all TODOs from database, a method to insert new TODOs and a method to delete them.



import React from 'react';
import * as alasql from 'alasql';

class App extends React.Component {

  // Lines of code ...

  fetchTodos() {
    const result = alasql('SELECT * FROM todo');
    this.setState({ todo: result });
  }

  insertTodo(text) {
    alasql('INSERT INTO todo VALUES ?',
      [{ id: alasql.autoval('todo', 'id', true), text }]);
  }

  deleteTodo(id) {
    alasql('DELETE FROM todo WHERE id = ?', id);
  }

  // Lines of code ...
}

export default App;

As you can see, using traditional SQL SELECT, INSERT and DELETE do the job. alasql.autoval gets the next ID to be inserted since our table ID is autoincrementable.

Next, let's refactor the addTodo and removeTodo methods and add componentDidMount hook to fetch TODOs from database:



import React from 'react';
import * as alasql from 'alasql';

class App extends React.Component {

  // Lines of code...

  componentDidMount() {
    this.fetchTodos();
  }

  addTodo() {
    const { inputTodo } = this.refs;

    if (!inputTodo.value) return;

    this.insertTodo(inputTodo.value);
    this.fetchTodos();
    inputTodo.value = "";
  }

  removeTodo(id) {
    this.deleteTodo(id);
    this.fetchTodos();
  }

  // Lines of code ...
}

export default App;

For last, let's update the render method adding a new ID column and using TODO object instead of plain text:



import React from 'react';
import * as alasql from 'alasql';

class App extends React.Component {

  // Lines of code ...

  render() {
    const { todo } = this.state;

    return (
      <main className="container">
        <h1 className="mt-4">TODO List</h1>
        <div className="row mt-4">
          <form className="form-inline">
            <div className="form-group mx-sm-3 mb-2">
              <label for="inputTodo" className="sr-only">Todo</label>
              <input type="text" ref="inputTodo" className="form-control" id="inputTodo" placeholder="Todo"/>
            </div>
            <button type="button" className="btn btn-primary mb-2" onClick={ e => this.addTodo() }>Add</button>
          </form>
        </div>

        <div className="row">
          <table className="table table-bordered">
            <thead>
              <tr>
                <th>ID</th>
                <th>TODO</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {
              !todo.length &&
              <tr>
                <td colspan="3" className="text-center">
                  No data available
                </td>
              </tr>
              }
              {
              todo.length > 0 && todo.map(x => (
              <tr>
                <td>{ x.id }</td>
                <td>{ x.text }</td>
                <td>
                  <button className="btn btn-danger" onClick={ e => this.removeTodo(x.id) }>
                    x
                  </button>
                </td>
              </tr>
              ))
              }
            </tbody>
          </table>
        </div>
      </main>
      );
  }
}

export default App;

The result using AlaSQL is:

Damn, if I reload page again, I lost all my TODOs again... why?!

Well, in fact we are using AlaSQL and in fact we are inserting data in a table BUT we haven't created a database to persist the data.

So, let's modify the componentWillMount hook and create a new database named todo_db if it doesn't exist.

In this case, localStorage will be used as database engine.



componentWillMount() {
    alasql(`
      CREATE LOCALSTORAGE DATABASE IF NOT EXISTS todo_db;
      ATTACH LOCALSTORAGE DATABASE todo_db;
      USE todo_db;
    `);
    alasql('CREATE TABLE IF NOT EXISTS todo (id INT AUTOINCREMENT PRIMARY KEY, text STRING)');
}

Everytime the component is loaded, AlaSQL will create the database if it doesn't exist.

Here is the final result:

It works as expected 👌.

Thanks for reading! You can find the source code from this post in the next repository:

jorgeramon / alasql-react-example

An example of how to use AlaSQL with React

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

`npm start`

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

`npm test`

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

`npm run build`

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

`npm run eject`

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool…

View on GitHub

Spring Boot + Groovy: From Zero to Hero

Jorge Ramón — Thu, 10 Jan 2019 17:17:01 +0000

Java... ugghh...

I don't like to use Java (and please don't use it) but sometimes I have to... and that was the case.

A few weeks ago I started a new project at Indigo (please follow them!) and the chosen framework to do the job was Spring Boot and this time I had no option since the other person who is developing with me loves the combination Java + Spring Boot.

But why do I said "the combination"? 🤔 Well, there are some programming languages that work on the JVM such as Kotlin, Scala and my favorite Groovy!.

What is Groovy?

According to it's official page:

Apache Groovy is a powerful, optionally typed and dynamic language, with static-typing and static compilation capabilities, for the Java platform aimed at improving developer productivity thanks to a concise, familiar and easy to learn syntax. It integrates smoothly with any Java program, and immediately delivers to your application powerful features, including scripting capabilities, Domain-Specific Language authoring, runtime and compile-time meta-programming and functional programming.

In other words, you can do better stuff, write less code and get some cool features that Java cannot.

What will be our example?

This time we will create a Pokemon API!! Let's catch'em all

Our API must:

Get the information of all trainers
Get the information of a specific trainer
Get all caught pokemon of a specific trainer

What will be using to solve that?

Java 8
Gradle
Spring Boot
Groovy
MySQL
Flyway DB

What do I need to install?

Java 8 or greater
Gradle
MySQL

I highly recommend you to install Java and Gradle via SDKMAN.

Let's get started!

1. Create the base project with Gradle

Create a directory and then create a file named build.gradle. This file will:

Download all the dependencies
Compile the entire project
Run Spring Boot server
Run tests if needed

So, let's add the following lines:



buildscript {
  ext {
    springBootVersion = '2.0.6.RELEASE'
  }
  repositories {
    mavenCentral()
  }
  dependencies {
    classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
  }
}

apply plugin: 'groovy'
apply plugin: 'org.springframework.boot'
apply plugin: 'io.spring.dependency-management'

group = 'com.pokemon'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = 1.8

repositories {
  mavenCentral()
}

dependencies {
  implementation("org.springframework.boot:spring-boot-starter-web:${springBootVersion}")
  implementation('org.codehaus.groovy:groovy:2.5.3')
}

The lines tell Gradle to configure Maven Central as the default repository, download and use the spring-boot-gradle-plugin and download the following dependencies:

Spring Boot Web: Exposes REST services
Groovy: Compiles and interprets all Groovy/Java code

Also our base package name will be com.pokemon so every class with this package name will be compiled by Gradle and used by Spring Boot.

2. Create the base code and run it for the first time

Create the directories src/main/groovy/com/pokemon in the root directory and then create a file named Application.groovy:



package com.pokemon

import org.springframework.boot.SpringApplication
import org.springframework.boot.autoconfigure.SpringBootApplication

// In groovy every class is public by default
// so you don't need to write "public class" anymore
@SpringBootApplication
class Application {

    // Every method is public as well
    static void main(String[] args) {

        // You can omit the last method call parenthesis
        // This is the same as .run(Application, args)
        // also you can omit ;
        SpringApplication.run Application, args
    }
}

Open your terminal, go to your project directory and type the command gradle bootRun to get your application running like this:

3. SQL tables with Flyway DB

Working with SQL databases is often a pain.

How do you share the database structure with your team?

A way to deal with it is create a SQL script and share it with all the developers.

Sounds good, right?

But, when you need to add changes (like modifying existing tables or adding new ones) to the script, What do you do now? How do the dev team get notified from those changes?

Framework such as PHP Laravel introduce the migration concept. Every change to the database (creating a table, adding a field, changing a field type, etc) is a migration. Migrations are executed in certain order and keep the database always up-to-date.

Flyway DB will help us to solve the problem but in Java (Groovy).

According to it's official page:

Version control for your database.
Robust schema evolution across all your environments.
With ease, pleasure and plain SQL.

So now let's add Flyway DB, Spring Data and MySQL Connector to our project.

Edit build.gradle file and the following dependencies:



implementation('org.flywaydb:flyway-core:5.2.0')
implementation("org.springframework.boot:spring-boot-starter-data-jpa:${springBootVersion}")
implementation('mysql:mysql-connector-java:8.0.13')

And now create a new file in src/main/resources directory named application.properties:



spring.flyway.url=jdbc:mysql://localhost/
spring.flyway.user=your-username
spring.flyway.password=your-password
spring.flyway.schemas=your-database-name

spring.datasource.url=jdbc:mysql://localhost/your-database-name
spring.datasource.username=your-username
spring.datasource.password=your-password
spring.datasource.driver-class-name=com.mysql.jdbc.Driver

Don't forget to change your-username, your-password and your-database-name values.

In my case, the database name is pokemon_example.

spring.flyway credentials let FlywayDB connect to the database and install the lastest changes every time you run the project.

spring.datasource credentials let Spring Data connect to the database and run queries.

To create the initial tables create a new file in src/main/resources/db/migration directory named V1__creating_initial_tables.sql:



CREATE TABLE trainers(
  id INTEGER AUTO_INCREMENT,
  name VARCHAR(100) NOT NULL,
  level SMALLINT NOT NULL DEFAULT 1,
  PRIMARY KEY (id)
);

CREATE TABLE pokemon(
  id INTEGER AUTO_INCREMENT,
  name VARCHAR(20) NOT NULL,
  number SMALLINT NOT NULL,
  PRIMARY KEY (id)
);

CREATE TABLE wild_pokemon(
  id INTEGER AUTO_INCREMENT,
  combat_power SMALLINT NOT NULL DEFAULT 0,
  pokemon_id INTEGER NOT NULL,
  trainer_id INTEGER,
  PRIMARY KEY (id),
  FOREIGN KEY (pokemon_id) REFERENCES pokemon (id)
    ON DELETE CASCADE,
  FOREIGN KEY (trainer_id) REFERENCES trainers (id)
    ON DELETE SET NULL
);

Flyway DB search for all the files in db/migration directory with the pattern VN__any_name.sql where N is a unique version, for example:

1
001
5.2
1.2.3.4.5.6.7.8.9
205.68
20130115113556
2013.1.15.11.35.56
2013.01.15.11.35.56

Personally I prefer to use this versioning:

V1__whatever.sql
V2__whatever.sql
etc.

For last, run the project with gradle bootRun command and then take a look to your database.

4. Entity classes (Domain)

Back to code, after creating the database successfully it's time to map those tables to classes.

In src/main/groovy/com/pokemon directory, create a new one named entity and create 3 new files:

Trainer.groovy
Pokemon.groovy
WildPokemon.groovy

Trainer.groovy



package com.pokemon.entity

import javax.persistence.Entity
import javax.persistence.Id
import javax.persistence.GeneratedValue
import javax.persistence.Table
import javax.persistence.GenerationType
import javax.validation.constraints.NotNull
import javax.persistence.Column

@Entity
@Table(name = "trainers")
class Trainer {

  @Id
  @GeneratedValue(strategy = GenerationType.IDENTITY)
  Integer id

  @NotNull
  @Column(nullable = false)
  String name

  @NotNull
  @Column(nullable = false)
  Short level
}

Pokemon.groovy



package com.pokemon.entity

import javax.persistence.Entity
import javax.persistence.Id
import javax.persistence.GeneratedValue
import javax.persistence.Table
import javax.persistence.GenerationType
import javax.validation.constraints.NotNull
import javax.persistence.Column

@Entity
@Table(name = "pokemon")
class Pokemon {

  @Id
  @GeneratedValue(strategy = GenerationType.IDENTITY)
  Integer id

  @NotNull
  @Column(nullable = false)
  String name

  @NotNull
  @Column(nullable = false)
  Short number
}

WildPokemon.groovy



package com.pokemon.entity

import javax.persistence.Entity
import javax.persistence.Id
import javax.persistence.GeneratedValue
import javax.persistence.Table
import javax.persistence.GenerationType
import javax.validation.constraints.NotNull
import javax.persistence.Column
import javax.persistence.ManyToOne
import javax.persistence.JoinColumn

@Entity
@Table(name = "wild_pokemon")
class WildPokemon {

  @Id
  @GeneratedValue(strategy = GenerationType.IDENTITY)
  Integer id

  @NotNull
  @Column(name = "combat_power", nullable = false)
  Integer combatPower

  @ManyToOne
  @JoinColumn(name = "pokemon_id", referencedColumnName = "id", nullable = false)
  Pokemon pokemon

  @ManyToOne
  @JoinColumn(name = "trainer_id", referencedColumnName = "id", nullable = true)
  Trainer trainer
}

Before continue, remember!! because we are using Groovy there's no need to add the boring getters and setters:



// Groovy version
class Example {

  String property
}

Example ex = new Example(property: "hello world")
ex.property = "hola inmundo"

// -----------------------------------------------------

// Java version
public class Example {

  private String property;

  public Example(String property) {
    this.property = property;
  }

  public String getProperty() {
    return property;
  }

  public void setProperty(String property) {
    this.property = property;
  }
}

Example ex = new Example("hello world")
ex.setProperty("hola inmundo")

Writing less code FTW! 🤙

As you can see, it's easy to create entity classes based on tables. In the WildPokemon case we declared 2 many to one relationships, one to Pokemon class (or table) and the other one to Trainer class (or table). Only Trainer relationship can be null.

5. Repository classes (Persistence layer)

A Repository class is the place to define our queries. It's very easy and magical at the same time.

Remember our API goal:

Get the information of all trainers
Get the information of a specific trainer
Get all caught pokemon of a specific trainer

Okay, let's translate those features into SQL queries:



-- Get the information of all trainers
SELECT * FROM trainers;

-- Get the information of a specific trainer
SELECT * FROM trainers WHERE id = ?;

-- Get all caught pokemon of a specific trainer
SELECT * FROM wild_pokemon WHERE trainer_id = ?;

Seems legit.

But what if the queries were written in human readable text?



# Get the information of all trainers
find all trainers

# Get the information of a specific trainer
find trainer by id

# Get all caught pokemon of a specific trainer
find wild pokemon by trainer id

And believe or not, using JpaRepository interface from Spring Data our queries are:

findAll
findById
findByTrainerId

Very easy!! 🎉🎉🎉🎉🎉

Let's code them, in src/main/groovy/com/pokemon directory create a new one named repository and create 2 new files:

TrainerRepository.groovy
WildPokemonRepository.groovy

TrainerRepository.groovy



package com.pokemon.repository

import com.pokemon.entity.Trainer
import org.springframework.data.jpa.repository.JpaRepository
import org.springframework.stereotype.Repository

@Repository
interface TrainerRepository extends JpaRepository<Trainer, Integer> {

  List<Trainer> findAll()

  Trainer findById(Integer id)
}

WildPokemonRepository.groovy



package com.pokemon.repository

import com.pokemon.entity.WildPokemon
import org.springframework.data.jpa.repository.JpaRepository
import org.springframework.stereotype.Repository

@Repository
interface WildPokemonRepository extends JpaRepository<WildPokemon, Integer> {

  List<WildPokemon> findByTrainerId(Integer trainerId)
}

Simple as that, Spring Data will search for all the classes annotated with @Repository and verify the method signature.

6. Service classes (Business layer)

Our API doesn't need business logic at all but still is a good idea to create service classes and use repositories in them.

In src/main/groovy/com/pokemon directory create a new one named service and then inside service create a new one named impl.

Our service directory will contain interfaces and impl their implementation.

Wait, what?

It has its explanation.

Suppose you have to implement a class that stores files:



class FileStorage {

  String saveFile(String base64) {
    // storing file in disk...
  }
}

Pretty simple, but then your client needs to store the files in Amazon S3 and Azure Blob too. What is the easiest way to solve the problem?

You can create a interface, because in-disk storage, Amazon S3 storage and Azure Blob storage do the same thing, save a file:



interface Storage {

  String saveFile(String base64)
}

And then you implement the class for each storage type.



class S3Storage implements Storage {
}

class BlobStorage implements Storage {
}

class DiskStorage implements Storage {
}

And finally you can use polymorphism to change the storage type whenever you need it:



// Save the file in Amazon S3
Storage storage = new S3Storage()

// Save the file in Azure Blob
Storage storage = new BlobStorage()

// Save the file in disk
Storage storage = new DiskStorage()

That's why we create interfaces, because the business logic can change anytime or whenever the client wants to.

So, let's create our 2 interfaces and their implementation:

TrainerService.groovy



package com.pokemon.service

import com.pokemon.entity.Trainer

interface TrainerService {

  List<Trainer> findAll()

  Trainer findById(int id)
}

TrainerServiceImpl.groovy



package com.pokemon.service.impl

import com.pokemon.entity.Trainer
import com.pokemon.service.TrainerService
import com.pokemon.repository.TrainerRepository
import org.springframework.beans.factory.annotation.Autowired
import org.springframework.stereotype.Service

@Service
class TrainerServiceImpl implements TrainerService {

  @Autowired
  private final TrainerRepository trainerRepository

  @Override
  List<Trainer> findAll() {
    trainerRepository.findAll()
  }

  @Override
  Trainer findById(int id) {
    trainerRepository.findById(id)
  }
}

WildPokemonService implementation is very similar.

Our implementation class has @Service annotation because Spring will create an instance for us when another class uses @Autowired annotation.

In TrainerServiceImpl we use @Autowired annotation to create an instance of TrainerRepository class.

Annotations are very important because they tell Spring what they are and what to do with them.

7. Controller classes

Finally it's time to create the controller with 3 endpoints:

/trainers - Get all trainers
/trainers/{ id } - Get a specific trainer
/trainers/{ id }/pokemon - Get all caught pokemon of a specific trainer

In src/main/groovy/com/pokemon directory create a new one named controller and then create a new file named TrainerController.groovy:



package com.pokemon.controller

import com.pokemon.entity.Trainer
import com.pokemon.entity.WildPokemon
import com.pokemon.service.TrainerService
import com.pokemon.service.WildPokemonService
import org.springframework.web.bind.annotation.RestController
import org.springframework.web.bind.annotation.RequestMapping
import org.springframework.beans.factory.annotation.Autowired
import org.springframework.web.bind.annotation.RequestMethod
import org.springframework.web.bind.annotation.PathVariable

@RestController
@RequestMapping('/trainers')
class TrainerController {

  @Autowired
  private final TrainerService trainerService

  @Autowired
  private final WildPokemonService wildPokemonService

  @RequestMapping(method = RequestMethod.GET)
  List<Trainer> findAll() {
    trainerService.findAll()
  }

  @RequestMapping(value = '/{id}/pokemon', method = RequestMethod.GET)
  List<Trainer> findCaughtPokemon(@PathVariable('id') int id) {
    wildPokemonService.findByTrainer id
  }

  @RequestMapping(value = '/{id}', method = RequestMethod.GET)
  Trainer findById(@PathVariable('id') int id) {
    trainerService.findById id
  }
}

@RequestMapping annotation configures the prefix of all endpoints defined in that controller. Also configures method type (GET, POST, PUT, DELETE, etc).

@Autowired annotation creates instances of service classes for us.

@PathVariable annotation passes the specified URL parameter to the method call.

For last, let's insert dummy data into MySQL using Flyway DB. Create a new migration (in src/main/resources/db/migration) named V2__inserting_example_data.sql:



INSERT INTO trainers VALUES (1, 'Red', 40), (2, 'Ash Ketchum', 10);

INSERT INTO pokemon VALUES
  (1, 'Bulbasaur', 1), (2, 'Ivysaur', 2), (3, 'Venosaur', 3), (4, 'Charmander', 4),
  (5, 'Charmeleon', 5), (6, 'Charizard', 6), (7, 'Squirtle', 7), (8, 'Wartortle', 8),
  (9, 'Blastoise', 9);

INSERT INTO wild_pokemon VALUES
  (1, 2000, 1, 3), (2, 2100, 4, 6), (7, 2000, 7, 9), (8, 600, 1, 2);

Run the project with gradle bootRun command, go to your favorite browser and navigate to http://localhost:8080/trainers/1/pokemon to get:



[
   {
      "id":1,
      "combatPower":2000,
      "pokemon":{
         "id":3,
         "name":"Venosaur",
         "number":3
      },
      "trainer":{
         "id":1,
         "name":"Red",
         "level":40
      }
   },
   {
      "id":2,
      "combatPower":2100,
      "pokemon":{
         "id":6,
         "name":"Charizard",
         "number":6
      },
      "trainer":{
         "id":1,
         "name":"Red",
         "level":40
      }
   },
   {
      "id":7,
      "combatPower":2000,
      "pokemon":{
         "id":9,
         "name":"Blastoise",
         "number":9
      },
      "trainer":{
         "id":1,
         "name":"Red",
         "level":40
      }
   }
]

This is our final project directory structure:

And that's all, folks!

Thank you so much for reading this long post.

In the next post we will improve our pokemon API adding more features and things like Data Transfer Objects, Exception Handler, Swagger, Testing and more!

Stay tuned.

jorgeramon / spring-groovy-pokemon

Pokemon API example using Spring Boot + Groovy.

Pokemon API v1.0

Spring Boot + Groovy example for Dev.to

Requirements

Java 8 or greater
MySQL
Gradle

Configuration

Edit the file application.properties and change your-username, your-password and your-database values.

Running the project will create the database, tables and inserting example data automatically.

Running the project

In terminal type the command gradle bootRun.

View on GitHub

My development environment setup (Part 2)

Jorge Ramón — Wed, 26 Sep 2018 00:39:40 +0000

In the last post I talked about:

Install essential tools
Install zsh and using it by default
Install Oh My Zsh
Install vim and why could be a good option for development

It's time for the part 2.

6. Configure vim

I know it's hard to learn and get used to vim but here is my secret 🤐.

Doing some research on internet about vim tips and configuration I found this: https://github.com/sohjiro/.vim

Yep, a shell script to setup vim and add some steroids.

Just run the follow command:

curl -L https://raw.githubusercontent.com/sohjiro/.vim/master/run_config.sh | sh

And that's all 💪.

6.1. Fix 0x7A69 color error on vim (optional)

Now try to open vim (with the command vim of course).

For some reason it threw an error about a missed 0x7A69 color. It didn't happened to me before but if it happens to you too here is the solution.

Download the file 0x7A69_dark.vim from here:

https://www.vim.org/scripts/script.php?script_id=4695

And just do the following:

mkdir -p ~/.vim/colors

# <path> is the path where the 0x7A69_dark.vim file is located
mv <path>/0x7A69_dark.vim ~/.vim/colors

And the next time you open vim it will be fixed.

6.2. Fix weird backspace character on vim (optional)

After solving the color error I started testing the keyboard and I found that when pressing backspace always got ^? character 😫.

What is that? I don't know but the way to solve this is editing the file .zshrc (remember we are using Zsh, right?) and add the next line at the bottom:

stty erase '^?'

Solved 🔨.

7. Install vim plugins

The configuration you installed on step 6 had some built-in plugins.

To install them, open vim and type:

:PlugInstall

Just wait until everything is installed:

8. Mastering vim: NerdTree is your friend

One of the plugins I told you on step 7 is NerdTree that will let you open the current directory, browse files, add/rename/remove/move/copy a file and more. Isn't that cool?.

To use it, open vim and type:

:NerdTreeToggle

every time you need to open the current directory... kinda boring but the good thing is that you can map the command to a keyboard combination.

Edit the file ~/.vim/vim_config.vim and add the following line:

noremap <C-w>n :NERDTreeToggle<cr>

Restart vim and now press Ctrl-w + n and you've got it. To close NerdTree just press the combination again.

For last, to do operations over a directory or a file (move, copy, delete, etc) open NerdTree, move your cursor to the directory or file you want and press m:

Select your desired option.

9. Mastering vim: Window splitting

Sometimes you need to open 2 or more files at the same time, so here comes window splitting to help.

Again, edit the file ~/.vim/vim_config.vim and add the following lines:

noremap <C-w>- :split<cr>
noremap <C-w>\| :vsplit<cr>

Restart vim and now press Ctrl-w + - to split the current window horizontally:

And Ctrl-w + | (pipe character) to split the current window vertically:

To switch between panels, just press Ctrl+ w twice. To close a panel just press Ctrl-w + c.

Now, mix NerdTree and window splitting to open as many files as you want!

10. Mastering vim: Delete file buffers

Using Sublime Text, Visual Code or any IDE when you finished to work on some file you just close it. Well, this is not the same on vim, you can close your panel (Ctrl-w + c) but the buffer will be still there 😫. Fortunately I found a way to close the current buffer! 🤓

Create a new file on ~/.vim/plugin/bclose.vim (if the plugin directory doesn't exist, please create it too) and paste the following (credits to vim.wikia):

" Delete buffer while keeping window layout (don't close buffer's windows).
" Version 2008-11-18 from http://vim.wikia.com/wiki/VimTip165
if v:version < 700 || exists('loaded_bclose') || &cp
  finish
endif
let loaded_bclose = 1
if !exists('bclose_multiple')
  let bclose_multiple = 1
endif

" Display an error message.
function! s:Warn(msg)
  echohl ErrorMsg
  echomsg a:msg
  echohl NONE
endfunction

" Command ':Bclose' executes ':bd' to delete buffer in current window.
" The window will show the alternate buffer (Ctrl-^) if it exists,
" or the previous buffer (:bp), or a blank buffer if no previous.
" Command ':Bclose!' is the same, but executes ':bd!' (discard changes).
" An optional argument can specify which buffer to close (name or number).
function! s:Bclose(bang, buffer)
  if empty(a:buffer)
    let btarget = bufnr('%')
  elseif a:buffer =~ '^\d\+$'
    let btarget = bufnr(str2nr(a:buffer))
  else
    let btarget = bufnr(a:buffer)
  endif
  if btarget < 0
    call s:Warn('No matching buffer for '.a:buffer)
    return
  endif
  if empty(a:bang) && getbufvar(btarget, '&modified')
    call s:Warn('No write since last change for buffer '.btarget.' (use :Bclose!)')
    return
  endif
  " Numbers of windows that view target buffer which we will delete.
  let wnums = filter(range(1, winnr('$')), 'winbufnr(v:val) == btarget')
  if !g:bclose_multiple && len(wnums) > 1
    call s:Warn('Buffer is in multiple windows (use ":let bclose_multiple=1")')
    return
  endif
  let wcurrent = winnr()
  for w in wnums
    execute w.'wincmd w'
    let prevbuf = bufnr('#')
    if prevbuf > 0 && buflisted(prevbuf) && prevbuf != w
      buffer #
    else
      bprevious
    endif
    if btarget == bufnr('%')
      " Numbers of listed buffers which are not the target to be deleted.
      let blisted = filter(range(1, bufnr('$')), 'buflisted(v:val) && v:val != btarget')
      " Listed, not target, and not displayed.
      let bhidden = filter(copy(blisted), 'bufwinnr(v:val) < 0')
      " Take the first buffer, if any (could be more intelligent).
      let bjump = (bhidden + blisted + [-1])[0]
      if bjump > 0
        execute 'buffer '.bjump
      else
        execute 'enew'.a:bang
      endif
    endif
  endfor
  execute 'bdelete'.a:bang.' '.btarget
  execute wcurrent.'wincmd w'
endfunction
command! -bang -complete=buffer -nargs=? Bclose call s:Bclose('<bang>', '<args>')
nnoremap <silent> <Leader>bd :Bclose<CR>

Then, edit the file ~/.vim/vim_config.vim and add the following line:

noremap <C-w>b :Bclose<cr>

Restart vim, open any file:

Press Ctrl-w + b and voilá!

That's all for now, folks.

Feel free to ask any questions!

Thanks for reading ❤️

My development environment setup (Part 1)

Jorge Ramón — Mon, 24 Sep 2018 05:17:55 +0000

Last week at work I got a new project on .NET Framework. As a good developer I tried to run it on Linux using .NET Core but I failed and my work's laptop didn't had Windows installed, what could I do?.

So, I went running with the tech support area, told them the problem and after some research the only solution was: delete Linux, install Windows and install Linux again.

Fucking Windows. 😡

But that inspired to me to write this post.

This is what I consider a good environment to develop quick, easy and be coolest in the office. Don't judge me!

P.S.: I'm using Ubuntu 18.04 because why not? I had Fedora 27 before eveything happened and it's still my favorite but I will give Ubuntu a try again.

Let's get started!

1. Install essential tools

We need the basics, you will suffer if you don't have them:

sudo apt-get update
sudo apt-get install build-essential git curl xclip

2. Install zsh

Zsh (also called Z shell) is an extended version of the Bourne Shell (sh). It has many cool features against original bash:

Plugin and theme support
Spelling correction
Automatic cd
And more!

Just install it with the follow command:

sudo apt-get install zsh

3. Install Oh My Zsh

Now we have a good shell, great. But Oh My Zsh will give us extra power:

Then, just copy the follow command:

 sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

And you will get this:

4. Start using zsh by default

If you restart your terminal it will be using bash again. Why? because you need to change it explicitly with the follow command:

# Change the shell to zsh
chsh -s `which zsh`

The bad thing is that you need to restart your computer 🙄.

# WARNING! It will shutdown immediately :(
sudo shutdown -r 0

But after rebooting this will be the result 😍:

5. Install vim

It's time to get into hacker mode 👨‍💻 :

Just kidding.

In my experience, working with vim has been the best idea ever because:

It's lightweight
It's everywhere (even on Window's Git bash)
I feel that I write code faster
Don't even use the touchpad (or mouse)
I'm forced to learn things such as package names and understand they purpose
Syntax highlight for many programming languages
Shortcuts as Sublime Text or Visual Code Studio

So, why don't you give it a try?

sudo apt-get install vim

This is the end for the part 1 😋.

In the next post I will cover:

Configure vim and add steroids
Fixing some vim weird errors
Mastering vim

See you on the next post!

Part 2: https://dev.to/jorge_rockr/my-development-environment-setup-part-2-4ck9

Configuring SSH Key for Bitbucket repositories

Jorge Ramón — Wed, 19 Sep 2018 04:50:13 +0000

It's pretty common that beginner developers get used to do the same thing over and over again, more specific, log into bitbucket server every pull and push, because... why not?.

Well, if you are doing it so, let me tell you that:

You are wasting your precious time
You are typing more that should be
Please, stop doing that

So, let's get started!

Step 0: Install Git

I'm assuming you did this before 😒, doesn't matter if you are using Windows or Linux but if you are using Windows... PLEASE INSTALL GIT BASH.

Step 1: Create the file `id_rsa.pub`

Open your terminal (or Git Bash if you are using Windows) and type:

ssh-keygen -t rsa -b 4096 -C "your@email.com"

If you did it well then this should appear:

Generating public/private rsa key pair.
Enter file in which to save the key (/home/<your-user>/.ssh/id_rsa):

From this point you need to do just one thing... PRESS ENTER OVER AND OVER AGAIN to get this:

Created directory '/home/<your-user>/.ssh'.
Enter passphrase (empty for no passphrase): 
Enter same passphrase again: 
Your identification has been saved in /home/<your-user>/.ssh/id_rsa.
Your public key has been saved in /home/<your-user>/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:lXhYzNtK37chmNGsV5/278yr6LrWuUygcYvqklcdtzI my.email@gmail.com
The key's randomart image is:
+---[RSA 4096]----+
|         o.      |
|         +o.     |
|        o +oo    |
|         +oo.o . |
|       .S+oo*.. o|
|       .=E+=.o.+o|
|    . .o .+.o o.+|
|   o ..  .oo.  +.|
|    +o  .o+=...oB|
+----[SHA256]-----+

A file called id_rsa.pub was created.

Step 2: Check if you did it well

Just to be sure, let's see the content of the file with this command (applies for Windows users too):

cat ~/.ssh/id_rsa.pub

And you should see something like this:

ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAACAQDKk+oiraZNtLEOsnoipb2vQneDKEu/KRjkimYucyrISkELCIqudGDhPyOxsKDIh61+tkoufJ6l0i9OCWVF/ckF2b8EZmqDLPIQR0x3Idg8vkmYS+aD/DdeUDrCYOR0rWXrCAdOOMJrkuoN0z+rFEGHW+Lkx8JqIwUm237RVOnJy9g8XG9bpRjjNZGLvhVIR0rmNtJ3NdEHZTrXmkookIU1/XTr/WVn6W7L695yyIYonNGczDrhAmnqYFm6HQabb4NTUm37PiZRxbkiJLjAo44AMM+4FhUrYN9FJkfgSqa3yJAYAGwFxRarw0JiG5yocXMLfP3kkcpfXrSxB2hz4D3U3Mw814tcUlLYQtcJN0kzO5qSUWfXeedZsmQw5p2zwlcrLcXeIvOleupvK+H+r7CW2Efvq/GZtZUytwgO1J2uOrs8RBZMWTYjz1qXOmC03V7Kft3Mcn9udGmuDB9nWuPJi8wl9UyHT/hUpJi4g/n9hazulnToM9mBOi82x2aMvcbnapsPk5dMFmh3lZylAs/szQwYbR05Qu6UXZxoZXWsoZds4O/RrXIsyViw6FKLvO2diJlDNuDu9fg4FK5kbOEktqqi6h3pY8QtJEM7I1iiKUeZVzinswn0Xh7bwEOduT+aZ79J99MV8pav6EsBEEIi+9qFbcuzIMTKrqcUYfOWOw== my.email@gmail.com

That's your SSH key.

Step 3: Configure your SSH key into Bitbucket (similar applies to Github)

Log into Bitbucket and search your user icon:

Now click on Bitbucket settings option:

Now click on SSH keys option:

Now press the Add key button. If you previously configured a SSH key then it will be listed (like mine):

For last, enter whatever name you'd like and paste the content you saw on step 2:

And that's all. Very easy isn't?

Step 4: Clone your repository using SSH protocol

It's time to proof that you did it well, so create or go to any repository and press Clone button. You should see the SSH option selected:

For last, just clone your repository and be happy 😁:

Forem: Jorge Ramón

The problem with array cloning in Javascript (and how to solve it)

1. Using a for/while loop

2. Using Array.prototype.slice method

3. Using Object.assign method

3. Use ES2015 Spread Operator

4. Using JSON.parse + JSON.stringify methods

Learning Programming Languages with Code Challenges

The rules

Table of Contents

Code Challenge: FizzBuzz

Pseudocode Solution

Golang Implementation

Solution: fizzbuzz/fizzbuzz.go

What I've learned

Unit Tests: fizzbuzz/fizzbuzz_test.go

What I've learned

Rust Implementation

Solution: fizzbuzz/src/lib.rs

What I've learned

Unit Tests: fizzbuzz/src/lib.rs

What I've learned

Crystal Implementation

Solution: fizzbuzz/fizzbuzz.cr

What I've learned

Unit Tests: fizzbuzz/spec/fizzbuzz_spec.cr

What I've learned

Kotlin Solution

Configuration: fizzbuzz/gradle.build

What I've learned

Solution: fizzbuzz/src/main/kotlin/FizzBuzz.kt

What I've learned

Unit tests: fizzbuzz/src/test/kotlin/FizzBuzzTest.kt

What I've learned

Elixir Solution

Solution: fizzbuzz/lib/fizzbuzz.ex

What I've learned

What I've learned

Conclusion

jorgeramon / learning-languages

Repository of "Learning Programming Languages with Code Challenges" post series.

Learning Programming Languages with Code Challenges

Programming Languages

Challenges

Everything you need to know about Node.js

Table of Contents

The World Before Node.js

Multi Threaded Server

Blocking I/O

The C10K Problem

The Problem

Javascript to the rescue?

Node.js and the Event Loop

Node.js

Non-blocking I/O

The Event Loop

The Problem with CPU Intensive Tasks

Worker Threads

Fixing the code

Conclusion

AlaSQL: A Real Database for Web Browsers (and Node.js)

What is AlaQSL?

AlaSQL / alasql

AlaSQL.js - JavaScript SQL database for browser and Node.js. Handles both traditional relational tables and nested JSON data (NoSQL). Export, store, and import data from localStorage, IndexedDB, or Excel.

AlaSQL

Installation

Usage

Example

jorgeramon / alasql-react-example

An example of how to use AlaSQL with React

Available Scripts

npm start

npm test

npm run build

npm run eject

Spring Boot + Groovy: From Zero to Hero

What is Groovy?

What will be our example?

What will be using to solve that?

What do I need to install?

2. Using `Array.prototype.slice` method

3. Using `Object.assign` method

4. Using `JSON.parse + JSON.stringify` methods

Solution: `fizzbuzz/fizzbuzz.go`

Unit Tests: `fizzbuzz/fizzbuzz_test.go`

Solution: `fizzbuzz/src/lib.rs`

Unit Tests: `fizzbuzz/src/lib.rs`

Solution: `fizzbuzz/fizzbuzz.cr`

Unit Tests: `fizzbuzz/spec/fizzbuzz_spec.cr`

Configuration: `fizzbuzz/gradle.build`

Solution: `fizzbuzz/src/main/kotlin/FizzBuzz.kt`

Unit tests: `fizzbuzz/src/test/kotlin/FizzBuzzTest.kt`

Solution: `fizzbuzz/lib/fizzbuzz.ex`

`npm start`

`npm test`

`npm run build`

`npm run eject`

Step 1: Create the file `id_rsa.pub`