Welcome!

Java IoT Authors: Pat Romanski, Elizabeth White, Liz McMillan, Paul Simmons, Yeshim Deniz

Related Topics: @DevOpsSummit, Java IoT, Microservices Expo

@DevOpsSummit: Blog Post

Template Caching in Angular By @Logentries | @DevOpsSummit [#DevOps]

Let's see if we can optimize the number of requests needed to load the templates for our own controllers and directives

Template Caching in Angular - How to Avoid the Storm
by Raul Martin

When we build a JS application, we usually start thinking about optimizing the http request, compression and, sometimes, "uglifying" the JS files.

But, what about the HTML files? Let's see if we can optimize the number of requests needed to load the templates for our own controllers and directives!

template-caching-in-angular-how-to-avoid-the-storm

Using Templates Without Impacting Your Server
For a start, here are the two best ways that I know to associate a template with a directive in Angular:

1. Get the template as a string (inline):

angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.customer = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
}])
.directive('myCustomer', function() {
return {
template: 'Name: {{customer.name}} Address: {{customer.address}}'
};
});

Reference: https://docs.angularjs.org/guide/directive

2. Get the template from an external file

angular.module('docsTemplateUrlDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.customer = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
}])
.directive('myCustomer', function() {
return {
templateUrl: 'my-customer.html'
};
});

Reference: https://docs.angularjs.org/guide/directive

You can also use templates when using controllers. For example, you could use the templateUrl property with a $routeProvider or use an embedded tag within an html block related to a controller.

Since the templateUrl property is usable in both contexts, let's focus on it for the moment. Using that property means that when you need a template, the browser will grab the file from the specified URL. I.e. If you have 50 templates references, you get 50 server requests. If you have 10,000 templates references, you need to find a shelter fast to protect yourself from the incoming DevOps Storm!

As you know from all your internet reading, the good way to write templates is in separate files because it is more maintainable, extensible, (add your own positive adjective here). But the one that matters to us right now is that it needs to be easy to implement. I'm sure that if you are an angular hipster like me, you already compress, uglify and compact JS files. Basically what that means is that we are using differents systems to make the files smaller and consolidate them into one final file to minimise the number of server connections and the amount of data transferred.

Why would we not do the same with our html templates? Well, the solution probably lies somewhere between our two examples... i.e. could we have tried to stick to "template" as we were not duplicating calls but keep the idea of "templateUrl" which allows us to externalize our html work. Let's see if we can find something to do this.

The good news is that Angular can already help you! The service that does this for us is $templateCache.

The first time a template is used, it is loaded in the template cache for quick retrieval

Yeah! we can now use a cache, nothing really special at this point but the documentation also says:

You can load templates directly into the cache in a script tag

This means that we should be able to do something like this:

<script type="text/ng-template" id="templateId.html">
<p>This is the content of the template</p>
</script>

Exciting, this means we should be able to do a nice trick here...

Let's consider that you have already implemented your template as a separate file i.e. you have something like this:

templateUrl: ‘my-customer.html'

What happens now if we use the $templateCache service is as follow:

  • load a script with type="text/ng-template"
  • refer to your templates using the same ID (file path)
  • the first time the template is accessed, angular will get it from the server and add it to the $templateCache
  • every time that ID is referenced from then on, angular gets it from the $templateCache and not from the server!!

Updating Your Existing Templates to Use $cacheTemplate
Now, we're all facing a problem. Before looking for this blog post, we've already implemented templates and currently it's raining very hard on us from the DevOps cloud. This means that we need to migrate an already implement set of HTML files to the Angular.JS  caching.

The common aspect to all approaches is that you need to consolidate all those HTML files into one somewhere in your deployment cycle (using watchers in your development environment, when the page loads, ...)

For example, one possible implementation in django is to create a new template tag:

from django.contrib.staticfiles import finders
from django import template

register = template.Library()

@register.simple_tag
def angular_template(relative_path):
html = '<script type="text/ng-template" id="+ relative_path + '">'
result = []
for finder in finders.get_finders():
result.extend(finder.find(relative_path, True))
path = result[-1]
with open(path) as file:
html += file.read()
html += '</script>'
return html

Using the above code, you can now reference the template in the following way in your django template:

{% angular_template 'directive_path/template.html' %}

The main benefit is that you don't need to change anything in your directive or controller to add this behavior and you can decide what content will load the "normal way." For example, you can decide not to use this for sensitive content.

IMPORTANT: you need be sure that the templateUrl value and the id in the ng-template match (same string).

Server Side Caching
Additionally, it is usually a good idea to use a server side cache in order not to reload those templates. Let's look at an example that uses the Django cache to make sure we only read the files once when serving the first request.

from django import template
from django.contrib.staticfiles import finders
from django.core.cache import get_cache
import hashlib

from django import template

register = template.Library()

@register.simple_tag
def angular_template(relative_path):
cache = get_cache('angularTemplateCache')

m = hashlib.md5()
m.update(relative_path)
id = m.hexdigest()

html = cache.get(id)
if html:
return html

html = '<script type="text/ng-template" id="' + relative_path + '">'

result = []
for finder in finders.get_finders():
result.extend(finder.find(relative_path, True))
path = result[-1]

with open(path) as file:
html += file.read()
html += '</script>'

cache.set(id, html)

return html

For this code to work, you also need to set the cache in the settings file (as per https://docs.djangoproject.com/en/1.8/topics/cache/)

CACHES = {
'default': {
...
},
'angularTemplateCache': {
'BACKEND': ...,
'LOCATION': ...,
'TIMEOUT': None
}
}

Of course, as for any great trick, there are a couple of slightly negative impacts. The first one is that when you add a new directive, you now need modify your main html file.

The above implementation is currently my favorite! It feels a bit like infinite chocolate.

There are alternative ways, for example you can create a more complex tag template or build a task to generate the includes.

For completion, let's look at a widely spread practice (that I do not particularly like). It is based on loading the $templateCache differently and creating a JS file.

var myApp = angular.module('myApp', []);
myApp.run(function($templateCache) {
$templateCache.put('templateId.html', 'This is the content of the template');
});

You can automate this process and create a JS file with this logic which you then add to your application. You can have a look at the following projects to see such implementations:

So, we've looked at a couple of alternatives to  load your templates, minimize the number of connections from your browser and your network traffic, optimize the disk access from your server.

Do you think you're now ready to face that Storm?

More Stories By Trevor Parsons

Trevor Parsons is Chief Scientist and Co-founder of Logentries. Trevor has over 10 years experience in enterprise software and, in particular, has specialized in developing enterprise monitoring and performance tools for distributed systems. He is also a research fellow at the Performance Engineering Lab Research Group and was formerly a Scientist at the IBM Center for Advanced Studies. Trevor holds a PhD from University College Dublin, Ireland.

@ThingsExpo Stories
Organizations planning enterprise data center consolidation and modernization projects are faced with a challenging, costly reality. Requirements to deploy modern, cloud-native applications simultaneously with traditional client/server applications are almost impossible to achieve with hardware-centric enterprise infrastructure. Compute and network infrastructure are fast moving down a software-defined path, but storage has been a laggard. Until now.
DXWorldEXPO LLC announced today that All in Mobile, a mobile app development company from Poland, will exhibit at the 22nd International CloudEXPO | DXWorldEXPO. All In Mobile is a mobile app development company from Poland. Since 2014, they maintain passion for developing mobile applications for enterprises and startups worldwide.
Digital Transformation is much more than a buzzword. The radical shift to digital mechanisms for almost every process is evident across all industries and verticals. This is often especially true in financial services, where the legacy environment is many times unable to keep up with the rapidly shifting demands of the consumer. The constant pressure to provide complete, omnichannel delivery of customer-facing solutions to meet both regulatory and customer demands is putting enormous pressure on...
The best way to leverage your CloudEXPO | DXWorldEXPO presence as a sponsor and exhibitor is to plan your news announcements around our events. The press covering CloudEXPO | DXWorldEXPO will have access to these releases and will amplify your news announcements. More than two dozen Cloud companies either set deals at our shows or have announced their mergers and acquisitions at CloudEXPO. Product announcements during our show provide your company with the most reach through our targeted audienc...
IoT is at the core or many Digital Transformation initiatives with the goal of re-inventing a company's business model. We all agree that collecting relevant IoT data will result in massive amounts of data needing to be stored. However, with the rapid development of IoT devices and ongoing business model transformation, we are not able to predict the volume and growth of IoT data. And with the lack of IoT history, traditional methods of IT and infrastructure planning based on the past do not app...
"Akvelon is a software development company and we also provide consultancy services to folks who are looking to scale or accelerate their engineering roadmaps," explained Jeremiah Mothersell, Marketing Manager at Akvelon, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
IoT is rapidly becoming mainstream as more and more investments are made into the platforms and technology. As this movement continues to expand and gain momentum it creates a massive wall of noise that can be difficult to sift through. Unfortunately, this inevitably makes IoT less approachable for people to get started with and can hamper efforts to integrate this key technology into your own portfolio. There are so many connected products already in place today with many hundreds more on the h...
More and more brands have jumped on the IoT bandwagon. We have an excess of wearables – activity trackers, smartwatches, smart glasses and sneakers, and more that track seemingly endless datapoints. However, most consumers have no idea what “IoT” means. Creating more wearables that track data shouldn't be the aim of brands; delivering meaningful, tangible relevance to their users should be. We're in a period in which the IoT pendulum is still swinging. Initially, it swung toward "smart for smart...
DXWorldEXPO LLC, the producer of the world's most influential technology conferences and trade shows has announced the 22nd International CloudEXPO | DXWorldEXPO "Early Bird Registration" is now open. Register for Full Conference "Gold Pass" ▸ Here (Expo Hall ▸ Here)
As data explodes in quantity, importance and from new sources, the need for managing and protecting data residing across physical, virtual, and cloud environments grow with it. Managing data includes protecting it, indexing and classifying it for true, long-term management, compliance and E-Discovery. Commvault can ensure this with a single pane of glass solution – whether in a private cloud, a Service Provider delivered public cloud or a hybrid cloud environment – across the heterogeneous enter...
The Jevons Paradox suggests that when technological advances increase efficiency of a resource, it results in an overall increase in consumption. Writing on the increased use of coal as a result of technological improvements, 19th-century economist William Stanley Jevons found that these improvements led to the development of new ways to utilize coal. In his session at 19th Cloud Expo, Mark Thiele, Chief Strategy Officer for Apcera, compared the Jevons Paradox to modern-day enterprise IT, examin...
DXWorldEXPO LLC announced today that ICC-USA, a computer systems integrator and server manufacturing company focused on developing products and product appliances, will exhibit at the 22nd International CloudEXPO | DXWorldEXPO. DXWordEXPO New York 2018, colocated with CloudEXPO New York 2018 will be held November 11-13, 2018, in New York City. ICC is a computer systems integrator and server manufacturing company focused on developing products and product appliances to meet a wide range of ...
Headquartered in Plainsboro, NJ, Synametrics Technologies has provided IT professionals and computer systems developers since 1997. Based on the success of their initial product offerings (WinSQL and DeltaCopy), the company continues to create and hone innovative products that help its customers get more from their computer applications, databases and infrastructure. To date, over one million users around the world have chosen Synametrics solutions to help power their accelerated business or per...
Bill Schmarzo, author of "Big Data: Understanding How Data Powers Big Business" and "Big Data MBA: Driving Business Strategies with Data Science," is responsible for setting the strategy and defining the Big Data service offerings and capabilities for EMC Global Services Big Data Practice. As the CTO for the Big Data Practice, he is responsible for working with organizations to help them identify where and how to start their big data journeys. He's written several white papers, is an avid blogge...
We are seeing a major migration of enterprises applications to the cloud. As cloud and business use of real time applications accelerate, legacy networks are no longer able to architecturally support cloud adoption and deliver the performance and security required by highly distributed enterprises. These outdated solutions have become more costly and complicated to implement, install, manage, and maintain.SD-WAN offers unlimited capabilities for accessing the benefits of the cloud and Internet. ...
Charles Araujo is an industry analyst, internationally recognized authority on the Digital Enterprise and author of The Quantum Age of IT: Why Everything You Know About IT is About to Change. As Principal Analyst with Intellyx, he writes, speaks and advises organizations on how to navigate through this time of disruption. He is also the founder of The Institute for Digital Transformation and a sought after keynote speaker. He has been a regular contributor to both InformationWeek and CIO Insight...
Join IBM November 1 at 21st Cloud Expo at the Santa Clara Convention Center in Santa Clara, CA, and learn how IBM Watson can bring cognitive services and AI to intelligent, unmanned systems. Cognitive analysis impacts today’s systems with unparalleled ability that were previously available only to manned, back-end operations. Thanks to cloud processing, IBM Watson can bring cognitive services and AI to intelligent, unmanned systems. Imagine a robot vacuum that becomes your personal assistant tha...
"MobiDev is a software development company and we do complex, custom software development for everybody from entrepreneurs to large enterprises," explained Alan Winters, U.S. Head of Business Development at MobiDev, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
I think DevOps is now a rambunctious teenager - it's starting to get a mind of its own, wanting to get its own things but it still needs some adult supervision," explained Thomas Hooker, VP of marketing at CollabNet, in this SYS-CON.tv interview at DevOps Summit at 20th Cloud Expo, held June 6-8, 2017, at the Javits Center in New York City, NY.
Recently, WebRTC has a lot of eyes from market. The use cases of WebRTC are expanding - video chat, online education, online health care etc. Not only for human-to-human communication, but also IoT use cases such as machine to human use cases can be seen recently. One of the typical use-case is remote camera monitoring. With WebRTC, people can have interoperability and flexibility for deploying monitoring service. However, the benefit of WebRTC for IoT is not only its convenience and interopera...