DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
Building Scalable Real-Time Apps with AstraDB and Vaadin
Register Now

Trending

  • Chaining API Requests With API Gateway
  • A Complete Guide to AWS File Handling and How It Is Revolutionizing Cloud Storage
  • Integrating AWS With Salesforce Using Terraform
  • Structured Logging

Trending

  • Chaining API Requests With API Gateway
  • A Complete Guide to AWS File Handling and How It Is Revolutionizing Cloud Storage
  • Integrating AWS With Salesforce Using Terraform
  • Structured Logging

Mimicking the GMail Delayed Message Load UX

Raymond Camden user avatar by
Raymond Camden
·
Mar. 30, 15 · Interview
Like (0)
Save
Tweet
Share
1.92K Views

Join the DZone community and get the full member experience.

Join For Free

before i begin, i want to point out that the title of this blog is far more complex-sounding than what i’m actually going to demonstrate here. gmail has an interesting way to handle large mail threads. when you view it, only the most recent few emails will be visible. the rest will be collapsed and are loaded as you click them.

here is a screen shot showing a thread from a public listserv i’m on.

they also do a bit more collapsing in the middle of the thread as well. overall though the idea is to show you the most up to date content first and then let you decide if you need the older information. you can also click a button to expand all the messages at once. i thought it might be fun to rebuild this myself. just because. this isn’t necessarily rocket science but i thought it might be fun to share. note that this code could be refactored, made more impressive, etc. as i said – i just built this for fun.

so, let’s start with the html. as this is a one page demo, i’ve got one page of html.

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>gmail test thingy</title>
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width">
		<link type="text/css" rel="stylesheet" href="styles.css">
	</head>
	<body>

		<div id="content"></div>
		
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
		<script src="app.js"></script>

	</body>
</html>

there is absolutely nothing here worth our time discussing, but i will point out the content div where i’ll be laying out my data. now let’s take a look at app.js.

/* global $,document */
$(document).ready(function() {
	
	//used to store current set of messages
	var messages;
	
	//where i'll be rendering content
	var $div = $("#content");

	//fetch the thread content
	$.get("./thread.cfc?method=getthread", function(res) {
	
		var html = "";
		for(var i=0, len=res.length; i<len; i++) {
			var message = res[i];
			html += "<div class='message' data-message-id='" + message.id + "'>";
			html += "<div class='messagetitle'>"+message.title+"</div>";
			if(message.body) {
				html += "<div class='messagebody'>"+message.body+"</div>";	
			} else {
				html += "<div class='messagebody'></div>";	
			}
			html += "</div>";
		}
		
		$div.html(html);
		
		//copy so we can look em later
		messages = res;
		
	},"json");
	
	//listen for click events to (potentially) load a message
	$("body").on("click", ".messagetitle", function(e) {
		var messageid = $(this).parent().data("message-id");
		var $body = $(this).next();
		//simple logic - if we already have the message, don't do anything, otherwse load it
		for(var i=0, len=messages.length; i<len; i++) {
			var m = messages[i];
			if(m.id === messageid && !m.body) {
				$.get("./thread.cfc?method=getmessage", {messageid:m.id}, function(res) {
					$body.html(res.body);
					messages[i].body = res.body;
				},"json");
				break;
			}
		}
	});
});

ok, let’s break this down bit by bit. my first real piece of functionality is the $.get call to fetch my email thread. i’m using coldfusion on the back end but the data is completely static. i’m going to return an array of message objects where each has an id and a title. but – the server recognizes that it is a big thread and will only fill the body property for the last few. so the front end has to recognize this. you can see where i loop over the array and generate my content. i’m using a few div classes that will come into play in a bit. also note how i embed the message id in a data attribute. this is valid html and is an easy way to embed metadata into the dom.

so the end result of this is a rendered list of messages:

don’t hate me for my epic css design skills. the next part of the demo is handling click events on the titles. you can see my click handler there based on the class i used for the title. i fetch the message id and then look into my message’s data to see if i’ve loaded the body already. if i haven’t, i call the server again, fetch the body, display it, and cache it. here is a screen shot with a few messages loaded.

and that’s it. not exactly rocket science, but, practical i suppose, and something folks may want to rip into their own code. you can demo this yourself below.

Gmail

Published at DZone with permission of Raymond Camden, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Trending

  • Chaining API Requests With API Gateway
  • A Complete Guide to AWS File Handling and How It Is Revolutionizing Cloud Storage
  • Integrating AWS With Salesforce Using Terraform
  • Structured Logging

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: