JavaScript application load strategies

The load policy of a web application is really a cross technology topic in fact a web app that loads fast usually get a better user experience.
The components of an application can be roughly summarized as following:

  • services
  • client libraries (the application toolboxes)
  • user interface (css and images)
  • modules

A module can be defined as following:

  • a module is an independent operable unit that is a part of a complex system
  • a module can operate with other modules
  • a good habit is to keep the modules of a system loosely coupled

A web application module, on the client side, consists of HTML + CSS + JavaScript, the  modules are organized and the load policies used can significantly impact the success of an application.
Before starting to discuss about load strategies it’s very important to understand that the design of a module will impact the load policies too;
a good module should follow these rules:

  • A module should call only its own methods or those on its sandbox
  • A module should access DOM elements that belong to its own box
  • A module should not access non native global objects
  • A module should ask what needed to the sandbox not take it directly from other modules
  • A module should never talk directly to another module

Keeping safe this rules it’s possible to define a load policy to reduce as much as possible the waiting time for the end user and all unnecessary request to the server.
The nature of a web application module brings to the creation of several files, a good habit is avoiding to crate monolithic files. Use instead several files in order to split the CSS, the HTML and the JavaScript and load what’s needed in each page of the web application.
There are several tools available to compress a .css and .js files, online there are available (between others):

A compressed file can be 40% less than a plain one so that the application load time can be dramatically reduced.
When an user agent request a resource from a server for the first time, it caches the response to avoid making the same request in the future. The cache of a browser is so powerful that sometimes can represent a problem especially with dynamic web pages (where content change often) and / or with pages in which new features are frequently added.
There are some developers that force the browser to ignore the cache in order to avoid to show not updated web pages or to avoid to load old scripts.
The cache is the best friend of each web application but can also be a nightmare when an application needs to be frequently updated, extended, etc.
A common issue is how to handle a new version of a script, imagine that the application need to be updated and that some JavaScript files have been totally rewritten. In this scenario a developer has to rename all the files reference in the client and on the server, this practice can bring to several errors.
In order to avoid to load old scripts an interesting approach should be the usage of the mod_rewirte Apache module. With some rules defined into the .htaccess file the web page can contain different files searching for the same file on the server.

The strategies outlined in this post can be summarized as following:

  • Split the code in several files to load what’s needed
  • Compress the files to reduce the weight of the files
  • Use the benefits of the user agent caching mechanics to avoid to load the same files multiple times
  • Use the file names to be sure to load the last updated files
  • Use mod-rewrite to avoid to change the files name on the server

These points can be used as the building blocks to define the good practices to follow to create a web application that loads fast.

Posted in Best Practices, RIA | Leave a comment

RIACon 2011!

The Rich Internet Application Conference, August 6th and 7th – Rockville, MD

Where architects and developers of all levels will share and learn about creating the next generation of web based applications.  RIAcon’s goals are to help you network with fellow industry professionals and expose you to the best relevant content and most up to date skills used in ColdFusion, Flex, AIR and Javascript development.

RIACon will take place August 6th and 7th at the Legacy Hotel Conference Center in Rockville Maryland. This location is easily accessible by metro* and a short drive for anyone in and around the Washington DC Metro area. Registration is limited to 150 and the price of registration is only $99.

Keynotes

The RIACon keynotes will be presented by members of the Adobe ColdFusion, Flex and Digital Enterprise Platform (ADEP) teams. Attendees will be guided through the Adobe platform for developing browser-based, desktop and mobile applications. Of course, it wouldn’t be an Adobe keynote if there weren’t a few surprises and exclusive announcements about future product versions!

Technical Sessions

RIACon will have 3 tracks and 30 sessions led by today’s most influential experts in our community. Our Content Steering Committee members have been working hard to bring you a 2 days filled with the most up-to-date skills and tools needed to directly impact your day-to-day productivity and quality of software being produced!

Some of the speakers presenting include Charlie Arehart, Scott Stroz, Mike Nimer amongst many other great names.  Also speaking during sessions will be members of the Adobe Engineering Team.  You’ll also have a chance to attend an open forum with the team to ask questions and provide valuable feedback.

Community

Whether at the lounge bar or at the Evening Event or between sessions in the hallway, this is a great opportunity for catching up with old friends and making new ones. We are excited to bring together folks of all levels and industry sectors from our community to share their passion about what the web of tomorrow can be!

Sponsors

AboutWeb, LLC (www.aboutweb.com) is a Premier sponsor and organizer for RIACon.  A long time Adobe partner and solutions provider and sponsor to Adobe’s Capital Area ColdFusion User Group and Capital Area Flex User Group.  AboutWeb is a leading provider of Information Technology Solutions primarily to Federal agencies and government related organizations.  Our team has experience as a Prime and Subcontractor providing direct support to federal and state government offices and agencies and maintains extensive relationships with large government contractors for work on technology and defense related contracts. Our practice also includes services to small businesses, corporations and associations.

We are very proud to announce that Adobe Systems (www.adobe.com) is a Premier Sponsor at RIACon 2011!  Adobe’s support reflects their continued commitment to keeping the rich internet application development community engaged and on the cutting edge. Adobe Systems Incorporated offers business, creative, and mobile software solutions that revolutionize how the world engages with ideas and information. Adobe customers include enterprises, knowledge workers, creatives and designers, OEM partners, and developers worldwide.

Carahsoft Technology Corp (www.carahsoft.com) is another great sponsor for RIACon.  Carahsoft Technology Corp. is the trusted Government IT solutions provider, combining technological expertise with a thorough understanding of the government procurement process to help federal, state and local government agencies select and implement the best solution at the best possible value.

Venue

The Legacy Hotel Conference Center
1775 Rockville Pike
Rockville, MD 20852
301-881-2300 or 1-800-255-1775

 

Posted in events | Leave a comment

Intelligere SCS RC4

Today we released the new release of Intelligere SCS one of the open source projects we run!
Intelligere SCS is a collaboration system with an integrated web conference system ideal for virtual classroom, e-learning and video conference. In order to view an on-line demo use this address http://tinyurl.com/scsdemo (user and pass ‘sfguest’).

The new features just released into sourceforge are:

- Sharing documents now support PDF, DOC, XLS, PPT and all the correspondent Open Office formats
– The control panel has been improved from a user interface point of view and now is able to handle multiple companies, speakers and sessions (each session right now is able to be scheduled with a starting and ending date)
– The conversion routine is based on UNOCONV
– The desktop sharing and the remote desktop control now is in Java and can be used on Win, Mac and Linux
– The streaming server now is RED5 0.9.1 and not anymore the old 0.5 version
– The delay in desktop sharing and / or remote desktop is now between 5 and 8 sec
– The control panel and the web application now support multi language
– The new desktop application based on Java let the user to create sessions on the fly from the desktop without the need to login in the control panel
– The control panel now has a REST interface to create sessions
– The dashboard now supports multiple shapes and new tools

You can find here  more screenshots to better understand the job we did and even more you can browse our wiki.
The page you have to refer to on sourceforge is http://sourceforge.net/projects/intelligere/.

Support This Project

Posted in Open Source | Leave a comment

FATC conference, individual over processes

One of the principles of the agile manifesto that GNStudio subscribes to is:

“Individuals and interactions over processes and tools”

We have just returned from New York City where GNStudio sponsored and presented at the Flash and the City conference and we learned that this same principle can also be applied to conferences.

As a speaker, we had a positive experience — the agenda was pretty cool and the speaker lineup included many of the top names that you’d find presenting at any of the top conferences around the world. There were also plenty of opportunities for interaction with the presenters because the sessions sizes were small.

One of the presentations that we really enjoyed was the talk on Maque, because this application seems to solve a common problem: the generation of mock data.

Another interesting presentation was on Sencha Animator. Sencha Animator is a desktop app that creates CSS3 animations for WebKit browsers and touchscreen mobile devices. This tool is pretty cool and it’s going in the same direction that Adobe’s Edge is going.

Some other interesting sessions were Justin Mclean’s talk on Flex and hardware interaction (i.e. Arduino.) as well as Michal Labriola’s session and John Lindquist’s session.

On our side we did a presentation about Envision-APDT the eclipse plugin we created to model and generate source code (supported languages are PHP, Java, ActionScript, JS), here you can get the slides.

GNStudio has sponsored several conferences in the past and had the opportunity to interact with event organizers like Tom, John and Nicole from the 360|Flex, Phil Brock from the Agile Conference and Shawn Pucknell from the FITC events. Each time we sponsored a conference we had extraordinary experiences, but not this time…let’s explore what happened.

A few days before the conference started, we received a message from the event organizer asking about the payment of our sponsor fee. We replied that we had submitted payment about a month prior. In our reply we also attached proof of the wire transfer. However, the event organizer told us he was not able to locate the wire transfer and that we were at fault. So in order to clear up this misunderstanding, we asked our bank to make a request to the bank of the event organizer to find out what had happened with the transfer.  We continued with our plans for speaking and sponsoring FATC.

However, we were never really treated like sponsors at the event.  As sponsors we had provided stickers that were supposed to be included in the attendee bags, but unfortunately that never happened. When the organizer called out all the sponsors in one of his speeches to thank them and talk a bit more about what each did, GNStudio was not mentioned. When we tried to have a conversation with the organizer, he completely ignored us.

Upon returning to Italy after the event, we received confirmation from the event organizer’s bank confirming that money had indeed been successfully transferred.

At the end of the day we feel like we learned a valuable lesson from this frustrating experience…individuals and interactions are the building blocks of successful relationships.

Posted in Agile, events | 2 Comments

Dynamic programming @ 360|Flex

The 360|Flex is still running and some wonderful sessions will start in a while but in the meanwhile here we are with the link to the slides of the “Dynamic programming with Flex” presentation.

The slides are available here, instead if you want to take a look to the source code of the examples just drop an e-mail to info [AT] gnstudio [DOT] com and you will get it shortly.

Posted in flex | 1 Comment

Google Maps JavaScript API and Flex-IFrame

Introduction
Implementing Google Maps for Flex application proved to be more challenging than it looked at first. Requirement was to have Google Maps implementation as much as possible like maps.google.com. This ruled out Google Maps Flash API (http://code.google.com/apis/maps/documentation/flash/). It has no support for Street View (http://code.google.com/p/gmaps-api-issues/issues/detail?id=524) and look and feel is much different than of maps.google.com. At this point it was clear that we’ll have to use Google Maps JavaScript API.

Implementing first demos of HTML overlay without using any additional libraries went well. Maps were  flowing above our Flex application quite well. Proving this was an acceptable approach, we decided to use the Google Maps JavaScript API together with Flex-IFrame (http://code.google.com/p/flex-iframe/) library to make the implementation more clear and to avoid duplicate work. To help us with some common JavaScript tasks we also used a bit of jQuery.

Flex-IFrame
Flex-IFrame is quite robust library that lets you overlay HTML content over Flex application. It’s easy to use, you just need to define an IFrame MXML tag with source or content properties defined. Here is an example with source defined:

<flexiframe:IFrame id="_mapIFrame" visible="false" source="GoogleMaps.html" width="798" height="449" frameLoad="onMapIFrameLoad(event)"/>

Flex-IFrame will tell HTML wrapper to setup the floating div on top of your application and create an iframe inside of that floating div. Flex-IFrame will position the HTML overlay according to the position of the Flex-IFrame component in your MXML. Communication with the source HTML document is also setup automatically by the library. There are many more features in the library. Download Flex-IFrame archive (http://code.google.com/p/flex-iframe/downloads/list) and check out the code, asdocs and examples in it.

Before we continue it’s really important that you read the FAQ section of the Flex-IFrame project here (http://code.google.com/p/flex-iframe/wiki/FAQ). Be sure that you know or learn as much as possible about wmode and related issues or it might bite you in the end. Check out these articles to get better understanding about how different wmode values behave:

Our implementation suffered from performance issues in IE. Check out a snippet about it here: http://snippet.gnstudio.com/viewtopic/97/Performance_boost…. You’ll need to do a lot of cross browser testing to ensure that you don’t have any unwanted side effects from changing the wmode parameter. Our decision was to set wmode to “opaque” only for IE (for all other browsers we use the default wmode, “window”.), since “opaque” wmode caused issues with mouse wheel scrolling in Chrome and Mozilla Firefox.

If you are still with us it means that you are in the same position as we were and you just don’t have any other options but to go with the iframe approach. Here are some modifications we made to Flex-IFrame library that helped us developing the application (changes were done on Flex-IFrame 1.4.6).

  • First change was removing the “_iframeContentHost != _appHost” condition. The way the _iframeContentHost and _appHost are originally resolved prevented us to use relative paths for source. There were also problems testing our application locally. The iframe just wouldn’t show. These host variables are concatenated from protocol and server name with port string taken from source and application URL. You will have to remove “_iframeContentHost != _appHost” condition from IFrame class on several places to avoid problems above.
  • One addition was also made. We added public getter for _frameLoaded flag to IFrame class to access this information more easily.
  • Another change that we made was related to the issue #69 from Flex-IFrame issue tracker (http://code.google.com/p/flex-iframe/issues/detail?id=69). By default Flex-IFrame expects  you to declare  methods like this “document.myFunction = function () {};”. This means that if you declare your methods like “function clickMe() {}”, Flex-IFrame won’t be able to find them and the call will fail. We made a change proposed here in the comments http://code.google.com/p/flex-iframe/issues/detail?id=69#c7.

If you’re having some problems using Flex-IFrame, check out project’s issue tracker. Maybe you’ll find your answer there (http://code.google.com/p/flex-iframe/issues/list).

Google Maps JavaScript API
Working with Google Maps JavaScript API is quite straightforward. There is documentation and a lot of examples out there.
There was a requirement to customize the look of the callout when users click on a marker. We used the InfoBox (http://googlegeodevelopers.blogspot.com/2010/04/infobox-10-highly-customizable.html), now part of the google-maps-utility-library-v3 (http://code.google.com/p/google-maps-utility-library-v3/), to accomplish requested visual design.

The InfoBox worked ok for us, but we had problems closing it with single left mouse click outside a callout when in Street View. Street View doesn’t dispatch mouse click events, so we had to implement our solution to get around this. It would be much easier to just have mouse click events on the Street View.
Traffic layer had to be show in all combinations, just like at maps.google.com. We had problems showing satellite view with no labels, but with traffic. This example from documentation shows us how to do it by defining custom map overlay: http://code.google.com/apis/maps/documentation/javascript/maptypes.html#ImageMapTypes. With some additional JavaScript coding we made it work just like at maps.google.com.

Note that we were not able to mimic all things from maps.google.com. There is no way to show transit routes like in Google’s official application. Also Street View implementation is different since maps.google.com uses Flash version of the Street View and there is no option in API to include it via API. Google wont fix this also. Here is the explanation why: http://code.google.com/p/gmaps-api-issues/issues/detail?id=2999. Our guess is we’ll see HTML5 version at maps.google.com soon, so there shouldn’t be any differences in the future.

Don’t forget to freeze your version of Google Maps JavaScript API for production. There is a “v” parameter that can be set to a specific version number when importing the library (http://code.google.com/apis/maps/documentation/javascript/basics.html#Versioning).

If you don’t have Google Maps API Premier account and you are serving your application over HTTPS, IE security warning pop-up can be problematic. We had to prove our implementation works before acquiring Google Maps API Premier account. We had problems with the code that depends on Google Maps API because IE blocked Google Maps API from loading. Code that required Google Maps API was executed even if API was not loaded. To solve this we used “callback” parameter (example: http://maps.google.com/maps/api/js?v=3.4&sensor=false&callback=initialize). This is the only way you can be sure Google Maps API is ready to use. Callback function enables us to wait for user to accept unsecure content. When we are sure that the API is ready, we start to load other libraries in a sequence (like InfoBox that needs Google Maps API to initialize properly). After all libraries are loaded we start to initialize the map. This way we ensured that our implementation works even if browser prompts user about unsecure content.

Integration
Our use case was to open the map when user clicks on a button. Map has to be in a Flex pop-up which is centered as user resizes the application. Positioning and centering worked well from the start, but Flex-IFrame was flickering when the pop-up was opened. It appeared in the top left corner of the application and then it would quickly center itself. This was of course unacceptable, so we had to find a solution for it.

Solution that worked best for us is not elegant at all. We added listener for Flex-IFrame frameLoad event and made sure that Flex-IFrame was hidden when we opened our Flex pop-up. When frameLoad listener was triggered , timer is setup to wait 100 ms for Flex-IFrame to center itself and for Google Maps to initialize. After 100 ms we set the Flex-IFrame visibility to true and we kick off map initialization via external call. Hundred milliseconds worked best for us. It’s not to much for user to wait and the flicker was gone.

Except for issue above the rest of the integration went well. It was a long journey from PoC to a final polished implementation.

Conclusion
This experience points out again that Flash needs to mashup with other technologies more easily. We can’t expect that all popular applications, widgets and APIs will be written, adopted and maintained for Flash platform also. It would really be good to have more support for mashing Flash content with other web content. Not sure if iframe is a solution for Flash and web mashups, but you can vote here to include iframe component to Flex SDK (http://bugs.adobe.com/jira/browse/SDK-12291). We can hope for two things, either Flash becomes more open web technology or we get all popular APIs written and maintained for Flash platform.

We didn’t expect so much trouble implementing Google Maps for our Flex application. The fact that we had to mimic maps.google.com made it more challenging. We had to ignore the Google Maps Flash API and go for JavaScript API because it’s more up to date. We had to use iframe technique and would recommend it only as last resort. You may spend a lot more time than planned for the implementation. Hope that this article will help you avoid some of the issues we had and speed  up you implementing Google Maps for your Flex application.

Posted in Best Practices, flex, general | 5 Comments

360|Flex Conference, party and a new software

GNstudio 360 Flex invitation360|Flex is the first and still the best Adobe Flex developer conference in the world. During the conference you will not get company pushing books, or a media company selling subscriptions, the conference goal is to bring the best and brightest in the developer community together for 4 days of incredible sessions, awesome parties, good times, and learning.

We are very used to the 360|Flex conference since the very beginning and each time we encourage developers to come because it’s the place to go if you want to exchange ideas with pairs and with the engineers that are behind the scene of the Flex framework.

The conference this year will be in Denver from the 10th yo the 13rd of April, the 360|Flex facts are

  • 4 days of conference
  • 50+ sessions
  • 4 Hands-on sessions
  • More than 30 speakers
  • Adobe Engineers
  • Community experts

This year we planned to improve the Monday evening party because we would love to have fun and we would like to invite all the Flex developers to celebrate the born of a new software designed around developers: Envision APDT.

Envision APDT is a tool created in order to let developers be faster during the modeling of an application. Even more the tool helps you breakdown the gap between technical guys and not technical guys so that you can check that the logic of your software will match with the end customer expectations. In order to make the modeling phase of a project compelling we tried to avoid any formalism (e.g. UML rules and syntax) and to leave as much as possible freedom in the way models can be created. Most of the time developers believe that modeling is time consuming, Envision APDT is able to generate three different outputs:

  • ActionScript 3.0 source code
  • Java source code
  • Pseudocode ascii representation

To be updated about this new software you can sign up to the form available here www.envsion-apdt.com, the first one hundred registered user can get a special goodie during the party, bring with you the confirmation e-mail!

During the party our team will be ready to reply to specific questions and to distribute licenses, stickers and even more.

Posted in events | Leave a comment