InRhythm

Your partners in accelerated digital transformation

JavaScript

A Comprehensive Guide To Java’s New HTTP Client

Overview 

The Hypertext Transfer Protocol (HTTP) is the foundation of the World Wide Web, and is used to load web pages using hypertext links. HTTP is an application layer protocol designed to transfer information between networked devices and runs on top of other layers of the network protocol stack. A typical flow over HTTP involves a client machine making a message request to a server, which then sends a response message.

Java is a general-purpose, class-based, object-oriented programming language designed for having lesser implementation dependencies. It is a computing platform for application development. Java is fast, secure, and reliable, therefore, it  is widely used by everyone from the newest to most advanced web developers. 

In Daniel Fuentes’ Lightning Talk session, we will breaking down the following topics:

  • What Is HTTP?
  • Improvements In HTTP 2.0
  • How HTTP 2.0 Impacts Java
  • Live Demonstrations
  • Closing Thoughts

The new HTTP 2.0 Client was released in Java 11. This new client is used to request HTTP resources over the network. It supports HTTP/1.1 and HTTP/2.0, both synchronous and asynchronous programming models, handles request and response bodies as well as reactive-streams, and follows the familiar builder pattern.

What Is HTTP?

HTTP is an application layer protocol designed to transfer information between networked devices. HTTP runs on top of other layers of the network protocol stack. 

HTTP is a protocol for fetching resources such as HTML documents. It is the foundation of any data exchange on the Web and it is a client-server protocol, which means requests are initiated by the recipient, usually the Web browser. A complete document is reconstructed from the different sub-documents fetched, for instance, text, layout description, images, videos, scripts, and more.

Clients and servers communicate by exchanging individual messages (as opposed to a stream of data). The messages sent by the client, usually a Web browser, are called requests and the messages sent by the server as an answer are called responses.

The typical flow over HTTP involves a client machine making a request to a server, which then sends a response message. 

HTTP was invented alongside HTML to load web pages using links (hypertext). It was a part of the first interactive, text-based web browser: the original World Wide Web. Today, the protocol remains one of the primary means of using the Internet.

Improvements In HTTP 2.0

HTTP 2.0 is based on streams and binary frames, in comparison to the text-only request models of its previous iteration. Unlike text-only interfaces, streams can be multiplexed asynchronously over one TCP (Transmission Control Protocol) connection. Comparatively, HTTP 2.0 reduces latency, therefore enhancing its performance. 

How HTTP 2.0 Impacts Java

Java was commonly built upon the HttpURLConnection class – which had an original launch in 1999 when HTTP 1.0 was still a fresh protocol. With a backbone built from outdated technology, it was never able to update properly in response to the rapidly changing nature of web protocols. 

Its steady incompatibility and lack of ease in use, led developers to opt out of Java’s direct class and instead employ third party solutions (ie. Apache, Netty, Eclipse, Google, etc.).

With the new updated Java 11 developer toolkit, came a number of operational changes – but namely, the adoption of HTTP 2.0. In order to meet the demand of an environment consistently in motion, Java made these longevity changes:

  • Eliminating the need for 3rd party client dependencies
  • Building in a backwards compatibility with HTTP 1.0 for remaining servers that may have not yet made the switch to HTTP 2.0
  • Instating an asynchronous support network for multiple HTTP requests
  • Vastly improving performance with the addition of Header compression and Single Connections for multiple requests

Live Demonstrations

Daniel Fuentes has crafted an intuitive demonstration to help guide you through this new Java HTTP in practicum: 

Be sure to follow Daniel’s entire Lightning Talk to view this impressive demonstration in real time.

Closing Thoughts

All programs should always be designed with performance and the user experience in mind. The properties explored above are the primary stepping stones to exploring the basic components needed to test HTTP 2.0 in order to improve your application. Be sure to explore, have fun, and match up the components that work best for your project!

Happy coding!

To learn more about Java’s Updated HTTP Server as well as its influence in web development and to experience Daniel Fuentes’ full Lightning Talk session, watch here. 

An Introduction To Web Components

Overview

Have you ever dreamed about sharing components across multiple applications? As a developer, the ability to reuse code is an irrefutable advantage. Traditionally, however, this hasn’t been the easiest venture for coders – even with careful diligence, your custom UI controls when manually multiplied, could create a huge web UX mess.

Web Components aim to solve this problem– by creating versatile custom elements with encapsulated functionality that can be used whenever and wherever you’d like without fear of code collision! 

In Chen Song’s Lightning Talk session, we will be uncovering the following topics:

  • What Are Web Components?
  • JavaScript Frameworks vs. Web Components 
  • Browser Compatibility
  • Closing Thoughts

What Are Web Components?

First introduced by Alex Russell at the 2011 Fronteers Conference, Web Components have served as a great resource for frontend developers. 

Web Components are a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — so you can utilize them at a multiplicity throughout your custom web application, without frontend glitches. These components work across all modern browsers and can be used with any JavaScript library or framework that works with HTML, making it an accessible asset for any coder. 

The primary elements that fuel Web Components are:

  1. Custom HTML Elements

The Custom HTML Elements serve as a set of JavaScript APIs that will allow you to define custom elements and their behaviors – to be used as desired in your user interface. 

Example: These elements will allow you to register your own HTML Tags, as shown below.

When coding your custom HTML elements using Web Components, you will need to pull in code support from JavaScript in order for the browser to recognize it and present it properly on your frontend. 

When done correctly, with the assistance of the Web Components engine – you should see the following interface browser display:

  1. Shadow DOM

A Shadow DOM is an encapsulated “shadow” DOM tree which is attached to an element, in order to allow you to render it separately from the main document DOM – so you can externally control the associated functionality. In this way, you can keep the element’s features (script and style) private and avoid any possible collision with other parts of the document. 

Example: In order to attach a Shadow DOM to your script, you’ll be attaching it per the “this.shadowRoot.” to connect the element to your Web Components, as shown below.

When done correctly, with the assistance of the Web Components engine – you should see the following interface browser display:

  1. HTML Templates And Slots

The <template> and <slot> enables you to write markup templates that will not be rendered on the display. These templates can be reused multiple times as the basis of a custom element’s structure.

When done correctly, with the assistance of the Web Components engine – you should see the following interface browser display:

JavaScript Frameworks vs. Web Components 

While both engines pose their own compilations of pros and cons, with the software industry being one of the fastest growing pipelines – it’s important to keep our resources in perspective. 

JavaScript Frameworks

  • More complex – they include a number of components, as well as additional features to build out the rest of your application post-code
  • They can’t be shared across different platforms 

Web Components

  • Only features code components
  • Built with Vanilla JavaScript, meaning they are reusable cross-platforms
  • Strong encapsulation 

Browser Compatibility

To receive the most up-to-date frontend service compatibility information, visit here. 

Closing Thoughts 

Web Components have revitalized the frontend game, giving coders an accessible point of reference to intuitively build displays without “reinventing the wheel.” Overall, bringing more power and innovation to your “coder’s toolbox!” The properties explored above are the primary stepping stones to experimenting with the basic components needed to test  how Web Components can help streamline processes for your current (or future!) development portfolio. Be sure to explore, have fun, and match up the components that work best for your project!

Happy coding!

To learn more about Web Components, along with some live test samples, and to experience Chen Song’s full Lightning Talk session, watch here. 

An Introduction To Web Animation

Overview

Web design has undergone a number of innovations over the years, with each new implementation bringing a unique “flavor” to their coding.

Web animation has been dominating our screens in recent years, raising the bar for more intuitive and exciting user experiences online. Website design animation turns an ordinary user experience into an unforgettable journey that amazes with its bold colors, movements, adventures, and exciting interactions. 

In Alec McGovern’s Lightning Talk session, we will be uncovering the following animation topics:

  • What Is Animation?
  • Timing Functions
  • Test Your Skills
  • Closing Thoughts

What Is Animation?

Animation is all about breathing life into your web page. It can be anything from a simple button hover to a more complex customized menu slide – an animation serves a primary purpose in making your application readable, user friendly, and overall… FUN! Animations work to engage your users in a tangible way, meanwhile drawing attention and focus.

The two most commonly used CSS (Cascading Style Sheets) for animation are:

  1. Transitions

Transitions are the simplest way to animate a DOM (Document Object Model) element – or in other words, the determined page contents and its associated elements. They allow you to make a smooth consistent change to page elements over a specific duration of time. 

The primary components to a successful transition animation rule are:

  • transition-property

A transition-property will specifically denote what CSS element you’ll be specifically changing (examples include: color, opacity, etc.)

  • transition-duration

A transition-duration will specifically denote the allotted time the animation should take to complete before looping.

  • transition-delay

A transition-delay will specifically denote how long the animation should wait (in-between period) before looping the animation over again. 

  • transition-timing-function

A transition-timing-function will specifically denote how “fast” the visual animation should move on the web browser when a user engages with it. 

Example: The below transition code utilizes the property and duration formulas used to show that changes in opacity (transparency) should span a duration of two seconds before disappearing completely.

  1. @keyframes

For more complex animated changes over time, @keyframes, a specialized CSS rule, needs to be utilized. @keyframes allow a larger string of properties to be changed within a singular animated sequence. 

Example: The below @keyframes codes utilize the more complex from→to animation types (fadeout), as well as a percentage formula of exact color transitions throughout each animation duration point.

Once you’ve defined your @keyframes elements, you’ll be able to directly code them into your DOM, as shown below:

With both these animation formulas in mind, you’ll not only have a basic understanding of the coding associated but will also be able to implement either CSS code to execute the following tenets of animated web elements. 

What Are Time Functions? 

A time function controls the speed that your animation occurs at. The most commonly used value is, ease: which starts slow, accelerates in the middle, and slows again as the animation loop comes to an end. 

Some other examples include:

  • linear
  • ease-in, ease-out
  • step (int, start│end)
  • cubic-bezier (n,n,n,n)

Test Your Skills

You’ve unpacked quite a few animation principles – think you’re up to trying your hand at some practical animation exercises?

Alec McGovern has created an individual testing space just for you!

To rise to the challenge and apply what you’ve learned to the following animation exercise, click here. 

Closing Thoughts

All animations should always be designed with performance and the user experience in mind. The properties explored above are the primary stepping stones to experimenting with the basic components needed to test how animation can improve your personal web application. Be sure to explore, have fun, and match up the components that work best for your project!

Happy coding!

To learn more about the introduction of animation coding in web development and to experience Alec McGovern’s full Lightning Talk session, watch here. 

Why you should migrate away from Angular JS

Hello readers! A big fan of the Angular Javascript framework here. Today I wanted to go through a few of the reasons why you should look to migrate your existing AngularJS projects (any Angular release version under 2) to a more modern and actively supported framework (or library).

You might be thinking “well, this guy is internally conflicted”, but give me the opportunity to explain myself. Even though AngularJS is a fantastic piece of technology that surely was top of its class when it came out (October 2010) and despite the fact that I enjoy working with its successor Angular.io (also known as Angular 2+), AngularJS has become outdated (EOL December 2021), and a risk to your company in many different ways.

Dilbert strip - Larry tries to tell PHB what the legacy systems did. PHB says no, he doesn't care about legacy systems. Dilbert asks, "I though we replaced all of our legacy systems." Larry says, "Keep your thoughts to yourself."
@2017, Scott Adams, Inc.

The framework has reached end of support (Version Support Status). This means that it has become read-only mode, it will not be updated further. The framework has not been developed for over a year now (Release 1.8.2 happened in October 2020), and even though extended support was supposed to end mid-2021, it was extended to December 2021 due to the global pandemic. Here’s a blog post by the Angular team regarding discontinued long term support.

To add some support to the point I’m trying to make, I’ll share that Angular was created and mainly maintained by Google. Google recognized the shortcomings of AngularJS, and completely rewrote it to release Angular.io. AngularJS only made it to version 1.8.3, however Angular.io has already made it to major version 13 (current at time of writing), with many more versions to come.

What could be making you hold onto your existing AngularJS apps

Trust me, I’ve been there. You have a perfectly functioning application which needs little maintenance, and you have engineers who know it in and out already. Why invest a part of your budget in fixing something that’s not broken? Why bring in new people that don’t know the product? Why push your engineers to do something new/different to what they’ve been doing?

Dilbert strip - PHB announces to Dilbert that the legacy system maintainer quit. Tells Dilbert to fix it. Dilbert standing in front of odd large mechanical device with a screen, pipes, and pipes with the thought bubble, "Frack."
@2016, Scott Adams, Inc.

The reasons

Technology: As I stated earlier, AngularJS is outdated. This means that in its feature-set, performance, and just keeping up with latest developments in Javascript and the web browsers, AngularJS has clearly lagged behind, mainly due to the fact that it has been in maintenance mode and not actively developed on for years. If you stay on this framework, you won’t take advantage of the rapidly evolving web world, and the evolving smart devices and their new features.

Support: As the framework is no longer maintained, any new issues or limitations you encounter will not only lack an answer/help from the AngularJS team (again, not supported anymore), you most probably also won’t have a huge community online to help you with it, like you would have with any modern framework. This could mean a longer time to fix issues that come up in your application, and a rough experience for your engineers and users.

Security: Perhaps the biggest reason why you should move away from AngularJS. Like any unsupported package out there, you won’t be protected when any new security exploits are identified, be it within the framework itself, or any of its thousands of dependencies and indirect dependencies (yes, your app can be exploited by vulnerabilities in the dependencies of the dependencies of AngularJS which is your app’s dependency… you get the point). Usually when something like this happens in an actively supported package, a fix will be published quite swiftly in response to it, or any dependency that includes the vulnerability will be updated with a newer version.

Talent: Not only do you want to provide the best possible experience for your users, but also for your app engineers. When you are trying to retain or expand your software team, AngularJS will weigh on any engineer’s decision. Engineers will want to work with quality, cutting edge technology. It is hard for engineers to get or even stay excited about working on a framework that has reached end of life. It will be much easier for you to retain and hire engineers if your apps run on modern technologies and following best practices and industry trends. I cannot stress how much easier will it be to fill open positions when your tech stack is attractive for the engineers. You can also think about what will happen once you actually find someone willing to do the job on your legacy system, they will play hard to get and you’ll end up paying more for an engineer that is probably not up to date on industry standards.

Business: For current technologies, the help you will get from the online community is massive, which speeds up the time it takes to fix and implement new features, and to resolve critical situations that may arise. Not only your engineers will be happier and more engaged in what they are doing, it also impacts your branding. Are you a company that invests in and works with the latest and greatest? Or a company that settles with whatever is there?

Dilbert strip - Patty asks Larry how long it will take to add a feature to the legacy system. Larry asks when the new system will replace the old system. Patty responds, six months. Larry then says the new feature will take seven months.
@2017, Scott Adams, Inc.

I know that was a lot of talking, but I can tell you with confidence that we have seen the impact that migrating legacy applications has for many of our customers, and it is massive. Not only do applications come alive and look and feel more modern, but engineers come to work in a better mood and eager to get things done, and a true engineering culture is fostered. Even though keeping legacy systems might seem like the easy or cost-efficient way, there are several hidden (or not obvious) costs that come with it.

If you need any help assessing or migrating your systems, do not hesitate to reach out to us at any of the following:

get@inrhythm.com

InRhythm Website – Contact Us

+1 (800) 683-7813

Written by Juan Porley, Director of Engineering, Web Practice @ InRhythm

Configuration Automation Tools: Orchestrating Your Deployment

“We must accept human error as inevitable – and design around that fact.” – Donald Berwick

Raphael Weaver

In our Technology field, buzz words come and go. One day we’re discussing how databases are the new best thing to the world of Agile Development and the next we see programming languages, frameworks, and methodologies bit the dust like an old western movie.

But one unchanging aspect of technology and its journey is the People who are an irreplaceable part of the creation, the demise, and the popularity of any given technology. This modern-day-world calls for a close to perfection execution, which humans cannot always account for. How does that affect us, the developers and creators, when we are called to building perfect products? 

Removing Human Error

Automation automation automation – and of course throw in some orchestration deployment and configuration management. Leaving the buzz words behind the jest of all of this, “new technology frontier”, is removing human error. This is removing the dependencies of tribal knowledge when it pertains to application and system administration job duties. Those job duties are performed in a repetitive fashion. The job duties are usually consolidated into various custom scripts, leaving a lot of those scripted actions the ability to be boxed up and reused over and over again.

For example, what steps does it take to deploy an application to a server instance? 

  1. Download and Install the various languages and/or framework libraries the application usages.
  2. Download, Install, Configure the Web server that the application will use.
  3. Download, Install, and Configure the Database that the application will use. 
  4. And finally Test to see if all the steps are installed and configured correctly. 

Last but not least run application tests to make sure it is running as expected. Those are the highlight steps for deploying an application to a bare metal, cloud, or virtual server. With a further review, there are numerous upon numerous additional steps. Something simplistic nevertheless highly catastrophic is a possibility of a typo. Consider this case, maybe in this scenario, I meant to type

cd /var/ect/ansible; rm -rf *

but instead I forgot the cd execute command and only ran

rm -rf /

Now my whole drive is erased. Surprisingly enough this can happen quite often even though I am pretty sure the source of truth of my drive is backed up. However, as Murphy Law states, what can happen will happen. And let’s be honest, redoing previous actions that could have been avoided is a down right pain.

No Hidden/Tribal Knowledge

Let’s look back at those steps to deploy an application to an environment. There are a lot of gotchas and/or small intermediary steps involved. For instance, I only listed the high-level steps. I hand these steps to a new engineer or even a junior engineer fresh out of college. The chances are these engineers will have to ask several questions on  “How to”. 

These series of questions will eventually lead to someone like myself saying “just let me do it”. This is how one scenario can lead to years upon years of hidden or tribal knowledge, as one may call it.  To harbor information like a fugitive on the run is getting more and more exposed in the IT/Software industry. The information should be a source of truth maintained in a repository database, that is easy and intuitive to leverage

Implementation Technology Overview

What does that source of truth entail? Can we not skip the documentation of information and go straight into the execution of the steps onto a given system? Or create scripts to reconfigure the application if there was ever a need to? Those questions have been proposed several times and solutions have been formulated several times into the form of extensive and comprehensive build tools/frameworks. These tools are used throughout the industry to solve the problem of orchestrated development, configuration automation and management. 

Furthermore, DevOps tools such as: Chef, Puppet, and Ansible are well mature automation/orchestration tools. Each tool will provide you with enough architecture flexibility to virtually handle any use case you present. Let’s take a slight dive into each one of these technologies.

Puppet

Puppet is the first widely used Configuration Automation and Orchestration software dating back to its initial release in 2005. Puppet uses the Master and Slave paradigm to control X amount of machines. The Ruby language is the script language say, for executing commands in a destination environment. 

The “Puppet Agents”(Slave) are modularized distinct components to be deployed to a server. This can be used for the creation of the server(ie. web server, database, application) in its destination environment.  The Puppet enterprise (Master) is comprised of all the inner workings to manage, secure, and organize agents.

Puppet Architecture

Documentation 

Chef

Chef is somewhat similar to Puppet. The core language used within Chef’s abstract module components is Ruby. Chef has several layers of management for your infrastructure automation needs. The Chef workstation is the primary area for managing the various Chef components. The Chef components consist of cookbooks, recipes, and nodes. The naming convention actually follows what you would consider these nouns in cooking to be with technical context of course. 

Recipes are collections of configurations for a given system, virtual, bare metal, or cloud environment. Chef calls those different environments nodes. Cookbook contains recipes and other configurations for application deployment and control mechanisms for the different Chef clients. Lastly, the whole collections of cookbooks are maintained in a Supermarket.

Chef Architecture

Documentation

Ansible

Ansible is the newest mainstream automation/configuration management tool on the market. Therefore, Ansible uses more modern programming languages and configurations concepts and tools. Python is the programming language used in this framework. One of the modern and fastest up-and-coming template languages is YAML. YAML is programming language agnostic and is a subset of the ever so popular JSON. YAML is used within Ansible to describe an Ansible playbook. 

Ansible playbook contains the steps that need to be executed on a given system. Once the Ansible playbook is intact configuration or further manipulation of the host can be executed through Ansible API – which is implemented in Python. There are several other components within Ansible technology such as modules, plugins, and inventory. 

Ansible Architecture

Documentation

Reusability

After covering a couple of the Configuration Automation and Development tools on the market you can see the vast amount of flexibility available in eliminating those repeatable steps from human error. This software’s framework promotes reusable software within an organization – which is the most viable. The ability to scale your application development environment and environmental infrastructure is critical. 

The learning curve may be deeper than using plain old bash scripts but the structure and integrity of using a proven tool and ease of maintenance outweigh the learning curve.

Check it for yourself, reorganize and propel your CI/CD process with Configuration Automation and Orchestrated Deployments and let me know what you think about this article in the comments below.

Raphael Weaver

Sr. Software Engineer