Salesforce1-Desktop Visualforce Pattern

Question

Background

I'm facing the challenge to adapt many VF pages already built to S1. After a long research I realised that there are many options to transforme a VF Page to be S1 compatible.

I understand that we have to avoid certain VF tags and controller/js actions. Also it is important to detect the application client in order to render the page best options (layout and controls).

Then I should render one "responsive" page or redirect the client to an specific Desktop/S1 page.

I also known that Lightning and Aura components will solve part of this but I have discarded that option because it is in beta/pilot and we need to deliver this now.

Question

What is the best patter to follow when you have to create a VF S1 page in order to maximize the UX and minimize the development/maintenance effort ?

Options

1) One responsive page: Creating one page using a responsive framework like bootstrap and Angular. This page should contains the entire functionality.

Pros:

• I only have to develop on VF

Cons:

• I don't have some standard components and we have to reduce the amount of items that the user can view/work in the desktop. Making the user experience worse in some cases.
• I am not able to use apex:detail and this increase the amount of time to add a field or make a simple change in the page.
• It will be very challenging to handle navigation in a unique way.

2) Two specific pages: The idea here is to detect the client and redirect to an specific page for that platform. Desktop could still using the existing one. S1 could use a new page built based on the previous responsive scheme.

Pros:

• I will have a full user experience
• I could use some standard components in desktop version
• I will be able to remove some trivial fields and related fields on mobile.

Cons:

• I will have to develop and maintain twice the same functionality.

Summing up

Probably there are not a silver bullet patter and we will be force to choose depending the content of each page. However, I would like to know if is there other options or pros/cons to consider before start the project.

Thanks

Answer 1

If you want just to keep one page for both desktop and mobile, then I would prefer using bootstrap. Use the bootstrap table, form, jumbotron, media elements, and other bootstrap components shown in below link:

http://getbootstrap.com/components/

Using angular is beneficial for the application to increase the performance of the application, but it's not a need. Using getters and setters and normal VF action functions, you can achieve the whole functionality while making it simple .

Bootstrap tags will be simple to plug and play without need for lot of custom CSS and the application will be responsive.

So with minimal Javascript and the Bootstrap framework you can achieve responsiveness. Using Apex, you can code your backend. If you want an excellent high performance app, then you will need to make it a SPA using a specific framework, else there is absolute no need .

Navigation can be handled using the Javascript Sforce.one library. You can also call action functions from Javascript .

Edit :

The One Page approach is always better. You need to only build once, while the CSS changes and your controller remains same .

Two page approach will require two pages to build and also some controller logic may change. This will be good from a performance perspective. Normally the one page approach with getters and setters and mobile page controller will have VF Remoting .This may be time consuming, but performance of the app will be great.

Answer 2

I'm agree with the previous answer, you should use the one page approach, it's less maintenance and more effective.

Between all the different frameworks in the market I found that Bootstrap is one of the best, and actually there is one version called Bootstrap SF1 that has similar styles with Salesforce in terms of fonts, css and style and it's fully responsive.

So. why not using an option that is already built and test it? is not supported by Salesforce but is really good and you can customise it as well to suit your specific needs.

Have a look please: http://developer.salesforce.org/bootstrap-sf1/

You only need to include the library as static resource and called in your custom VF page. Something like this:

  <apex:page standardController="Order__c" standardStylesheets="false" showHeader="true" docType="html-5.0">
  <apex:stylesheet value="{!URLFOR($Resource.bootstrap_sf1, 'bootstrap-sf1-0.1.0-beta.15/dist/css/bootstrap-namespaced.css')}" />
  <apex:stylesheet value="{!URLFOR($Resource.bootstrap_sf1, 'bootstrap-sf1-0.1.0-beta.15/dist/css/bootstrap.css')}" />
  <apex:stylesheet value="{!URLFOR($Resource.bootstrap_sf1, 'bootstrap-sf1-0.1.0-beta.15/dist/css/bootstrap.min.css')}" />

Important to have standardStylesheets="false". Otherwise it will create some conflicts between the bootstrap library and the salesforce standard style.

I hope it helps you, I'm using in both Desktop and mobile and is working fine.