Five (5) tips for Visualforce (VF) developers #Lightning

Why Lightning?

The Lightning is out of box and allows you to run Lightning Apps on different devices whether it be on Browser, Mobile device or touchpad easily. It provides rich component ecosystem which supports Drag & Drop features, Salesforce1, Communities. It has great performance as its a stateful client & stateless server in a way that whenever the resources are required then only the Server is requested and all of the server communication is based on JSON. Its based on Event Driven Architecture which allows developing between components easily which ultimately provides Faster Development (parallel design, and overall development efficiency is increased). It is responsive framework as it is Device Aware and Cross Browser compatible supporting HTML5, CSS3 and touch events.

Technically you should read this blog to understand when to continue using Visualforce and when to switch to Lightning.

Difference between Visualforce and Lightning?

• LEx is Component based framework while VF is MVC.
• LEx is based on Javascript Driven Architecture while VF is Tag based
• LEx is App centric while VF is Page-centric
• LEx is responsive and supports Single Page Application while VF is not responsive.
• LEx provides list of interfaces that can be implemented in order to support UI for different devices while VF has to implement device specific libraries.
• LEx is more secured due to Lightning Locker Service to prevent security attacks like Javascript injections, Cross site scripting while in VF we have to take extra precautions (check this link)

Tip 1). Migrating from VF (Visualforce) to LEx (Lightning Experience)

Know the different places you can use the Lightning: Building Home, record or standalone Lightning Pages with drag & drop in App builder. With Lightning Out: components in Visualforce pages, the utility Bar, Lightning Actions. You will have the ability to create the Lightning Apps, Lightning Component Tabs or in Communities.

The most important Link: https://myinstance.my.salesforce.com/auradocs/reference.app

Learn the different events to play with Javascript like calling JS method on component load, Calling JS function once pre-requisites JS are loaded (afterScriptsLoaded attribute), using or in case of conflicts with SLDS.

Learn about different interfaces like force:lightningQuickAction, force:lightningActionWithoutHeader, force:hasRecordID etc.

Tip 2). Security

Locker Service rules should be referred in order to not re-vamp your developed applications especially for Appexchange market.

Learn about Lightning Locker Service

Another reference to know more about Locker service

Tip 3). Javascript and LDS is must to learn

Due to the fact that non-Salesforce programmers mostly have good Javascript understanding, they can pick up LEx quite well. For Salesforce developers to not focus only on actionFuction javascript capabilities in VF but it would be wide scope in LEx for Javascript - especially understand the DOM manipulations.

LDS is the Bootstrap to your Lightning applications. With the Lightning Design System, your UI can be flexible based on different situations like Mobile Device, Touch Pads or Browser.

Learn LDS CSS3 library with the following usages tied:

If you have high usage of Visualforce on Mobile or your Visualforce pages use Javascripts a lot: you should re-vamp the existing VF to Lightning Components with SLDS implemented.

Tip 4). Plugins and Tools

Salesforce has provided custom tools for developers to aide in Lightning development.

Salesforce Lightning CLI – This can be used to run a custom JSLint implementation that will find errors in component JavaScript.

Use the Force.com IDE – The latest Force.com IDE supports the development of Lightning Components. While the Salesforce Developer Console is not bad, for larger projects a proper IDE is a must and now the Force.com IDE has support for Lightning Components.

Salesforce Lightning Inspector – This is a comprehensive Chrome extension that gives developers an insight into how the Lightning Components on the page are structured and working. It gives information about the generated component tree, performance, local storage, and more tools for monitoring and interacting with the server.

Chrome DevTools has support for emulating different devices and screen resolutions. Most notably, there is a built in interactive debugger. The debugger is very useful for development as breakpoints can be set, debugger statements can be added to code, and the code can be stepped through.

Browsers have their own built in developer tools like Lightning Linter for chrome.

Tip 5). Lightning Blogs / References / New Features

@AuraEnabled techniques give additional ability over Lightning however it doesn't imply that Apex must be used in conjunction with Lightning Visualforce advancement like in Visualforce. Lightning data service (though still in developer preview and super involved) is meant to solve the URL Rewriting or loading standard page URLs on page loads and possibly provide the ability of without @AuraEnabled completely.

Join the Salesforce Group: Migrating to Lightning Experience

A curated list of delightful Salesforce Lightning Resources

6 Ways to Boost Your Efficiency with Salesforce Lightning [Event Recap]

https://trailhead.salesforce.com/modules/lex_dev_lc_basics

https://trailhead.salesforce.com/en/modules/lex_dev_visualforce/units/lex_dev_visualforce_multipurpose_pages

Complete the following Trailheads in order:

Links -

https://trailhead.salesforce.com/modules/lex_migration_introduction

https://trailhead.salesforce.com/modules/lex_migration_whatsnew

https://trailhead.salesforce.com/modules/lex_migration_rollout

https://trailhead.salesforce.com/modules/lightning_app_builder

https://trailhead.salesforce.com/modules/lightning_apps

https://trailhead.salesforce.com/modules/service_lex

https://trailhead.salesforce.com/modules/lex_implementation_reports_dashboards

https://trailhead.salesforce.com/modules/sales_admin_sales_reports_for_lex

DEV

https://trailhead.salesforce.com/en/modules/lex_javascript_button_migration

https://trailhead.salesforce.com/modules/lex_dev_lc_basics

https://trailhead.salesforce.com/modules/lex_dev_overview

https://trailhead.salesforce.com/modules/lex_dev_visualforce

https://trailhead.salesforce.com/modules/lex_javascript_button_migration

https://trailhead.salesforce.com/modules/lex_implementation_data_management

NEW

https://trailhead.salesforce.com/modules/sales_admin_salesforce_sales_process_and_you

https://trailhead.salesforce.com/modules/sales_admin_optimize_salesforce_for_selling

Key takeaways for Developers:

C stands for controller which includes both Client side js Controller and server-side Apex controller

Aura Id does not allow dynamic values because it doesn't support expressions.

Check for the attribute is defined or not using $A.util.isUndefined(component.get("v.someData“)

V is the view, the most common use of "v" is to access the attributes on the component, as in expressions with {!v.someAttribute} or in Javascript with component.get("v.someAttribute")

To be accessible in the Lightning App Builder or a Lightning Page, a component must implement flexipage:availableForAllPageTypes interface.

VF does NOT own the whole page in LEx rather it runs in an iframe inside the "one/one.app" LEx container

window.location will not work

Use built-in sforce.one javascript utility (unavailable in Classic UI) for navigation (sforce.one.navigateToSObject(recordId))

showHeader and showSidebar attributes are always FALSE.

Use global variables in Visualforce expressions to adapt your pages to Lightning Experience, Salesforce Classic, and Salesforce1

Use $User.UITheme to get user's UI theme "preference"

Use $User.UIThemeDisplayed to get the user's "current UI context"

In Apex, use equivalent system methods UserInfo.getUiTheme() and UserInfo.getUiThemeDisplayed()

• Theme1- obsolete Salesforce theme
• Theme2 - Salesforce Classic 2005 user interface theme
• Theme3 - Salesforce Classic 2010 user interface theme
• Theme4d - Modern "Lightning Experience" Salesforce theme
• Theme4t - Salesforce1 mobile Salesforce theme
• Webstore - Salesforce AppExchange theme

For existing VF don't worry too much to change to Lightning Experience - you may use LDS.

Not recommended to use in VF for LEx, avoid nested iframes complications

Any VF page available on Classic Home tab has to be explicitly added on Home of LEx

support based on whether the object is supported.

Lightning Components can be added to Visualforce using a mechanism of the "Lightning Out" feature. This is not an iframe.

Include Lightning Components in VF