I took the Trailhead example of simple creating an account with just a name. In the code below, the Lightning Component is not doing much. The entire thing could be done with Visualforce and all the logic is happening there.
Visualforce Page:
<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
<apex:remoteObjects >
<apex:remoteObjectModel name="Account" fields="Id,Name"/>
</apex:remoteObjects>
<apex:includeLightning />
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<apex:stylesheet value="{!URLFOR($Resource.SLDS, 'assets/styles/salesforce-lightning-design-system.css')}" />
<script src='/canvas/sdk/js/publisher.js'></script>
</head>
<body>
<div class="slds">
<script>
$Lightning.use("c:NameOfApp", function() {
$Lightning.createComponent("c:NameOfComponent", {}, "nameOfComponent", function(cmp) {});
});
// When the panel is displayed, enable the submit button
Sfdc.canvas.publisher.subscribe({
name: "publisher.showPanel",
onData: function(e) {
Sfdc.canvas.publisher.publish({
name: "publisher.setValidForSubmit",
payload: "true"
});
}
});
// When the submit button is pressed, create an account, and close the panel
Sfdc.canvas.publisher.subscribe({
name: "publisher.post",
onData: function(e) {
// Create the account using the Remote Object
var accountName = document.getElementById("accountName").value;
var account = new SObjectModel.Account();
account.create({
Name: accountName
}, function(error, records) {
if (error) {
alert(error.message);
} else {
// Close the publisher panel
Sfdc.canvas.publisher.publish({
name: "publisher.close",
payload: {
refresh: "true"
}
});
}
});
}
});
</script>
<div>
<div id="nameOfComponent"></div>
</div>
</div>
</body>
</html>
Lightning Component:
<aura:component >
<div>
Account Name: <input type="text" id="accountName"/>
</div>
</aura:component>
Lightning App:
<aura:application access="global" extends="ltng:outApp">
<aura:dependency resource="c:NameOfComponent" />
</aura:application>