Welcome!

Java IoT Authors: Automic Blog, Liz McMillan, Pat Romanski, Kevin Benedict, Elizabeth White

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
Recently, REAN Cloud built a digital concierge for a North Carolina hospital that had observed that most patient call button questions were repetitive. In addition, the paper-based process used to measure patient health metrics was laborious, not in real-time and sometimes error-prone. In their session at 21st Cloud Expo, Sean Finnerty, Executive Director, Practice Lead, Health Care & Life Science at REAN Cloud, and Dr. S.P.T. Krishnan, Principal Architect at REAN Cloud, discussed how they built...
In his session at 21st Cloud Expo, Raju Shreewastava, founder of Big Data Trunk, provided a fun and simple way to introduce Machine Leaning to anyone and everyone. He solved a machine learning problem and demonstrated an easy way to be able to do machine learning without even coding. Raju Shreewastava is the founder of Big Data Trunk (www.BigDataTrunk.com), a Big Data Training and consulting firm with offices in the United States. He previously led the data warehouse/business intelligence and B...
In his Opening Keynote at 21st Cloud Expo, John Considine, General Manager of IBM Cloud Infrastructure, led attendees through the exciting evolution of the cloud. He looked at this major disruption from the perspective of technology, business models, and what this means for enterprises of all sizes. John Considine is General Manager of Cloud Infrastructure Services at IBM. In that role he is responsible for leading IBM’s public cloud infrastructure including strategy, development, and offering m...
With tough new regulations coming to Europe on data privacy in May 2018, Calligo will explain why in reality the effect is global and transforms how you consider critical data. EU GDPR fundamentally rewrites the rules for cloud, Big Data and IoT. In his session at 21st Cloud Expo, Adam Ryan, Vice President and General Manager EMEA at Calligo, examined the regulations and provided insight on how it affects technology, challenges the established rules and will usher in new levels of diligence arou...
The 22nd International Cloud Expo | 1st DXWorld Expo has announced that its Call for Papers is open. Cloud Expo | DXWorld Expo, to be held June 5-7, 2018, at the Javits Center in New York, NY, brings together Cloud Computing, Digital Transformation, Big Data, Internet of Things, DevOps, Machine Learning and WebRTC to one location. With cloud computing driving a higher percentage of enterprise IT budgets every year, it becomes increasingly important to plant your flag in this fast-expanding busin...
Smart cities have the potential to change our lives at so many levels for citizens: less pollution, reduced parking obstacles, better health, education and more energy savings. Real-time data streaming and the Internet of Things (IoT) possess the power to turn this vision into a reality. However, most organizations today are building their data infrastructure to focus solely on addressing immediate business needs vs. a platform capable of quickly adapting emerging technologies to address future ...
No hype cycles or predictions of a gazillion things here. IoT is here. You get it. You know your business and have great ideas for a business transformation strategy. What comes next? Time to make it happen. In his session at @ThingsExpo, Jay Mason, an Associate Partner of Analytics, IoT & Cybersecurity at M&S Consulting, presented a step-by-step plan to develop your technology implementation strategy. He also discussed the evaluation of communication standards and IoT messaging protocols, data...
Nordstrom is transforming the way that they do business and the cloud is the key to enabling speed and hyper personalized customer experiences. In his session at 21st Cloud Expo, Ken Schow, VP of Engineering at Nordstrom, discussed some of the key learnings and common pitfalls of large enterprises moving to the cloud. This includes strategies around choosing a cloud provider(s), architecture, and lessons learned. In addition, he covered some of the best practices for structured team migration an...
22nd International Cloud Expo, taking place June 5-7, 2018, at the Javits Center in New York City, NY, and co-located with the 1st DXWorld Expo will feature technical sessions from a rock star conference faculty and the leading industry players in the world. Cloud computing is now being embraced by a majority of enterprises of all sizes. Yesterday's debate about public vs. private has transformed into the reality of hybrid cloud: a recent survey shows that 74% of enterprises have a hybrid cloud ...
22nd International Cloud Expo, taking place June 5-7, 2018, at the Javits Center in New York City, NY, and co-located with the 1st DXWorld Expo will feature technical sessions from a rock star conference faculty and the leading industry players in the world. Cloud computing is now being embraced by a majority of enterprises of all sizes. Yesterday's debate about public vs. private has transformed into the reality of hybrid cloud: a recent survey shows that 74% of enterprises have a hybrid cloud ...
DevOps at Cloud Expo – being held June 5-7, 2018, at the Javits Center in New York, NY – announces that its Call for Papers is open. Born out of proven success in agile development, cloud computing, and process automation, DevOps is a macro trend you cannot afford to miss. From showcase success stories from early adopters and web-scale businesses, DevOps is expanding to organizations of all sizes, including the world's largest enterprises – and delivering real results. Among the proven benefits,...
@DevOpsSummit at Cloud Expo, taking place June 5-7, 2018, at the Javits Center in New York City, NY, is co-located with 22nd Cloud Expo | 1st DXWorld Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The widespread success of cloud computing is driving the DevOps revolution in enterprise IT. Now as never before, development teams must communicate and collaborate in a dynamic, 24/7/365 environment. There is no time to wait...
Cloud Expo | DXWorld Expo have announced the conference tracks for Cloud Expo 2018. Cloud Expo will be held June 5-7, 2018, at the Javits Center in New York City, and November 6-8, 2018, at the Santa Clara Convention Center, Santa Clara, CA. Digital Transformation (DX) is a major focus with the introduction of DX Expo within the program. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive ov...
SYS-CON Events announced today that T-Mobile exhibited at SYS-CON's 20th International Cloud Expo®, which will take place on June 6-8, 2017, at the Javits Center in New York City, NY. As America's Un-carrier, T-Mobile US, Inc., is redefining the way consumers and businesses buy wireless services through leading product and service innovation. The Company's advanced nationwide 4G LTE network delivers outstanding wireless experiences to 67.4 million customers who are unwilling to compromise on qua...
SYS-CON Events announced today that Cedexis will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 - Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Cedexis is the leader in data-driven enterprise global traffic management. Whether optimizing traffic through datacenters, clouds, CDNs, or any combination, Cedexis solutions drive quality and cost-effectiveness. For more information, please visit https://www.cedexis.com.
SYS-CON Events announced today that Google Cloud has been named “Keynote Sponsor” of SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Companies come to Google Cloud to transform their businesses. Google Cloud’s comprehensive portfolio – from infrastructure to apps to devices – helps enterprises innovate faster, scale smarter, stay secure, and do more with data than ever before.
SYS-CON Events announced today that Vivint to exhibit at SYS-CON's 21st Cloud Expo, which will take place on October 31 through November 2nd 2017 at the Santa Clara Convention Center in Santa Clara, California. As a leading smart home technology provider, Vivint offers home security, energy management, home automation, local cloud storage, and high-speed Internet solutions to more than one million customers throughout the United States and Canada. The end result is a smart home solution that sav...
SYS-CON Events announced today that Opsani will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Opsani is the leading provider of deployment automation systems for running and scaling traditional enterprise applications on container infrastructure.
SYS-CON Events announced today that Nirmata will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Nirmata provides a comprehensive platform, for deploying, operating, and optimizing containerized applications across clouds, powered by Kubernetes. Nirmata empowers enterprise DevOps teams by fully automating the complex operations and management of application containers and its underlying ...
SYS-CON Events announced today that Opsani to exhibit at SYS-CON's 21st Cloud Expo, which will take place on October 31 through November 2nd 2017 at the Santa Clara Convention Center in Santa Clara, California. Opsani is creating the next generation of automated continuous deployment tools designed specifically for containers. How is continuous deployment different from continuous integration and continuous delivery? CI/CD tools provide build and test. Continuous Deployment is the means by which...