A Soviet programmer on open source software

Just read this article about the recent GitHub Open Source survey revealing that 93 percent of people reported being frustrated with “incomplete or confusing documentation”. While I definitely agree that good documentation is key to the adoption of any software, I’d like to go back in history and reflect on my rather long experience in the industry.

Thirty years ago I lived in a country called USSR. I was a young programmer back then. Iron curtain. No Google. No StackSverflow. Can you believe this? The West was far ahead in creating both hardware and software. Up until the Gorbachev’s Perestroika there was no way to officially purchase IBM or DEC computers. Skillful Soviet engineers would create copies of leading Wester brands. In the mainframe arena, the IBM System/360 and System 370 were represented by clones called “EC” (read/translate this). DEC PDP series was represented by the SM computers (see this). We knew this, but who cared?

There was an organization in Bulgaria that was translating and adapting the original IBM/DEC documentation and releasing it as official docs for the EC/SM machines. The software documentation was poorly written, but that was OK. Soviet software developers were well-educated people who could “figure it out”. I lived in Kiev, Ukraine. Since I could read English, my boss (a progressive man) would take me to a business trip to the central technical library in Moscow where we’re sitting and reading the latest issues of the Datamation magazine to learn the trends. He was skimming trough the magazines and asked me to read and translate the titles of the articles and then translate those that seemed interesting to him. These were fun business trips. We’d bring home copies of interesting articles, and most importantly, oranges, bananas, and sausages that were hard to get in Kiev.

With Perestroika, more and more of the Western software started to appear in the USSR. That was close-source software. A small number of lucky programmers (myself included) were working in the organizations that had “hard currency” and could purchase hardware and software from the West. Back then, some of the software products were sold in two versions: with or without the source code included. The latter option was a lot more expensive. Why? BECAUSE WE WOULD BE ABLE TO READ AND MODIFY THE CODE TO OUR NEEDS!

Isn’t it what the open source software is about? TO BE ABLE TO READ AND MODIFY THE CODE. The open source movement also allows and encourages you to contribute the improved software back to the community (if your employer permits).

Ironically, many of today’s enterprise programmers use the open source products not because the source code is available, but because it’s free. Day in and day out, some weird-looking geeks are stealing time from their families out for writing software for free to make the world a better place. Some other geeks spend their time on StackOverflow solving your problems for free. Millions of bloggers (myself included) write blogs happily sharing what they’ve learned about open source products.

If you like our profession, become a contributor too. You don’t have to be a superstar programmer. You may have a talent to explain the software written by others. This is a very valuable talent. Trust me, I’ve seen so many brilliant programmers who can easily write amazing code but have hard times explaining it to others.

Clone a GitHub project, find the folder with an existing documentation (or create one), write and add your article, and submit a pull request. You’ll be surprised, but most likely your contribution will be accepted and you’ll become a proud contributor to an open source project. You don’t even have to become an official contributor. Just blog about the software you like and understand. Writing about software not only helps others, but helps yourself to be better at it!

My presentations and workshops in 2017


This is a list of presentations and workshops that Yakov Fain offers in 2017. If you’d like to invite Yakov to deliver these talks/workshops at your organization, please send an email at training@faratasystems.com. To get familiar with Yakov’s teaching style, watch his Youtube Java tutorial.

Presentations

Mastering TypeScript – 90 min

In this presentation, you’ll learn how to write code in TypeScript, one of the most loved languages today.TypeScript is a superset of JavaScript, which allows you to be more productive in writing JavaScript applications. Per StackOverflow developers survey TypeScript is the 3rd place in the most loved languages and 5th in most wanted. The syntax of this language is pretty easy to pick up for anyone who’s familiar with such object-oriented languages as Java or C#. During this presentation, you’ll learn the syntax of TypeScript and will understand the benefits it brings to the table.

Angular Tooling – 90 min

Learning Angular is easier than AngularJS, and developing in TypeScript is more productive than in JavaScript. But you need to know your tools to create, bundle, and deploy your app.This presentation is not about the Angular syntax. We’ll discuss the development process with Angular starting from setting up the project to deploying an optimized application. Most part of this presentation is about using Angular CLI. We’ll start with generating a new project, and then discuss such subjects as configuring proxies, working with environment variables, automating builds with npm scripts, and more.

Communication with the server via HTTP and WebSocket protocols in Angular – 90 min

In this session, you’ll see how to create an Angular 4 app that can communicate with the servers via a pull (HTTP) and push (WebSocket) modes. We’ll program a simple Node server and then will go through a number of code samples that communicate with it using HTTP and WebSocket protocols. We’ll start with creating a simple NodeJS server, and then will enable it to handle HTTP requests from an Angular app. Then you’ll see how to wrap a service into an observable stream. Finally, we’ll teach our server to perform a data push to an Angular client using the WebSocket protocol.

Angular for Java developers – 90 min

Angular is a complete re-write of the super popular Web framework AngularJS. Angular is a component-based framework that will have an effect in JavaScript community similar to what Spring framework did for Java. This presentation is a high-level overview of Angular, which in combination with TypeScript, finally made Web development understandable for Java developers. At the end of the presentation, you’ll see how to deploy Angular app can communicate with the Spring Boot backend.

Make a facelift to your Angular app with UI libraries – 90 min

In this presentation, you’ll see how to create a nice looking UI with Angular Material 2 and PrimeNG components.Commercial applications need to be good looking, which means that you should pick up a rich library of UI components for your app. While Angular Material 2 library offers two dozen of great looking components, this may not be enough for your application needs. The good news is that there are other libraries that you can use. In this presentation, we’ll start with an overview of Angular Material 2 components. Then we’ll proceed with another open-source library called PrimeNG, which offers more than 70 UI components.

Implementing inter-component communication in Angular – 90 min

Angular is a component-based framework with a well-defined API for passing data to and getting data from a component. Any application is a tree of components that often need to communicate with each other. You’ll see how to create reusable application components that can exchange data with each other in a loosely-coupled manner. You’ll see how components can communicate via a common parent or via an injectable service. You’ll see how to pass data using the router, input and output parameters, events and callbacks. You’ll also learn how to use projection to pass HTML fragments to a component’s template. You’ll see how to pass parameters to routes. We’ll also touch upon the incorporation of the third-party JavaScript libraries into an Angular 4 app.

Working with the Angular router – 90 min

The Angular framework includes a powerful component router. In this session, you’ll see how to use the router that comes with Angular 4. We’ll start with configuring the navigation in a simple app. Then you’ll see how to pass data to routes, work child routes, and create apps with multiple router outlets (auxiliary routes). We’ll also review a unit-test configuration for testing the app router. Finally, you’ll see how to lazy load modules using the router.

Using Observable Streams in Angular – 90 min

Angular includes RxJS, which is a library of reactive extensions built on the premise that everything is an observable stream. Angular includes RxJS, which is a library of reactive extensions built on the premise that everything is an observable stream. Observables introduce the push model to your application. First, we’ll get familiar with the RxJS library, and then will continue reviewing observables in Angular.You’ll see how observables are used to handle events, forms, the router, and HTTP requests. We’ll talk about using subjects, implementing the mediator design pattern, and more.

RxJS essentials – 90 min

Libraries of reactive extensions exist in many programming languages. RxJS 5 is a popular library of reactive extensions for JavaScript. This library is used for transforming and composing streams of data. RxJS promotes the push model where the data flow through the algorithms of your application. RxJS is not a framework and can be used in any JavaScript app. Using RxJS allows writing certain portions of your app by composing functions where you see fit. You’ll learn how to create observable data streams, what are the roles of observers and subscribers, how to apply and compose operators to process the data emitted by observables, how to compose multiple data streams and more.

Reactive thinking with RxJava2 – 70 min

This presentation is about asynchronous programming in Java, where the streams of data are handled in a non-blocking fashion. We’ll talk about Reactive Streams and specifically about the RxJava2 library that may change the way you design Java applications. You’ll see how to consume streams of events, deal with backpressure, and apply a variety of operators offered by this library, which requires a different way of thinking about writing code.

JHipster: Bringing together Angular and Spring Boot – 70 min

JHipster is a popular open-source code generator that automates creation and configuration of a Web project that uses the Angular framework on the front and Java Spring Boot on the back. We’ll start with a simple example where an Angular app consumes the REST service from Spring Boot. Then we’ll proceed with an intro to JHipster followed by the generation of a new Angular/Spring Boot app from scratch. This will be a CRUD app of the following architecture: a gateway (the front end), a microservice (the back end), and a service discovery server.

Hands-on workshops

Developing Web apps with Angular and TypeScript – 3 days

Participants of this workshop will gain practical skills while exploring the best practices and principles of developing Angular applications and get familiar with multiple sample applications illustrating solutions for real-world challenges. During this course, we’ll cover all the latest APIs (routing, dependency injection, forms). At the end of each day, the participants will spend an hour working on the front end of a sample application “Online Auction”.

Angular Material 2 Applied – 1 day

This hands-on workshop is for developers who are already familiar with Angular. Under the instructor’s guidance, participants will work on the front end of the online store application, which uses Angular and the library of UI components Angular Material 2. By the end of the day, each participant will develop an online store with a shopping cart the will look and work like this one. This workshop assumes participants are already familiar with Angular. This workshop is NOT an Angular intro.

Angular: Advanced Topics – 3 days

This workshop is still in the works and will be offered in September of 2017. The participants of this workshop are expected to have a working knowledge of Angular. In this workshop, we’ll cover such topics as state management, authentication, advanced work with forms, themeing, modularization, server-side rendering, page layouts and more. Stay tuned.

The next public live online Angular workshop starts on July 23, 2017.

BIO

Yakov Fain works as a Solutions Architect at Farata Systems that offers consulting and training services in developing of the Web Apps with Angular and Java. A Java Champion, he has taught multiple classes and workshops on the web and Java-related technologies, presented at international conferences, and published more than a thousand blog posts (see https://yakovfain.com). Yakov authored and co-authored a number of technical books on programming including the Amazon bestseller “Angular 2 Development with TypeScript”. He leads Princeton Java Users Group.

Yarn package manager: yarn.lock

Yesterday, I was running yet another Angular workshop. After explaining how to install dependencies using npm, I show how to use Yarn (see this blog), a faster alternative to npm, and suggest that the students should consider using Yarn.

Before the workshop, I give handouts with several projects to the group and then ask the group to open a particular project, install the dependencies and run the app. Usually, everything goes smoothly, but this time many people started to complain about a runtime error. In this app, I was using themes from Angular Material 2, but the app couldn’t find the file “node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css”.

I was strange. I tested all the projects two days before the class. After checking the content of the node_modules directory on Paul’s computer, I couldn’t find even the directory node_modules/@angular/material/core let alone that CSS file.

Then I asked if everyone gets this error? Everyone except Jim got this error. Jim was using Yarn for installing dependencies while everyone else was using npm. After learning this, I guessed what was the problem.

I’ using Yarn too, and all my projects included the file yarn.lock, which is created after the initial install storing all packages and their versions there were installed for the project. When you do the yarn install next time, it checks if the file yarn.lock is present, it installs exactly packages of those versions that were listed in yarn.lock. This file can be checked into the version control repo used by your team to ensure that everyone would have exactly the same dependencies.

Now let me explain what happened in the classroom. The package.json in that project included the dependency

"@angular/material": "^2.0.0-beta.2"

The file yarn.lock in that project had the following:

"@angular/material@^2.0.0-beta.2":
  version "2.0.0-beta.2"
  resolved "https://registry.yarnpkg.com/@angular/material/-/material-2.0.0-beta.2.tgz#65ee8733990347b7518b7f42113e02e069dc109b"

Hence, when Jim ran his Yarn install, he got Angular Material 2 2.0.0-beta.2, which had the file “node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css”

But last week, a new version (Beta.3) of Angular Material 2 has been released with a breaking change – they rearranged the file structure:

So the students who didn’t use Yarn, got the latest version while my project used “the old” location of that CSS file.

Fixing this issue in the app was an easy task, but I wanted you to appreciate that Yarn gives you predictability in the projects that have multiple dependencies. Some library author introduces a breaking change, and your app gives a runtime error.

After fixing the CSS location in the app, I deleted my yarn.lock file and re-ran the install. The newly created yarn.lock has this fragment:

"@angular/material@^2.0.0-beta.2":
  version "2.0.0-beta.3"
  resolved "https://registry.yarnpkg.com/@angular/material/-/material-2.0.0-beta.3.tgz#ec31dee61d7300ece28fee476852db236ded1e13"

The first line indicates the dependency as it was listed in my package.json, and the second line shows the actual version that has been installed. Now my project is working again… until the next breaking change.

Angular CLI: multiple apps in the same project

You may need to have an Angular project that has multiple apps so you can run the build of a particular app, say depending on the customer you’re preparing the build for. In my case, I wanted to create a project with multiple apps that I use in my Angular workshops. Having a single project with multiple apps allows you to run a time-consuming npm or yarn install once and just modify the name of the app you want to run.

For example, you may have multiple versions of the main bootstrap file that load different root modules. The file .angular-cli.json has the apps section with the property main, and to run a particular app, I’d instruct the students to modify .angular-cli.json to point at a particular app, e.g. "main": "main1.ts". To run another app, I’d instruct them to change this line to "main": "main2.ts".

But then I figured out that you can configure multiple apps in the same .angular-cli.json and run the build for a particular app by name. The apps property is an array, and you just need to configure each app there. For example, the following fragment shows how I configured two applications – app1 and app2 in the same .angular-cli.json:

"apps": [
    { "name":"app1",
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main-resolver.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css",
       "../node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    },
    { "name":"app2",
      "root": "src",
      "outDir": "dist2",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main-luxury.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css",
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],

Now to bootstrap the app main-resolver.ts I run the following command:

ng serve --app app1

To bootstrap the main-luxury.ts, I run this:

ng serve --app app2

You can also refer to each app by its index in the apps array:

ng serve --app 0
or
ng serve --app 1

The option –app is available for the ng build command as well. The following screen shot shows my project after I built the app1 into dist and app 2 into dist2.

This is a pretty useful Angular CLI feature and I wanted to share my findings with you.

Angular 4: Changes in the router

Angular 4 comes with some useful changes in the router. Let’s take a look at the changes in receiving parameters by a route and in the CanDeactivate guard (see here).

A route can receive the parameters either using a snapshot property of the ActivatedRoute or by subscribing to its property param. Now there is a property paramMap that allows you to either get a particular parameter by using the method get() or get all parameters by invoking getAll().

Here’s how to receive a parameter id that’s not changing in the parent:

export class ProductDetailComponentParam {
  productID: string;

  constructor(route: ActivatedRoute) {
    this.productID = route.snapshot.paramMap.get('id');
  }
}

If the parameter id is changing in the parent (as described here), you can subscribe to the stream of id’s as follows:

export class ProductDetailComponentParam {
  productID: string;

  constructor(route: ActivatedRoute) {

    route.paramMap.subscribe(
     params => this.productID = params.get('id')
     );
  }
}

The CanDeactivate guard now allows you to be more specific and conditionally prohibit navigating from a route depending on where the user is planning to navigate. The interface CanDeactivate now has an optional parameter nextState, which you can check to decide if you want to prohibit the navigation or not. The next code snippet shows the guard that would display a warning popup only if the user is trying to navigate to the home route represented by the path ‘/’. The navigation to any other routes remains unguarded.

@Injectable()
export class UnsavedChangesGuard implements CanDeactivate<ProductDetailComponent>{

    constructor(private _router:Router){}

    canDeactivate(component: ProductDetailComponent, 
                  currentRoute: ActivatedRouteSnapshot,
                  currentState: RouterStateSnapshot, 
                  nextState?: RouterStateSnapshot){

        let canLeave: boolean = true;

        // If the user wants to go to home component
        if (nextState.url === '/') {
          canLeave = window.confirm("You have unsaved changes. Still want to go home?");
        }
        return canLeave;

    }
}

Angular 4 was just released and there might be some other goodies in the router, but I just wanted to share with you these convenient additions.

Upgrading to the latest Angular CLI

As of the Angular CLI beta 30, the command to install Angular CLI looks as follows:

npm install -g @angular/cli

To get rid of the old version of Angular CLI and install the new one, run the following commands:

npm uninstall -g angular-cli
npm cache clean
npm install -g @angular/cli

To update the existing CLI projects, modify the CLI dev dependency in package.json to this:

"@angular/cli": "1.0.0-beta.32"

Then update the CLI version on top of the angular-cli.json, remove your node_modules dir and run npm install.

My upcoming speaking engagements

In the upcoming six months of 2017 I’ll be speaking at the following conferences:

1. BuzzJS, New York City, January 27, 1 talk

2. DevNexus, Atlanta, February 22-24, 2 talks

3. DevoxxUS, San Jose, March 21-23, 2 talks

4. Angular Summit, Chicago, May 10-11, 8 talks (my personal record!)

5. JEEConf, Kiev, Ukraine, May 26-27, TBD

6. JCrete, Crete, Greece, July 17-21, TBD

Hope to see you at one of these events!