What is suggested approach to transfer VF pages to be lightning ready
WINTER-18 Update
new property for VF <apex:page> tag lightningStyleSheets="[false|true]" will supposedly be the single thing you need to do to convert VF pages to SLDS type styles
https://releasenotes.docs.salesforce.com/en-us/winter18/release-notes/rn_vf_lightningstylesheets.htm
Previous Comments
Too much for a comment
This is the Template page I use for all VF pages now. It allows me to control the Navigation and add SLDS styling all starting from the same point:
<apex:page name="SLDS_template" showHeader="false" standardStylesheets="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
<head>
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"/>
<apex:insert name="title"/>
<apex:stylesheet value="{!URLFOR($Resource.SLDS, 'assets/styles/salesforce-lightning-design-system-vf.min.css')}" />
<style>
#loader {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: #000;
opacity: 0.6;
filter: alpha(opacity=100);
z-index: 99999;
}
</style>
<script>
function goHome(){
ForceUI.isSalesforce1() ? sforce.one.navigateToURL('/home/home.jsp',true) : window.location.href='/';
}
function goretURL(){
ForceUI.isSalesforce1() ? sforce.one.navigateToURL('{!$CurrentPage.parameters.retURL}') : window.location.href='{!$CurrentPage.parameters.retURL}';
}
function gotoURL(u, isParent){ //isParent to indicate if Inline VF
ForceUI.isSalesforce1() ? sforce.one.navigateToURL(u) : (isParent ? window.top.location.href = u : window.location.href=u);
}
function showProcessing() {
$('#loader').show();
}
function hideProcessing() {
$('#loader').delay(300).fadeOut(400);
}
(function(myContext){
myContext.ForceUI = myContext.ForceUI || {};
myContext.ForceUI.isSalesforce1 = function() {
return((typeof sforce != 'undefined') && sforce && (!!sforce.one));
}
})(this);
</script>
</head>
<div class="slds">
<body>
<apex:insert name="header"/>
<div id="loader" class="slds-spinner_container">
<div class="slds-spinner slds-spinner--large" role="alert">
<span class="slds-assistive-text">Loading</span>
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</div>
<apex:insert name="body"/>
</body>
</div>
</apex:page>
Add in your own Error Message div to replace the standard page messages and use code to populate the message and go from there.
My VF pages now start like so:
<apex:page id="THEID" showHeader="false" sidebar="true"
standardController="Account" extensions="EXTENSION" tabStyle="Account"
standardStylesheets="false" applyHtmlTag="false"
applyBodyTag="false" docType="html-5.0" cache="false">
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<apex:composition template="SLDS_Template">
<apex:define name="title">
</apex:define>
<apex:define name="body">
</apex:define>
</apex:composition>
</html>
</apex:page>
As a first step, you can convert your pages to SLDS simply by uploading a static resource with the SLDS generated for you, and then adding a handful of lines of code:
<apex:stylesheet value="{!URLFOR($Resource.SLDS213, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
<div class="slds myns">
<!-- the rest of your VF code goes here -->
</div>
Adding just these three lines of code will give you nearly all of the look and feel of Lightning for virtually zero effort. You can even "theme select" by using some special Visualforce, outlined in this article.
I recommend this as a first step, because it gives your LEX clients an immediate look and feel of Lightning with about 1 minute worth of effort per page you need to modify. You'll want to spend time testing your pages out in LEX anyways, because some JavaScript used in typical Visualforce pages will generate errors; these need to be fixed.
The second step is then to write the bulk of your pages as Lightning Out components or apps. This will allow your non-LEX clients continue to use the Classic theme and Visualforce, while simultaneously allowing your LEX clients to take advantage of your components by adding them to Lightning Apps and Lightning Pages. This takes significantly more effort than the first step, which is why I recommend SLDS as an intermediary to raise adoption of your app while you transition.
This is the approach that we're using internally to fast-track us to Lightning. Style first, then build out the new functionality one component at a time. Keep in mind that Salesforce recommends a ton of components, but the truth is, you can write many Visualforce pages as just a single monolithic Lightning component, at least initially. Over time, as I have in the weeks since Dreamforce, you'll come to appreciate components that you end up reusing again and again, but there's no specific requirement that you start out with tons and tons of components.
Finally, it's worth noting that Lightning Out will allow you to embed your components in Visualforce pages, so your Classic users can still build Visualforce actions, buttons, and links, while your LEX users can use the components from those pages directly. You can definitely have your cake, and eat it, too. In many cases, we're using this approach for many of our prior JavaScript buttons that do not appear in Lightning; just wrap the code into a tidy little component, and you then then add it to whatever context you need.