Adam Mark

Discovering the cache in App Cloud

by Adam Mark on March 15, 2012 in App Cloud, JavaScript

The function bc.core.cache() is your best friend when it comes to making your App Cloud apps "sticky" and intelligent. If you’ve never used it, you’ll feel like you just discovered a buried treasure.

For newcomers, here’s a quick primer: bc.core.cache() has a dynamic signature. To save a value in the cache (on disk), you pass a key and a value, as in bc.core.cache("fruit", "apple"). To retrieve a value from disk, just pass a key: var fruit = bc.core.cache("fruit"). The saved value can be any kind of JavaScript object or array.

Here are six ways to use the cache in your app:

1. Save user preferences

If your app lets users select a display preference—for example, whether to view items as a list or a grid—save the user’s selection for next time:

// set the preference
bc.core.cache(“USER_DISPLAY_MODE”, “grid”);
// get the preference, defaulting to list
var displayMode = bc.core.cache(“USER_DISPLAY_MODE”) || “list”;

2. Save user “favorites”

You can save entire objects in the cache. For example, an array of news articles:

// set favorites (an array) in the cache
function setFavorites(favorites) {
bc.core.cache(“favorites”, favorites);
}
// get favorites from the cache, or return an empty array
function getFavorites() {
return bc.core.cache(“favorites”) || [];
}
// add an article to favorites
function addToFavorites(articleId) {
var favorites = getFavorites();
if (!isFavorite(articleId)) {
favorites.push(getArticle(articleId));
}
setFavorites(favorites);
}
// remove an article from favorites
function removeFromFavorites(articleId) {
var favorites = getFavorites();
for (var i in favorites) {
if (favorites[i].articleId === articleId) {
favorites.splice(i, 1);
break;
}
}
setFavorites(favorites);
}
// is an article already favorited?
function isFavorite(articleId) {
var favorites = getFavorites();
for (var i in favorites) {
if (favorites[i].articleId === articleId) {
return true;
}
}
return false;
}

See a working demo on GitHub.

3. Save application state

Save the user some trouble by saving state—for example, the ID of the last viewed article—and then restoring the UI to that state when the user returns. You can use "viewblur" and "viewfocus" events to detect when a user comes and goes:

// save the last viewed article ID when user exits the view
$(bc).bind(“viewblur”, function (evt) {
bc.core.cache(“LAST_VIEWED_ARTICLE_ID”, articleId);
});
// restore the view if necessary when user re-enters
$(bc).bind(“viewfocus”, function (evt) {
var lastId = bc.core.cache(“LAST_VIEWED_ARTICLE_ID”);
if (lastId) {
// do stuff
}
});

4. Save data with a long shelf life

If you’re working with data that has a long shelf life—for example, a blog that gets updated once every week or two—you can pull the data from the cache instead of hitting the server over and over again:

var one_week = 7 * 24 * 60 * 60 * 1000;
var time_saved = bc.core.cache(“BLOG_DATA_LOADED_AT”) || 0;
var time_now = new Date().getTime();
if (time_now – time_saved > one_week) {
// load new data
bc.core.getData(“blog-feed”, function (data) {
// render blog with new data
renderBlog(data);
// update the data in cache
bc.core.cache(“blog-data”, data);
// update the timestamp in cache
bc.core.cache(“BLOG_DATA_LOADED_AT”, time_now);
});
}
else {
// render blog with old data
renderBlog(bc.core.cache(“blog-data”));
}

5. Show placeholder data

While you’re loading new data, show old data as a placeholder. Anything beats a blank white screen:

var cachedData = bc.core.cache(“blog-data”) || [];
renderBlog(cachedData);
bc.core.getData(“blog-feed”, function (data) {
renderBlog(data);
});

6. Run your app in offline mode

Use the techniques described above to store non-critical data for offline use. Your users will thank you!

Remember, unlike HTML5 Local Storage, bc.core.cache() takes care of serializing and deserializing JavaScript objects for you. All you need to do is plug it into your application logic!

0 Comments

Cropping images with App Cloud

by Adam Mark on February 8, 2012 in App Cloud

App Cloud’s image transcoding API just got even better with the addition of two new features. Now you can crop photos on the fly and specify a quality setting for JPEG images.

Cropping

To crop an image, just add crop=x,y,w,h to the transcode URL, where x,y is the top left coordinate. Take the following image (originally 425×282):

http://coffee.brightcove.com/wp-content/uploads/2011/10/female.jpg

Now make it 275×275, a perfect square:

http://transcode.appcloud.brightcove.com/?image=coffee.brightcove.com/wp-content/uploads/2011/10/female.jpg&crop=0,0,275,275

Now reduce it to 100×100:

http://transcode.appcloud.brightcove.com/?image=coffee.brightcove.com/wp-content/uploads/2011/10/female.jpg&crop=0,0,275,275&width=100&height=100

As you can see, cropping is applied before resizing. Important: Your image must be large enough to cover the cropped area or else the request will fail.

JPEG Quality Settings

You can now specify a quality setting for JPEG images on a scale of 0-100. (The default value is 70.) Take the following image:

http://coffee.brightcove.com/wp-content/uploads/2011/10/m-i-tea.jpg

It’s 140KB. Now run it through the transcoding service, maintaining the original size:

http://transcode.appcloud.brightcove.com/?image=http://coffee.brightcove.com/wp-content/uploads/2011/10/m-i-tea.jpg

Now it’s 17KB—whoa!—but you’ll notice the quality degrades in some solid-tone areas. Try setting the quality to 90:

http://transcode.appcloud.brightcove.com/?image=http://coffee.brightcove.com/wp-content/uploads/2011/10/m-i-tea.jpg&quality=90

Now it’s 25KB—still a huge savings!

The results will vary depending on the type of photograph. But for most pictures, the default quality (70) will do. Here’s the above image at the default quality—see if you can tell the difference:

http://transcode.appcloud.brightcove.com/?image=coffee.brightcove.com/wp-content/uploads/2011/10/female.jpg

Performance Boost

Finally, it takes a lot of of hamsters to spin the wheels of our image transcoding service. We just added 1,000 hamsters to speed up requests to the image cache by 70%! Try it and you’ll see!

0 Comments

Using properties files with JavaScript

by Adam Mark on January 22, 2012 in App Cloud, JavaScript, Markup.js

While developing a multilingual template for App Cloud, I needed a convenient way to store strings for each language. Rather than use JavaScript arrays, as I discussed in an earlier post, I created external text files that mimic Java properties files:

# en.txt
hello_msg=Hello!
hello_user_msg=Hello, {{user.first}}! Welcome to App Cloud!

# es.txt
hello_msg=¡Hola!
hello_user_msg=¡Hola, {{user.first}}! ¡Bienvenido a App Cloud!

# ja.txt
hello_msg=こんにちは！
hello_user_msg=こんにちは、{{user.first}}！アプリケーションクラウドへようこそ！

As you can see, a properties file is easy to both read and write. But how can it be loaded into a JavaScript structure? Here’s how to do it with jQuery’s $.get method:

var properties = {};
$.get(“en.txt”, function (text) {
text = text.split(“\n”);
for (var t in text) {
var s = text[t].trim();
if (!s.length || s.charAt(0) === “#”) {
continue;
}
s = s.split(“=”);
properties[s[0].trim()] = s[1].trim();
}
}, “html”);

Then, to access a string:

properties.hello_msg

Tokens inside the strings, e.g. {{user.name}}, can be replaced with a good templating system like Markup.js. (See the documentation for implementation details.)

Since the properties files are part of my App Cloud template (and therefore stored on the device), they’re simply loaded from disk with little or no latency. (Note, a future filesystem API might replace $.get as a method of loading local resources.) If you’re loading properties files from a remote location, you can save the contents in Local Storage or the Application Cache for instantaneous retrieval the next time you need them.

See the working demo on GitHub.

0 Comments

Image transcoding with App Cloud

by Adam Mark on January 17, 2012 in App Cloud

Image transcoding example

App Cloud provides a ridiculously simple way to resize and cache images on the fly. I reduced one of my blog images from 125KB at 425px wide to 8KB at 200px wide, a 94% reduction!

Here’s the image before …

http://coffee.brightcove.com/wp-content/uploads/2011/10/female.jpg

… and after:

http://transcode.appcloud.brightcove.com/?image=http://coffee.brightcove.com/wp-content/uploads/2011/10/female.jpg&width=200

You can also specify height, max_dimension, and format (jpg, png, or gif). Try it for yourself!

0 Comments

Writing custom pipes for Markup.js

by Adam Mark on January 16, 2012 in JavaScript, Markup.js

Markup.js features a powerful system of “pipes” to transform variables inside templates. Here’s a basic example, which converts a string to upper case:

Title: {{title|upcase}}

Some pipes accept arguments. For example, the chop pipe chops a string to the given number of characters followed by “…”:

Description: {{description|chop>100}}

Pipes can be chained together:

Title: {{title|upcase|chop>50}}

Pipes can return boolean values for use in IF statements:

{{if age|more>75}} Old man! {{/if}}

And pipes can be used with arrays:

{{articles|limit>10}} … {{/articles}}

While Markup.js includes more than 40 built-in pipes, it’s easy to write your own. A pipe is just a function that returns a value. The first argument should always be the piped value itself; any other functions are passed as strings. For example:

// add n exclamation points to the end of a string
Mark.pipes.shout = function (str, n) {
return str + new Array(parseInt(n || 1) + 1).join(“!”);
};
// wrap all links in anchor tags
Mark.pipes.links = function (str) {
return str.replace(/\b(https?:[^\b\s]+)\b/g, “<a href=\”$1\”>$1</a>”);
};

Boolean pipes should return the inputted value if the expression is true. Otherwise they should return false. This way, pipes can be chained together to form complex AND statements. For example:

Mark.pipes.big = function (num) {
return num > 1000000 ? num : false;
};
var template = “{{if salary|big|even}} A nice round number! {{/if}}”;
var context = { salary: 5000000 };
var html = Mark.up(template, context);

Check out more example pipes and see the full documentation on github.

0 Comments

Video and apps: A perfect match

by Adam Mark on January 15, 2012 in App Cloud

I recently wrote about how video and apps are symbiotic, like peanut butter and jelly:

Video breathes life into apps while apps provide a contextual framework for discovering and delivering video.
Video depends on the entire app landscape (phones, tablets, web sites, and smart TVs) for broad distribution. Likewise, the app landscape depends on pluggable, reusable forms of content like video.
Video drives engagement and engagement drives app usage.

Read the entire post on brightcove.com.

0 Comments

Caching data in App Cloud

by Adam Mark on January 15, 2012 in App Cloud, HTML5, JavaScript

Caching data with bc.core.cache() will improve the performance and “stickiness” of your app. Here are three reasons to do it:

1. You can speed up your app. Seconds matter, especially in mobile phone apps. While you’re waiting for new data to load from the server, you can display cached data. Often, the data will be the same. In any case, you’re giving the user something to process instead of just a spinning wheel.

2. You can save bandwidth. Bandwidth isn’t free. It costs time and money—especially for users without unlimited data plans. Lend a hand and don’t load data more frequently than is absolutely necessary. If the data is relatively permanent, load it once and cache it for a length of time (a day, a week, or more) before requesting it again. You can use timestamps (in the cache!) for this purpose. Let’s say you’re pulling down a list of instructional videos that rarely changes:

var loaded_at = bc.core.cache(“video_feed_loaded_at”) || 0; // defaults to 0
var time_now = new Date().getTime();
var interval = 1000 * 60 * 60 * 24 * 3; // 3 days
// if the cached data is older than 3 days
if (time_now – loaded_at > interval) {
// load new data from server and overwrite the cached data
bc.core.getData(“videos”,
function (data) {
bc.core.cache(“video_feed”, data);
bc.core.cache(“video_feed_loaded_at”, new Date().getTime());
displayVideos();
},
function (error) {
// oops
}
);
}
// else show cached data
else {
displayVideos();
}
function displayVideos() {
var feed = bc.core.cache(“video_feed”);
// do stuff
}

Above, we’re loading new data only if the cached data is empty (i.e. it has never been loaded) or if the cached data is more than three days old.

Note, you can always provide a “refresh” button for users to update data on their own. And sometimes it’s a good idea to display a “last updated” date alongside the results.

3. You can save user preferences and other metadata. The cache is a great way to store preferences and other values that are specific to a particular user on a particular device. For example, you can save the user’s preferred display mode:

bc.core.cache(“user_pref_display_mode”, “grid”);

Or, you can store a list of recently viewed articles, or favorites, by ID. I wrote some helper functions in my reference application for this purpose:

// cache a “favorite” value in an array with the given key
// e.g. saveFavorite(“fruits”, “apple”)
function saveFavorite(key, val) {
var favorites = bc.core.cache(key) || [];
if (favorites.indexOf(val) === -1) {
favorites.push(val);
}
bc.core.cache(key, favorites);
};
// delete a “favorite” value from a cached array with the given key
// e.g. deleteFavorite(“fruits”, “apple”)
function deleteFavorite(key, val) {
var favorites = bc.core.cache(key) || [];
var idx = favorites.indexOf(val);
if (idx > -1) {
favorites.splice(idx, 1);
bc.core.cache(key, favorites);
}
};
// determine if a value is contained in a list of favorites
// e.g. isFavorite(“fruits”, “apple”)
function isFavorite(key, val) {
var favorites = bc.core.cache(key) || [];
return favorites.indexOf(val) > -1;
};

The function bc.core.cache() is actually a wrapper for HTML5 Local Storage—sometimes called “cookies on steroids.” As you’ve seen, it’s a simple yet invaluable way to add state to your applications.

0 Comments

Using CSS Media Queries in App Cloud

by Adam Mark on January 15, 2012 in App Cloud, Design, HTML5

Some developers have asked me how to change the layout of a view depending on the device’s orientation. The simplest way—and this is really very simple—is to use CSS3 Media Queries:

@media all and (orientation: portrait) {
/* CSS rules here */
}
@media all and (orientation: landscape) {
/* CSS rules here */
}

For example, let’s say you want to change the body color from red to green when the user rotates the device from portrait to landscape:

@media all and (orientation: portrait) {
body {
color: red;
}
}
@media all and (orientation: landscape) {
body {
color: green;
}
}

Add the above code to your stylesheet and see what happens. (You can test it in your browser by resizing the window.)

It’s not necessary to put all your styles inside the media queries—just the styles that are specific to portrait or landscape mode.

Combine Media Queries with the Flexible Box Model and now you’re cooking with gas!

Note, CSS will only affect the layout, not the behavior, of your app. You can listen for a “vieworientationchange” event if you need to perform some action when the user rotates the device.

0 Comments

App Cloud content feeds: Getting to green

by Adam Mark on January 15, 2012 in App Cloud

I just smashed my personal content feed optimization record in App Cloud. The original feed, a YouTube playlist, clocked in at 176KB. Whoa.

So how’d I do it? First, I limited the number of entries to 20 (the original feed has 25). Then I selected just the fields I needed (about 9 or 10, including title, description, duration, etc.).

The result: 20KB. A nearly 90% reduction! It’s not just academic—my app sped up noticeably after I tamed this bad boy. I’m saving on two fronts: the payload comes down faster and the app can process it faster.

You can see this feed at work in the reference app for phones.

0 Comments

Discovering the cache in App Cloud

1. Save user preferences

2. Save user “favorites”

3. Save application state

4. Save data with a long shelf life

5. Show placeholder data

6. Run your app in offline mode

Cropping images with App Cloud

Cropping

JPEG Quality Settings

Performance Boost

Using properties files with JavaScript

Image transcoding with App Cloud

Writing custom pipes for Markup.js

Video and apps: A perfect match

Caching data in App Cloud

Using CSS Media Queries in App Cloud

App Cloud content feeds: Getting to green

Great Chrome extensions for App Cloud developers

QR-Code Tag Extension

JSON formatter

Reload All Tabs

Categories