Blog

Offline First Progressive Web Applications

Offline First

What is the fundamental difference between an App and a Web Site? What is “that aspect” that makes you consider that an App is not well implemented and what we tolerate on a Web?

Obviously there are many differences. Mobile user experience, user interfaces adapted to gestures, access to device capabilities such as camera or GPS.

However, there is a key factor that makes us hate an App: not supporting being offline.

Can you imagine trying to access your previous emails and you can’t because you don’t have an Internet connection? It is frustrating on desktop Web, yes. But it is absolutely unbearable on mobile Web. And totally intolerable in an App / PWA.

pouchdb-no-internet

Service Workers

A service worker is a code script executed in background by the browser, separated from a web page, offering functionality to the Web that is not related to user interaction.

pouchdb-serviceworker

In other words, a service worker becomes something like a backend-on-browser, which runs code in parallel with the logic of the user interface and that allows to intercept and manage network requests as well as retrieve data from custom managed cache.

It is, in short, a technology that could allow offline user experiences since if there is no Internet connection the application’s requests are intercepted and resolved by a cache that returns (for example) the last available data.

Ok, this could solve intermittent Internet connections. But what about a total loss of continued Internet access?

Offline Work and Sync Data

Creating an offline user experience can be complex since there are many things to worry about as how to synchronize correctly when Internet comes back or how to manage conflicts when multiple users modify the same information at the same time.

Service workers are a great technology that allows partially solving problems through an infinite cache while there is no connection, but does not resolve conflicts or is able to mix information that has been modified in the client while other clients have also modified data and have already published that to Internet.

For this we need an offline operation and synchronization mechanism with conflict management.

PouchDB and 4-Way Data Binding

PouchDB is an in-browser database that allows applications to save data locally, so that users can enjoy all the features of an app even when they’re offline. Plus, the data is synchronized between clients, so users can stay up-to-date wherever they go.

pouchdb-logo

One of the best goal you can achieve using PouchDB is to implement 4-way data binding by keeping the Model, View, Serve & Offline Data all in sync while providing the user with a mature offline experience.

All CRUD operations performed with PouchDB are versioned in a history similar to the history of changes that occurs in a Git code repository. That is, if what you want to do is create a new data (CREATE), a new command (PUT) is versioned and added to the transaction log. If subsequently what is desired is to delete that same data (REMOVE) a new command (REMOVE) is versioned and added again to the transaction log.

That is, all CRUD requests add commands to the PouchDB history.

This allows PouchDB to compute which are the pending changes to be applied when uploading data to the server in a synchronization operation as well as correctly determining which are the changes in the server that must be applied in the local PouchDB database.

pouchdb-4way-data-binding

Example – To-Do PWA

We are going to create an example PWA to try all of this: a simple To-Do PWA that is automatically synced and also works in offline mode.

pouchdb-desktop-01

The application consists of a simple list of pending tasks that can be:

  • Created
  • Retrieved
  • Updated
  • Deleted

Since we are going to need a backend that synchronize all our data when connected, we will use an instance of CouchDB executed with Docker Compose:

version: '3'

services:

  couchdb:
    image: couchdb
    ports:
      - '5984:5984'

To start it, simply launch the following command:

$ docker-compose up

Once it is running it is necessary to enable CORS so that requests made by PouchDB from the PWA that will be executed in the browser can reach the CouchDB server:

http://localhost:5984/_utils

pouchdb-cors-config.png

Next we will create a PWA with Ionic Framework 4 and Angular 8:

$ ionic start todoapp blank

The item data model will have the following structure:

export interface Item {
  _id?: string;
  _rev?: string;
  title: string;
  description: string;
}

It will be necessary to create a new Angular Service that performs the CRUD operations of the PWA user interface:

import { Injectable } from '@angular/core';
import { Item } from '../models/item';
import PouchDB from 'pouchdb';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ItemsService {

  private readonly db = new PouchDB('items');

  constructor() {
    this.db.sync('http://localhost:5984/items', { live: true, retry: true });
  }

  async findAll() {
    const docs = await this.db.allDocs({ include_docs: true });
    return docs.rows.map(row => row.doc);
  }

  add(item: Item) {
    return this.db.post(item);
  }

  remove(item: Item) {
    return this.db.remove(item._id, item._rev);
  }

  update(item: Item) {
    return this.db.put(item);
  }

  changes() {
    return new Observable(subscriber => {
      this.db
        .changes({ live: true, since: 'now' })
        .on('change', _ => { subscriber.next(); });
    });
  }

}

We will modify the home.page.html page to display the PWA interface:

And the controller of that page will use the previously created service:

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { Item } from '../../models/item';
import { ItemsService } from '../../services/items.service';
import { AlertController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})
export class HomePage implements OnInit {

  items: Item[] = [];

  constructor(
    private alertCtrl: AlertController,
    private itemsService: ItemsService,
    private changeDetetorRef: ChangeDetectorRef
  ) {}

  ngOnInit() {
    this.itemsService.changes().subscribe(() => { this.refresh(); });
    this.refresh();
  }

  private refresh() {
    this.itemsService.findAll().then(docs => { this.items = docs; });
    this.changeDetetorRef.markForCheck();
  }

  async add() {
    const alert = await this.alertCtrl.create({
      header: 'New item',
      inputs: [
        {
          name: 'title',
          placeholder: 'Title'
        },
        {
          name: 'description',
          placeholder: 'Description'
        }],
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel'
        },
        {
          text: 'Add',
          handler: (item: Item) => { this.itemsService.add(item); }
        }
      ]
    });
    alert.present();
  }

  async edit(item: Item) {
    const alert = await this.alertCtrl.create({
      header: 'Edit item',
      inputs: [
        {
          name: 'title',
          placeholder: 'Title',
          value: item.title
        },
        {
          name: 'description',
          placeholder: 'Description',
          value: item.description
        }],
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel'
        },
        {
          text: 'Save',
          handler: (newItem: Item) => { newItem._id = item._id; newItem._rev = item._rev; this.itemsService.update(newItem); }
        }
      ]
    });
    alert.present();
  }

  remove(item: Item) {
    this.itemsService.remove(item);
  }

}

The end result is a synchronized PWA that allows you to continue working even when there is no Internet connection!

pouchdb-pwa-video

GitHub sourcehttps://github.com/okode/offline-todo-app

Demystified Elasticsearch with Elastic App Search

Elasticsearch

Most of our projects are Apps that we develop for our customers, usually natively or hybrid based on Ionic and Angular.

elasticsearch-logo.png

It is common that we need a full-text-search engine for contents where the user can type, in addition to being able to parameterize other data such as date, geolocation or filtering fields from selectable option lists.

Most of the times we recommend using Elasticsearch because it has many features that, sooner or later, end up being necessary to incorporate into our applications:

  • Clustering and high availability
  • Horizontal scalability
  • Snapshot and restore
  • Amazing powerfull search API
  • Support for aggregations
  • Ingest and management API

However, great power carries great… configuration. And not always is easy to implement searching in Elasticsearch or having a simple administration tool allowing from day 1 to have a simple environment on which to implement an MVP that can eventually become a killer app.

Until now…

Elastic App Search: Advanced Search Made Easy

It is amazing how easy it can be to implement an Elasticsearch-based environment that has everything you need to start creating a complete search application.

With Elastic App Search, the entire process is streamlined allowing you to concentrate efforts and resources on what matters most: create great applications that implement content search in a scalable manner, with control of results relevance, using well-maintained clients and robust analytics.

Starting a Simple Search Application

What if we create a simple application to search for food recipes? Next we will see the necessary steps to create our first application with Elastic App Search.

If you needed you can download all the contents from GitHub:

https://github.com/okode/appsearch

Creating Sample Data

To do this we will start from a sample data set that we can get from different sources (e.g. from TheMealDB: https://www.themealdb.com).

for first in {a..z}
do
    curl -s "https://www.themealdb.com/api/json/v1/1/search.php?f=${first}" | jq -s '[.[][][]]' >> data.json
done

This will create a data.json file with a data structure similar to the following:

[
    {
        "id": "52768",
        "meal": "Apple Frangipan Tart",
        "category": "Dessert",
        "area": "British",
        "instructions": "...",
        "thumb": "http://..."
    },
    {
        "id": "52872",
        "meal": "Spanish Tortilla",
        "category": "Vegetarian",
        "area": "Spanish",
        "instructions": "...",
        "thumb": "http://..."
    }
    ...
]

Running Elastic App Search With Docker Compose

Create the following docker-compose.yml file:

version: '3.7'

services:

  elasticsearch:
    image: docker.elastic.co/elasticsearch/elasticsearch:7.3.0
    environment:
    - "node.name=es-node"
    - "discovery.type=single-node"
    - "cluster.name=app-search-docker-cluster"
    - "bootstrap.memory_lock=true"
    - "ES_JAVA_OPTS=-Xms512m -Xmx2048m"
    ulimits:
      memlock:
        soft: -1
        hard: -1

  appsearch:
    image: docker.elastic.co/app-search/app-search:7.3.0
    environment:
    - "elasticsearch.host=http://elasticsearch:9200"
    - "allow_es_settings_modification=true"
    - "JAVA_OPTS=-Xmx2048m"
    ports:
    - 3002:3002

Notice that it is important to increase the maximum heap memory values for the elasticsearch and appsearch services from 512m to 2048m.

Once created it is necessary to start the services in order so that elasticsearch has enough time to start before appsearch starts:

$ docker-compose up -d elasticsearch
$ docker-compose up -d appsearch

If you need to monitor the status of the processes, you can do so with the following command:

$ docker-compose logs -f

This will show the following:

app-search-logs

Data Ingestion Using Elastic App Search Dashboard

Open the following address and you will see the Elastic App Search Dashboard:

http://localhost:3002

app-search-dashboard-home

Some of the concepts we know in Elasticsearch have a different name in Elastic App Search. Specifically, an index is renamed to engine in App Search.

Proceed to create a new engine called meals and load the previously created data.json file:

app-search-ingest

Simple Searching

From here it is possible to carry out simple searching using the Elastic App Search Dashboard UI:

app-search-query-tester.png

Internally, searches are executed by Elasticsearch, so it is always possible to visualize the actual search performed by Elasticsearch from behind:

app-search-query-tester-details.png

Configuring Synonims

For some searches the term tortilla (omelette in Spanish) is not suitable since it would be desirable for searches to return Spanish Tortilla when searching for omelette.

For this it is possible to configure the synonyms in a simple and intuitive way:

app-search-synonims.png

This allows subsequent searches such as the following obtaining the expected results:

Configuring Curations

In case you want to promote a particular search result in a special way, it can be done from the Curations option.

A curation helps people discover what you would most like them to discover. Or, what you would not like them to discover.

There are two curation parameters:

  • Promoted: Promote specific documents to have them appear in a prominent way. You can promote multiple documents per query, the array order representing the order in which they will appear.
  • Hidden: Hide specific documents so that they do not appear. You can hide multiple documents per query, the array order being unimportant because … they are hidden.

Configuring Relevance Tuning

One of the most powerful features of Elasticsearch is its ability to refine the relevance of some results over others. It is possible to enhance the fact that a result depends more on the search on a specific field than on others, by configuring the final score that Elasticsearch gives to each search result.

With Elastic App Search this configuration of relevance in the results is extremely simple to configure.

app-search-relevance-tuning.png

Analytics

Standard Elastic App Search includes a simple but powerful analytics dashboard where it is possible to visualize, filtering by dates:

  • Total number of queries
  • Total number of queries without results
  • Tags
  • Detailed analytics by searches performed by end users
  • Recent Searches

app-search-recent-queries.png

Continuous Integration and Deployment

As Okode grows, one of our top priorities has been to make our developers happy. Their mission is to create great applications focusing on what they do best: coding. All tasks related to construction, static analysis, packaging, signing or publishing in app markets must be automated to optimize their time and to remain focused on their work without distractions.

Adjusting the parameters and configuration of the continuous integration server becomes a crucial activity, where our engineers must balance costs, average construction times and development of support utilities for CI seeking optimization and continuous improvement.

Today we build more than 100 builds / day reaching production directly from CircleCI.

The results, when done well, bring a clear benefit to the organization and to the productivity of our software engineers which makes them, ultimately, happier coders.

Continuous Integration at Okode

Historically in Okode we have used continuous integration and deployment tools based on Cloud services. Services such as Jenkins or Travis CI have been crucial to initially define what our task workflows should look like based on each type of application developed. Creating a Cordova-based hybrid App that is published in the App Store is not the same as an Angular-based SPA Web site that is published in AWS S3 / AWS Cloudfount. And yet, both the App and SPA workflow share similar activities such as TypeScript code transpiling, static analysis, unit testing and e2e and WebPack packaging.

As more applications are developed in Okode, the need to align and orchestrate the construction of each one in a similar way becomes more evident, which has recently led us to develop even our own CLI!.

okode-cli

After evaluating different alternatives currently we have migrated all of our construction workflows to CircleCI because:

  • Allows us to use Linux nodes (vm or containers), use custom Docker images and build macOS for iOS.
  • Supports creating complex workflows for testing and building, with multiple parameterized conditional stages.
  • Allows access via SSH to a building node for debugging.
  • It is possible to install additional tools, SDKs and toolchains to the building nodes when necessary.
  • It’s very fast (incredibly fast!) finding a free node to start building.
  • Allows to share the workflow configuration in small snippets of .yml code called Orbs that can be reused between projects.

Agile Development Requires Fast Builds

Any commit, however small, needs to be validated by the continuous integration environment. Our developers publish hundreds of commits a day, integrating changes that evolve our customers’ applications to incorporate new functionalities into the main branch of development (usually develop when we use GitFlow).

Instead of running a full build of the application, which in many cases requires building on several platforms (iOS / Android), packaging, signing and sending to beta distribution channels such as Fabric, TestFlight or Google Play Alpha, we prefer to make a fast build performing the following tasks in parallel when possible:

  • Optimized build for production
  • Static analysis
  • Unit testing
  • E2E testing

circleci-workflow-simple

What we are looking for with this strategy is fail as soon as possible when it is detected that some of the metrics of code quality don’t pass. That is, we complete a fast build as quickly as possible so that the developer can fix errors detected as soon as possible and publish code changes to SCM to, again, launch a new fast build.

Only in case it is necessary to deliver a full new version of the application in a user testing environment (preproduction) or publishing for end users (production) is it when a more complete multichannel build workflow (iOS, Android, desktop Web) is made with packaging, signing and sending the bundles to the distribution channels.

Reusing Configuration Using CircleCI Orbs

When creating multiple mobile Apps, many of them based on the same technology, it became clear at Okode that it was necessary to have a building configuration reuse mechanism since most of them are all built in a similar way.

For example, for most our npm-based projects it is necessary to initially download the dependencies using npm install. However, since CircleCI supports cache between constructions, it is preferable to try to download the node_modules folder of a previous compatible build (as long as the dependencies have not changed, for which the md5 of the package-lock.json is calculated and compared) and if it is still necessary to install them, the operation is done with npm ci so there is no need to recalculate transitive dependencies and optimize their download.

All this process can be stored in an yaml snippet like following:

cache-key-npm: &cache-key-npm
  key: cache-npm-{{ arch }}-{{ .Environment.CIRCLE_JOB }}-{{ .Environment.CIRCLE_BRANCH }}-{{ checksum "package-lock.json" }}

executors:
  node:
    docker:
      - image: circleci/node:12

commands:
  npm-install:
    description: Run npm install
    steps:
      - restore_cache:
          << : *cache-key-npm
      - run:
          name: Installing NPM dependencies
          command: if [ ! -d "node_modules" ]; then npm ci; fi
      - run:
          name: Restoring package-lock.json
          command: git checkout package-lock.json
      - save_cache:
          << : *cache-key-npm
          paths:
            - node_modules

CircleCI allows to register configuration files in the Orbs registry so that they can be shared between different workflows or between different organizations:

circleci-okode-orb

There are more sophisticated examples where for some of our customers it is necessary to initiate a VPN connection to an AWS VPC so that the generated artifacts are stored in private binary repositories. These are some examples of common commands that typically need to be reused in different application construction workflows at Okode and that it is possible to share as an Orb in the CircleCI registry and import it into the .circleci/config.yml of each application that needs them.

circleci-workflow

Continuous Delivery: From GitHub to App Store / Google Play

How many builds can be made of an application and published for production? Well, it is true that the number is limited by the maximum frequency that the distribution channel can support (App Store for example requires an average time of Apple validation between 1 or 2 days before publication). However, this is not something that affects Web SPA applications or Cloud serverless services or microservices of a Kubernetes cluster. For these cases it is perfectly possible to reach production in seconds after the last git push command from a developer.

At Okode all our applications are automated to deliver to Google Play / App Store directly from CircleCI. Which is the same as saying directly from GitHub after the creation of a tag by the developer.

circleci-insights

Okode review

Okode review

At Okode we have a motto: rather than reducing the number of failures we must concentrate on reducing the average time between failures. It is evident that in a changing ecosystem, where the technology of yesterday little (or nothing) has to do with today’s, we can not achieve perfection since many factors are not within our reach in a reasonable time. Our customers value much more that we concentrate on being perfect by detecting fast and quickly bugs than having any (absolutely any) bug when we publish our Apps if this implies delays in the release.

However, this should not lead developers to relax and make mistakes, it is rather a philosophy for which we decided to prioritize more the detection and correction of bugs while trying to prevent them from appearing.

And last week we decided to have a break for a moment to talk internally about prevention issues in a monographic session of code review with every developer. And that’s why we call it Okode review.

We had the opportunity to review things such as:

  • Principle of sole responsibility: The idea is that a class / module should only have a reason to exist. It is more difficult than it looks. Normally, this principle should also be applied to the methods. A small rule would be that if we have to use “and” to describe what a class does, surely we are not applying the principle of sole responsibility well.
  • Open / Closed Principle: If we are working with an object-oriented language, are the objects open for extension and closed for modification? What happens if we need to add another “foo” ?.
  • Duplication of code: Basically refactor when necessary.
  • Patterns / Anti-patterns: This point will be given by the experience, but if we already know our project we can try not to stumble twice.
  • Names of variables and methods: Choosing the righ name of the classes, variables and methods is fundamental to allow the code to be correctly maintained by ourselves or by other developers of our team.
  • Readability: Is the code easy to follow? Have we had to pause the review to decipher it?
  • Coverage: Especially in new functionalities. Do the tests cover all the code? Are fault conditions covered? Are the tests easy to read?

Develop Apps with Flutter

Develop Apps with Flutter

It’s amazing how productive it can be to develop Apps with Flutter. The live reload mode is ultra fast and is very well integrated in Visual Studio Code.

Developing with Flutter and Visual Studio Code from Okode on Vimeo.

And yes, it is true: the user interface is rendered in its own native view without the need to use widgets from the native platform.

For those who are not familiar, Flutter is an open source mobile framework created by Google, based on its programming language, Dart. In February 2018, Google demonstrated the first beta version of the Mobile World Congress, and in May, it presented the third version in its I / O event. Currently Flutter is released in version 1.0 since the end of 2018 and is available for iOS / Android multiplatform development officially.

The reasons why Flutter increases the productivity of the multiplatform Apps development are:

Accelerates the developer’s workflow. Flutter maintains the state of the application even between modifications and recompilations of code so that when the code is reloaded the state of the App remains intact and the debugging can be continued where it was left. It is practically instantaneous and from the development point of view you can immediately see the changes as well as see the impact that only the most recent ones had.

Write the code only once and operate on multiple platforms. Developing on multiple mobile platforms is a challenge for most companies that create applications and with Flutter you can achieve an almost native result without making efforts for each platform.

The ready-to-use support for Material Design generates an experience of a native App. The Google team has invested in Material Design, its design language that allows you to manage from the animations to the shape and color of a button in the application. Google created a graphical interface library for Flutter to facilitate the rapid creation of a Material Design experience for Android and iOS applications that behave as expected from each operating system.

App Development for Business and Brands

App Development for Business and Brands

At Okode we are convinced that the development of mobile applications must be carried out in such a way that it is not necessary to maintain native code for each platform (iOS / Android).

Hybrid Apps make it easier for developers to work, since it is easy to create a single application that runs efficiently on different platforms without practically any additional effort and taking advantage of all the knowledge that Web designers and programmers already have in the Web-based hybrid technology frameworks. In addition, when necessary it is simple to be able to use the platform’s native functionality through the use of Cordova or Capacitor, allowing the technological innovations introduced by the big manufacturers to be used from hybrid Apps as if they were true native Apps. By developing in this way, the development times are greatly optimized, allowing companies and brands to reach the markets of applications in record time.

One of the most important decisions of this whole process is that you need a framework of advanced and high-quality mobile applications to create hybrid applications. Therefore, it is necessary to choose the mobile framework with prudence. Some of the best Frameworks of hybrid mobile applications for their characteristics and user experience are the following:

Ionic

Open-source, the preferred app development platform for web developers.

React Native

Open-source, Reusable Components. Developed by Facebook developer. Used by Facebook, Instagram, Uber Food etc. easily integrate native feature with Hybrid.

Flutter

Open-source, create hybrid-native apps using Dart VM for iOS / Android platforms. Flutter code is declarative, favours composition, and uses a single threading model. Its hot-restart and sub-second hot-reload is truly game-changing.

Progressive Web Apps & Accelerated Mobile Pages

Progressive Web Apps and Accelerated Mobile Pages

The development of mobile applications currently does not mean a binary decision between Native App and Web App: today we have to consider many other alternatives such as Hybrid App, Responsive Web Design, Accelerated Mobile Pages and Progressive Web Apps among others.

Initially the responsive Web design came with the idea of making the content of a website accessible from any type of device. But the final solutions that are developed do not fulfill the perfect adaptation of a site to each type of device. In many cases the problem lies in the adaptation of an existing site to mobile devices without following a mobile-first methodology.

Progressive Web Apps is a new way to create websites for which you want a user experience that combines the best of the Web and the best of the apps, including responsive design techniques, but not limited to them and incorporating additionally all those elements of the native apps that can be used from Web platforms.

Google created the term Progressive Web Apps (PWA) at the end of 2015 to give name to Web applications that are indistinguishable from mobile applications (apps), and thus, promote their development, while establishing the characteristics that a Web must fulfill to be considered within this category.

Some of the fundamental characteristics of the PWA that identifies them include the fact that they can be installed in a certain way on the user’s device allowing users to keep the most useful apps on their home screen without the hassle of having to search for them or install them from an app store since they can perform this operation directly from their standard web browser.

On the other hand, the massive use of the Web from mobile devices makes it fundamental to adapt the same to that type of devices. Not only in terms of user interface design, but also in addition to the fact that the average behavior of users accessing a website from their mobile device waits less than three seconds before canceling the loading of the website page (either partial or complete). This means that the techniques of responsive or even progressive web design are not enough to provide an excellent user experience but it is necessary to improve it with techniques such as the use of Accelerated Mobile Pages (AMP).

In a world where the mobile-first concept is becoming increasingly important, loading speed is essential to avoid losing the user and the mobile presents a greater challenge than the desktop, both for the stability of the connection speed and for the type of use that presents. The user requires fast delivery to avoid frustration and it is more difficult for users to have consideration for the fact that the network conditions affect the loading speed. However, maintaining a good design and some very common elements such as analytics, maps, monetization or integration with social networks can make it difficult to maintain a page with the desired performance.

The AMP project (Accelerated Mobile Pages) is an open project, without lock-in on a specific platform, which was born with the aim of helping developers to create agile and high-performance web solutions. To achieve this, it partially restricts web technologies to a subset of their technologies and with specific tools to cover an important part of the publishers’ needs to expose their information to their users.

Specifically, AMP defines three main components:

  • AMP HTML: HTML with restrictions but extended with specific AMP properties and tags in order to optimize the loading and rendering of AMP pages. A web application may choose to serve part or all of its content as AMP and have or not “non-AMP” versions for desktop or to enable functionality that can not be achieved with AMP technology.
  • AMP JS: JavaScript library that implements good AMP practices, managing the resource load and processing the AMP HTML tags. In addition, it makes optimizations in the HTML and CSS to optimize the rendering and force that all external content is loaded asynchronously to prioritize that the user sees the content as quickly as possible. The base library is responsible for these tasks and you can load specific modules for AMP components such as forms, image carousel, integration with social networks and other more dynamic contents including the integration of external supported players. The Javascript code itself is the biggest restriction that AMP imposes since in its beginnings it was detected as the main cause of performance problems. Only what they identify as “expressions” before user events are allowed (for example, by clicking on a button) and the set of valid operations is restricted.
  • AMP Cache: It is possible to further optimize access to content using services such as Google AMP Cache, a specific CDN for AMP content and providing you with a complete delivery layer to implement a four-layer architecture. This CDN, in addition to serving the content with the latest web protocols such as SPDY and HTTP / 2, validates that the content is really AMP fulfilling the expectations and makes transformations in the HTML as the sanitization of tags to avoid XSS attacks or the insertion of tags for pre-fetching.

2019 Technological Trends

2019 Technological Trends

Market research company Gartner, IT expert, published in the Symposium / ITxpo meeting one of the most complete lists the trends to pay attention to, where Artificial intelligence stands out, the Internet of things or the Edge of computing.

1.Autonomous things

Autonomous devices (AuT ) such as robots, drones or autonomous vehicles are within this category, defined as the use of artificial intelligence (AI) to replace functions previously made by people. This new autonomy explores Artificial intelligence to develop advanced behaviors that interact in a way similar to humans with the environment.

2. Augmented analytics

Analytics will increase is a report that will be published for the first time in Gartner’s annual report for 2017. This new capacity of data analysis to automate information through intelligence increase integration with Big Data and data mining, revolutionize the way to develop, share and Consume the analysis of the data.

3. AI-driven development

AI-driven development analyzes the tools, technologies and best practices for integration of AI into applications and their use to create AI-based tools for the process of developing. AI capabilities are transforming development to the point that the developers themselves are already are able to function independently by using predefined models, without having to collaborate with data scientists, well, Gartner predicts that by 2022 at least 40% of the new projects will application development will require them in the team.

4. Digital Twins

Digital twins are the digital representation of a real world entity or system. Gartner estimates that by 2020 there will be billions of them to monitor the behavior of more than 20,000 million connected sensors and endpoints. The consultant points out that there will also be digital twins for billions of these solutions, with the order to monitor their behavior.

5. Edge computing

Perimeter computing is applied above all to the Internet of Things and consists of the location of points intermediate between the connected objects in order to process information and perform other tasks more physically close to the sources of the information, to optimize the response time and reduce the traffic. Gartner expects an increase in the incorporation of Artificial Intelligence chips in devices perimeter Its wide application in a variety of devices from industrial to screens, telephones smart, automotive …

6. Immersive technologies

Virtual Reality, Augmented or Mixed, Conversational Interfaces, etc … will provide experiences more immersive through the incorporation of additional sensory characteristics. This potential will allow new immersive experiences capable of detecting forms, tracking position, interacting, what will allow companies with products and services a new interaction experience through the incorporation of additional sensory characteristics.

7. Blockchain

The Blockchain, one of the technologies with the most potential, will continue to grow and expand due to the new profits that are being explored, and not only in the financial sector, since it is beginning to be applied in the industrial sector, which is transforming. Its growth is estimated from 4% to 60%. The upward trend of this technology can generate a bubble, as Steve Bozniak pointed out, then allow a normalization in the application of the blockchain.

8. Smart Spaces

Smart spaces are digital or physical ecosystems where the interaction between people and / or systems in collaboration with technology, they interact in connected environments for a more immersive experience, Interactive and automated. These spaces are monitored with technology that measures and collects the behaviors with analytics to know the statistics and behaviors of the users, ratios, segmentation etc …

9. Digital ethics and privacy

Ethics and privacy are a growing concern for individuals, organizations and governments, so that a greater focus on compliance and mitigation of associated risks is expected, to protect personal information.

10. Quantum computing

Advances in quantum computing can lead to accelerated research and problem solving in many industries, from financial services and insurance to pharmaceuticals, defense and automotive. It is a type of non-classical computing that operates in the quantum state of subatomic particles that they represent information as elements called quantum bits (qubits).

Chat Widgets

Chat Widgets

The Web is an open platform that allows creating user experiences that adapt to all types of channels. The integration of Chat Widgets into existing tools such as WhatsApp creating interfaces similar to those offered by the Apps and even being based on the same common code when it comes to Hybrid Apps. Is an interesting experience that can be exploited in the future to minimize costs, communication development and multichannel interaction merging Chat, Web and Apps channels in an intelligent way.

We all know the chats. Applications such as WhatsApp, Telegram, Slack or Messages that include text media embed images, icons, links or videos among other types of messages. A chat widget is an enriched element of user interface, interactive and that is integrated in a natural way with the rest of the chat conversation is enriched in a much broader way than what you can use text or images in general.

Chat Widgets and a Dashboard with two different objectives

Build and validate a set of Web functional modules that can be used to improve communication  end customers through different channels based on social networks or chats. Our idea has been to create Chat Widgets as rich and interactive elements of the user interface and that would be integrated with the rest of the messages in the chat conversation, making it possible to enrich it better than the simple text or images in general.

Have a tool where the available templates of Chat Widgets are displayed in a visual palette of widgets accompanied by the relevant user information such as personal data, hiring data, latest services used and other useful information. The Chat Widgets are available from a preconfigured list of types of widgets (templates) that when being “dragged and dropped” on the chat are automatically instantiated in the user interface of the final client.

Next Steps

Use the context information to assist in the selection of the most appropriate Chat Widgets templates according to the case in each case, applying automatic techniques where bots can interact with clients and select the Chat Widgets without human intervention.

CHAT WIDGETS
Event:
Demo Day
Industry: Insurance
Tags: Web / Mobile / App

Cloud Native Application Development

Innovate for a Better Future.

We are an enterprise leadership in Mobile Business Application Development. As a technology-based company we’re specialized in innovative global solutions for international customers in different sectors such as insurance, banking, marketing, communications and logistics.

We have a highly specialized team of full-stack software engineers, which allows us to start agile application developments immediately, regardless of the technology you needed. We make technology migrations, creating minimum viable productos and helping to expand the experience and the ability of our customers development teams so that they are able to maintain their solutions in an environment of permanent continuous change.

Digital Transformation is not an option, is the strategic opportunity to incorporate new technologies so that your business is more efficient and allows new opportunities.