Using Browser Technologies in Visualforce - Part 1

Part 1 | Part 2 | Part 3 | Part 4

Contents

Pages, Flex and S-controls

Note: Visualforce is available as part of the standard Developer Edition org. If you do not have a Developer Edition org, you can get one for free by joining DFC.

Since the announcement of Visualforce (VF) at Dreamforce in September, I have received a lot of questions about various browser technologies and how they fit into the VF strategy. The questions range from "are we going to abandon support for AJAX and Flex?" to "When should I use AJAX and Flex and when should I use VF components?".

Visualforce pages are not an all or nothing proposition. It is common and, at least today, very likely that you will end up mixing standard HTML tags in with your VF component tags. Writing VF pages is very much like using other technologies such as tag libs in Java. You are constructing a page that will eventually be rendered as HTML in the browser. Any VF component tag will result in common HTML when the page is delivered to the browser, and all standard HTML tags will be rendered exactly as you entered them. When the platform fetches your VF page, the page is processed with VF component tags being processed and standard HTML tags just passed along.

The bottom line is that if it is standard HTML, including script tags and the contained script, it is valid in the VF page context. This means that using the AJAX toolkit to support AJAX/DHTML widgets on your VF page or using an embed tag to support a Flex widget is perfectly legit.

Future Direction

It is our aim to mature the VF component library to the point where you will need to drop into standard HTML less and less over time. An overriding philosophy is that we don't want to handcuff you in any way by removing support for any standard web technology.

What Does What?

Visualforce is based on the Model View Controller (MVC) pattern. The model is your data schema. The controller is either a standard controller or a custom Apex controller. The view then is the combination of VF components and standard HTML. When leveraging standard browser technologies in your VF pages you will want to keep this in mind.

One way to achieve the best use of browser technologies in Visualforce is to examine your AJAX or Flex and determine how much, if any, use of the API is happening. The controller is the appropriate mechanism for communicating data between the view and the model. This mean you should try to minimize using the API for update and create operations. This doesn't mean that you should never use the API from the client, but it is a key indication of whether or not you are taking full advantage of the platform features.

The ability to relegate the data manipulation and business logic to the platform is one of the main advantages when creating applications on the platform. Doing this will make your applications more robust and "portable" within the platform. For instance, if you are updating data from the client and a part of the schema is changed, you won't realize the change has occurred until your client side technology stops working. On the other hand, if you have leveraged the controller and VF pages for the update, the schema change will be prevented because the platform knows that it will break the logic in either your page or controller or both.

Can you show me what you mean?

Part 2 of this post will demonstrate the relationship between traditional browser technologies and Visualforce.

Part 1 | Part 2 | Part 3 | Part 4