Progressive Web Apps (PWA's)

Today, we install an app on our mobile phone using the app stores available for each operating system. This process allows us to find our favorite apps and companies, like Apple and Google, use this model to make money.

The mobile apps appeared with the intention of adding functionalities to a mobile phone. Apps work more closely to the hardware, so it’s more easy to do software that uses things like GPS, Blueototh, NFC, Accelerometer, etc. This provides rich applications to users and better user experience in detriment of using a browser. However, in the last few years, the web browsers and web technologies (like JS frameworks) evolved a  lot!

The Progressive Web Apps (PWA’s) appear in this context. Basically consists on Rich Web Apps with the functionalities of the mobile devices. In a simple way, imagine an Web App with GPS or bluetooth functionalities… Today, web browsers doesn’t show only websites, they show rich apps that can be even more rich with some of the features of PWA’s.

PWA’s could be the next big thing on web development. It could redefine the way we use mobile apps and the way we explore the web.

Advantages

Nowadays a company that pretends to offer a complete software solution has to worry to hire specific resources to accomplish the mobile and web developments. Beyond this, the server API’s also may need to adapt to each client component. On this situation, companies has to hire different specialists to accomplish the all solution. This means more money and more time to market. The PWA’s tries to minimize this problem. In a simple way, you develop one time, and the solution will work on any kind of device. It is an website which may have app features. On this way you only need one team to build all  the client solution.

Another advantage consists on the installation process of a mobile app. Today, a user must take some steps before start using the app: go to the app store, search by the app, install, authorization to install… All this steps has the consequence of loss of potential users. Every Step Costs You 20% of Users
PWA’s can also minimize this. You use a PWA like a webpage access, so you don’t need to access to an app store. Also, we do not have to worry about updates to each application anymore.

Today, a user visits an average of 100 unique sites per month, but spends 10 times less on a site than an app. However, the time spent on apps is only done on the same 3 or 4 apps. PWA’s try to bring together the best of both worlds, users spending more time on the app (such as mobile apps) and easier access to more apps (just like traditional websites).

Service Worker

In technical terms, the role of the Service Worker is the hallmark of this new standard of development.

PWA Architecture
Progressive Web App Architecture

Technically the Service Worker consists of a Javascript script that runs in the background in the client (browser). This way you can synchronize with the server or launch notifications for the client independently of the user’s navigation. With this service you can also manage the application cache. When running the application, the Service Worker can load the information directly from the local cache instead of always making the request to the server as in a common web page. The programmer can now define more autonomy in the client by minimizing requests to the server. “App load may be almost instantaneous just like a native app!”

Currently, not all browsers support Service Worker. However, everything indicates that it is a matter of time. Chrome, Firefox or Opera are some of the browsers that already support this technology. Support for Microsoft’s Edge is under development and there are already some indications that Apple supports technology in Safari.

Features

Some features of PWA’s are:

  • Compatible with any device. (as long as the browser supports it)
  • Fast loading! (probably at first load may be a bit slower if compared to a native application)
  • It is responsive and so adapts to any screen.
  • Native appearance. “Same as an app… “
  • No installation required. (And you can add a “link” to your smartphone’s home screen, simulating access to current mobile apps)
  • Works Off-Line! (Thanks to Service Worker)

Resistance to Change

There seems to be only advantages with PWA’s, but for mobile application mediators it may not be very enjoyable to end up with their stores. Nowadays, the stores bring a lot of money to Google and Apple. With PWA’s, new business models will have to be introduced…

Current Applications

There are already many applications with PWA technology. Some examples can be seen at this link: https://pwa.rocks.

Google currently has a site that helps you understand PWAs in more detail. It’s interesting to see the investment that Google makes in trying to steer the market to this new standard. Even when this seems to go against the Android application store. On the other hand, it could be a bet on cloud services (like Firebase) to deploy your PWA’s.


Personally, I am very interested in this area. I always liked watching the evolution of the web and I’ve always been curious about the mobile. I did not deepen on mobile development because if I’m going to develop some app, I would have to launch one version to all systems. I would have to invest a lot of time, to build one app to different systems and I wouldn’t be good on any of them. Although later discovering solutions like Ionic, I ended up not having the opportunity to invest the time that I would want in this type of frameworks.

This was a little introduction to PWA’s. I hope you like.

My 90’s Video Games – Part II (Super Nintendo)

The Mini Super Nintendo was released few weeks ago and again that makes me get nostalgic.
This post is about the games I played as a kid on Super Nintendo.
Super Mario Kart was the main responsible for missing some of school classes. On two players mode is laughs from the beginning to the end of the race. You’ll never know when you gonna win… it can exist an red shell, or an lightning  that hits you a few meters from cross the final line. Today I still play Mario Kart on the Nintendo Switch and sometimes I take it with me for dinners with friends and is always a fun.

mariokart
Super Mario Kart
I like strategic games that involves construction, and the SNES has an master piece called “Sim City“. (Unfortunately this game is not on the Mini SNES).
At that time, having a game that I can build an entire city on my own was a “mind blow”. I think I like this kind of games because of the freedom that provides. Even today, I play Sim City 4! On Sim City you can manage the roads and trains structure, commercial, industrial and residential zones, green zones, growth taxes, provoke disasters, manage traffic… there’s a lot we can do on this game!
Sim City SNES
Sim City
I also played other games, like Super Mario World, F-Zero and Donkey Kong but was Super Mario Kart and Sim City that causes me more impact.
There are lots of games in the Mini SNES that I want to revisit. Right now I’m playing Super Mario World and F-Zero. The conclusion that I get is always the same: there are a few AAA games these days that can not match the game-play and the fun of some of SNES games.
 

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:

[code language=”javascript”]
var products = [
{
name: ‘Juice’,
cost: 4.2
},
{
name: ‘Rice’,
cost: 2
},
{
name: ‘Cookies’,
cost: 11.99
}
];
[/code]

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

[code language=”javascript”]
function logProducts(products){
for (var i = 0; i < products.length; i++){
console.log(‘product: ‘ + products[i].name);
}
}
[/code]

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:

[code language=”javascript”]
var logProducts = function(products){
for (var i = 0; i < products.length; i++){
console.log(‘product:’ + products[i].name);
}
}
[/code]

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

Let’s get more advantage from functions associated to variables:
[code language=”javascript”]
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);
[/code]

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:

[code language=”javascript”]
var logProductName = function(product){
console.log(‘product: ‘ + product.name);
}
products.forEach(logProductName);
[/code]

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?

[code language=”javascript”]
var sum = function(a, b) {
return a + b.cost;
}
var total = products.reduce(sum, 0);
[/code]
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:

[code language=”javascript”]
var ids = [‘products’,’basket’,’categories’];
var listOfElements = [];
for (var i = 0; i < ids.length; i++){
var el = document.getElementById(ids[i]);
listOfElements.push(el);
}
[/code]

Now the same behaviour using Map function:

[code language=”javascript”]
var getElement = function(id){
return document.getElementById(id);
}
var listOfElements = ids.map(getElement);
[/code]

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 it 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…)

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.