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:
- 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.
- 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
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.
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.
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.