Deck covering a few of the gotchas that I've found building Visualforce pages to run inside Salesforce1 and some of the workarounds I've found.

1. Keir Bowden, CTO BrightGen
@bob_buzzard
Salesforce1
For Visualforce Developers

2. Accessing Visualforce
• Mark page as mobile
– Classic in Spring 14
• Create Tab
• Add to Mobile Navigation

3. Accessing Visualforce
• Appears in menu
• Available in app

4. Unsupported Elements
• http://bobbuzz.me.uk/1gnxa2R
• Anything outside the Apex namespace
– E.g. <chatter:feed />
• <apex:detail />

5. Unsupported Elements
• <apex:inputField />
– If it creates a widget
• Use HTML5 type attribute
– Let the browser provide the widget
– Suitable touch keyboard
– No type for lookups!

6. Example Types
• type=“date”
• type=“number”

7. Sforce.one JavaScript Object
• In app navigation
• Visualforce knows it is in Salesforce1
• Installed or HTML5?
– Inspect user-agent on iOS
– Risky – see Dolphin browser

8. Click event is Slow
• Webkit waits 300ms for double click
• Use touch events instead
• Support is patchy: caniuse.com/touch
• JavaScript libraries – e.g. Event, Zepto

9. window.open() is your Friend

10. Child Browser
• External links – child browser
• Internal links – current page
• window.open – child browser – iOS only!

11. iPhone App Rotation

12. Using Child Browser

13. List Jumping
Worse with
bootstrap!

14. Using Child Browser

15. Bootstrap Responsive Tables
Text wraps
Responsive
Table - scrolls

16. Default Behaviour

17. Using Child Browser

18. window.open() is your Enemy

19. Detecting sforce.one

20. Android
• window.open() does nothing!
• External links open in browser
• Responsive tables behave correctly

21. Truly mobile pages (non-WIFI)

22. Best Practice
• Avoid <apex:form/> - viewstate!
• Avoid round trips
– Single page application
– Business Logic in JavaScript
– Remoting or REST API

23. Q&A