Queries one after the other / RxJS examples

Another example use case of Angular-RxJS

You can find this example and other examples in my Gist Repository.

Launch a series of requests one after the other

In this example we launch a series of requests from information derived from an array. The requests are launched one after the other. This means a “next” request is launched only when the “previous” has been resolved.

The trick here is done by concatMap operator which does exactly what we want. So we create an Observable based on an array of initial values. Then concatMap will render them into a single stream the way we described above.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/from';
import { concatMap } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

...

const myEvents: number[] = [1, 2, 3, 4, 5];
const myobs = Observable.from(myEvents).pipe(
concatMap (evt => {
return this.http.get(`https://jsonplaceholder.typicode.com/postss/${evt}`);
}),
)
.subscribe( /* handle events here */);

Bypass errors

The above approach, will stop the stream if one of the requests returns an error. What if we wanted to continue with the next requests even if one of them returned an error?

The materialize operator wraps all events (Events, Errors, Complete) to a new object called Notification. Thus errors and “complete” events are treated as normal events and do not stop the stream. Of course you have to handle the errors-complete events.

1
2
3
4
5
6
7
import { materialize } from 'rxjs/operators';

...
return this.http.get(`https://jsonplaceholder.typicode.com/postss/${evt}`).pipe(
materialize()
)
...

Voxxed Days Thessaloniki 2017 / Activity Overview and Take-aways

This is quick overview of the sessions that I participated and the key take-aways I take away from this conference.

Day 1

It’s a small world after all

Sander was very inspiring. The world is changing in blazing fast speed and software development ecosystem is trying to catch up with the demands.

My key take-aways:

  • Small movable parts in the software is the future (aka microservices, nanoservices).
  • Stop doing projects, and start buiding MVPs (minimum viable products).
  • Think small, deploy early and frequently.
  • Continuous Delivery: Pick backlog item, build it, test it, deploy it,… (Google does it with Gmail).
  • Testers: test less and less, build automated tests more and more.

Dealing with Information Overload - Personal Productivity for Techies

We are bombarded with information and we need to absorb it all… or not? Scott is a charismatic presenter and he gave advice on how to stay focused on your tasks, and be productive while not getting overwhelmed.

My key take-aways:

  • Effectiveness is different than efficiency. Effectiveness is doing the right things. Efficiency is doing things right.
  • Drop the ball. You don’t have to read everything. Triage your inbox.
  • Importance Vs Urgency:
  • FOMO = Fear of missing out. Don’t FOMO. If something is important it will come back to you several times.
  • Right 3 things that you wish to do each day, week, year. At the end of each day, week, year evaluate if you did it.
  • rescuetime.com: Productivity tool to understand where you spend your time.

I personally would recommend to take a look also at:

Mobile Web Performance

Estelle presented concerns and pitfalls when building web pages that will be (surely) accessed by mobile devices.

Find her presentation here:
https://estelle.github.io/viewsource/

Elegant Angular

Jeremy actually presented an overview of the Angular framework and its strong points, inlcuding Typescript, and RxJS (ReactiveX).

You can find his presentation here:
http://codefoster.com/deck/elegant-angular

Error Handling Made Easy

Stratos and his team is preparing a very promising Error Handling library, and I can’t wait for the Javascript version of it.

You can find the library for Swift and Java here:

Thinking Reactive in Javascript

Ivan introduced reactive programming and then mainly quick introduced React and Cycle.js.

SonarLint & SonarQube

Freddy introduced the tools SonarLint and SonarQube that perform static analysis on your code and can spot bugs, vulnerabilities, etc. Also presented the general method of how to write a static code analyzer.

Key take-away:
You install SonarLint / SonarQube and you find a long list of potential bugs, and poor quality. What do you do?… Answer: NOTHING!!! It works. If you start refactoring you inject more possibilities for bugs.

Start taking care of the quality of your new code as you write it. You will at some point will have to touch/re-write your existing code. It is at that point that you increase the quality of your existing code. In the long term, the precentage of low quality code will fade to zero.

The Secret Sauce of Successful Teams

Sven did a presentation on what are the characteristics of a successfull team, and the team practices they use at Atlassian.

It’s all summed up here:
Atlassian’s Team Playbook

Day 2

Javascript and the Rise of New Virtual Machine

Scott presented in his own unique way how the browser and Javascript are becoming the new platform that everything probably will be running on.

Serverless Computing & the rise of nanoservices

Paris explained and demonstrated how to get started with writing Azure functions. The future will be become more and more micro/nano-served.

AI and UX for Chatbots: A Practical Guide for Developers

Chatbots are on the rise and most probably will be the new mobile app. Dimitris and Stavros (the Chatbot ninjas) explained what a Chatbot is, how it is structured and how to approach them.

If you are interested in Chatbots look no further than their activities at Helvia.io.

Hardware Hacking for JavaScript Developers

Javascript is not only for the web. Javascript can help you create your own devices and gadgets. As Tim demonstrated by live-coding an Andruino and a Raspberry Pi 3 device, your imagation is the only limit.

Building an Angular.js app the “Angular” way : Lessons learned

Vasiliki and Alexandros explained to us how AngularJS framework helped to build a commercial app for their organization. Although if you get started today you will go for Angular.

Note: AngularJs = Angular v1, Angular = Angular v2+

Failed and successful stories with Technical Debt

Antonio started by explaining what is technical dept, and various success and failure stories dealing with it.

  • Technical Debt: he implied cost of additional rework caused by choosing an easy solution now instead of using a better approach that would take longer.
  • What causes technical debt:
    • Business pressure to deliver.
    • Ignorance that we are creating it.
  • How to prevent it:
    • Code review
    • Say “No” when you have to. Don’t deliver poor quality due to pressure.
  • How to deal with it
    • Explain to business on “money” terms. Impact on customers and brand.
    • Make it a story, backlog items, etc.
    • Communicate with the team, communicate with the team and communicate with the team.

Closing

It was fun, it was exciting, it was usefull. Unfortunately I wish I could be in two places together to participate in all sessions.

Definately will participate next year.

Captain out…

Use Cases of RxJS with Angular

Here are two example use cases for RxJS streams with Angular. You can save the link as a reference.

This is intended to be the start of as series of use-case examples of RxJS with Angular. I will be gathering these and future use-cases in my Gist pages.

In this post:

  • Monitoring until: In this scenario we want to repeatedly monitor an API endpoint, until it retuns a specific value (or condition).

  • Gather up info from APIs: In this example we gather up information from two different API endpoints, combine them and present them as one object to the subscriber.

Here follow code snippets and examples of RxJS and HttpClient in Angular

Monitoring until

In this scenario we want to repeatedly monitor an API endpoint, until it retuns a specific value (or condition).

Explanation:

  • We use interval operator to create an observable that emits a dummy event (a counter) on specific intervals.
  • We use these dummy events to trigger calls to remove API, and merge the result back to the stream, with mergeMap.
  • Finally with takeWhile we check if the condition we want is met. If the conidition is met then
    • the particular event is not emitted
    • the transmition stops
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/Observable/interval';
import 'rxjs/add/operators/mergeMap';
import 'rxjs/add/operators/takeWhile';

...

const monitor = Observable.interval(2000) // parameter is milliseconds
.mergeMap (() => this.httpClient.get(remoteURL) ) // call remote API that returns Χ
.takeWhile ((X) => X === desiredValue /* condition that defines if the event will be emitted.

monitor.subscribe((X) => /* handle the events here */ );

...

Note: The above code works for Angular with RxJS 5.4 and older. With RxJS 5.5 .pipe can used to apply operators.

Gather up info from APIs

In this example we gather up information from two different API endpoints, combine them and present them as one object to the subscriber.

Explanation:

  • We create an observable that queries the 1st endpoint.
  • With mergeMap operator we trigger query for the 2nd endpoint. The 2nd query depends on the results of the 1st query.
  • Finally we combineLatest the two observables into one that emits the combination of the two.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
...
const postArray = this.getPosts();

const comments = postArray.pipe(
mergeMap(posts => this.http.get(`https://jsonplaceholder.typicode.com/posts/${posts[1].id}/comments`))
);

const latest = combineLatest (postArray, comments, (posts, cmnt) => {
return {a: posts, b: cmnt};
})

latest.subscribe(data => {
this.posts = data.a;
this.comment = data.b;
});

Note: We use RxJS 5.5 which now use the ‘lettable’ operators.

Captain out…

IoT Workshop / Voxxed Days Thessaloniki 2017

Sharing my notes and experience from Voxxed Days Thessaloniki 2017 - IoT Workshop

I was really excited and really glad that I particpated in this IoT Workshop with Jeremy Foster ( codefoster.com ) an expert in IoT development.

The workshop included an introduction to IoT and Azure IoT, and then hands-on project. The hands-on project started with setting up a Raspberry Pi 3 with a camera sensor and a bread-board with a button to trigger the camera.

Then the software would grab a picture from camera, send it to Azure IoT service that would analyze the picture and respond a description of the picture… It was real fun viewing the responses.

If you want to follow up this very interesting “getting started” workshop you can find all the instructions and code at Jeremy’s GitHub.

Getting started with Observables in Angular

So you want to get started with Observables? This is small guide on which resources to access first.

Get started with the following article to understand ReactiveX in general

The introduction to Reactive Programming you’ve been missing

Continue with the following article to see how you can use them in Angular.

RxJS for Angular Developers

The ReactiveX / RxJS website then can get you to more details:

reactivex.io/rxjs

And of course you are frequently need to refer to the available operators:

ReactiveX Operators

And the following project has full details with examples that can help you clear out things in your mind, while you are working.

Learn RxJS

Captain Out…

What is Ionic DevApp?

Started testing the new Ionic DevApp. This is a quick introduction on what is this great tool from Ionic team.

So, what is Ionic DevApp?

It is a tool from Ionic Team that will allow you to quickly and easily test your development code in multiple devices concurrently.

How does it work?

  1. You install the Ionic DevApp in your mobile devices
  2. You make sure that your development workstation and the Ionic DevApp devices are connected to the same wifi network.
  3. You launch an ionic serve command… that’s it.

The code will refresh and render in all your devices concurrently.

What about cordova plugins?

Ionic DevApp provides natively a great number of Cordova plugins (but not all). So unless you use something ‘rare’ you should be OK.

Check this list for details

Is it free?

Yes! Although it requires that your create an Ionic Pro account. But you can always create a Free Plan Ionic Pro account.

Try it now!

Find more details here: https://ionicframework.com/docs/pro/devapp/

Captain Out…