Building Modern Distributed Applications with Thriftly & Angular

For building modern web applications, developers need to become proficient in Javascript.  Since so much of the application revolves around creating a great user experience and rich UI, building everything from scratch in plain Javascript is not practical. That is why you need  Javascript frameworks that provide developers an easy way to build web applications, filters, and directives.

Thriftly is an API development platform that makes the creating and deploying of APIs trivial. You can get an API running in any of the supported programming languages in a matter of minutes.  Thriftly also handles a number of things to reduce the complexity of building a modern application such as the ability to add a login function and “session style ” validation using JWTs. 

In addition, Thriftly makes adding a login function and “session style ” validation using JWTs very easy. Additionally, by using the Thriftly Gateways, you can publish your API without fiddling with firewalls or requiring port forwarding or DMZs. An API can be made public on the internet using secure tunneling technology without network configuration. At the same time, the gateways also provide a secure https endpoint for your API.

Many developers think that transforming their existing applications into a distributed application running on hybrid cloud infrastructure is a somewhat complex undertaking. That is true to some extent, and that is why we created Thriftly.io!  Before we go further into Angular, I think it is worthwhile to address those concerns

Myth #1:  Reengineering your application takes a long time

The first myth relates to how long it takes to convert a traditional monolithic application into an API-based architecture, be it one with a browser or mobile front end. Often the myth is that it’s a multi-year process. And using the classical methods and tools available, very often that can be the case. But what we’ve found is quite different in practice for two reasons:

1. Rarely does the entire application NEED to be a web application. Quite often you can get a very high return on investment by choosing the most critical parts of your application that will benefit from being available on the web or a mobile device.
2. You don’t have to build everything at once and you may find that there are parts of your application that just aren’t used even in the Desktop version.
   
   

Thriftly makes the development cycle much faster by allowing code reuse and removing all the work that normally goes into building the “Server” portion of a web application.

Myth #2: Web UIs  cannot duplicate the complexity of a Windows applications

The next myth is that Web Applications can’t duplicate the complexity of a Windows desktop application. But this overlooks a very important aspect of web development. Windows applications have almost always had an inherent limitation: Windows controls. Although you could turn to 3rd party controls, and developers have often done this, still you’re limited in what you can build. In comparison the web is a blank canvas.

But more importantly, things that weren’t easy to do in Windows applications are trivial to accomplish on the web. If a visual representation of something is best, that is what you can build. If an interactive map would work better than a screen full of data entry fields, that’s what you can build. The same goes for things like dashboards and global search features. The point is, using tools like Thriftly and Angular aren’t meant to hamstring you, they’re meant to open things up and they do this with aplomb. 

Moving on to Angular

Next, we’ll discuss in more detail the parts that make up an Angular application. Angular is a modern javascript framework designed to create efficient and scalable Single Page Applications (or SPAs). Angular applications are made up of modules, components, services, filters, and directives.

Modules

As you can see, a module can contain a variety of other things. It can be made up of services, components, directives, filters, and any combination of these pieces. A module is a way of organizing things in a modular fashion. Because of this modularity, they can be easily imported into other Angular modules, and exported to be used in other modules. A module does not contain hard rules of what it can contain but there are common practices to ensure that modules stay orderly and manageable. When a piece of code or a feature becomes too big, it can then be broken in submodules and readability and maintainability are improved. 

Components

Angular allows us to create custom web components, or elements. These components can be as simple as a custom text box and as complicated as a table with infinite scrolling, custom sorting, and dynamic filtering. These components rest in the DOM and Angular handles all of the logic contained inside of them, deciding what to show, when to show it, and what to do with certain user interactions. A custom component will usually contain three main pieces. A template, which holds the HTML associated with it and is the piece that gets inserted into the DOM. A Javascript class that is bound to the HTML which contains the data, some rules for the data, and what functions to perform when users do things like click a button. Finally, it contains a stylesheet with all the styles scoped to that particular element. This ends up being CSS but can start as other various CSS preprocessors. The unique thing about these stylesheets is that, unlike normal stylesheets which are scoped to the HTML DOM, they are dynamically inserted into the component only and scoped so that they only apply to that component. Another piece that is often associated with components is a service. Services contain business logic and API calls and will be discussed in more detail below.

Services

Services are created with a Javascript class and contain all the business logic for a specific feature. Services perform the much needed task of hiding complexities, keeping components from becoming convoluted and bloated. For example, usually an application will communicate with an API. This API will no doubt contain custom logic. Whether it be JWT tokens, cookies, or custom URLs, complexities with API’s almost always exist. Instead of accounting for these every time we make an HTTP call in a component, that component can instead call a service which will take the data, perform all the logic, send it to the proper API call, receive the response, parse it as necessary, and then give it back to the component to do with it what it wants. This allows the component to only have to deal with the data and where and how it gets displayed. Furthermore, this custom API service can then be used in every component that is needed and all logic for the API is contained in one place. Services in Angular are almost always a singleton, meaning they are only instantiated once, so reusability is high.

Filters & Directives

Filters are used to transform data displayed in the HTML to the user. These are really just simple piping functions that take in data and spit it back out in various forms. Angular includes many built-in filters for formatting currency, dates, numbers, etc., but custom ones can also be written to handle specific scenarios. Note that filters are usually reserved for text and not inputs. For inputs, more customization is usually needed and a directive is used. See below.

Directives are similar to components except that they usually attach themselves to elements instead of being a custom element themselves. A common use for a directive is to attach it to an input. Once attached, you can do all kinds of things like validate the input, format the input, and add custom CSS classes to the element as needed. Directives are also used as simple state machines to handle toggling sidebars and opening and closing drop downs. Angular includes many built-in directives to handle things like repeating elements based on data and showing and hiding elements based on data.

Bootstrapping

Angular kicks off the application by a process called bootstrapping. A custom element, or component, is created and declared within Angular. Then it is inserted into the DOM somewhere. Angular then finds that element in the DOM and “bootstraps” itself to it. From then on, all activity within that element is first ran through Angular. When the url changes, Angular catches that, looks at the routes that have been defined and determines which component to load. Often there are rules in place for that specific component and certain data may be injected into it, like a customer record. Then the template is parsed by Angular and gets all of the necessary bindings and watches in place. Finally, the template is loaded into the specified location in the DOM with the data properly bound to it. As the data changes, either by user interaction or by some code in place, Angular will determine the most efficient way to update the DOM, perform any logic needed, and then “sync” the HTML in the DOM with the rules set up in the component.

How to Get Started with Angular

All that is needed to start developing Angular is a modern code editor (like VS Code), NodeJS and NPM installed globally, and a browser to test on. Through Node’s package manager (NPM) Angular and all its dependencies can be brought into your workspace. After the dependencies have been installed, you can use Angular’s builtin CLI to create a base app to start from. The CLI can be used for many functions from there like creating new components, serving the app locally and building the app for production. From there the code can be developed in the editor and viewed in the browser by accessing the url specified in the console after running Angular’s "serve” command.

Mertech Links to Help You Get Started