Current Trends in Infrastructure Training

Due to the popularity of Infrastructure concepts like DevOps, CI/CD, Automation, Cloud, and Containerization, here is the general industry trend seen among infrastructure over the last few years. 


 There is a general trend towards more automation and CI/CD due to the insertion of Dev Ops practices and ideas in most organizations.  Couple this with the move towards Agile and DevOps and you are seeing the infrastructure position ,whether it is titled  System Engineer, System Administrator, DevOps Engineer, Infrastructure Engineer etc, move into coding/orchestrating sophisticated self-provisioned offerings.  What does that mean?  Infrastructures are not expected to provide AWS style automated pipelines that do everything from delivering working code from source to production, but also create production systems in a similar manner. This expectations is driving a bevy of other skills sets into the Infrastructure role and expectations are super high if you are in this kind of position in terms of technical capabilities.  

Programming Languages

 You now must know a programming language not as a dabbler or hacker, but as someone who can create/build/manipulate product customer-facing software to be DevOps in 2020.   This means not just BASH shell scripting, but a full blown language like Python, Java, .Net, Go etc. Probably in that order is preferred.  you will still be required to know Bash because it is everywhere.  So there is a trend for everyone to know the companies product language (Java, Python, etc) so that can support it and troubleshoot it from an infrastructure perspective.  Bash is still king for most infrastructure teams with Python and Go in that order for most shops that are not Windows based.  For Windows-based shops it is mainly Powershell, .Net and Python.  Java is not favored in most early adopters to startups, but is still used with Enterprises and late adopters not for automation but for product support.

Automation/Orchestration tools

 In addition, you must have an orchestration tool in play in your infrastructure.   So technologies, like Jenkins, Bamboo, TravisCI, TeamCity, Gitlab and Github Actions (pending) are all emerging with Jenkins being the dominant player currently.  Jenkins is slowly losing respect though as it is not emerging tech and doesn’t have great API integration without a lot of manipulation.   The plugin community that enables integrations is not keeping things up to date as quickly as desired and thus people are looking more and more at Gitlab or Github actions or paying for Enterprise versions to cover the gap.  Most Enterprises are also locked into their current tool already through configuration investment and/or licensing. 

 Configuration Management

While this is dipping in popularity in part due to the rise of Immutable infrastructure concepts like Docker and VM Images for every provider (AMI, VMWare, etc) the configuration technologies in this space are extending like crazy to cover other areas such as cloud provisioning.  That being said Ansible is the rising star here with old holdouts like Chef, Puppet and newcomer Salt still present but seemingly losing ground. 

Infrastructure Provisioning

This is a training area tied close to the provider of infrastructure (if you are using AWS you use AWS Cloudformation, Microsoft Azure uses Azure Resources Templates, etc) but multi-cloud was the battle cry in 2019 and it will be in 2020 as well.  Since Hybrid cross-cloud is a target especially with Kubernetes there is a push to have Infrastructure Provisioners that go “across” cloud providers and data center boundaries.  The only tool that does this at present that almost every Dev Ops Engineer I know either loves or hates (no middle ground) is Hashicorp’s Terraform. Classes on this are hot right now.  There are no real cross competitive tools as of my most recent knowledge in late 2019. 

Image Management

 Immutable infrastructure as an architecture is on the rise in most organizations coupled with cloud and containers.   As such there is really only one tool that does this well and that  is Hashicorp’s Packer. Few are offering good classes on this, but since this will generate VM and Container images that can be run across cloud providers it is gaining in popularity.  Needs a Configuration Management tool (see above) to function properly. 

Containerization and Container Orchestration 

This is an overwhelmingly popular area of technology and the emerging trend here is mainly around  Container Orchestration and not Container Run-Time technologies themselves of which Docker remains king.  Kubernetes is the Container Orchestration alpha predator and has eaten and dominated all other competitors by far.  The hype train on this is strong and many organizations are pushing for this without regards to impact or value.   As such many are looking to speed to market for their Kubernetes initiatives so IBM/Redhat Openshift, Rancher, Platform9, Pivotal are key technologies. Managed Services in the cloud like cloud provided Kubernetes like Azure Kubernetes services or Amazon’s Elastic Kubernetes Service are also included in this trend.    Trend-wise Enterprises are using IBM/Redhat Openshift while smaller companies are looking at Rancher (FOSS).  Everyone is looking at the cloud provided Kubernetes services like Amazon Elastic Kubernetes Services, but something to note is that most infrastructures are still using Virtual Machines. 


DevOps is emerging mainly under a focus on tools while de-emphasizing its cultural and silo-breaking roots to a certain degree so any classes that focus on  metrics(prometheus, grafana, graphite, nagios, cloudwatchm datadog) are going to be popular.   Anything doing with Continuous Integration/Continuous Delivery/Continuous Deployment in almost any of the popular tool configurations (i.e. CI/CD with Jenkins, Maven, and Artifactory) is also in trend.  DevOps classes are anything that brings all the afore mentioned tools together into a cohesive delivery system are going to be amazingly popular as well. 


Trends here depend which provider they are using, but  everyone is now chasing a cloud provider.  Either because their clients are wanting it or they see the obvious benefit of hybridizing their cloud infrastructures.  AWS is seen as the leader and thus AWS trainings are favored, but multi-cloud is the battlecry of most Enterprises who are either chasing customers or who are worried about competition on other fronts from  Since AWS funds most of operating capital, business-wise Enterprise leaders are looking to avoid funding invasion into IoT, Machine Learning, Last Mile Delivery, Streaming Services etc.   That all being said, most are still looking at AWS as their dominate cloud provider but with an eye on Hybrid data center computing.  

React Hooks Application

In this tutorial, you will create a React application that uses React Hooks to manage state and handle activities. Please refer to the tutorial  Setting Up a React Environment to set up a development environment for React before you start working on this tutorial.

Part 1 – React Development Environment

For this tutorial, we will be using a node.js based utility named “create-react-app” to create the development setup with the following capabilities:

  • ES6 & JSX Transpilation.

  • Module export/import support.

  • WebPack based development server.

  • Auto updating of the application in the browser.

Note that create-react-app will not work with earlier versions of node.js or npm.

1. Open a command prompt . Create C:\ReactWork directory and navigate to the C:\ReactWork directory.

2. Check the version of node.

node --version

The node version needs to be 8.10 or greater. If it is not then you need install a new version that complies with this requirement before going further.

check the version of npm.

npm --version

The npm version needs to be 5.6 or greater. If it is not then you need install a new version that complies with this requirement before going further.

3. We will use the ‘npx’ utility installed along with node which allows us to run create-react-app without first installing it on the local machine.

npx create-react-app react-hooks-app

This command may take several minutes to complete.

The command will create a 'react-hooks-app' directory under ReactWork

4. Navigate into the new directory

cd react-hooks-app

5. Run the application with the following command:

npm start

This starts the development server as well as ES6 /JSX transpilation. The transpilation and server are setup in watch mode which means that they are triggered automatically when files are saved. A browser window displaying the app is also opened automatically. The url being http://localhost:3000.

6. Wait for the process to fully start up and then check out the browser window. It should show the following:

Part 2 – Display a List of Articles

In this part you will create a React component that displays a list of articles.

1. Edit the \react-hooks-app\src\App.js file and replace its contents with the following and then save the file:

import React from 'react';
import './App.css';

export default function App() {
  return (<div className={'app'}>
    <h2>React Hooks App</h2>

2. Replace the index.css and App.css in \ReactWork\react-hooks-src\src with these files from hooks-app folder. This folder can be downloaded from here:

Copy: \hooks-app\index.css
To: \ReactWork\react-hooks-app\src\index.css
This should overwrite the existing index.css 

Copy: \hooks-app\App.css
To: \ReactWork\react-hooks-app\src\App.css
This should overwrite the existing App.css 

3. The app will auto-update in the browser and should look like this:

The list above is hard coded. What we want to do now is to display the data programmatically.

Open the file and take a look. It contains an array of articles.

4. Add the following array into App.js after the imports and before the App function:

const initialArticles = [{title:'ONE'},{title:'TWO'},{title:'THREE'} ];

5. We want the App to hold its own state. We can do that with the help of the ‘useState’ hook. To use this hook we first need to update the import statement at the top of App.js to read:

import React, {useState} from 'react';

6. Insert the following as the first line of the App() function (before the return statement):

const [articles, setArticles] = useState(initialArticles);

7. Delete the existing <li> elements being returned from the App() function and replace them with code that uses the JavaScript array map function to output the contents of the array as <li> elements. Your App() function should now look like this:

export default function App() {
  const [articles, setArticles] = useState(initialArticles);
  return (<div className={'app'}>
    <h2>React Hooks App</h2>
      (article, index) => {
        return <li key={index} >

8. Save the App.js file. The app should now appear like this in the browser:

Part 3 – Retrieve Article Data from a Network Source

The current version of the app displays the contents of the initialArticles array. What we really want though is to retrieve the data from a network source. By default the development server (that serves the app) can also serve static files that are placed in the project’s \public directory.

1. Copy the articles.json file into the project as shown below:

Copy: \hooks-app\articles.json
To: \react-hooks-app\public\articles.json

2. We can make use of the ‘useEffect’ method to insert code that will retrieve data from the article file after the first render. To do that we first need to update the import statement at the top of the file to import the ‘useEffect’ method:

 import React, {useState, useEffect } from 'react';

3. We will need to add a function to retrieve the articles.json file contents over the network. We can do this inside of the App() function by creating a ‘const’ type with the name ‘getArticles’ and assigning an anonymous function to it like this:

const getArticles = function(){};

Make sure to place the above code inside the App() function, after the ‘useState’ line and before the return statement.

4. Update the anonymous function you just created with a JavaScript fetch statement that retrieves the url ‘articles.json’

  const getArticles = function(){
    .then(response => response.json())
    .then(data => {

Notice how the above code uses the ‘setArticles’ function that was returned from our ‘useState’ call.

5. Insert a ‘useEffect’ method call inside the App() method so that it appears on the line before the return statement:

  useEffect(() => {getArticles()}, [] );

Notice the use of the empty array for the second parameter of useEffect. This makes sure the code is only called once – after the first render.

6. Save the App.js file. The browser should now look like this:

Part 4 – Add ‘Select Item from List’ Capability

In this part we will add the ability to click an item to select it and show its article text.

1. We’ll need to save the index of the selected item in a state variable. To do that add another call to ‘useState’. Name the variable ‘selectedArticleId’ and its modifier method ‘setSelectedArticleId’. Add the statement as the first line of the App() method:

const [selectedArticleId, setSelectedArticleId] = useState(-1);

2. Add an onClick handler to the <li> elements that sets the selectedArticleId using the associated modifier method.

onClick={(event) => setSelectedArticleId(index)}

3. When an item is selected we want to apply the ‘selected’ CSS class to the <li>element which will render the element in bold text:

className={(selectedArticleId === index) ? 'selected' : ''}

4. When you are done the App() method’s return statement should look like this:

  return (<div className={'app'}>
    <h2>React Hooks App</h2>
      (article, index) => {
        return <li key={index}
          className={(selectedArticleId === index) ? 'selected' : ''}
          onClick={(event) => setSelectedArticleId(index)} >

5. Save the App.js file. The app should refresh in the browser. Try clicking on an item to select it. The selected item should appear in bold lettering.

6. Once an article is selected we’d like to see its text displayed below the list. When the app comes up though, before an item is selected we’d like to see the word ‘none’ instead. Lets add a line of code into the App() function that implements that logic and assigns a value to a ‘const’ variable named ‘selectedArticle’. The code can be added just before the return statement.

   const selectedArticle = (articles[selectedArticleId]) ?
    articles[selectedArticleId].content : 'none';

7. Now we need to add some HTML that displays the heading “Selected Article” and a paragraph right after that with the article text. These elements should be inserted near the end of the return statement after </ul> and before </div>.

    <br /><span className={'bold'}>Selected Article:</span>
    <p>{selectedArticle}</p><br />

8. Save the App.js file. The browser should update. Select an article. It should now show below the list:

Part 5 – Implement “Add an Article” Capability

We would like to be able to add and delete articles from the list. We’ll start by adding a section called ‘Controls’ after the selected article. The section will hold two input fields (for title and content) and two buttons – ‘Add Article’ and ‘Delete Selected’.

1. Before we add the controls section we need to create a state variable to hold the input field contents. The shape of the data will be an object with two properties – title and content. You can add this statement as the first line in the App() function:

const [formObject, setFormObject] = useState({ title: ‘title1’, content: ‘content1’ });

The input fields we display will get their values from formObject.title and formObject.content.

2. Add the following HTML after the paragraph with the selected article and before the closing </div> element (you can cut and paste this text from \hooks-app\controls.html) :

<div className={'controls'}>
<span className={'bold'}>Controls:</span><br/>
  <button onClick={null}>Add Article</button>&nbsp;
  <button onClick={null}>Delete Selected</button>
  <br />
  <input type={'text'} name={'title'}
    placeholder={'title'} value={formObject.title}
     /><br />
  <input type={'text'} name={'content'}
    placeholder={'content'} value={formObject.content}
     /><br />

3. Save the App.js file. The app should now display a ‘controls’ section below the selected article:

At this point the buttons don’t do anything and the input fields don’t update when you type into them. Lets fix that.

4. Create an anonymous function and assign it to a ‘const’ type named ‘changeHandler’. The function should get a new value for the field being changed and assign it to the property of the same name in the formObject. The function should accept an ‘event’ parameter. (Hint: ‘’ represents the input field being changed) . Add this code right before the return statement:

   const changeHandler = function (event) {
    const name =;
    const value =;
    formObject[name] = value;
    setFormObject({ ...formObject })

5. Call the ‘changeHandler’ function from the ‘onChange’ event of both <input> elements:

onChange= {(e)=>changeHandler(e)}

6. Save the App.js file. Now keystrokes you enter into the input fields will be added to the formObject and displayed when the component is re-rendered.

7. Update the onClick handler for the ‘Add’ button to create a new array based on the existing articles array and add the formObject to it. This can be done using the spread operator. Use the ‘setArticles’ modifier function to update the articles variable with the new array:

onClick={() => setArticles([...articles, formObject])}

8. Save the App.js file. The app will update in the browser. Type some text into the title and contents input fields. Click on the ‘Add Article’ button. You should see an article added to the list. Click on the new article in the list and you will see its contents.

Part 6 – Add ‘Delete Selected’ Capability – Optional

Once an article has been selected we want to have the ability to delete it from the list. We will add the functionality now.

1. While we have a button named ‘Delete Selected’ we want that button to be disabled if no article is selected in the list. Lets create a ‘const’ type named ‘validSelectedArticleId’ that we can use to disable/enable the button. This code can be added right before the return statement:

const validSelectedArticleId = function () {
 return( selectedArticleId >= 0 && selectedArticleId <articles.length);

2. Set the disabled property of the delete button from the value that was just created:


3. Save the file and let the browser refresh. The ‘Delete Selected’ button should be grayed out until an article is selected.

4. Create a ‘const’ type named ‘deleteSelected’ and assign an anonymous function to it that deletes the selected article from the articles array and updates the articles array using its setArticles function. You can use the JavaScript array splice function to implement the delete. Add this code right before the return statement.

  const deleteSelected = function () {
    if (validSelectedArticleId()) {
      articles.splice(selectedArticleId, 1);

5. Update the onClick handler of the ‘Delete Selected’ button to call the ‘deleteSelected’ function.

onClick={() => deleteSelected()}

6. Save the App.js file and let the browser update. Select one of the articles by clicking on it in the list. The ‘Delete Selected’ button should become active. Click on ‘Delete Selected’. The selected item should be removed from the list. Refreshing the page will restore the original set of articles.

Part 7 – Review

In this tutorial we:

  • Created a new app development environment using create-react-app.

  • Created a React component that displayed a list of articles.

  • Used React Hooks to manage state inside the component and to retrieve article data from a network source.

  • Added the ability to select articles from the list and display their contents.

  • Added the ability to create and add new articles to the list and to delete existing articles.


Setting Up a React Development Environment

In this tutorial you will create a development setup that supports React development. The setup will take care of three essential issues:

  • Transpiling ES6 code

  • Transpiling JSX code

  • Serving React Application files ( index.html, etc. )

Node.js and npm should have been installed on your machine before you start working on this tutorial.

Part 1 – ES6 Transpilation support

In this part you will setup a development environment that transpiles ES6.

1. Open a command prompt.

2. Create a directory to work in named:

md C:\ReactWork

3. Create a directory “react-dev-env” inside the ReactWork directory:

md C:\ReactWork\react-dev-env

This directory will be referred to in the tutorial as the project root.

4. Navigate into the directory you just created:

cd C:\ReactWork\react-dev-env

5. Create a new package.json file using the following command (take defaults for all settings):

npm init

6. Use node package manager to install each of the following development dependencies into the project:

npm install babel-cli
npm install babel-preset-env

You may see some warnings about “optional dependencies”. It is ok to ignore them.

7. Navigate to the react-dev-env folder and open package.json file with any code editor.

8. Change the content of the file as follows:

  "name": "react-dev-env",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {    
    "babel": "babel src --out-dir dist",
    "babelw": "babel src --watch --out-dir dist"
  "author": "",
  "license": "ISC",  
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.7.0"    

The first script runs babel once and then exits.

The second script runs babel in watch mode. In this mode it runs once and then stays active and runs again whenever files in the src directory change.

9. Save the file.

10. Create a “.babelrc” file in the project root with the following contents:

{ “presets”: [ [“env”, {“targets”: { “browsers”: [“last 2 versions”] } }] ] }

11. Save the file.

12. Create a “\src” directory in the project directory

13. Create a file named “test.js” in the “\src” directory.

14. Add some ES6 code to test.js file. The code below can be used, or you can add your own. When done save the file.

class myclass{
  constructor(name){ = name;}
new myclass("myclass").display();

15. Save the file.

16. Run the babel compiler using one of the scripts you added to package.json:

npm run babel

Babel will automatically create a “\dist” directory and place the transpiled version of “test.js” in it.

17. Check that babel did its job. ( test.js should have been created in the dist fodler)

18. Open \dist\test.js in and editor. The code you see should look like this:

var _createClass = function () { ... }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var myclass = function () {
 function myclass(name) {
    _classCallCheck(this, myclass); = name;

  _createClass(myclass, [{
    key: "display",
    value: function display() {

  return myclass;

new myclass("myclass").display();

This is the result of the ES6 transpilation.

What you see here is pure ES5 code which can be run directly in a browser. The “_createClass” method referenced in the code refers to a helper function inserted by the transpiler itself which is used to help create the ES5 based class.
This is NOT the same thing as React.createClass() which is a function available in earlier versions of React that was used to create React class-based components and which has since been deprecated in favor of using ES6 classes and a transpiler.

19. Use node.js to run the test file:

node dist\test.js 

The output should be:


The current setup is suitable for development of standalone JavaScript code that uses ES6 and needs to be compiled to ES5. In the next part we will add JSX transpilation.

Part 2 – JSX Transpilation support

In this part you will add JSX transpilation support to the development environment.

1. Use node package manager to install the following packages into the project:

npm install react --save
npm install react-dom --save
npm install prop-types --save

2. Use node package manager to install the following development dependencies into the project:

npm install babel-preset-react --save-dev

3. Open the “.babelrc” file.

4. Add “react” to the “.babelrc” file as shown in bold:

{ "presets": [
    ["env", {"targets": { "browsers": ["last 2 versions"] } }]


5. Save the file.

6. Create a basic index.html file in the project root with the following contents:

<!doctype html>
<title>My React Project</title>

7. Save the file.

8. Modify the index.html file:

  • Add <script> tags to the <head> section to include the react and react-dom JavaScript libraries.

  • Add a <div> to the body with “id=main”

  • Add a <script> tag just before the ending </body> tag to include an ‘app.js’ file from the “dist” directory.

  • Save index.html

9. When you are done your index.html file should look something like this:

<!doctype html>
<title>My React Project</title>
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<div id="react-container"></div>
<script src="dist/app.js"></script>

10. Save the file.

11. Create an “app.js” file in the “\src” directory with the following contents:

    <h3>My App Title</h3>,

12. Save the file.

13. Run the babel compiler:

npm run babel 

Note: running “babelw” instead of “babel” will open it in “watch” mode. In “watch” mode babel will stay active after it runs and will run again every time you save changes to your files.

14. Check that babel did its job. Open the transpiled file from the dist directory in an editor:


15. You should notice that the content from the original file that appeared like this:

<h3>My App Title</h3>

Now appears like this in \dist\app.js

 'My App Title'

This is the result of React JSX transpilation.

16. Open index.html from the file system in the Chrome browser. The page should show “My App Title”.

Some application operations require the index.html to be served from a file server instead of directly from the file system. In the next part we will add a development server to the setup.

Part 3 – File Server Support

In this part you will add a development file server to the setup.

1. Use node package manager to install the following development dependencies into the project:

npm install http-server --save-dev

2. Open package.json file.

3. Add the following script to the package.json file before the other scripts:

"start": "http-server",

4. Save the file.

5. Start the server:

npm start

6. Open index.html in the Chrome browser using the following url:


The page should load as before but this time from the development file server.

7. Close all open files.

8. Close the browser.

9. Stop the server by CTRL+C and close the command prompt window.

Part 4 – Review

In this tutorial, you have created a development setup that:

  • Transpiles ES6 code

  • Transpiles JSX code

  • Serves React Application files ( index.html, etc. )