Welcome!

Machine Learning Authors: Rene Buest, Liz McMillan, Jason Bloomberg, Pat Romanski, Rajeev Kozhikkattuthodi

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
"We do one of the best file systems in the world. We learned how to deal with Big Data many years ago and we implemented this knowledge into our software," explained Jakub Ratajczak, Business Development Manager at MooseFS, in this SYS-CON.tv interview at 20th Cloud Expo, held June 6-8, 2017, at the Javits Center in New York City, NY.
Five years ago development was seen as a dead-end career, now it’s anything but – with an explosion in mobile and IoT initiatives increasing the demand for skilled engineers. But apart from having a ready supply of great coders, what constitutes true ‘DevOps Royalty’? It’ll be the ability to craft resilient architectures, supportability, security everywhere across the software lifecycle. In his keynote at @DevOpsSummit at 20th Cloud Expo, Jeffrey Scheaffer, GM and SVP, Continuous Delivery Busine...
In his session at @ThingsExpo, Eric Lachapelle, CEO of the Professional Evaluation and Certification Board (PECB), provided an overview of various initiatives to certify the security of connected devices and future trends in ensuring public trust of IoT. Eric Lachapelle is the Chief Executive Officer of the Professional Evaluation and Certification Board (PECB), an international certification body. His role is to help companies and individuals to achieve professional, accredited and worldwide re...
SYS-CON Events announced today that TechTarget has been named “Media 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. TechTarget storage websites are the best online information resource for news, tips and expert advice for the storage, backup and disaster recovery markets.
The current age of digital transformation means that IT organizations must adapt their toolset to cover all digital experiences, beyond just the end users’. Today’s businesses can no longer focus solely on the digital interactions they manage with employees or customers; they must now contend with non-traditional factors. Whether it's the power of brand to make or break a company, the need to monitor across all locations 24/7, or the ability to proactively resolve issues, companies must adapt to...
You know you need the cloud, but you’re hesitant to simply dump everything at Amazon since you know that not all workloads are suitable for cloud. You know that you want the kind of ease of use and scalability that you get with public cloud, but your applications are architected in a way that makes the public cloud a non-starter. You’re looking at private cloud solutions based on hyperconverged infrastructure, but you’re concerned with the limits inherent in those technologies.
"Loom is applying artificial intelligence and machine learning into the entire log analysis process, from start to finish and at the end you will get a human touch,” explained Sabo Taylor Diab, Vice President, Marketing at Loom Systems, in this SYS-CON.tv interview at 20th Cloud Expo, held June 6-8, 2017, at the Javits Center in New York City, NY.
@DevOpsSummit at Cloud Expo taking place Oct 31 - Nov 2, 2017, at the Santa Clara Convention Center, Santa Clara, CA, is co-located with the 21st International 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 ...
SYS-CON Events announced today that Datanami has been named “Media 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. Datanami is a communication channel dedicated to providing insight, analysis and up-to-the-minute information about emerging trends and solutions in Big Data. The publication sheds light on all cutting-edge technologies including networking, storage and applications, and the...
SYS-CON Events announced today that EnterpriseTech has been named “Media 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. EnterpriseTech is a professional resource for news and intelligence covering the migration of high-end technologies into the enterprise and business-IT industry, with a special focus on high-tech solutions in new product development, workload management, increased effi...
For organizations that have amassed large sums of software complexity, taking a microservices approach is the first step toward DevOps and continuous improvement / development. Integrating system-level analysis with microservices makes it easier to change and add functionality to applications at any time without the increase of risk. Before you start big transformation projects or a cloud migration, make sure these changes won’t take down your entire organization.
Cloud promises the agility required by today’s digital businesses. As organizations adopt cloud based infrastructures and services, their IT resources become increasingly dynamic and hybrid in nature. Managing these require modern IT operations and tools. In his session at 20th Cloud Expo, Raj Sundaram, Senior Principal Product Manager at CA Technologies, will discuss how to modernize your IT operations in order to proactively manage your hybrid cloud and IT environments. He will be sharing bes...
A look across the tech landscape at the disruptive technologies that are increasing in prominence and speculate as to which will be most impactful for communications – namely, AI and Cloud Computing. In his session at 20th Cloud Expo, Curtis Peterson, VP of Operations at RingCentral, highlighted the current challenges of these transformative technologies and shared strategies for preparing your organization for these changes. This “view from the top” outlined the latest trends and developments i...
Automation is enabling enterprises to design, deploy, and manage more complex, hybrid cloud environments. Yet the people who manage these environments must be trained in and understanding these environments better than ever before. A new era of analytics and cognitive computing is adding intelligence, but also more complexity, to these cloud environments. How smart is your cloud? How smart should it be? In this power panel at 20th Cloud Expo, moderated by Conference Chair Roger Strukhoff, paneli...
SYS-CON Events announced today that MobiDev, a client-oriented software development company, will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place October 31-November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. MobiDev is a software company that develops and delivers turn-key mobile apps, websites, web services, and complex software systems for startups and enterprises. Since 2009 it has grown from a small group of passionate engineers and business...
Hardware virtualization and cloud computing allowed us to increase resource utilization and increase our flexibility to respond to business demand. Docker Containers are the next quantum leap - Are they?! Databases always represented an additional set of challenges unique to running workloads requiring a maximum of I/O, network, CPU resources combined with data locality.
SYS-CON Events announced today that GrapeUp, the leading provider of rapid product development at the speed of business, will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place October 31-November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Grape Up is a software company, specialized in cloud native application development and professional services related to Cloud Foundry PaaS. With five expert teams that operate in various sectors of the market acr...
SYS-CON Events announced today that Ayehu will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on October 31 - November 2, 2017 at the Santa Clara Convention Center in Santa Clara California. Ayehu provides IT Process Automation & Orchestration solutions for IT and Security professionals to identify and resolve critical incidents and enable rapid containment, eradication, and recovery from cyber security breaches. Ayehu provides customers greater control over IT infras...
Artificial intelligence, machine learning, neural networks. We’re in the midst of a wave of excitement around AI such as hasn’t been seen for a few decades. But those previous periods of inflated expectations led to troughs of disappointment. Will this time be different? Most likely. Applications of AI such as predictive analytics are already decreasing costs and improving reliability of industrial machinery. Furthermore, the funding and research going into AI now comes from a wide range of com...
In this presentation, Striim CTO and founder Steve Wilkes will discuss practical strategies for counteracting fraud and cyberattacks by leveraging real-time streaming analytics. In his session at @ThingsExpo, Steve Wilkes, Founder and Chief Technology Officer at Striim, will provide a detailed look into leveraging streaming data management to correlate events in real time, and identify potential breaches across IoT and non-IoT systems throughout the enterprise. Strategies for processing massive ...