Welcome!

Machine Learning Authors: William Schmarzo, Pat Romanski, Liz McMillan, Elizabeth White, Jnan Dash

Related Topics: Machine Learning

Machine Learning : Article

Real-World AJAX Book Preview: AJAX Design Considerations

Real-World AJAX Book Preview: AJAX Design Considerations

This content is reprinted from Real-World AJAX: Secrets of the Masters published by SYS-CON Books. To order the entire book now along with companion DVDs for the special pre-order price, click here for more information. Aimed at everyone from enterprise developers to self-taught scripters, Real-World AJAX: Secrets of the Masters is the perfect book for anyone who wants to start developing AJAX applications.

AJAX Design Considerations
In the previous section, we laid out the design considerations for mobile Web applications as recommended by the W3C. Here we'll discuss AJAX-specific considerations.

As we know, AJAX is not a new technology. It's a collection of existing technologies put together in a different way. Thus, designing a mobile AJAX application is similar to designing a mobile Web application.

Performance becomes far more critical. While application performance is critical on the Web, it becomes much more severe in a mobile Web environment. Also widget design using AJAX needs some special thought.

Since the synergy between mobile widgets and AJAX is central to our vision, we'll focus on widgets in greater detail. In the next section, we will use some of the principles outlined here to develop some widget code.

To recap, the elements comprising AJAX are

  • XHTML and CSS
  • Document Object Model
  • XML and XSLT
  • XMLHttpRequest for asynchronous data retrieval
  • JavaScript
Of these, potentially, the elements that could be optimized from a developer standpoint include JavaScript constructs, DOM, and CSS. Even in these cases, the same principles apply as per the Web. Hence we won't discuss them in great detail.

Note that you have to consider all the elements discussed in the previous sections (the W3C recommendations) to ensure that the AJAX application works well.

General Browser/Mobile-Level Recommendations

  • Don't load more documents than you have to.
  • Avoid keeping references alive from one document to another.
  • A window's history grows if you keep loading documents into it. When the user moves, the document may not be reloaded and reinitialized.
  • Be aware of device limitations like little memory, low-powered CPUs, slow disk access, etc.
  • Reflows and repaints are very expensive.
  • Timer resolution is unpredictable on a mobile device.
Notes
  1. Trim libraries of unneeded code.
  2. Minimize use of iframe/object type="text/html".
  3. When removing an iframe/object, also set any references in script to null.
  4. Don't use scripts (including event handlers) on documents that don't require them.
  5. Avoid tight-timed loops whenever possible. setInterval( funcRef, 0) is a no-no, setInterval(funcRef, 50) is okay.
  6. Carefully evaluate whether you want to use any patterns for adding to the browser history.
  7. Use single-image rollovers, www.tutorio.com/tutorial/pure-css-image-rollovers.
JavaScript Constructs
  • Don't use "eval" or the Function constructor if you can avoid it.
  • Don't use "with" if you can avoid it.
  • Don't use "try-catch-finally" inside performance-critical functions.
  • Don't use global variables if you can avoid them.
  • Be mindful of implicit object conversion, especially on strings.
  • Avoid for-in in performance-critical functions.
Notes
  1. Isolate uses of eval, with, and try-catch-finally inside top-level functions. Almost every use of eval can be rewritten without eval, and the resulting code will be faster and cleaner.
  2. Use strings accumulator-style: a += "x"; a += "y"; is better than a += "x" + "y".
  3. Convert primitive values to objects explicitly if you're using them as objects a lot.
  4. Primitive operations can be faster than function calls: a<b ? a : b instead of Math.min(a,b).
  5. Keep array objects dense; if you need a hash table, use an object instead.
  6. Pass functions, not strings, to setTimeout() and setInterval().
  7. Avoid properties that are re-evaluated in scripts: for (var i = prop.length; i--;) is faster than for (var i=0; i++ < prop.length;).
DOM
  • Document tree modification will trigger reflow.
  • Modifying CSS properties other than backgrounds and colors very likely triggers reflows.
  • Don't modify a document while traversing an element collection.
  • Avoid manual traversal of the document tree.
  • Avoid inspecting large numbers of nodes.
  • Timeouts may not be strictly honored.
Notes
  1. Set individual .style properties.
  2. Don't change Element.id or Element.className.
  3. Cache DOM values in script variables when you can.
  4. Make a small number of large changes to the document tree, not a large number of small changes.
  5. Use document fragments to build subtrees that are to be inserted. Build the entire tree before inserting it.
  6. Perform modifications by accumulating nodes to be altered during a traversal phase and follow it with a modification phase.
CSS Optimization
  • Screen sizes are relatively predictable, but vary a lot. There are 176, 384, 480, 640 in pixel width.
  • Device DPI can vary from 100 to over 200.
  • All fonts may not be available.
  • CSS selectors affect performance.
Tricks
  1. Use CSS3 media queries: @media handheld and (device-width: 384px) { /* Rules for device*/ }.
  2. Use generic font families.
  3. Be careful with font sizing. What's readable on a 100dpi-device may be nearly invisible on a 200dpi device.
  4. Use concise CSS selectors: "div > p" over "div p" if what you mean is "div > p".
  5. Avoid duplicate CSS rules.
Widget Design

A widget is a small Web application that runs directly on a user's desktop. It is usually focused on doing a single task. Technically developing a widget is similar to developing a Web page except that the widget functions like an application and lives directly on the desktop.

Widgets are chromeless applications and will run without regular user interface elements such as normal browser controls, like the back button or address bar. An example of a widget is the clock widget.

AJAX technology facilitates building widgets. As I've mentioned before, the advantage of widgets (especially when developed using the Opera platform) is that the same code can be used on the desktop, browser, and mobile device with basic modifications.

For purposes of our discussion, we'll focus on widgets using AJAX technologies. Widgets use HTML, JavaScript, and CSS and can use other technologies such as SVG. Widgets have a configuration file and are packaged in the ZIP format and have their extension renamed .wdgt.

Because a widget is a small application, it's focused on a simple task. Note that in environments like the Opera browser, widgets can call other widgets. Hence, more complex applications can be developed using the widget's philosophy. However, for now, let's look only at simple widgets. Also, note that widgets should be self-contained, i.e.. they shouldn't stop working when the widget is online.

The Opera Platform
As we have seen before, we need an AJAX framework on the device and access to device APIs to create a useful mobile application. This function is performed by the Opera platform, which acts as an SDK and a framework for AJAX mobile applications.

The Opera Platform is comprised of:

  • An Opera Web browser running in full-screen mode
  • An AJAX framework for running multiple widgets/applications
    - Access the DOM and the phone's native functionality through an abstraction layer (APIs)
The tools needed to create a widget are the same as needed for regular Web development, i.e., a basic understanding of Web technologies; a text editor or Web IDE that allows creating JavaScript, HTML, and CSS files; and a tool for creating and maintaining .zip archives.

At the moment, Opera widgets can be published on the My Opera community or you could deploy the widget in your own environment. Although widgets are similar to Web pages, there are some differences.

Note these apply to the Opera environment but can illustrate general widget development:

  • The widget lives outside the Web browser directly on the user's desktop without any of the regular user interface elements such as title bars.
  • The widget's security restrictions are different from regular Web pages, enabling you to create a widget that will simultaneously interface with different Web Services living on different Web servers.
  • Widgets have a widget object available from JavaScript that lets an author access widget-specific functionality.
  • A widget has access to permanent storage for its settings and downloaded data. This mechanism is similar to cookies, but the storage capacity is larger than for cookies and does not automatically expire after a given time.
  • Widgets typically have several views available in the same document. One of these views is what a widget user typically sees when using the widget, and another one is where you provide the user with configuration options. Switching between these views is done by performing transitions on the views using regular JavaScript+CSS methods.
  • By default a widget is draggable so the user can move it around on the screen simply by clicking and dragging the widget. If this behavior isn't desired for parts of a widget, the user will have to specify control regions where the widget doesn't respond to dragging.

This content is reprinted from Real-World AJAX: Secrets of the Masters published by SYS-CON Books. To order the entire book now along with companion DVDs, click here to order.

More Stories By Ajit Jaokar

Ajit Jaokar is the author of the book 'Mobile Web 2.0' and is also a member of the Web2.0 workgroup. Currently, he plays an advisory role to a number of mobile start-ups in the UK and Scandinavia. He also works with the government and trade missions of a number of countries including South Korea and Ireland. He is a regular speaker at SYS-CON events including AJAXWorld Conference & Expo.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


@CloudExpo Stories
"Infoblox does DNS, DHCP and IP address management for not only enterprise networks but cloud networks as well. Customers are looking for a single platform that can extend not only in their private enterprise environment but private cloud, public cloud, tracking all the IP space and everything that is going on in that environment," explained Steve Salo, Principal Systems Engineer at Infoblox, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Conventio...
"Cloud Academy is an enterprise training platform for the cloud, specifically public clouds. We offer guided learning experiences on AWS, Azure, Google Cloud and all the surrounding methodologies and technologies that you need to know and your teams need to know in order to leverage the full benefits of the cloud," explained Alex Brower, VP of Marketing at Cloud Academy, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clar...
In his session at 21st Cloud Expo, Carl J. Levine, Senior Technical Evangelist for NS1, will objectively discuss how DNS is used to solve Digital Transformation challenges in large SaaS applications, CDNs, AdTech platforms, and other demanding use cases. Carl J. Levine is the Senior Technical Evangelist for NS1. A veteran of the Internet Infrastructure space, he has over a decade of experience with startups, networking protocols and Internet infrastructure, combined with the unique ability to it...
The question before companies today is not whether to become intelligent, it’s a question of how and how fast. The key is to adopt and deploy an intelligent application strategy while simultaneously preparing to scale that intelligence. In her session at 21st Cloud Expo, Sangeeta Chakraborty, Chief Customer Officer at Ayasdi, provided a tactical framework to become a truly intelligent enterprise, including how to identify the right applications for AI, how to build a Center of Excellence to oper...
"IBM is really all in on blockchain. We take a look at sort of the history of blockchain ledger technologies. It started out with bitcoin, Ethereum, and IBM evaluated these particular blockchain technologies and found they were anonymous and permissionless and that many companies were looking for permissioned blockchain," stated René Bostic, Technical VP of the IBM Cloud Unit in North America, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Conventi...
Gemini is Yahoo’s native and search advertising platform. To ensure the quality of a complex distributed system that spans multiple products and components and across various desktop websites and mobile app and web experiences – both Yahoo owned and operated and third-party syndication (supply), with complex interaction with more than a billion users and numerous advertisers globally (demand) – it becomes imperative to automate a set of end-to-end tests 24x7 to detect bugs and regression. In th...
In his session at 21st Cloud Expo, James Henry, Co-CEO/CTO of Calgary Scientific Inc., introduced you to the challenges, solutions and benefits of training AI systems to solve visual problems with an emphasis on improving AIs with continuous training in the field. He explored applications in several industries and discussed technologies that allow the deployment of advanced visualization solutions to the cloud.
Agile has finally jumped the technology shark, expanding outside the software world. Enterprises are now increasingly adopting Agile practices across their organizations in order to successfully navigate the disruptive waters that threaten to drown them. In our quest for establishing change as a core competency in our organizations, this business-centric notion of Agile is an essential component of Agile Digital Transformation. In the years since the publication of the Agile Manifesto, the conn...
"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.
Large industrial manufacturing organizations are adopting the agile principles of cloud software companies. The industrial manufacturing development process has not scaled over time. Now that design CAD teams are geographically distributed, centralizing their work is key. With large multi-gigabyte projects, outdated tools have stifled industrial team agility, time-to-market milestones, and impacted P&L stakeholders.
"ZeroStack is a startup in Silicon Valley. We're solving a very interesting problem around bringing public cloud convenience with private cloud control for enterprises and mid-size companies," explained Kamesh Pemmaraju, VP of Product Management at ZeroStack, 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.
Enterprises are adopting Kubernetes to accelerate the development and the delivery of cloud-native applications. However, sharing a Kubernetes cluster between members of the same team can be challenging. And, sharing clusters across multiple teams is even harder. Kubernetes offers several constructs to help implement segmentation and isolation. However, these primitives can be complex to understand and apply. As a result, it’s becoming common for enterprises to end up with several clusters. Thi...
"Space Monkey by Vivent Smart Home is a product that is a distributed cloud-based edge storage network. Vivent Smart Home, our parent company, is a smart home provider that places a lot of hard drives across homes in North America," explained JT Olds, Director of Engineering, and Brandon Crowfeather, Product Manager, at Vivint Smart Home, in this SYS-CON.tv interview at @ThingsExpo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
"Codigm is based on the cloud and we are here to explore marketing opportunities in America. Our mission is to make an ecosystem of the SW environment that anyone can understand, learn, teach, and develop the SW on the cloud," explained Sung Tae Ryu, CEO of Codigm, 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.
High-velocity engineering teams are applying not only continuous delivery processes, but also lessons in experimentation from established leaders like Amazon, Netflix, and Facebook. These companies have made experimentation a foundation for their release processes, allowing them to try out major feature releases and redesigns within smaller groups before making them broadly available. In his session at 21st Cloud Expo, Brian Lucas, Senior Staff Engineer at Optimizely, discussed how by using ne...
Vulnerability management is vital for large companies that need to secure containers across thousands of hosts, but many struggle to understand how exposed they are when they discover a new high security vulnerability. In his session at 21st Cloud Expo, John Morello, CTO of Twistlock, addressed this pressing concern by introducing the concept of the “Vulnerability Risk Tree API,” which brings all the data together in a simple REST endpoint, allowing companies to easily grasp the severity of the ...
While some developers care passionately about how data centers and clouds are architected, for most, it is only the end result that matters. To the majority of companies, technology exists to solve a business problem, and only delivers value when it is solving that problem. 2017 brings the mainstream adoption of containers for production workloads. In his session at 21st Cloud Expo, Ben McCormack, VP of Operations at Evernote, discussed how data centers of the future will be managed, how the p...
"NetApp is known as a data management leader but we do a lot more than just data management on-prem with the data centers of our customers. We're also big in the hybrid cloud," explained Wes Talbert, Principal Architect at NetApp, 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.
Coca-Cola’s Google powered digital signage system lays the groundwork for a more valuable connection between Coke and its customers. Digital signs pair software with high-resolution displays so that a message can be changed instantly based on what the operator wants to communicate or sell. In their Day 3 Keynote at 21st Cloud Expo, Greg Chambers, Global Group Director, Digital Innovation, Coca-Cola, and Vidya Nagarajan, a Senior Product Manager at Google, discussed how from store operations and ...
"We're focused on how to get some of the attributes that you would expect from an Amazon, Azure, Google, and doing that on-prem. We believe today that you can actually get those types of things done with certain architectures available in the market today," explained Steve Conner, VP of Sales at Cloudistics, 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.