Olympic Games Rio 2016

Leandro Moreira distributed systems, high scalability, unix

TL;DR

Motivated by a friend, we’ll share bits of our experience during the Olympic Games Rio 2016. Before starting, I would like to clarify that Globo.com only had rights for streaming the content to Brazil.

We used around 5.5 TB of memory with 1056 CPU’s across two PoP’s located on the southeast of the country.

Screen Shot 2016-08-23 at 3.03.30 PM
Audience during the game BRA x SWE.

 

Not so long; I’ll read it

The live streaming infrastructure for the Olympics was an enhancement iteration over the previous architecture for FIFA 2014 World Cup.

Untitled Diagram (4)

The ingest point receives an RTMP input using nginx-rtmp and then forwards the RTMP to the segmenter. This extra layer provides mostly scheduling, resource sharing and security.

The segmenter uses EvoStream to generate HLS in a known folder watched by a python daemon and then this daemon sends video data and metadata to a cassandra cluster, which is used mostly as a queue.

Now let’s move to the user point of view. When the player wants to play a video, it needs to get a video chunk, requesting a file from our front-end, which provides caching, security, load balancing using nginx.

Network tip:

Modern network cards offers multiple-queues: pin each queue, XPS, RPS to a specific cpu.

affinity

When this front-end does not have the requested chunk it goes to the backend which uses nginx with lua to generate the playlist and serve the video chunks from cassandra.

Caching tip:

Use RAM to cache: a dual layer caching solution, caching the hot content (most current) on tmpFS and the colder content (older) on disk might decrease the CPU load, disk IOPS and response time.

You can find a more detailed view about the nginx usage at a two part article posted at nginx.com: caching and micro-services and a summary from Juarez Bochi.

This is just a macro view, for sure we also had to provide and scale many micro services to offer things like live thumb, electronic program guide, better usage of the ISP bandwidth, geofencing and others. We deployed them either on bare metal or tsuru.

In the near future we might investigate other adaptive stream format like dash, explore other kinds of input (not only RTMP), increase the number of bitrates, promote a better usage of our farm and distribute the content near of the final user.

Thanks @paulasmuth for pointing out some errors.

Functional Programing 101 :: WWH

Leandro Moreira developer, functional, javascript, pattern , , ,

function-machine

WWH: What? Why? How?

  1. What: a quick (hopefully, useful to real world) guide to functional programing using JavaScript strongly based on most adequate book.
  2. Why: it might empower you to write more robust programs: reusable, shorter, easier to reason about, less prone to error among others.
  3. How: by providing a quick textual introduction (WWH) followed by a simple code example and when possible a real code example.

Intro :: concepts

Functional Programing

What: a way to build code in which you use functions as the main design tool.

Why: might lead to code that’s easier to test, debug, parallelize, and understand.

How: thinking about what programs should do instead of how, using functions as the major unit to solve problems on computer.

First Class Functions

What: “functions are like any other data type and there is nothing particularly special about them – they may be stored in arrays, passed around, assigned to variables.”

Why: use functions to compose programs in a style that you can easily reason about, maintain, reuse and grow.

How: just create and use functions to solve problems.


// set to vars
var hi = function(name) {
return 'Hi ' + name
}
// rebound to other var
var greeting = hi
// an array of fns
var greetings = [hi, greeting]
// passed as arguments
var execIn1Second = function(fn) {
setTimeout(fn, 1000)
}

view raw

js.js

hosted with ❤ by GitHub

Pure Functions

What: “a function that, given the same input, will always return the same output and does not have any observable side effect.”

Why: with pure functions we can easily cache, debug, test and parallelize the processing of them. There is no state to understand / set up.

How: write functions that does not have side effect. Although we’ll eventually write programs that mutate values, we can certainly try to minimize it. (And when we do need to mutate values, we can use functions to help us)


// impure – because you can change promo value (side effect)
// and for the same input X it can produce a different output.
var promo = 40
var isPromo = function(price) {return price === promo}
// pure
var isPromo = function(price) {return price === 40}

view raw

pure.js

hosted with ❤ by GitHub

Basic toolbox :: currying

What: “You can call a function with fewer arguments than it expects. It returns a function that takes the remaining arguments.”

Why: you can promote the reusability to function level, you can use them to compose programs that expects another function

How: build a function with n parameters that returns n functions instead of the immediate result.


// an ordinary function
var sum = function(a, b){return a+b}
sum(1, 3) // 4
// a curried version of that sum
var curriedSum = function(a){
return function(b){return a+b}
}
var plusOne = curriedSum(1) // function(b) {return a+b}
plusOne(3) // 4
plusOne(1) // 2 -> plusOne is useful outside it's original scope
// a simple function to curry any other function
// we'll use this in future
// DO NOT USE THIS IN PRODUCTION
var curry = function(uncurriedFn){
var argumentsCall = []
return function curriedFn(){
var args = Array.prototype.slice.call(arguments)
if (args.length > 0) {
argumentsCall = argumentsCall.concat(args)
if (uncurriedFn.length == argumentsCall.length) {
return uncurriedFn.apply(this, argumentsCall)
}
}
return curriedFn
}
}
// an usage example of curry
var curriedAjax = curry(function(method, path){
return $.ajax(path, {method: method})
})
var ajaxGET = curriedAjax('GET')
var allUsers = ajaxGET('/users')
var allStars = ajaxGET('/stars')

view raw

curry.js

hosted with ❤ by GitHub

Medium toolbox :: composing

What: is the act of creating your programs using lots of functions.

Why: this promotes the reuse at a great level and forces you to think about what instead of how.

How: chain functions to produce a new callable function.


// a simple function to compose a function
// DO NOT USE THIS IN PRODUCTION
// you can skip the reading of this function if you want
var compose = function(){
var fns = Array.prototype.slice.call(arguments)
return function composed(){
var thisCall = this
var args = Array.prototype.slice.call(arguments)
fns.reverse().forEach(function(fn){
if (Object.prototype.toString.call(args) !== '[object Array]') args = [args]
args = fn.apply(thisCall, args)
})
return args
}
}
// take a list of Strings and return a list of up case strings
var toUpperCase = function(list) {
return list.map(function(x){return x.toUpperCase()})
}
// take a list of Strings and return a list of length
var length = function(list) {
return list.map(function(x){return x.length})
}
// take a list of Integer and return the sum
var sum = function(list) {
var sum = 0
list.forEach(function(x){sum += x})
return sum
}
// chain all these functions and produce a new
var sumCharsOnList = compose(sum, length, toUpperCase)
sumCharsOnList(["NX", "PS4", "XboxOne"])

view raw

composition.js

hosted with ❤ by GitHub


// brief explanation of what happens here
var sumCharsOnList = compose(sum, lenght, toUpperCase)
sumCharsOnList(["NX", "PS4", "XboxOne"])
// –> first the list ["NX", "PS4", "XboxOne"] is passed to the function toUpperCase
// –> toUpperCase returns another list and it's the input for the lenght function
// –> the lenght function return a list of integers which will become the input for sum function
// –> sum function will reduce the list summing all the integers and returning the sum

view raw

explanation.js

hosted with ❤ by GitHub

Example :: motivational

What: a better example to motivate you to go further with functional programing.

Why: most near real world examples are great to motivate you to learn something.

How: since you can see all the concepts together, I think you’ll notice the value.

You can see the example running at https://jsfiddle.net/swmrmgur/2/ and check the commented code down bellow.

Screen Shot 2016-04-27 at 2.17.19 PM


// _ is an instance of Ramda
// $ is an instance of jQuery
// This is an app extracted from the book
// mostly-adequate-guide/content/ch6.html
// it's query the flickr API's and mount
// a lots of images on the page
// IMPURE functions ahead
// takes a function (callback) and returns another
// function which takes an url
var getJSON = _.curry(function(callback, url) {
$.getJSON(url, callback);
})
// takes a selector and returns a functions
// which you can pass an html
var setHtml = _.curry(function(sel, html) {
$(sel).html(html);
})
// PURE, good and reliable functions ahead
// just create an image for a given url
var img = function(url) {
return $('<img />', {
src: url,
});
};
// just create an url for a given query
var url = function(t) {
return 'http://api.flickr.com/services/feeds/photos_public.gne?tags=&#39; +
t + '&format=json&jsoncallback=?';
};
// _.prop is a curried function which takes
// a property name and then an object
// ex: var getPrice = _.prop('price')
// getPrice({price: 3, x: "y"}) // returns 3
// takes an object extracts its media and
// then from the media it extracts the m property
var mediaUrl = _.compose(_.prop('m'), _.prop('media'));
// it takes a media url and create an image
var mediaToImg = _.compose(img, mediaUrl);
//it takes an object and extracts items from it
// map each one to an image
var images = _.compose(_.map(mediaToImg), _.prop('items'));
// it takes images and set
// them on the document.body
var renderImages = _.compose(setHtml('body'), images);
// given a string, it'll create an url and
// gets the json and render the images
var app = _.compose(getJSON(renderImages), url);
// given a query it'll create a page
app('cats');
// I strongly recommend you to read again from app to mediaUrl

view raw

flickr.js

hosted with ❤ by GitHub

Advanced toolbox & conclusion

I hope you might see the benefits you can have from using one or other technique from functional programming but for sure there are other benefits not shown here, I strongly recommend you to read the INCREDIBLE free book (gitbook) “Professor Frisby’s Mostly Adequate Guide to Functional Programming”, in fact, most of the ideas and examples here are from it.

There are advanced techniques to deal with data mutation with less pain, to handle errors and exceptions without try and catch and more abstractions that can help you and you can read them on the book.

And don’t use the handcrafted curry and compose built here (they’re far from production-ready), instead use a library like Ramda, which provides many basic functions like: map, filter and other all of them already curried, or lodash-fp.

Yeah, there no monado here. A special thank to Daniel Martins and Juarez Bochi, they helped a lot.

cover

From LXC to docker-machine and cloudery

Leandro Moreira distributed systems, high scalability, unix

Attention: this post provides a very quick and simplistic (but functional) vision of the promised title.

 

In the beginning

Linux is a fantastic OS, it has more than we imagine and it still manages to get better. There is a feature called cgroups:

which provides a mechanism for easily managing and monitoring system resources, by partitioning things like cpu time, system memory, disk and network bandwidth, into groups, then assigning tasks to those groups

Let’s say we created a cgroup with: 50% of cpu, 20% memory, 2% of disk and a virtual network with 100% of bandwidth, now we can run our application under that cgroups restrictions.

Another cool feature of Linux is LXC (linux-containers):

which combines kernel’s cgroups and support for isolated namespaces to provide an isolated environment for applications

Now we’re able to provide a Linux machine capable of running multiple applications that run in isolation (like if there was an isolated OS for each application). This sounds like something we achieved with virtualization (app-level, os-level, cpu-level and so on) but faster and cheaper and without the overhead of running multiple kernels.

31-containers-vs-traditional-virtualization

Docker

Docker is:

an open-source project that automates the deployment of applications inside software containers, by providing an additional layer of abstraction and automation of operating-system-level virtualization on Linux. This is what Docker is but remember, it is not perfect.

The highlighted part is very interesting, docker will provide you a layer of abstraction that allows you to create and deploy your application within a container (an isolated, resource managed place to run processes) in a standardized way.

Docker machine, compose and so on

Life almost always get easier with abstractions, we (developers) don’t worry about how disks works (drivers) or even how a package left your pc and hit another one (we should know how this works :P). Our productivity had increased a lot since we relied on these abstractions.

And this is the same for the docker ecosystem, as we start to use it more often. We create best practices, solve issues with workarounds and etc, some of these will become part of the docker solution.

  • docker-machine: An application needs a machine to run regardless if it’s local, physical, virtual or in the cloud.
  • docker-compose: An application needs a way to declare its dependencies, either packages or distinct services like datastore.

Step 0: get ready

  1. If you’re on MacOS/Windows you’ll need to install VirtualBox or VMWare
  2. If you’re on MacOS/Windows install docker toolbox otherwise apt-get them all

Step 1: create the app

Let’s say we’ll create a rails 4 application with mongo.


rails new myapp –skip-active-record

view raw

bash.sh

hosted with ❤ by GitHub

Step 2: declare the app and its dependencies

We declare our dependencies by using two files: docker-compose.yaml and Dockerfile. In the Dockerfile we’ll describe how our machine should be (aka: all need packages and stuffs).


# we'll use an existent image which already have ruby installed
FROM ruby:2.3.0
# creating our app folder
RUN mkdir /myapp
# move to this folder
WORKDIR /myapp
# move the Gemfile to our app's root folder
ADD Gemfile /myapp/Gemfile
# move the Gemfile.lock too
ADD Gemfile.lock /myapp/Gemfile.lock
# updates the system gem
RUN gem update –system
# run bundle install for production
RUN bundle install –without development test
# copy my code's folder to myapp
ADD . /myapp

view raw

Dockerfile

hosted with ❤ by GitHub

Then we can move to its broad services dependencies, like database or even web server. We’ll use mongo as datastore and nginx as the web server.


# we'll call our web app of web
web:
# it'll build this container based the docker file ./Dockerfile
build: .
# it'll run this command to star the server
command: bash -c "rm -f tmp/pids/server.pid || true && bundle exec rails s -p 3000 -b '0.0.0.0'"
# it'll export the port 3000
ports:
– "3000:3000"
# it links to db container (on mongoid.yaml at rail's config we say host: db:27017 it's linked)
links:
– db
# we called our db container of db 🙂
db:
# instead of building it from zero we'll use an existent image (see docker hub)
image: mongo
# it needs to persist data so we keep it (even if we "kill" the container)
volumes:
– /data/db
# we export the port 27017 :B
ports:
– "27017:27017"
# we'll use nginx as web server
nginx:
# it'll restart when the container does too
restart: always
# we're going to build this container from docker file ./docker/nginx/Dockerfile
build: ./docker/nginx/
# we're gonna expose 80
ports:
– "80:80"
# since we'll be a proxy we need to be linked to our web app (upstream= web:3000)
links:
– web:web

view raw

docker-compose.yaml

hosted with ❤ by GitHub


# we'll build our container from an existent image 🙂
FROM nginx
# for some reason we need to create this folder
RUN mkdir -p /var/lib/nginx/proxy
# copy our app config to nginx
COPY sites-enabled/myapp.conf /etc/nginx/nginx.conf

view raw

Dockerfile

hosted with ❤ by GitHub


# we'll use 2 processors/core
worker_processes 2;
# we set a new limit for open files for our workers
worker_rlimit_nofile 100000;
# we define how we're going to work
events {
# for each worker we'll handle 4000 requests (enquee them)
worker_connections 4000;
# we'll accept multiple
multi_accept on;
# we'll use epoll as a IO event notification
use epoll;
}
# our server
http {
server_tokens off;
include /etc/nginx/mime.types;
default_type application/octet-stream;
access_log off;
open_file_cache max=200000 inactive=20s;
open_file_cache_valid 30s;
open_file_cache_min_uses 2;
open_file_cache_errors on;
sendfile on;
keepalive_timeout 30;
reset_timedout_connection on;
gzip on;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 500;
gzip_disable "MSIE [1-6]\.";
# we created that folder because we save our cache in there
proxy_cache_path /var/lib/nginx/proxy levels=1:2 keys_zone=backcache:8m max_size=50m;
proxy_cache_key "$scheme$request_method$host$request_uri$is_args$args";
proxy_cache_valid 404 1m;
# we'll forward request to our web app at 3000
upstream app_server {
server web:3000 fail_timeout=0;
}
server {
# listening at 80
listen 80;
# compreess it
gzip_static on;
gzip_http_version 1.1;
gzip_proxied expired no-cache no-store private auth;
gzip_disable "MSIE [1-6]\.";
gzip_vary on;
# some security precautions
client_body_buffer_size 8K;
client_max_body_size 20m;
client_body_timeout 10s;
client_header_buffer_size 1k;
large_client_header_buffers 2 16k;
client_header_timeout 5s;
keepalive_timeout 40;
# let's get rid of simple attackers GET /admin/setup.php ….
location ~ \.(aspx|php|jsp|cgi)$ {
return 404;
}
# let's try to serve static files otherwise forward to app
try_files $uri $uri/index.html $uri.html @app;
# app is a proxy to our web app
location @app {
proxy_set_header X-Url-Scheme $scheme;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_redirect off;
proxy_pass http://app_server;
}
# let's serve error pages
error_page 500 502 503 504 /500.html;
location = /500.html {
root /myapp/public;
}
}
}

view raw

nginx.conf

hosted with ❤ by GitHub

Step 3: deploy it locally

We need to create a machine for it and then we need to run it.


# we'll create a "machine" called dev on virtualbox
docker-machine create –driver virtualbox dev
# let's use this machine
eval "$(docker-machine env dev)"
# let's take note of our docker-ip
docker-machine ip dev
# let's run this app
docker-compose up
# now go to your browser and type ip 🙂 it should show something

view raw

kremlings_back.sh

hosted with ❤ by GitHub

Step 4: deploy in the cloud

The same way we created a machine to run our app locally ,we can create any number of machines to run this application, even in cloud environment such as digitalocean, aws, azure, google and etc.

That’s it 🙂 for a more explained rails app docker workflow read this great post or yet a fresh new example of docker-compose.yaml.


# creating an amazon machine
docker-machine create –driver amazonec2 –amazonec2-access-key XXX –amazonec2-secret-key "xxxxx" –amazonec2-vpc-id vpc-xxx –amazonec2-zone Y amazon
# creating a digital ocean machine
docker-machine create –driver digitalocean –digitalocean-access-token=XXX do
# let's take note of our ip
docker-machine ip amazon
# let's deploy our application
docker-machine up

view raw

bob_ross.sh

hosted with ❤ by GitHub

// TODO: some things

Let’s suppose we just created a staging environment and another developer come to help us, it seems that there is no an official way to share our created machine (amazon, google app engine, azure, digital ocean…) with team members. There are some workarounds but it’ll be nice to see this becoming a feature.

Troubleshooting

  • Useful commands to troubleshooting, exploration and debug:
    • To enter on a machine: $ docker-machine ssh staging (either local or cloud)
    • To enter on a container: $ docker-compose run db bash (either local or cloud)
    • To list files within a container: $ docker-compose run db ls -lah data/db
    • To edit/add/remove data on mongo: $ mongo –host DOCKER_IP
  • If you face any error like E: Failed to fetch … during the docker-compose build try it again
  • If you face any error like “Error creating machine: Error running provisioning: Unable to verify the Docker daemon is listening: Maximum number of retries (10) exceeded” during any deployment, try to download docker-toolbox again and install it.

Google is your friend.

3 tips to make you a better developer

Leandro Moreira agile, developer, functional, javascript, object-oriented programming, pattern

four20puzzle

introduction

I’m sorry for the clickbait headline, I didn’t have a better idea/name for it.

We (developers) occasionally produce lazy/messy code and from time to time we need to remember the most important rule: “We do code to solve problems but also for human being be able: to use, to maintain and to evolute”. 

TLDR; (a unit can be a: function, var, method, class, parameter and etc)

  1. Naming your units with care and meaning;
  2. Try to see your code as a series of transformation;
  3. When possible make yours units generic.

Keep in mind that these tips are just my opinions and at the best they were based on: excellent books (Refactoring, DDD, Clean Coder and etc ), articles & blog posts,  excellent people I’ve worked/paired with,  presentations,  tweets and experiences.

naming is hard

Name your units with care and meaning. Your code should be easy to understand.

Although naming things is really hard, it is also extremely important. Let’s a see a snippet of code:


var topComments = (id) => {
var succCB = (d) => {
var a = d.data.comments
var top = []
a.sort((d1, d2) => {
return new Date(d1.date) – new Date(d2.date)
})
a.forEach((c) => {
if (c.isTop()) {
top.push(c)
}
}
app.topComments = top.slice(0,10)
}
var errCB = (e) => {
this.sendError(e)
app.topComments = []
}
this.ajax(`/all/${id}/comments/`, succCB, errCB)
}

view raw

0-top-comments.js

hosted with ❤ by GitHub

Let’s discuss about this code above:

  • the function topComments receives an id but is it the id from the comment, user, article? Let’s say it’s form the user, therefore userId should vanish this doubt.
  • the name of the function is topComments but it looks like it’s getting the top 10 latest comments only thus we could call it top10LatestCommentsFrom.
  • the ajax function accept two callbacks one in case of success (succCB) and otherwise an error (errCB), I believe we can call them: onSuccess and onError for better understanding.
  • all the arguments are using short names and we can have less confusing names just by using the entire name.
  • you got the ideia, naming things to let the code clear!


var top10LatestCommentsFrom = (userId) => {
var onSuccess = (rawData) => {
var topLatestComments = []
var allComments = rawData.data.comments
allComments = allComments.sort((date1, date2) => {
return new Date(date1.date) – new Date(date1.date)
})
allComments.forEach((comment) => {
if (comment.isTop()) {
topLatestComments.push(comment)
}
}
app.topComments = topLatestComments.slice(0,10)
}
var onError = (error) => {
this.sendError(error)
app.topComments = []
}
this.ajax(`/all/${userId}/comments/`, onSuccess, onError)
}

view raw

1-top-comments.js

hosted with ❤ by GitHub

Although we still have so many problems in this code, now it’s easier to understand and we only named things properly.

For sure there are some cases when short names are just okay, for example: when you’re developing an emulator or virtual machine you often use short names like sp (stack pointer) and pc (program counter) or even doing a very generic unit.


class LR35902 {
init() {
this.pc = this.sp = 0x0000
this.a = this.b = this.c = this.d = this.e = this.f = this.f = this.h = this.l = 0x00
}
execute() {
var opCode = memory.read(this.pc)
this.perform(opCode)
this.pc += 2
}
}

view raw

cpu.js

hosted with ❤ by GitHub

filter -> union -> compact -> kick

Try to see and fit your code as transformations, one after another.

Some say that in computer science almost all the problems can be reduced to only two major problems: sort and count things (plus doing these in a distributed environment), anyway the point is: we usually are coding to make transformation over data.

For instance our function top10LatestCommentsFrom could be summarized in these steps:

  1. fetch comments (all)
  2. sort them (by date)
  3. filter them (only top)
  4. select the first 10

Which are just transformations over an initial list, we can make our function top10LatestCommentsFrom much better with that mindset.


var onError = (error) => this.sendError(error)
var byDate = (date1, date2) => new Date(date1.date) – new Date(date1.date)
var onlyTops = (comment) => comment.isTop()
var top10LatestComments = (rawData) => {
app.topComments = rawData.data.comments
.sort(byDate)
.filter(onlyTops)
.slice(0, 10)
}
var userId = 68
ajax(`/${userId}`, top10LatestComments, onError)

view raw

2-top-comments.js

hosted with ❤ by GitHub

 

By the way this could lead you to easily understand the new kid on the block sometimes referred as Functional Reactive Programming.

<be generic>

Work to make your units generic.

Let’s imagine you are in an interview process and your first task is to code a function which prints the numbers 1, 2 and 3 concatenated with “Hello, “. It should print: “Hello, 1” and then “Hello, 2″…


var printNumbers = () => {
[1,2,3].forEach((number) => console.log(`Hello, ${number}`))
}
printNumbers()

view raw

interview1.js

hosted with ❤ by GitHub

Now they ask you to print also the letters: “D”, “K” and “C”.


var print = (list) => {
list.forEach((number) => console.log(`Hello, ${number}`))
}
print([1,2,3])
print(["D","K","C"])

view raw

print2.js

hosted with ❤ by GitHub

It was the first step toward the “generic”, now the interviewers say you have also to print a list of person’s name but now it’ll be a list of objects [{name: “person”},…].


var print = (list) => {
list.forEach((item) => {
// naming become harder 😦
var itemDescription
if (typeof item === "object") {
itemDescription = item.name
} else {
itemDescription = item
}
console.log(`Annyong, ${itemDescription}`)
})
}
print([1,2,3])
print(["d","k","c"])
print([{name: "Buster Lose Seal"}, {name: "Neo Cortex"}])

view raw

print-person.js

hosted with ❤ by GitHub

Things start to get specific again and the interviewers want to test you. They ask you to print a list of car’s brand [{brand: “Ferrari”}, ..] plus a list of game consoles with their architecture [{name: “PS4”, arch: “x86-64”}, …]


var print = (list) => {
list.forEach((item) => {
var itemDescription
if (typeof item === "object") {
itemDescription = item.name || item.brand
if (item.arch) {
itemDescription = `${item.name} – ${item.arch}`
}
} else {
itemDescription = item
}
console.log(`Hello, ${itemDescription}`)
})
}
print([1,2,3])
print(["D","K","C"])
print([{name: "Buster Lose Seal"},{name: "Neo Cortex"}])
print([{brand: "Ferrari"}, {brand: "Mercedes"}])
print([{name: "N64", arch: "MIPS"}, {name: "3DS", arch: "ARM9"}])

view raw

print5.js

hosted with ❤ by GitHub

Yikes, I suppose you’re not proud of that code and probably your interviewers will be little concerned about your skills with development, let’s list some of the problems with this approach.

  • Naming (we’re calling a person of an item)
  • High coupling (the function print knows too much about each printable)
  • Lots of (inner) conditionals 😦 it’s really hard to read/maintain/evolute this code

What we can do?! Well, it seems that all we need to do is to iterate through an array and prints an item but each item will require a different way of printing.


var defaultPrint = (item) => console.log(`Hello, ${item}`)
var myForEach = (list, printFunction = defaultPrint) => {
list.forEach((item) => printFunction(item))
}
myForEach([1,2,3])
myForEach(["D","K","C"])
myForEach([{name: "Tomba!"},{name: "Neo Cortex"}], (person) => defaultPrint(person.name))
myForEach([{brand: "Ferrari"}, {brand: "Mercedes"}], (car) => defaultPrint(car.brand))
myForEach([{name: "N64", arch: "MIPS"}, {name: "3DS", arch: "ARM9"}], (console) => defaultPrint(`${item.name} – ${item.arch}`))
// in fact we could even use `Array.prototype.forEach` function and avoid the duplication with `myForEach`
// (which does basically what forEach does)
// var forEach = Array.prototype.forEach
// forEach.call([{name: "Tomba!"},{name: "NeoCortex"}], (person) => defaultPrint(person.name))

view raw

cleaner.js

hosted with ❤ by GitHub

 

I said naming is important but when you make something very generic you should also make the abstract names not tied to any concrete concept. In fact, in Haskell (let’s pretend I know Haskell) when a concrete type of something may vary we use single letters to take their place.


function makelist(x) {return [x]}
makelist(document.head[0])
makelist("DKC:TF")
makelist("6502")
makelist(0xf13e455d7a1b96cd2d930e578284d889)

view raw

very-generic-function.js

hosted with ❤ by GitHub

Bonus round

  1. Make your units of execution to perform a single task.
  2. Use dispatch/pattern matching/protocol something instead of conditionals.
  3. Enforce DRY as much as you can.