Welcome!

Machine Learning Authors: Elizabeth White, Yeshim Deniz, Liz McMillan, Pat Romanski, Ed Featherston

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
Today most companies are adopting or evaluating container technology - Docker in particular - to speed up application deployment, drive down cost, ease management and make application delivery more flexible overall. As with most new architectures, this dream takes significant work to become a reality. Even when you do get your application componentized enough and packaged properly, there are still challenges for DevOps teams to making the shift to continuous delivery and achieving that reducti...
As hybrid cloud becomes the de-facto standard mode of operation for most enterprises, new challenges arise on how to efficiently and economically share data across environments. In his session at 21st Cloud Expo, Dr. Allon Cohen, VP of Product at Elastifile, will explore new techniques and best practices that help enterprise IT benefit from the advantages of hybrid cloud environments by enabling data availability for both legacy enterprise and cloud-native mission critical applications. By rev...
The next XaaS is CICDaaS. Why? Because CICD saves developers a huge amount of time. CD is an especially great option for projects that require multiple and frequent contributions to be integrated. But… securing CICD best practices is an emerging, essential, yet little understood practice for DevOps teams and their Cloud Service Providers. The only way to get CICD to work in a highly secure environment takes collaboration, patience and persistence. Building CICD in the cloud requires rigorous ar...
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, will discuss how they b...
SYS-CON Events announced today that SkyScale 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. SkyScale is a world-class provider of cloud-based, ultra-fast multi-GPU hardware platforms for lease to customers desiring the fastest performance available as a service anywhere in the world. SkyScale builds, configures, and manages dedicated systems strategically located in maximum-security...
As you move to the cloud, your network should be efficient, secure, and easy to manage. An enterprise adopting a hybrid or public cloud needs systems and tools that provide: Agility: ability to deliver applications and services faster, even in complex hybrid environments Easier manageability: enable reliable connectivity with complete oversight as the data center network evolves Greater efficiency: eliminate wasted effort while reducing errors and optimize asset utilization Security: imple...
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, will discuss how by using...
In this strange new world where more and more power is drawn from business technology, companies are effectively straddling two paths on the road to innovation and transformation into digital enterprises. The first path is the heritage trail – with “legacy” technology forming the background. Here, extant technologies are transformed by core IT teams to provide more API-driven approaches. Legacy systems can restrict companies that are transitioning into digital enterprises. To truly become a lead...
DevOps at Cloud Expo, taking place October 31 - November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA, is co-located with 21st Cloud 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 w...
SYS-CON Events announced today that Daiya Industry will exhibit at the Japanese Pavilion 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. Ruby Development Inc. builds new services in short period of time and provides a continuous support of those services based on Ruby on Rails. For more information, please visit https://github.com/RubyDevInc.
When it comes to cloud computing, the ability to turn massive amounts of compute cores on and off on demand sounds attractive to IT staff, who need to manage peaks and valleys in user activity. With cloud bursting, the majority of the data can stay on premises while tapping into compute from public cloud providers, reducing risk and minimizing need to move large files. In his session at 18th Cloud Expo, Scott Jeschonek, Director of Product Management at Avere Systems, discussed the IT and busine...
As businesses evolve, they need technology that is simple to help them succeed today and flexible enough to help them build for tomorrow. Chrome is fit for the workplace of the future — providing a secure, consistent user experience across a range of devices that can be used anywhere. In her session at 21st Cloud Expo, Vidya Nagarajan, a Senior Product Manager at Google, will take a look at various options as to how ChromeOS can be leveraged to interact with people on the devices, and formats th...
First generation hyperconverged solutions have taken the data center by storm, rapidly proliferating in pockets everywhere to provide further consolidation of floor space and workloads. These first generation solutions are not without challenges, however. In his session at 21st Cloud Expo, Wes Talbert, a Principal Architect and results-driven enterprise sales leader at NetApp, will discuss how the HCI solution of tomorrow will integrate with the public cloud to deliver a quality hybrid cloud e...
Is advanced scheduling in Kubernetes achievable? Yes, however, how do you properly accommodate every real-life scenario that a Kubernetes user might encounter? How do you leverage advanced scheduling techniques to shape and describe each scenario in easy-to-use rules and configurations? In his session at @DevOpsSummit at 21st Cloud Expo, Oleg Chunikhin, CTO at Kublr, will answer these questions and demonstrate techniques for implementing advanced scheduling. For example, using spot instances ...
SYS-CON Events announced today that Yuasa System will exhibit at the Japan External Trade Organization (JETRO) Pavilion 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. Yuasa System is introducing a multi-purpose endurance testing system for flexible displays, OLED devices, flexible substrates, flat cables, and films in smartphones, wearables, automobiles, and healthcare.
Companies are harnessing data in ways we once associated with science fiction. Analysts have access to a plethora of visualization and reporting tools, but considering the vast amount of data businesses collect and limitations of CPUs, end users are forced to design their structures and systems with limitations. Until now. As the cloud toolkit to analyze data has evolved, GPUs have stepped in to massively parallel SQL, visualization and machine learning.
The session is centered around the tracing of systems on cloud using technologies like ebpf. The goal is to talk about what this technology is all about and what purpose it serves. In his session at 21st Cloud Expo, Shashank Jain, Development Architect at SAP, will touch upon concepts of observability in the cloud and also some of the challenges we have. Generally most cloud-based monitoring tools capture details at a very granular level. To troubleshoot problems this might not be good enough.
Organizations do not need a Big Data strategy; they need a business strategy that incorporates Big Data. Most organizations lack a road map for using Big Data to optimize key business processes, deliver a differentiated customer experience, or uncover new business opportunities. They do not understand what’s possible with respect to integrating Big Data into the business model.
When it comes to cloud computing, the ability to turn massive amounts of compute cores on and off on demand sounds attractive to IT staff, who need to manage peaks and valleys in user activity. With cloud bursting, the majority of the data can stay on premises while tapping into compute from public cloud providers, reducing risk and minimizing need to move large files. In his session at 18th Cloud Expo, Scott Jeschonek, Director of Product Management at Avere Systems, discussed the IT and busine...
Enterprises have taken advantage of IoT to achieve important revenue and cost advantages. What is less apparent is how incumbent enterprises operating at scale have, following success with IoT, built analytic, operations management and software development capabilities – ranging from autonomous vehicles to manageable robotics installations. They have embraced these capabilities as if they were Silicon Valley startups. As a result, many firms employ new business models that place enormous impor...