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!

Advanced Angular course – need your input

We started receiving requests for teaching an advanced Angular workshop. My colleague Anton and I started preparing the courseware and are planning to offer such a workshop this fall. Below is a draft of this course outline, which will start with refactoring and upgrading the ngShop app that we’ve  created for one of our Intro to Angular courses.  Please take a look at the draft below, and if you see some topics that should be added to this workshop, please leave comments to this blog. Thank you!

Advanced Angular Course (draft)

  1. Using UI libraries: Angular Material and PrimeNG

    1. Adding @angular/material package to the ngShop application
    2. Configuring custom theme / SCSS
    3. Laying out component with @angular/flex-layout library
    4. Programmatically changing UI layouts with MediaQueryList
    5. Combining Angular Material 2 and the PrimeNG UI components
  2. Modularizing Angular application:

    1. Minimizing the initial app payload by splitting it into modules
    2. Lazy-loaded modules and preloaders
    3. Adding new Admin module to ngShop
    4. Configuring a lazy-loaded route for Admin module
    5. Configuring route resolvers
  3. Application Security with JWT

    1. Intro to JWT-based authentication
    2. Adding a JWT-based Login page
    3. Authorizing access to the Admin module via route guard
    4. Adding JWT token to the HTTP requests required authorized access
    5. Handling Unauthorized errors
  4. Dynamically adding components to your app

    1. Creating a dynamically configurable  Dashboard page
    2. Dynamically adding components with ComponentFactoryResolver
    3. Dynamically adding components with
  5. Advanced work with Forms

    1. Creating custom form controls. ControlValueAccessor.
    2. Splitting complex forms into multiple Angular components
    3. Validating form groups
    4. Refactoring the Checkout page of ngShop
    5. Adding an inventory page with a data grid
  6. End-to-end testing with Protractor

  7. Production deployment

    1. Customizing Webpack build configuration and  ng eject
    2. Building Angular application on the Continuous Integration server
    3. Running tests on CI
    4. Automatic deployments to the nginx server
    5. Configuring HTTPS
    6. Combining multiple Angular apps under a single domain
    7. Server-side rendering with Angular Universal
  8. Refactoring ngShop to introduce state management  with ngrx

    1. Benefits of  unidirectional data flow
    2. Managing state with @ngrx/store
    3. Time-travelling debugging with @ngrx/store-devtools
    4. Using  HTTP APIs with @ngrx/effects library
    5. Integration with the router via @ngrx/router library

 

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.

Why enterprises welcome Angular

This year I already ran about ten Angular workshops and made several presentations at various conferences (e.g. DevoxxUS, DevNexus, BuzzJS, JEEConf). Over the last 20 years, I’ve been running workshops on different software but I don’t recall seeing such a positive reception of any new software as I see with the latest Angular framework in the enterprise world.

I was thinking of why enterprise developers like it so much, and here what I came up with:

– Getting started with a new project is a breeze thanks to Angular CLI code generator

– TypeScript is an optionally-typed object-oriented language with many constructs that Java and C# developers already know (classes, inheritance, interfaces, generics, annotations)

– A typical enterprise Java developer hates JavaScript, but from what I’ve seen so far, they like TypeScript. No wonder that a recent survey on StackOverflow lists TypeScript as a third most loved language.

– Even though you write code in TypeScript, you can still use thousands of existing JS libraries in your app. With 3K+ type definition files your IDE will offer auto-complete and will show compile-time errors if you try to use the API of these libraries incorrectly

– Most popular IDEs offer great support for TypeScript

– Angular offers a clean separation of the UI (templates) and business logic (TypeScript)

– Angular is not an MVC, but a component-based framework with a clean way of arranging loosely-coupled communication with components

– The Angular rendering engine allows to replace HTML with a third-party markup, and there are already products that offer another markup for developing the UI for mobile apps.

– Angular supports modularization and lazy loading, which allows to substantially decrease the size of the landing page of the app (think perceived performance and module re-usability)

– The size of the landing page of literally any app can be as low as two-tree hundred kilobytes (not counting the app images and third-party JavaScript libraries).

– Angular Universal supports server-side rendering

– There is already a large community of Angular developers, and the questions on StackOverflow are answered pretty fast

– Bundling and optimizing the app code for deployment is simple and doesn’t require you to write complex scripts and manually configure the tools

– From a project manager’s perspective, adopting Angular is a safe bet. If you need to replace or bring a new Angular developer to the team, he/she already knows the set of all required modules and how they operate. This would not be the case with other libraries or frameworks (e.g. React) that would require someone to pick multiple building blocks from third-party vendors, which may be different for each enterprise app.

This is all good, but what has to be done to increase the adoption of Angular in the enterprises?

– The Angular team should substantially increase the speed of developing new UI components in the Angular Material 2 library. They release hight quality components, but there are only 26 of them at the time of this writing, which is not enough for the enterprise apps. Currently, we have to use third-party UI libraries in addition to Angular Material to fill the gaps.

– I’d change the priorities in Angular Material 2 component developments. The lack of a data table component (similar to angular-ui-grid for AngularJS) is a serious obstacle in adopting Angular. I realize that the data table is probably the most complex UI component, but it’s crucial for the most enterprise apps. You can find data table components elsewhere, but in the ideal platform, all batteries are included.

– Implement the responsive layout in Angular Material 2. Currently, you can use either Bootstrap or the flex-layout library, but again, it would be nice to have everything as a part of the Angular package.

Finally, I’d like to mention some specific use cases. Currently, I’m working on a project to migrate a large codebase written in Adobe Flex framework. Moving the code from Flex to Angular is smooth. Within the next couple of weeks, I’ll blog providing more details.

I’d also like to bring the attention of Java developers to a very interesting project called JHipster. It’s a code generator that allows you to generate a complete Angular/Spring Boot app with configured controllers, services, and entities. With JHipster you can either generate a monolith or microservices app with generated config files for deployment on popular cloud platforms.

If you’re not familiar with Angular yet, listen to my conversation with the folks at Software Engineering Radio podcast where I answered multiple questions about Angular. If you’re a Java developer, watch my presentation at the DevoxxUS conference.

While typically I run private Angular workshops by requests, in about a month I’ll be running a public online workshop with my colleague and the co-author of our Angular book.

Update. The initial version of Angular Material DataTable has been released on July 6, 2017.

Software training – does the class size matter?

I run public and private training pretty often, and the question about the class size often comes up. In this write-up, I’ll share my experience in teaching groups of people of various sizes and the cost efficiency of live training.

While pre-recorded video courses and online webinars are popular because of their availability to masses, live training in a classroom remains in big demand for several reasons:

  • The groups are relatively small
  • The instructor is accessible to each and every participant
  • If a participant has an issue on his/her computer, the instructor can help this person

So what’s the good size of the group? I’ve seen live hands-on workshops at the conferences that included 50+ people. This is a lot of people and typically the instructor would need an assistant who can go around the room and help participants as needed. This will allow the instructor to stick to the curricula and cover all topics listed in the course outline.

The quality of the courseware is super important. I prepare the courseware myself, which allows me to put more people in the room because all the course exercises just work, and I don’t need to waste time on fixing the code. Allowing larger groups helps me in getting more requests for corporate trainings. Our company doesn’t charge “per participant”, so the training becomes a lot more affordable for our clients.

If you are a development manager facing the need to train your team on new technology, you may face a dilemma: order an in-house training or let your developers to self-study. The math is pretty simple. Say you have a group of 7 senior developers who need to learn a new technology and can study on their own. Let’s assume that each developer earns $500 a day. If self-studying of this technology would take 10 days, the cost of such self-training for your organization is $35K (500*10*7). Inviting an instructor would let you train the same people in 3 days, which would cost you $10.5K (500*3*7) plus instructor’s fees, which will be less expensive and provide better results.

In some cases, it may be even more cost-efficient to enroll your developers into a public training if available. I’d like to use this opportunity and invite you to our next online public workshop on Angular, where the size of the group is about 25 people. The enrollment fee is nominal, and the quality of the training is great. Just check our refund policy.

No shows on the free webinars

Yesterday, I was a No Show at one of the FREE webinars that I registered for. To be honest with you, even when I was registering for this event two weeks ago, I was not sure if I’d be able to attend due to potential scheduling conflicts. I was thinking to myself, “I’m interested in this topic, and if it will be video recorded, the organizers will send the link to the video to all people who registered”. The organizers sent me a reminder a day before the event and the URL for attending right before the event.

Needless to say that one of my meetings at work ran longer than expected and I didn’t attend the webinar. This is not the first time I was a No Show.

Now let’s look at it from the other side of the fence. Periodically, I run free webinars myself, and I noticed the same thing – only a fraction of the registered participants would actually attend the event. For such webinars, I use a paid GoToMeeting subscription that allows up to 50 participants to attend.

So I decided to monitor the numbers to decide at what number of registrants should I close RSVPs. I started closing RSVPs when 55 people would register. About 20 would actually show up. Then I kept increasing the number of allowed RSVPs, and today I believe that with my 50-participant subscription, I can close RSVP when the number of registrants is anywhere between 100 and 150, in other words, 2 to 3 times more than available seats.

I’m not blaming anyone, and I’m not apologizing for my own no shows. It is what it is. On the other hand, I almost never had cancellations or no shows in the events I charged for. Money talks!

Categories Web

TypeScript generics and animal workers

I’ve been using Java generics for years, and when I saw their syntax in TypeScript, I simply put a checkmark in the list of TypeScript features that I already know and understand.I was wrong. Let me show you something.

Below is a Java code sample that illustrates the use of generics. I’ve created a class Person and its subclass Employee. Then I created a standalone class Animal. Finally, I used the generic notation to ensure that if anyone would try to add an instance of Animal to the collection of workers, the Java compiler would complain, and it did:

Then I re-wrote the same program in TypeScript, and its compiler didn’t complain:

But if I’ll comment out the property name in the class Animal, the TypeScript compiler will complain:

This may lead to the following conclusions:

1. In TypeScript, if you use a type as a parameter in generics, it’ll allow any other type as long as it has the same properties (e.g. Person.name and Animal.name)
2. In TypeScript, animals can be workers

If there is something in TypeScript documentation that has different explanations to this behavior, please let me know. Generics is an interesting subject and I’ll write another blog soon.