Visualforce in Salesforce1: Optimizing your User Interface for Mobile
24 likes16,177 views
The document discusses optimizing the Visualforce interface for mobile devices using Salesforce1, focusing on user interface (UI), user experience (UX), business logic, and data binding considerations. It emphasizes design best practices, performance optimization techniques, and available resources for developers, including debugging tools. The webinar also covers the proper use of Visualforce within Salesforce1 and provides guidelines to enhance mobile experiences through responsive design and lighter, more efficient code.
Visualforce in Salesforce1: Optimizing your User Interface for Mobile
- 1. Visualforce in Salesforce1 Optimizing your User Interface for Mobile May 14, 2014
- 2. #forcewebinar Speakers Dave Carroll Director, Developer Evangelism @dcarroll Pat Patterson Developer Evangelist Architect @metadaddy
- 3. #forcewebinar Safe Harbor Safe 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.
- 4. #forcewebinar Follow Salesforce Developers for the Latest News Salesforce Developers +Salesforce Developers Salesforce Developers Salesforce Developers The video will be posted to YouTube & the webinar recap page (same URL as registration). This webinar is being recorded! @salesforcedevs / #forcewebinar
- 5. #forcewebinar Have Questions? § Don’t wait until the end to ask your question! – Technical support will answer questions starting now. § Respect Q&A etiquette – Don’t repeat questions. The support team is working their way down the queue. § Stick around for live Q&A at the end – Speakers will tackle more questions at the end, time-allowing. § Head to Developer Forums – More questions? Visit developer.salesforce.com/forums
- 6. #forcewebinar Introducing Salesforce1 All your past investments... Drag and drop UI customization Notifications Platform Publisher Actions ...now in the future All Your Customizations All Your Devices All Your CRM All Your Apps https://yourinstance.salesforce.com/one/one.app Download the Salesforce1 Mobile App today
- 7. #forcewebinar Visualforce in Salesforce1 § Where can I use it? § How do I use it? § How can I make the most of it?
- 8. #forcewebinar Visualforce in Salesforce1 § Where can I use it? § How do I use it? § How can I make the most of it?
- 9. #forcewebinar Visualforce – Left Nav Visualforce Pages in Left Nav JavaScript navigation library available sforce.one.navigateToSObject etc.
- 10. #forcewebinar Visualforce – Publisher Actions Visualforce 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 publisher publisher.setValidForSubmit publisher.post publisher.close
- 11. #forcewebinar Visualforce – Page Layout Visualforce Pages in Page Layouts (VF page needs to the extend Standard Controller)
- 12. #forcewebinar Visualforce – Mobile Cards Mobile Cards - Visualforce Pages on Record Detail (VF page needs to the extend Standard Controller)
- 13. #forcewebinar Demo: Basic Visualforce in Salesforce1
- 14. #forcewebinar Visualforce in Salesforce1 § <apex:page docType="html-5.0" …> § ‘Available for Salesforce Mobile apps’ flag enabled § VF page needs to the extend Standard Controller in order to use in the Page Layout, Mobile Cards or Contextual Publisher Actions Things to remember…
- 15. #forcewebinar Visualforce in Salesforce1 § Where can I use it? § How do I use it? – UI/UX – Business Logic & Data Binding – Navigation § How can I make the most of it?
- 16. #forcewebinar Visualforce in Salesforce1 § Where can I use it? § How do I use it? – UI/UX – Business Logic & Data Binding – Navigation § How can I make the most of it?
- 17. #forcewebinar Visualforce in Salesforce1 – UI/UX considerations Salesforce1 cannot auto-magically (yes, it’s a word) make Visualforce pages mobile-optimized
- 18. #forcewebinar Visualforce UI/UX considerations § Design VF pages taking the limited real-estate in mobile into account § Decide which form-factors your page has to support - phone, tablet, both § Develop for the mobile context – Use device features like geolocation, camera etc. where appropriate – Mobile version of the page/app does not have to support all the bells and whistles – less is more – Optimize for your most common mobile use case – discovery, data entry, search etc. § <apex:page standardStylesheets="false"> § Use Responsive Design principles (same as the Salesforce1 app)
- 19. #forcewebinar Making Visualforce Pages Mobile Optimized Mobile Design Templates www.developerforce.com/mobile/services/mobile-templates
- 20. #forcewebinar Making Visualforce Pages Mobile Optimized Twitter Bootstrap http://www.youtube.com/watch?v=sIWchyCqDa4 Using Visualforce and Bootstrap - http://bit.ly/VisualStrap Custom Bootstrap fork that works with default Visualforce styling (Community developed)
- 21. #forcewebinar Making Visualforce Pages Mobile Optimized Ionic Framework http://coenraets.org/blog/2014/02/sample-force-com-mobile- application-with-ionic-and-angularjs/
- 22. #forcewebinar Making Visualforce Pages Mobile Optimized Ratchet http://coenraets.org/blog/2014/03/building-mobile-apps-for- salesforce-com-with-ratchet-2-0/
- 23. #forcewebinar Making Visualforce Pages Mobile Optimized jQuery Mobile http://www.developerforce.com/mobile/getting-started/ html5/#jquery
- 24. #forcewebinar Using Standard Visualforce Tags in Salesforce1 <apex:repeat> <apex:outputPanel> Note: Representative sample only. This is not a comprehensive list <apex:pageBlock> <apex:pageBlockButtons> <apex:pageBlockSection> <apex:pageBlockSectionItem> <apex:pageBlockTable> <apex:inlineEditSupport> <apex:detail> <apex:inputField>** <apex:enhancedList> <apex:listViews> <apex:relatedList> <chatter:*> <liveagent:*> Works and Supported Supported, but avoid if possible Not Supported
- 25. #forcewebinar Salesforce1 Style Guide http://sfdc-styleguide.herokuapp.com/ Keeping Visualforce pages consistent with the Salesforce1 look and feel
- 26. #forcewebinar Salesforce1 Style Guide https://github.com/joshbirk/onestarter OneStarter - An open-source jQuery plugin for easily making Visualforce pages appear in the style of Salesforce1.
- 27. #forcewebinar Visualforce in Salesforce1 - UI/UX summary Dos Don’ts Responsive design Desktop optimized design Standard HTML markup and custom CSS Standard VF structure tags and CSS Less is more Support every bell and whistle Use Mobile Context (e.g. camera, geolocation) Recreate desktop functionality Optimized for touch (e.g. larger tap areas, HTML5 form inputs) Optimized for click
- 28. #forcewebinar Visualforce in Salesforce1 § Where can I use it? § How do I use it? – UI/UX – Business Logic & Data Binding – Navigation § How can I make the most of it?
- 29. #forcewebinar § Avoid ViewState (no <apex:form>) § Favor Single Page apps (full page rendering is expensive on mobile) § Consider JavaScript MV* Frameworks like AngularJS, Backbone etc. to provide structure Business Logic & Data Binding in Visualforce Top 3 things to remember….
- 30. #forcewebinar Business Logic & Data Binding in Visualforce § Invoke Apex Controller/Extension methods from JavaScript § Avoids ViewState (better performance) § Stateless business logic § Front-end heavy (i.e. JavaScript) development JavaScript Remoting
- 31. #forcewebinar Business Logic & Data Binding in Visualforce § Basic CRUD operations on SObjects directly from JavaScript § Avoids ViewState (better performance) § Reduces server-side Apex code § Front-end heavy (i.e. JavaScript) development § Replaces ForceTk/RemoteTk (in the VF context) Visualforce Remote Objects (new Pilot in Spring ’14)
- 32. #forcewebinar Business Logic & Data Binding in Visualforce § Use <apex:repeat> to display lists <apex:repeat> is your friend
- 33. #forcewebinar Visualforce in Salesforce1 – Data Binding summary Dos Don’ts JavaScript Remoting <apex:form> Visualforce Remote Objects <apex:form> HTML5 Input Elements (tel, email, date etc.) <apex:inputField> <apex:input type=“tel/email/…”/> <apex:inputField> Single Page apps Multi-page apps JavaScript MV* Frameworks like AngularJS, Backbone etc. No JavaScript Framework Stateless & Asynchronous Server-side state & synchronous
- 34. #forcewebinar Visualforce in Salesforce1 § Where can I use it? § How do I use it? – UI/UX – Business Logic & Data Binding – Navigation § How can I make the most of it?
- 35. #forcewebinar Visualforce in Salesforce1 - Navigation Salesforce1 provides a JavaScript navigation library via the sforce.one object sforce.one.navigateToSObject sforce.one.navigateToURL sforce.one.navigateToFeed sforce.one.navigateToFeedItemDetail sforce.one.navigateToRelatedList sforce.one.navigateToList sforce.one.editRecord sforce.one.createRecord
- 36. #forcewebinar Demo: Visualforce Single Page App in Salesforce1
- 37. #forcewebinar Visualforce in Salesforce1 § Where can I use it? § How do I use it? – UI/UX – Business Logic & Data Binding – Navigation § How can I make the most of it? – Performance – Debugging
- 38. #forcewebinar Visualforce in Salesforce1 § Where can I use it? § How do I use it? – UI/UX – Business Logic & Data Binding – Navigation § How can I make the most of it? – Performance – Debugging
- 39. #forcewebinar Visualforce Performance in Salesforce1 The 3 most important things about developing mobile web pages Performance, Performance, Performance.
- 40. #forcewebinar Visualforce Performance in Salesforce1 Some Performance tips for designing mobile VF pages § Avoid viewstate (no <apex:form>) § <apex:page cache="true" expires="600"> § Minimize all your CSS and JavaScript (using tools like YUI Compressor) and compress images § Use optimization techniques like image lazy loading and infinite scroll § Insert/update the DOM in bulk to avoid browser reflows (e.g. insert an entire <ul> section instead of individual <li> elements) General
- 41. #forcewebinar Visualforce Performance in Salesforce1 Some Performance tips for designing mobile VF pages § Use libraries like FastClick to avoid the default 300ms tap delay in mobile web browsers § Use lightweight JavaScript libraries like Zepto.js instead of Jquery § Move your <script> statements to the end of the Visualforce page JavaScript
- 42. #forcewebinar Visualforce Performance in Salesforce1 Some Performance tips for designing mobile VF pages § Use CSS Sprites to minimize HTTP connections § Avoid CSS techniques like drop shadows, gradients etc. that affect page performance. Flat design is new black. § Use Hardware Accelerated CSS properties where appropriate § Use PNG/JPG images (no GIFs). Avoid images completely (use CSS3 instead) where possible. § Build single page apps with CSS transitions between screens/sections § Conditionally load static assets (CSS, images etc.) based on form factor CSS/Images
- 43. #forcewebinar Visualforce Performance in Salesforce1 Some Tools to help you measure page performance § WebPageTest § PageSpeed Insights § Chrome Developer Tools - Timeline
- 44. #forcewebinar Visualforce in Salesforce1 § Where can I use it? § How do I use it? – UI/UX – Business Logic & Data Binding – Navigation § How can I make the most of it? – Performance – Debugging
- 45. #forcewebinar Salesforce1 comes in two flavors http://yourinstance.salesforce.com/one/one.app Web version Hybrid version Debugging Visualforce in Salesforce1
- 46. #forcewebinar Debug your Visualforce page in the web version of Salesforce1 first http://yourinstance.salesforce.com/one/one.app Debugging Visualforce in Salesforce1 Use standard web debugging tools like Chrome Developer Tools and Firebug Chrome Developer Tools Mobile Emulation
- 47. #forcewebinar Debugging Visualforce pages running on a device (i.e. inside the Hybrid Salesforce1 app) http://people.apache.org/~pmuellr/weinre/docs/latest/ Debugging Visualforce in Salesforce1 Weinre – open source tool to debug web pages running on a device
- 48. #forcewebinar Salesforce1 Developer Resources § Webinar: Intro to Salesforce1 Mobile App Development – bit.ly/s1-mob-app-dev § Dreamforce Sessions: bit.ly/s1-df-sessions § Developer Guide: bit.ly/s1-dev-guide § Blogs: – 6 things you need to know: bit.ly/s1-6-things – Mobile cards: bit.ly/s1-mobile-cards § Code: – Issues in GitHub: github.com/metadaddy-sfdc/IssuesInGitHub – Visualforce, AngularJS & Ionic: bit.ly/vf-ionic
- 49. #forcewebinar Survey Your feedback is crucial to the success of our webinar programs. Thank you! bit.ly/VFinSF1 #forcewebinar
- 50. #forcewebinar Q & A #forcewebinar Dave Carroll Director, Developer Evangelism @dcarroll Pat Patterson Developer Evangelist Architect @metadaddy