visualforce in salesforce1 [best practices of visualforce in salesforce1]

53
Using Visualforce in Salesforce1

Upload: raja-rao

Post on 24-Nov-2015

1.039 views

Category:

Documents


0 download

DESCRIPTION

This contains Best Practices of Visualforce In Salesforce1.Use this to learn about Do's and Don'ts of Visualforce in Salesforce1.

TRANSCRIPT

Colors/Artwork (delete this slide when done)

Using Visualforce in Salesforce11

SpeakersSandeep BhanotMobile Geek (both kinds)@cloudysan

2Safe HarborSafe harbor statement under the Private Securities Litigation Reform Act of 1995: This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections of product or service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or technology developments and customer contracts or use of our services. The risks and uncertainties referred to above include but are not limited to risks associated with developing and delivering new functionality for our service, new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth, interruptions or delays in our Web hosting, breach of our security measures, the outcome of intellectual property and other litigation, risks associated with possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling non-salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of salesforce.com, inc. is included in our annual report on Form 10-Q for the most recent fiscal quarter ended July 31, 2012. This documents and others containing important disclosures are available on the SEC Filings section of the Investor Information section of our Web site. Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.

Introducing Salesforce1All your past investments...

Drag and drop UI customizationNotifications PlatformPublisher Actions...now in the futureDownload Salesforce1 App today

All Your CustomizationsAll Your DevicesAll Your CRMAll Your Apps

https://yourinstance.salesforce.com/one/one.appVisualforce in Salesforce1Where can I use it?How do I use it?How can I make it better?5Visualforce in Salesforce1Where can I use it?How do I use it?How can I make it better?6

Visualforce Left NavVisualforce Pages in Left Nav

JavaScript navigation library availablesforce.one.navigateToSObject etc.7

Visualforce Publisher ActionsVisualforce Pages as Publisher Actions(VF page needs to the extend Standard Controller for use with Object Specific Publisher Actions)

JavaScript Pub-Sub library available to interact with the publisherpublisher.setValidForSubmitpublisher.postpublisher.close

8

Visualforce Page LayoutVisualforce Pages in Page Layouts(VF page needs to the extend Standard Controller)

9

Visualforce Mobile CardsMobile Cards - Visualforce Pages on Record Detail(VF page needs to the extend Standard Controller)

10Visualforce in Salesforce1

Available for Salesforce Mobile apps flag enabledVF page needs to the extend Standard Controller in order to use in the Page Layout, Mobile Cards or Publisher ActionsThings to remember11Visualforce in Salesforce1Where can I use it?How do I use it?UI/UXBusiness Logic & Data BindingNavigationSupporting multiple form factorsDevice AccessHow can I make it better?12Visualforce in Salesforce1Where can I use it?How do I use it?UI/UXBusiness Logic & Data BindingNavigationSupporting multiple form factorsDevice AccessHow can I make it better?13Visualforce in Salesforce1 UI/UX considerations

Salesforce1 cannot auto-magically (yes, its a word) make Visualforce pages mobile-optimized14Visualforce UI/UX considerationsDesign VF pages taking the limited real-estate in mobile into accountDecide which form-factors your page has to support - phone, tablet, bothDevelop for the mobile contextUse device features like geolocation, camera etc. where appropriateMobile version of the page/app does not have to support all the bells and whistles less is moreOptimize for your most common mobile use case discovery, data entry, search etc.

Use Responsive Design principles (same as the Salesforce1 app)

15Making Visualforce Pages Mobile OptimizedMobile Design Templateswww.developerforce.com/mobile/services/mobile-templates

16Making Visualforce Pages Mobile OptimizedTwitter Bootstrap

http://www.youtube.com/watch?v=W1TbyDH0RaY Using Visualforce and Bootstrap -

http://bit.ly/VisualStrap Custom Bootstrap fork that works with default Visualforce styling (Community developed)17

Making Visualforce Pages Mobile OptimizedIonic Frameworkhttp://coenraets.org/blog/2014/02/sample-force-com-mobile-application-with-ionic-and-angularjs/

18

Making Visualforce Pages Mobile Optimized

Ratchethttp://coenraets.org/blog/2014/03/building-mobile-apps-for-salesforce-com-with-ratchet-2-0/ 19Making Visualforce Pages Mobile OptimizedjQuery Mobile

http://www.developerforce.com/mobile/getting-started/html5/#jquery

20Using Standard Visualforce Tags in Salesforce1 Note: Representative sample only. This is not a comprehensive list ** Works and SupportedSupported, but avoid if possibleNot Supported21Using Standard Visualforce Tags in Salesforce1Try and avoid using standard Visualforce tags (which are optimized for desktop) if possible. Use standard HTML markup (, , , , etc.) + custom mobile-optimized CSS (e.g. Bootstrap) insteadIf you have to use structure tags like , use 1 column layout.22Salesforce1 Style Guidehttp://sfdc-styleguide.herokuapp.com/ Keeping Visualforce pages consistent with the Salesforce1 look and feel 23Visualforce in Salesforce1 - UI/UX summaryDosDontsResponsive designDesktop optimized designStandard HTML markup and custom CSSStandard VF structure tags and CSSLess is moreSupport every bell and whistleUse Mobile Context (e.g. camera, geolocation)Recreate desktop functionalityOptimized for touch (e.g. larger tap areas, HTML5 form inputs)Optimized for click

24Visualforce in Salesforce1Where can I use it?How do I use it?UI/UXBusiness Logic & Data BindingNavigationSupporting multiple form factorsDevice AccessHow can I make it better?25Avoid ViewState (no )Favor Single Page apps (full page rendering is expensive on mobile)Consider JavaScript MV* Frameworks like AngularJS, Backbone etc. to provide structureBusiness Logic & Data Binding in VisualforceTop 3 things to remember.26Business Logic & Data Binding in VisualforceInvoke Apex Controller/Extension methods from JavaScriptAvoids ViewState (better performance)Stateless business logicFront-end heavy (i.e. JavaScript) development

JavaScript Remoting27Business Logic & Data Binding in VisualforceBasic CRUD operations on SObjects directly from JavaScriptAvoids ViewState (better performance)Reduces server-side Apex codeFront-end heavy (i.e. JavaScript) developmentReplaces ForceTk/RemoteTk (in the VF context)

Visualforce Remote Objects (new Pilot in Spring 14)

28Business Logic & Data Binding in VisualforceUse to display lists

is your friend

29Business Logic & Data Binding in VisualforceMobile Packshttp://www.developerforce.com/mobile/services/mobile-packs

Use popular open-source JavaScript MV* Frameworks in VisualforceGreat way to build single-page mobile web appsMobile Packs handle data binding with Salesforce

30Visualforce in Salesforce1 Data Binding summaryDosDontsJavaScript Remoting

Visualforce Remote Objects

HTML5 Input Elements (tel, email, date etc.)

Single Page appsMulti-page appsJavaScript MV* Frameworks like AngularJS, Backbone etc.No JavaScript FrameworkStateless & AsynchronousServer-side state & synchronous

31Visualforce in Salesforce1Where can I use it?How do I use it?UI/UXBusiness Logic & Data BindingNavigationSupporting multiple form factorsDevice AccessHow can I make it better?32Visualforce in Salesforce1 - NavigationSalesforce1 provides a JavaScript navigation library via the sforce.one object

sforce.one.navigateToSObjectsforce.one.navigateToURLsforce.one.navigateToFeedsforce.one.navigateToFeedItemDetailsforce.one.navigateToRelatedListsforce.one.navigateToListsforce.one.editRecordsforce.one.createRecord33Visualforce in Salesforce1 - NavigationAvoid using window.openManipulating window.location.href directly will NOT workDont use target="_blank in navigation linksExternal links (e.g. ) will open in a new child browserInternal links will open in current windowThings to remember.34Visualforce in Salesforce1Where can I use it?How do I use it?UI/UXBusiness Logic & Data BindingNavigationSupporting multiple form factorsDevice AccessHow can I make it better?35Supporting multiple form factors in VisualforceBut my Visualforce page has to work in Salesforce1 (phone & tablet) AND Desktop36Supporting multiple form factors in VisualforceOption 1 (existing pages) : Refactor to make mobile-friendlyMinimize/eliminate use of VF tags like , etc. that are not mobile-optimized and/or supported in Salesforce1Replace with JavaScript Remoting or Remote Objects where possible37Supporting multiple form factors in VisualforceOption 2 : Responsive Design

Recommended approach38Supporting multiple form factors in VisualforceOption 3 : Serve different content based on form-factor

http://blogs.developerforce.com/developer-relations/2012/05/cross-device-html5-apps-using-visualforce.html Libraries like Device.js or Modernizr can be used to detect form-factorRedirect to different VF pages based on form factor, ORConditionally show sections of the page based on form factor

39Supporting multiple form factors in VisualforceRemember to handle navigation differently in Salesforce1 vs Desktop

40Visualforce in Salesforce1Where can I use it?How do I use it?UI/UXBusiness Logic & Data BindingNavigationSupporting multiple form factorsDevice AccessHow can I make it better?41Device Access in Salesforce1PhoneGap/Cordova type device access is not available in the Salesforce1 app. HOWEVER.

Geolocation API (check the Saleforce1 Dev Guide for an example) (for Camera access)42Visualforce in Salesforce1Where can I use it?How do I use it?UI/UXBusiness Logic & Data BindingNavigationSupporting multiple form factorsDevice AccessHow can I make it better?PerformanceDebugging43Visualforce in Salesforce1Where can I use it?How do I use it?UI/UXBusiness Logic & Data BindingNavigationSupporting multiple form factorsDevice AccessHow can I make it better?PerformanceDebugging44Visualforce Performance in Salesforce1The 3 most important things about developing mobile web pages Performance, Performance, Performance.45Visualforce Performance in Salesforce1Some Performance tips for designing mobile VF pages Avoid viewstate (no )

Use libraries like FastClick to avoid the default 300ms tap delay in mobile web browsersMinimize all your CSS and JavaScript (using tools like YUI Compressor) and compress imagesUse optimization techniques like image lazy loading and infinite scrollInsert/update the DOM in bulk to avoid browser reflows (e.g. insert an entire

  • section instead of individual
  • elements)

    GeneralUse lightweight JavaScript libraries like Zepto.js instead of JQueryMove your statements to the end of the Visualforce pageJavaScript46Visualforce Performance in Salesforce1Some Performance tips for designing mobile VF pages Use CSS Sprites to minimize HTTP connectionsAvoid CSS techniques like drop shadows, gradients etc. that affect page performance. Flat design is new black.Use Hardware Accelerated CSS properties where appropriateUse PNG/JPG images (no GIFs). Avoid images completely (use CSS3 instead) where possible.Build single page apps with CSS transitions between screens/sectionsConditionally load static assets (CSS, images etc.) based on form factor

    CSS/Images47Visualforce Performance in Salesforce1Some Tools to help you measure page performanceWebPageTestPageSpeed InsightsChrome Developer Tools - Timeline48Visualforce in Salesforce1Where can I use it?How do I use it?UI/UXBusiness Logic & Data BindingNavigationSupporting multiple form factorsDevice AccessHow can I make it better?PerformanceDebugging49Salesforce1 comes in two flavorshttp://yourinstance.salesforce.com/one/one.app Web versionHybrid version

    Debugging Visualforce in Salesforce150Debug your Visualforce page in the web version of Salesforce1http://yourinstance.salesforce.com/one/one.appDebugging Visualforce in Salesforce1

    Use standard web debugging tools like Chrome Dev. Tools and Firebug51Salesforce1 Developer ResourcesWebinar: Intro to Salesforce1 Mobile App DevelopmentDreamforce Sessions bit.ly/s1-df-sessionsDeveloper Guide bit.ly/s1-dev-guideBlogs:6 things you need to know: bit.ly/s1-6-thingsMobile cards: bit.ly/s1-mobile-cardsFollow Developer Force for the Latest News@forcedotcom / #forcewebinar

    Developer Force Force.com Community+Developer Force Force.com CommunityDeveloper ForceDeveloper Force Group53