Functional JavaScript: forEach, map and reduce

Today, JavaScript is one of the most popular programming languages. Over time it has evolved and allowed to us build rich web applications and from a few years ago server applications also. However, writing code in JavaScript requires some attention, since the code could turn very messy easily. Functional Programming does not solve this problem at all, it is more an paradigm of writing code. It doesn’t tell you how do you structure your project as the popular frameworks like Angular or Vue.js.

This article is only about Functional Programming, I hope in the future to bring other articles about JavaScript and JavaScript Frameworks.

Now, let’s see some application of functional programming on JavaScript.

Considering the variable products that contains the properties name and cost:

var products = [
 {
  name: 'Juice',
  cost: 4.2
 },
 {
  name: 'Rice',
  cost: 2
 },
 {
  name: 'Cookies',
  cost: 11.99
 }
];

To print the description of all products on browser console we can build an function like this:

function logProducts(products){
 for (var i = 0; i < products.length; i++){
  console.log('product: ' + products[i].name);
 }
}

This function makes an interaction through the list of products with for instruction to show the description of each product.

We can also specify the same behaviour with the follow function:

var logProducts = function(products){
 for (var i = 0; i < products.length; i++){
  console.log('product:' + products[i].name);
 }
}

The difference now is that we haver an variable that contain an function (logProducts).

Let’s get more advantage from functions associated to variables:


var logProducts = function(products){
 for (var i = 0; i < products.length; i++){
  console.log('product: ' + products[i].name);
 }
}

var doSomethingWithProducts = function(products, doSomething){
 doSomething(products);
}

//execute
doSomethingWithProducts(products, logProducts);

The code was changed a little. Yet, Even in terms of behaviour nothing changes. The main difference is on pass of the function “logProducts” as a parameter to “doSomethingWithProducts”. It doesn’t look very useful at the moment, but is this functionality that allows to JavaScript apply the principals of functional programming.

To show the name of all products we had to create a for instruction and a variable to control the iteration (based on imperative programming).
However, if we use the forEach function we can simplify the code:

var logProductName = function(product){
 console.log('product: ' + product.name);
}

products.forEach(logProductName);

Now we can see some advantages. The code is more clean and we do not need an auxiliary variable to iterate through the products.

And if we want to get the total cost of the products?

var sum = function(a, b) {
 return a + b.cost;
}

var total = products.reduce(sum, 0);

The reduce function returns only one value. The return is the accumulated result of the last call of the function “sum”.

Using other example, imagine that we need to get the element object for each identifier.
Let’s take a look on the follow code using imperative programming:

var ids = ['products','basket','categories'];

var listOfElements = [];
for (var i = 0; i < ids.length; i++){
 var el = document.getElementById(ids[i]);
 listOfElements.push(el);
}

Now the same behaviour using Map function:

var getElement = function(id){
 return document.getElementById(id);
}

var listOfElements = ids.map(getElement);

This “way” of programming requires some practice but in my opinion it allows to have more clean code and more adapted to the functionality that as consequence is more comprehensive.

This article was an little introduction to functional programming using the ForEach, Reduce and Map functions.

My 90’s Video Games (Nintendo)

Video games is part of my life and of my childhood. In this article I’m gonna be a little “older” and talk about games that I enjoy most in the 90’s years. This is not about the better or worst games, it is about games that I used to play on my childhood and somehow they marked me in some way. At the moment I still enjoy play video games, but not sure why, it’s not the same as old times.

My first video game console was a Nintendo (The Classic NES). I received it in 1993 or 1994 and it was a really good surprise! Even when some neighborhood friends had already the Sega Megadrive (with “that rapid games” and stunning graphics…) I resist to that, I stayed with Mario and his friends.
I had five games and I played them a lot. Every time I turned off the console I had to start it all again because the option “save game” doesn’t existed yet. But as all kids, I had a lot of time and that was not a big issue.

Super Mario Bros was the first game I played. It came with the console. The classic sound, the colors, the scenarios. Even 5-6 years after the worldwide launch it stills very enjoyable. However, I don’t know why, but I can’t detail any specific part of this game that caused me some impact.

si_3dsvc_supermariobros
Super Mario Bros

Ninja Gaiden II. This game was a very hard one. Very good, with the main character climbing walls and ninja powers. But without checkpoints to progress the game it is almost impossible for me to progress. I did not choose the game, it just came to me. Fortunately, today I can enjoy it again on my Nintendo Classic Mini with the save option!

56433-ninja_gaiden_episode_ii_-_the_dark_sword_of_chaos_usa-1490984420-thumb
Ninja Gaiden II

My third game was Lion King. We are talking about 1994/95, the movie was a big hit on that time, and I just asked the game to my father. I was lucky! Honestly, the gameplay is not the best, but music (like the movie) and the scenarios with giraffes, hippos and monkeys…very nostalgic!

maxresdefault
Lion King

The next game was my favorite of the five. Super Mario Bros 3, the best game ever! Mario more pretty and more powerful on 8 big worlds. Now, each world has a graphic map and I can make my own path to get the final boss… But again, the game was so big, passing all levels without turn off the console was impossible unless we use the “flute” power to jump to other worlds. The multiplayer was a must, on the battle mode (based on Mario Bros) Mario and Luigi compete for the first to defeat three or five enemies to win. It was a rush! Long hours “battling” with my cousin.

57091-super_mario_bros-_3_usa_rev_a-3
Super Mario Bros 3 – Level 1

57092-super_mario_bros-_3_usa-11
Super Mario Bros 3 – World 1 Map
 

I implored for one soccer game to my father and luckily I was spoiled again! Tecmo Cup Soccer Game. I had to say, in the beginning I was a little disappointed but with time I liked it more and more. This is not a normal soccer game, now, I see it more as an “Cinematic Soccer” game with a mix of anime and role playing game. But at that time, I think I saw it as soccer game with Dragon Ball powers! It’s true, I can score a goal with a “hyper shot” or make a “wolf jump” to defense. It have a few types of shooting and defense that we’re going to unlock as we move through the game.
This game tells a complete story of Robin and his rivals and is very engaging.
Searching on the web, I also discover that was the first game based on the manga Captain Tsubasa. Today I would love if any producer wants to make a remake of this game.

tecmo-cup-soccer-game_3
Tecmo Cup Soccer Game – Gameplay

tecmo-cup-soccer-game-u-5b-5d-1
Tecmo Cup Soccer Game

(This is my first article full in English. I want to start writing all of my articles in English, I’m not good on it but at least I’m practicing…)

Progressive Web Apps (PWA’s)

As mobile stores, como a App Store ou Google Play, foi a forma que encontraram para centralizar todas as aplicações móveis de forma a ser mais fácil ao utilizador encontrar as apps que deseja instalar no seu dispositivo. A Apple e a Google aproveitaram estas stores como oportunidades de negócio. No entanto, com o tempo, a tecnologia evolui e/ou muda de paradigma e com isto os grandes players têm de se reinventar.

As apps apareceram com o intuito de acrescentar funcionalidades aos telefones móveis. Comparando com um simples website, a grande vantagem das apps é uma melhor experiência de utilização e acesso próximo ao hardware do dispositivo (GPS, NFC, Bluetooth, Acelerómetro, etc).
Entretanto os browsers evoluíram nos últimos anos e com o crescimento das frameworks e bibliotecas de javascript as aplicações web estão cada vez mais ricas!

É neste contexto que aparecem as Progressive Web Apps (PWA’s) que de uma forma muito resumida juntam às aplicações web funcionalidades do mobile.

As Progressive Web Apps poderão ser a próxima grande tendência no mundo do desenvolvimento Web. Este conceito pode redefinir a forma como utilizamos as apps no mobile e a forma como navegamos na web!

Principais Vantagens

Nos dias de hoje uma empresa que pretenda oferecer uma solução de software completa, tem de se preocupar com uma versão para iOS, Android e web. Para além disto, é preciso desenvolver toda a componente de servidor e por vezes adaptar as suas API’s para cada cliente (mobile e web). Nesta situação, as empresas têm de investir na contratação de técnicos especializados para cada tipo de tecnologia, o que torna o esforço financeiro gigantesco! As PWA’s podem minimizar este problema, visto que consistem numa só app adaptável a qualquer dispositivo. Comporta-se como um “site” e como uma app ao mesmo tempo. Assim é possível ter uma só equipa especializada para desenvolver o front-end da solução.

Outra vantagem é justificada pelo facto de que todo o processo de instalar uma app faz com que o utilizador tenha de executar alguns passos até a começar a usar. Todas estas etapas fazem perder utilizadores. Every Step Costs You 20% of Users
Com as PWA’s, o acesso é instantâneo, é como se fosse uma página web, logo não precisamos de aceder à App Store ou Google Play. Além disso, não precisamos de nos preocupar com atualizações de cada aplicação.

Hoje, um utilizador visita em média cerca de 100 sites únicos por mês, mas gasta 10 vezes menos tempo num site do que numa app, por sua vez, o tempo gasto nas apps é feito apenas nas mesmas 3 ou 4 apps.
As PWA’s tentam juntar o melhor dos dois mundos, utilizadores a gastar mais tempo na aplicação (tal como nas apps mobile) e acesso facilitado a mais aplicações (tal como os tradicionais sites).

Service Worker

Em termos técnicos o que mais marca neste novo padrão de desenvolvimento é o papel do Service Worker.

PWA Architecture
Arquitetura Progressive Web App

Tecnicamente o Service Worker consiste num script de Javascript que é executado em segundo plano no cliente (browser). Desta forma será possível efetuar sincronizações com o servidor ou lançar notificações para o cliente de forma independente da navegação do utilizador. Com este serviço será possível gerir também a cache da aplicação. Ao executar a aplicação, o Service Worker pode carregar a informação direta da cache local em vez de efetuar sempre o pedido a servidor como numa página web vulgar. O programador pode agora definir mais autonomia no cliente minimizando  os pedidos ao servidor. “O carregamento da aplicação poderá ser quase instantâneo tal como uma app nativa!”

Atualmente nem todos os browsers suportam Service Worker. No entanto, tudo indica que se trata de uma questão de tempo. O Chrome, Firefox ou Opera são alguns dos browsers que já suportam esta tecnologia. O suporte para Edge da Microsoft está em desenvolvimento e já existem alguns indícios de que a Apple suporte a tecnologia no Safari.

Características

Algumas características das PWA’s são:

  • Compatíveis com qualquer dispositivo. Seja ele qual for! (desde que seja num browser compatível e a aplicação esteja bem implementada)
  • Rápido a carregar! (provavelmente no primeiro carregamento poderá ser um pouco mais lento se compararmos com uma aplicação nativa)
  • É responsivo e por isso adapta-se a qualquer ecrã.
  • Aspecto nativo. “Igual a uma app… num browser!
  • Não precisa de instalação. (Mas é possível adicionar um “link” ao home screen do smartphone, simulando o acesso às apps mobile atuais)
  • Funciona Off-Line! (Graças ao Service Worker)

Resistência à Mudança

Parece só haver vantagens com as PWA’s, mas para os mediadores de aplicações móveis pode não ser muito apetecível terminar com as suas lojas de aplicações. Nos dias de hoje, as stores trazem muito dinheiro à Google e Apple. Com as PWA’s vão ter de ser introduzidos novos modelos de negócio. Desta forma, parece-me ser uma contrariedade (pelo menos para a Apple), querer avançar para um suporte completo às PWA’s nos seus dispositivos móveis. Estou bastante curioso com a forma como o mercado vai evoluir neste campo…

Aplicações

Já existem muitas aplicações com tecnologia PWA. Alguns exemplos podem ser vistos neste link: https://pwa.rocks.

A Google atualmente disponibiliza um site que ajuda a compreender de uma forma mais detalhada as PWA’s. É interessante ver o investimento que a Google faz em tentar direcionar o mercado para este novo padrão, mesmo quando este parece ir contra a loja de aplicações do Android. Por outro lado, é mais uma aposta em serviços cloud (Firebase) para o deploy das PWA’s.


Pessoalmente, estou a ganhar imenso interesse nesta área. Gosto de estar atento ao progresso na web e sempre tive alguma curiosidade pelo mobile. Não aprofundei mais o mobile até aos dias de hoje porque se desenvolvesse uma aplicação, teria de lançar uma versão para o Android e outra para o iOS. Teria de investir muito tempo, e no fundo nunca seria suficientemente bom numa delas. Apesar de mais tarde descobrir soluções como Ionic, acabei por não ter oportunidade de investir  o tempo que desejaria neste tipo de frameworks.

Esta foi uma pequena introdução aos PWA’s. Espero que gostem!

O Início

Olá,

Este é o primeiro post do meu novo blog. Neste, pretendo partilhar ideias, tutoriais, opiniões e experiências que tenho tido no mundo das tecnologias. Espero que gostem!

Tenho 31 anos e atualmente trabalho na área das tecnologias da informação, nomeadamente no desenvolvimento de software e consultoria informática.

Foi com 12 ou 13 anos que tive o primeiro computador pessoal em casa. Este já veio obsoleto! O sistema operativo era o Windows 95, e arranjar software (nomeadamente jogos) era uma dificuldade, andavam os meus amigos a trocar os modernos CD-ROM’s e eu “desesperado” por encontrar um jogo que o meu computador conseguisse executar. Internet em casa? só quando fosse maior de idade! – diziam os meus pais. Restava-me assim os espaços públicos para poder “navegar” na internet e “sacar” os desejados mp3 que trazia para casa em meia dúzia de disquetes… Acreditem, na altura colocar um ficheiro de 3 – 4 Mb em disquetes era uma aventura! Havia pelo menos uma que ficava sempre corrompida. Depois era rezar que o media player do windows conseguisse reproduzir os ficheiros. Pois 16Mb de Ram e um processador a 75Mhz já não dava para muita coisa naqueles dias. O disco rígido era enorme: 500Mb! O SO e o Office já me “roubavam” uns 300 Mb, sobram então 200 e é se queres! (Hoje com menos de 1 Gb disponível no telemóvel ficamos logo em stress!)

001
Primeiro Computador

Com estas limitações tinha de me entreter de outra forma. Sem os jogos da moda e sem internet, para um miúdo de 12 anos era desafiante… imaginem hoje dar um computador a um miúdo e ele só poder abrir o Microsoft Word ou o Paint. No entanto, agradeço por ter sido desta forma, se não fossem estas limitações eu não teria ganho curiosidade por outros temas no mundo da informática: como se cria um programa ou uma página internet.

Na altura a suite do Office vinha com um editor de HTML incorporado (Microsoft Frontpage). Comecei inicialmente por fazer páginas estáticas apenas com links entre elas… e sendo um editor WYSIWYG as coisas tornavam-se fáceis. Só mais tarde comecei a ter curiosidade com o HTML. (Uma coisa de cada vez…)
A publicação das páginas? Colocava os ficheiros numa disquete, depois dirigia-me a um espaço público de internet e colocava-os no aeiou ou no sapo. O conteúdo já não me recordo bem, mas devia ser sobre videojogos ou uma simples página pessoal.

2148f
Microsoft Front-Page

Felizmente alguns amigos também estavam a despertar curiosidade no mundo da programação e um deles apresentou-me o QBasic. Foi o primeiro contato com a programação. O que consegui fazer era muito simples, limitava-me a If’s e GOTO’s, mas era o suficiente para fazer um “Quem Quer ser Milionário” ou uma espécie de Livro-Jogo.

QBasic_Opening_Screen
QBasic – Ecrâ Inicial

Era desta forma que dava utilização a um computador já velhinho na altura. Fez-me ganhar mais curiosidade pela área e marcar o início da minha aventura no mundo do IT.