{"id":113,"date":"2017-03-20T14:07:43","date_gmt":"2017-03-20T13:07:43","guid":{"rendered":"https:\/\/transferttexei.wordpress.com\/2021\/08\/10\/from-visualforce-to-lightning-development\/"},"modified":"2024-04-17T16:45:46","modified_gmt":"2024-04-17T14:45:46","slug":"from-visualforce-to-lightning-development","status":"publish","type":"post","link":"https:\/\/texei.com\/en\/advices\/from-visualforce-to-lightning-development\/","title":{"rendered":"From Visualforce to Lightning Development"},"content":{"rendered":"\r\n\r\n\r\n<p>In 2015, Salesforce unveiled Lightning Experience, a whole new UI for the Platform. Not only was it a visual change, but also a complete revamp of the technology behind it.<\/p>\r\n\r\n\r\n\r\n<p>Whereas Salesforce Classic used a page-centric model, reloading the entire page whenever you clicked on a link, Lightning Experience uses an app-centric model (like Gmail for instance): The app will first load, and then will only need to call the server for lightweight data, refreshing only parts of the screen and thus speeding up navigation.<\/p>\r\n\r\n\r\n\r\n<p>On a developer\u2019s perspective, Lightning Experience makes use of the Lightning Component framework which is a complete new development experience for Salesforce developers.<\/p>\r\n\r\n\r\n\r\n<p>Let\u2019s have a look to a few tips to start Lightning Components development\u00a0!<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Learn JavaScript<\/h2>\r\n\r\n\r\n\r\n<p>First, with Visualforce, it\u2019s possible to develop an entire application without writing any line of HTML, JavaScript or CSS. Some tags like <code>&lt;apex:pageBlock\/&gt;<\/code> ensure that your application will render the same way as standard Salesforce pages, while some others like <code>&lt;apex:actionSupport\/&gt;<\/code> with <code>rerender<\/code> will let you refresh a part of your page without any AJAX knowledge.<\/p>\r\n\r\n\r\n\r\n<p>Lightning Components, on the other hand, are heavily based on JavaScript. This is great because lots of web developers will be able to start developing on the Salesforce Platform very quickly. However, if you\u2019ve been an Apex\/Visualforce developer for years mostly relying on apex tags, this may be a bit more difficult.<\/p>\r\n\r\n\r\n\r\n<p>Moreover, switching to Apex is pretty straightforward if you come from another Object-Oriented language like JAVA or .NET. Switching to JavaScript is a bit different and you may want to take some time learning the specificities of the language.<\/p>\r\n<h3>To have in mind<\/h3>\r\n\r\n\r\n\r\n<p>I won\u2019t cover everything here as this is not the topic of this post, but some differences include:<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>A variable can be undefined or null, and it\u2019s <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/null#Difference_between_null_and_undefined\" target=\"_blank\" rel=\"noopener\">not the same thing<\/a><\/li>\r\n<li>JavaScript is case sensitive, so <code>myVar<\/code> and <code>myvar<\/code> are 2 different variables<\/li>\r\n<li>If you don\u2019t declare one variable, JavaScript will do it for you. This may seems sweet at first, but it\u2019s not if you combine it with case sensitivity. You may end up creating a second variable by mistake if you do a typo. The following code sample will create 2 variables:<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>var myVariable = 0;\r\nmyvariable = 1;\r\nconsole.log(myVariable); \/\/ --&gt; 0\r\nconsole.log(myvariable); \/\/ --&gt; 1<\/code><\/pre>\r\n\r\n\r\n\r\n<p>One good news, <a href=\"https:\/\/developer.salesforce.com\/docs\/atlas.en-us.lightning.meta\/lightning\/security_code.htm?search_text=lockerservice\" target=\"_blank\" rel=\"noopener\">LockerService<\/a> will prevent this from happening, throwing an error if a variable isn\u2019t declared.<\/p>\r\n\r\n\r\n\r\n<p>You\u2019ll still need to be careful though, because this will still remain an issue while accessing properties. Let\u2019s say in your JS Controller you are iterating through a list of objects, the code used to access a field will be case sensitive too. So if you have a field named \u201cMyField__c\u201d:<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>for(var i=0; i&lt;listOfRecords.length; i++) {\r\n    console.log(listOfRecords[i].MyField__c);\r\n    \/\/ --&gt; This will work<\/code><\/pre>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>    console.log(listOfRecords[i].<strong>m<\/strong>yField__c);\r\n    \/\/ --&gt; Lower case typo in the first letter of the field's name\r\n    \/\/ This will not crash but return undefined\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n<p>As this is not crashing, you may not see it immediately and this could lead to strange and difficult to debug behaviors.<\/p>\r\n<h4>Continuing<\/h4>\r\n\r\n\r\n\r\n<p>On the variable declaration topic, you may also want to have a deeper look to <a href=\"http:\/\/www.adequatelygood.com\/JavaScript-Scoping-and-Hoisting.html\" target=\"_blank\" rel=\"noopener\">scoping and hoisting<\/a>.<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>Everything is an object, including functions. This means that you can create a variable and later\u2026execute it\u00a0! Something like this:<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>var myFunction;\r\nmyFunction = function(){\r\n    alert(\"Hello World\");\r\n}\r\n\r\nmyFunction();<\/code><\/pre>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>JavaScript is a loosely typed language, so you can assign any type to a variable, and change it on the fly:<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>var myVariable = 0;\r\nconsole.log(typeof myVariable); \/\/ --&gt; number<\/code><\/pre>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>myVariable = \"1\";\r\nconsole.log(typeof myVariable); \/\/ --&gt; string<\/code><\/pre>\r\n\r\n\r\n\r\n<p>If this can be powerful, this can also be dangerous if you\u2019re not careful enough. For instance, regarding the previous function myFunction, you can assign another type to it:<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>myFunction = \u201cI changed my mind, I\u2019m just text.\u201d;\r\nmyFunction();<\/code><\/pre>\r\n\r\n\r\n\r\n<p>Calling <code>myFunction<\/code> in this case will just crash your application:<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone wp-image-2175 size-full\" src=\"https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/1_nxpKUkiG4-JDPPlpvW2awQ.png\" alt=\"\" width=\"800\" height=\"233\" srcset=\"https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/1_nxpKUkiG4-JDPPlpvW2awQ-200x58.png 200w, https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/1_nxpKUkiG4-JDPPlpvW2awQ-300x87.png 300w, https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/1_nxpKUkiG4-JDPPlpvW2awQ-400x117.png 400w, https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/1_nxpKUkiG4-JDPPlpvW2awQ-600x175.png 600w, https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/1_nxpKUkiG4-JDPPlpvW2awQ-768x224.png 768w, https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/1_nxpKUkiG4-JDPPlpvW2awQ.png 800w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>During comparison, JavaScript will try to cast values to see if they match. As a result, all these comparisons will evaluate to true:<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>var myNumber = 0;\r\nmyString = \u201c0\u201d;\r\nmyBoolean = false;<\/code><\/pre>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>console.log(myNumber == myString);  \/\/ --&gt; true\r\nconsole.log(myNumber == myBoolean); \/\/ --&gt; true\r\nconsole.log(myString == myBoolean); \/\/ --&gt; true<\/code><\/pre>\r\n\r\n\r\n\r\n<p>To avoid this, use the triple equal sign, which will prevent automatic casting: <code>myNumber <strong>===<\/strong> myString<\/code> will return false. You can find more on comparison operators <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Comparison_Operators\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\r\n\r\n\r\n\r\n<h4>JavaScript resources\u00a0<\/h4>\r\n<p>There are lots of other things to learn and be aware of about JavaScript, like <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Lexical_grammar#Automatic_semicolon_insertion\" target=\"_blank\" rel=\"noopener\">automatic semicolon insertion<\/a>, that\u2019s why I recommend taking the time to learn fully JavaScript.<\/p>\r\n\r\n\r\n\r\n<p>The web is full of JavaScript resources, here are a few I like:<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li><a href=\"http:\/\/jstherightway.org\/\" target=\"_blank\" rel=\"noopener\">JS The Right Way<\/a><\/li>\r\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2011\/05\/10-oddities-and-secrets-about-javascript\/\" target=\"_blank\" rel=\"noopener\">10 oddities and secrets about javascript<\/a> on <a href=\"https:\/\/medium.com\/u\/5ef3beaef7aa\" target=\"_blank\" rel=\"noopener\">Smashing Magazine<\/a><\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<p>More specifically, <a href=\"https:\/\/medium.com\/u\/4d1c21d58413\" target=\"_blank\" rel=\"noopener\">Dan Appleman<\/a> has a great JavaScript course on Pluralsight targeted for Salesforce developers:<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li><a href=\"https:\/\/app.pluralsight.com\/library\/courses\/javascript-in-salesforce-getting-started\" target=\"_blank\" rel=\"noopener\">Getting Started with JavaScript in Salesforce<\/a><\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Use Lightning Experience<\/h2>\r\n\r\n\r\n\r\n<p>Most of the time, you\u2019ll develop components for Lightning Experience. You\u2019ll need to use the new Salesforce UI to understand how everything behave, because you certainly don\u2019t want to offer your users a UX that is completely different from the rest of Salesforce.<\/p>\r\n\r\n\r\n\r\n<p>While developing my first Lightning Components, I took a lot of time asking myself how things were done in Lightning Experience, and having a look to simple generic functionalities like:<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>How does pagination works on lists\u00a0? (hint: there is no pagination)<\/li>\r\n<li>How should I display notification messages\u00a0?<\/li>\r\n<li>Should I display a modal or navigate to a new page\u00a0?<\/li>\r\n<li>Wait, and what about notifications when I\u2019m in a modal (like errors)\u00a0?<\/li>\r\n<li>\u2026<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<p>This will help you create components that have a consistent UI and UX with Salesforce Lightning Experience. Moreover, while in Salesforce, make use of available Salesforce events instead of creating things from scratch.<\/p>\r\n\r\n\r\n\r\n<p>For instance, notification messages are displayed this way:<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"800\" height=\"273\" class=\"wp-image-2171\" src=\"https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/1_4L0ohFxHctrC1wjoNypdkA.png\" alt=\"\" srcset=\"https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/1_4L0ohFxHctrC1wjoNypdkA-200x68.png 200w, https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/1_4L0ohFxHctrC1wjoNypdkA-300x102.png 300w, https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/1_4L0ohFxHctrC1wjoNypdkA-400x137.png 400w, https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/1_4L0ohFxHctrC1wjoNypdkA-600x205.png 600w, https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/1_4L0ohFxHctrC1wjoNypdkA-768x262.png 768w, https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/1_4L0ohFxHctrC1wjoNypdkA.png 800w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\r\n\r\n\r\n\r\n<p>Some recommandations:<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>If you\u2019re on Lightning Experience, don\u2019t recreate it from scratch. You\u2019re not in Salesforce Classic anymore, Lightning is an application that gives you events you can leverage. In this case, firing <a href=\"https:\/\/developer.salesforce.com\/docs\/atlas.en-us.lightning.meta\/lightning\/ref_force_showToast.htm\" target=\"_blank\" rel=\"noopener\">force:showToast<\/a> will do the job for you:<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>var toastEvent = $A.get(\u201ce.force:showToast\u201d);\r\ntoastEvent.setParams({\r\n    \u201cmessage\u201d: \u201cOpportunity \\\u201dAwesome Opportunity!\\\u201d was saved.\u201d,\r\n    \u201ctype\u201d: \u201csuccess\u201d\r\n});\r\ntoastEvent.fire();<\/code><\/pre>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>If you need to recreate a component (because it doesn\u2019t exists, or you\u2019re running your component outside of Lightning Experience), try to use the <a href=\"https:\/\/www.lightningdesignsystem.com\/\" target=\"_blank\" rel=\"noopener\">Lightning Design System<\/a>. For instance for the notification shown above, you can use the <a href=\"https:\/\/www.lightningdesignsystem.com\/components\/notifications\/#flavor-toast-success\" target=\"_blank\" rel=\"noopener\">Toast<\/a> component.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Don\u2019t forget it\u2019s a component framework<\/h3>\r\n\r\n\r\n\r\n<h4 class=\"wp-block-heading\">Make use of the framework<\/h4>\r\n\r\n\r\n\r\n<p>Don\u2019t stick with what you know from web development and try to add libraries like jQuery right away\u00a0! Lightning provides you with out of the box functions that are optimized for the framework, so use them. For instance, prefer using <code>aura:id<\/code> and <code>component.find(\"v.myId\")<\/code> instead of <code>document.getElementById(\"myId\")<\/code> or jQuery\u2019s <code>$(\"myId\")<\/code>. You can find all the documentation in the <a href=\"https:\/\/developer.salesforce.com\/docs\/atlas.en-us.lightning.meta\/lightning\/ref_doc_app.htm\" target=\"_blank\" rel=\"noopener\">Reference Doc App<\/a>.<\/p>\r\n\r\n\r\n\r\n<h4 class=\"wp-block-heading\">Don\u2019t reinvent the\u00a0wheel<\/h4>\r\n\r\n\r\n\r\n<p>Salesforce is providing <a href=\"https:\/\/developer.salesforce.com\/docs\/atlas.en-us.lightning.meta\/lightning\/lightning_overview.htm?search_text=base%20component\" target=\"_blank\" rel=\"noopener\">Lightning Base Components<\/a>, so try to use them instead of creating your own components. Make use of the Framework functions and events. Also, the Salesforce Community is doing a great job in building free and open source components, so make us of them.If you haven\u2019t already, you should have a look to <a href=\"https:\/\/medium.com\/u\/92d4b6ce55b5\" target=\"_blank\" rel=\"noopener\">Appiphony<\/a>\u2019s open source Strike components, as they\u2019ve made an awesome job\u00a0!<\/p>\r\n\r\n\r\n<p><a href=\"https:\/\/medium.com\/appiphony-llc\/speed-up-salesforce-lightning-development-with-strike-f7fbfcb3c773\">https:\/\/medium.com\/appiphony-llc\/speed-up-salesforce-lightning-development-with-strike-f7fbfcb3c773<\/a><\/p>\n\r\n\r\n\r\n<h4 class=\"wp-block-heading\">Think your components to be\u00a0generic\u2026<\/h4>\r\n\r\n\r\n\r\n<p>That may seems obvious, but one important part of the Lightning framework is the notion of components. You\u2019ll want to create your components in a reusable way, so that another developer could use it later in the future. For instance, you don\u2019t want every developer to create it\u2019s own modal component, or hardcode modal\u2019s content inside the modal. Think that this content could be used elsewhere, and make it a component.<\/p>\r\n\r\n\r\n\r\n<h4 class=\"wp-block-heading\">\u2026but not to\u00a0much<\/h4>\r\n\r\n\r\n\r\n<p>If in theory having lots of generic and reusable components is the best, don\u2019t forget that you may not need or have the time to do it.<\/p>\r\n\r\n\r\n\r\n<p>For instance, let\u2019s say you want to display an object\u2019s fields on a component. Hardcoding them doesn\u2019t look like a good practice, and having an attribute with the list of fields to display seems easy to do but:<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>Don\u2019t forget that Lightning Components don\u2019t enforce Field Level Security, so you need to do it.<\/li>\r\n<li>Filtering a query based on a predefined field is easy, doing it on any field take more time. Is it a text field\u00a0? Date\u00a0? Boolean\u00a0? Is there multiple values\u00a0?<\/li>\r\n<li>You\u2019ll need to think of all use cases. For instance, your component is working when querying a few fields. Did you set a limit\u00a0? Is it working with relationships\u00a0? One level\u00a0? Two levels\u00a0?<\/li>\r\n<li>Maybe making a generic component will need to add some more logic. This may impact performances so be sure to take the time needed to test everything.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<p>So building a generic and reusable Lightning Component is great, but if you\u2019re new to the framework, don\u2019t underestimate the time you need to build it. This means more code, more testing, both on the functionalities and on performances. And may be useless if your component is too specific.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Test often with Lightning Experience<\/h3>\r\n\r\n\r\n\r\n<p>I mean, really. Visualforce is a mature framework, but Lightning Components still have some glitches that could drive you crazy. You really don\u2019t want to code for a long time, and when you try it just see your whole app crashing with a generic error message like this:<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"800\" height=\"240\" class=\"wp-image-2174\" src=\"https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/1_KoY4nfAt8-P6oRNkHLLxag.png\" alt=\"\" srcset=\"https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/1_KoY4nfAt8-P6oRNkHLLxag-200x60.png 200w, https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/1_KoY4nfAt8-P6oRNkHLLxag-300x90.png 300w, https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/1_KoY4nfAt8-P6oRNkHLLxag-400x120.png 400w, https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/1_KoY4nfAt8-P6oRNkHLLxag-600x180.png 600w, https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/1_KoY4nfAt8-P6oRNkHLLxag-768x230.png 768w, https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/1_KoY4nfAt8-P6oRNkHLLxag.png 800w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\r\n\r\n\r\n\r\n<p>Testing often will help you find what part of the application you\u2019ve changed recently, and thus find faster what the issue is. There are a few best practices though.<\/p>\r\n\r\n\r\n\r\n<h4 class=\"wp-block-heading\">Test with LockerService<\/h4>\r\n\r\n\r\n\r\n<p>LockerService will be mandatory in June 2017, so you certainly don\u2019t want your components to break once it\u2019s activated. Moreover, LockerService will help you avoiding errors in your code by enforcing <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Strict_mode\" target=\"_blank\" rel=\"noopener\">strict mode<\/a>.<\/p>\r\n\r\n\r\n\r\n<h4 class=\"wp-block-heading\">Activate Debug\u00a0Mode<\/h4>\r\n\r\n\r\n\r\n<p>In your development environment, enable <a href=\"https:\/\/developer.salesforce.com\/docs\/atlas.en-us.lightning.meta\/lightning\/aura_debug_mode.htm\" target=\"_blank\" rel=\"noopener\">Lightning Components Debug Mode<\/a>. Your code won\u2019t be minified and will be easier to read and debug. Don\u2019t active it in Production though as this has an impact on performances.<\/p>\r\n\r\n\r\n\r\n<h4 class=\"wp-block-heading\">Use Lightning CLI<\/h4>\r\n\r\n\r\n\r\n<p>Currently, linting is not part of the platform. This means that if you\u2019re missing\/adding something, like a comma or a curly bracket, your code will just save. Unfortunately, launching your app may fail with a generic error, making it hard to find where the typo is.<\/p>\r\n\r\n\r\n\r\n<p><a href=\"https:\/\/developer.salesforce.com\/docs\/atlas.en-us.lightning.meta\/lightning\/cli_intro.htm\" target=\"_blank\" rel=\"noopener\">Lightning CLI<\/a> will help you ensure your components are LockerService ready, but also lint your code to highlight potential issues. For instance, the following code has a small typo:<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>var navEvt = $A.get(\u201ce.force:navigateToSObject\u201d);\r\nnavEvt.setParams({\r\n    \u201crecordId\u201d: oppId;\r\n});<\/code><\/pre>\r\n\r\n\r\n\r\n<p>This will break Lightning Experience with a error that isn\u2019t really helping you understand the root cause:<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2172 size-full\" src=\"https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/1_7CGNyu2LeoJZ8G5gZsMwNw.png\" alt=\"\" width=\"800\" height=\"712\" srcset=\"https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/1_7CGNyu2LeoJZ8G5gZsMwNw-200x178.png 200w, https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/1_7CGNyu2LeoJZ8G5gZsMwNw-300x267.png 300w, https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/1_7CGNyu2LeoJZ8G5gZsMwNw-400x356.png 400w, https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/1_7CGNyu2LeoJZ8G5gZsMwNw-600x534.png 600w, https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/1_7CGNyu2LeoJZ8G5gZsMwNw-768x684.png 768w, https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/1_7CGNyu2LeoJZ8G5gZsMwNw.png 800w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\r\n\r\n\r\n\r\n<p>If this is part of a big application, it can be hard to find the issue. Running Lightning CLI will just let you know where the typo is, which can save you hours\u00a0!<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"648\" height=\"146\" class=\"wp-image-2173\" src=\"https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/1_HWc-6LrC_mK0GOGWpcGkxg.png\" alt=\"\" srcset=\"https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/1_HWc-6LrC_mK0GOGWpcGkxg-200x45.png 200w, https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/1_HWc-6LrC_mK0GOGWpcGkxg-300x68.png 300w, https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/1_HWc-6LrC_mK0GOGWpcGkxg-400x90.png 400w, https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/1_HWc-6LrC_mK0GOGWpcGkxg-600x135.png 600w, https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/1_HWc-6LrC_mK0GOGWpcGkxg.png 648w\" sizes=\"(max-width: 648px) 100vw, 648px\" \/><\/figure>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Bonus tip: cmp is not\u00a0defined<\/h2>\r\n\r\n\r\n\r\n<p>One bonus tip: for your firsts Lightning Components, you\u2019ll often end up copy\/pasting code until you remember the framework syntax, like for doing a server-side call. When creating a controller, you\u2019ll start with an empty function created for you:<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>myAction : function(component, event, helper) {\r\n\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n<p>This is great, except that most of the code samples available in the <a href=\"https:\/\/developer.salesforce.com\/docs\/atlas.en-us.lightning.meta\/lightning\/intro_framework.htm\" target=\"_blank\" rel=\"noopener\">Lightning Component Developer Guide<\/a> are using a component variable named <code>cmp<\/code>, and not <code>component<\/code>. Beware of this even if it\u2019s easy to fix by replacing one by the other. If I had received 1\u20ac every time I made this mistake, I would be rich today\u00a0!!<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Next Steps<\/h3>\r\n\r\n\r\n\r\n<p>So now you\u2019re ready to start you first Lightning Component\u00a0! Of course, a great place to begin is the Trailhead website. There are several Lightning modules, but I personally like these ones:<\/p>\r\n\r\n\r\n<p><a href=\"https:\/\/medium.com\/appiphony-llc\/speed-up-salesforce-lightning-development-with-strike-f7fbfcb3c773\">https:\/\/medium.com\/appiphony-llc\/speed-up-salesforce-lightning-development-with-strike-f7fbfcb3c773<\/a><\/p>\n\r\n\r\n<p><a href=\"https:\/\/medium.com\/appiphony-llc\/speed-up-salesforce-lightning-development-with-strike-f7fbfcb3c773\">https:\/\/medium.com\/appiphony-llc\/speed-up-salesforce-lightning-development-with-strike-f7fbfcb3c773<\/a><\/p>\n\r\n\r\n\r\n<p>I would also recommend watching <a href=\"https:\/\/medium.com\/u\/428ea8fc3431\" target=\"_blank\" rel=\"noopener\">Anup &#x2601; Jadhav<\/a>\u2019s great talk from London\u2019s Calling about Lightning Apps:<\/p>\r\n\r\n\r\n<p><a href=\"https:\/\/medium.com\/appiphony-llc\/speed-up-salesforce-lightning-development-with-strike-f7fbfcb3c773\">https:\/\/medium.com\/appiphony-llc\/speed-up-salesforce-lightning-development-with-strike-f7fbfcb3c773<\/a><\/p>\n\r\n\r\n\r\n<p>Should you have any question, these are great places to go:<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li><a href=\"http:\/\/salesforce.stackexchange.com\" target=\"_blank\" rel=\"noopener\">Salesforce Stack Exchange<\/a><\/li>\r\n<li><a href=\"https:\/\/developer.salesforce.com\/forums\" target=\"_blank\" rel=\"noopener\">Salesforce Developer Forums<\/a><\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<p>Finally, you can of course reach out to me directly on <a href=\"https:\/\/twitter.com\/FabienTaillon\" target=\"_blank\" rel=\"noopener\">Twitter<\/a>. Finally, if you are looking for more information about this topic, read now <a href=\"https:\/\/texei.com\/conseils\/lightning-migration-for-admins-the-opportunity-to-clean-and-improve-your-org-to-meet-flexibility\/\" target=\"_blank\" rel=\"noopener\">Lightning Migration for Admins : the opportunity to clean and improve your Org to meet flexibility<\/a><\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>In 2015, Salesforce unveiled Lightning Experience, a whole new UI for the Platform. Not only was it a visual change, but also a complete revamp of the technology behind it. Whereas Salesforce Classic used a page-centric model, reloading the entire page whenever you clicked on a link, Lightning Experience uses an app-centric model (like Gmail [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":5244,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[150],"tags":[],"class_list":["post-113","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-conseils"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.1 (Yoast SEO v27.1.1) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>From Visualforce to Lightning Development - Texe\u00ef<\/title>\n<meta name=\"description\" content=\"Discover the seamless transition to Lightning Experience and enhance your Salesforce development. Learn the benefits and tips!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/texei.com\/en\/conseils\/from-visualforce-to-lightning-development\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"From Visualforce to Lightning Development\" \/>\n<meta property=\"og:description\" content=\"Discover the seamless transition to Lightning Experience and enhance your Salesforce development. Learn the benefits and tips!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/texei.com\/en\/conseils\/from-visualforce-to-lightning-development\/\" \/>\n<meta property=\"og:site_name\" content=\"Texe\u00ef\" \/>\n<meta property=\"article:published_time\" content=\"2017-03-20T13:07:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-17T14:45:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/Feedback_form_2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1440\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Fabien Taillon\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/texei.com\/en\/conseils\/from-visualforce-to-lightning-development\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/texei.com\/en\/conseils\/from-visualforce-to-lightning-development\/\"},\"author\":{\"name\":\"Fabien Taillon\",\"@id\":\"https:\/\/texei.com\/#\/schema\/person\/082ce6d13635571cae4161f1d4f5a9a7\"},\"headline\":\"From Visualforce to Lightning Development\",\"datePublished\":\"2017-03-20T13:07:43+00:00\",\"dateModified\":\"2024-04-17T14:45:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/texei.com\/en\/conseils\/from-visualforce-to-lightning-development\/\"},\"wordCount\":1941,\"publisher\":{\"@id\":\"https:\/\/texei.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/texei.com\/en\/conseils\/from-visualforce-to-lightning-development\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/Feedback_form_2.png\",\"articleSection\":[\"Conseils\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/texei.com\/en\/conseils\/from-visualforce-to-lightning-development\/\",\"url\":\"https:\/\/texei.com\/en\/conseils\/from-visualforce-to-lightning-development\/\",\"name\":\"From Visualforce to Lightning Development - Texe\u00ef\",\"isPartOf\":{\"@id\":\"https:\/\/texei.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/texei.com\/en\/conseils\/from-visualforce-to-lightning-development\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/texei.com\/en\/conseils\/from-visualforce-to-lightning-development\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/Feedback_form_2.png\",\"datePublished\":\"2017-03-20T13:07:43+00:00\",\"dateModified\":\"2024-04-17T14:45:46+00:00\",\"description\":\"Discover the seamless transition to Lightning Experience and enhance your Salesforce development. Learn the benefits and tips!\",\"breadcrumb\":{\"@id\":\"https:\/\/texei.com\/en\/conseils\/from-visualforce-to-lightning-development\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/texei.com\/en\/conseils\/from-visualforce-to-lightning-development\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/texei.com\/en\/conseils\/from-visualforce-to-lightning-development\/#primaryimage\",\"url\":\"https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/Feedback_form_2.png\",\"contentUrl\":\"https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/Feedback_form_2.png\",\"width\":1440,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/texei.com\/en\/conseils\/from-visualforce-to-lightning-development\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/texei.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Advices\",\"item\":\"https:\/\/texei.com\/en\/category\/advices\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"From Visualforce to Lightning Development\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/texei.com\/#website\",\"url\":\"https:\/\/texei.com\/\",\"name\":\"Texe\u00ef\",\"description\":\"Turn your IT into Business\",\"publisher\":{\"@id\":\"https:\/\/texei.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/texei.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/texei.com\/#organization\",\"name\":\"Texe\u00ef\",\"url\":\"https:\/\/texei.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/texei.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/texei.com\/dev\/wp-content\/uploads\/2021\/03\/logo-essai-1.jpg\",\"contentUrl\":\"https:\/\/texei.com\/dev\/wp-content\/uploads\/2021\/03\/logo-essai-1.jpg\",\"width\":2560,\"height\":1102,\"caption\":\"Texe\u00ef\"},\"image\":{\"@id\":\"https:\/\/texei.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/texei.com\/#\/schema\/person\/082ce6d13635571cae4161f1d4f5a9a7\",\"name\":\"Fabien Taillon\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/texei.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/texei.com\/dev\/wp-content\/uploads\/2025\/12\/avatar_user_5_1766076207-96x96.png\",\"contentUrl\":\"https:\/\/texei.com\/dev\/wp-content\/uploads\/2025\/12\/avatar_user_5_1766076207-96x96.png\",\"caption\":\"Fabien Taillon\"},\"url\":\"https:\/\/texei.com\/en\/author\/fabient\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"From Visualforce to Lightning Development - Texe\u00ef","description":"Discover the seamless transition to Lightning Experience and enhance your Salesforce development. Learn the benefits and tips!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/texei.com\/en\/conseils\/from-visualforce-to-lightning-development\/","og_locale":"en_US","og_type":"article","og_title":"From Visualforce to Lightning Development","og_description":"Discover the seamless transition to Lightning Experience and enhance your Salesforce development. Learn the benefits and tips!","og_url":"https:\/\/texei.com\/en\/conseils\/from-visualforce-to-lightning-development\/","og_site_name":"Texe\u00ef","article_published_time":"2017-03-20T13:07:43+00:00","article_modified_time":"2024-04-17T14:45:46+00:00","og_image":[{"width":1440,"height":1080,"url":"https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/Feedback_form_2.png","type":"image\/png"}],"author":"Fabien Taillon","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/texei.com\/en\/conseils\/from-visualforce-to-lightning-development\/#article","isPartOf":{"@id":"https:\/\/texei.com\/en\/conseils\/from-visualforce-to-lightning-development\/"},"author":{"name":"Fabien Taillon","@id":"https:\/\/texei.com\/#\/schema\/person\/082ce6d13635571cae4161f1d4f5a9a7"},"headline":"From Visualforce to Lightning Development","datePublished":"2017-03-20T13:07:43+00:00","dateModified":"2024-04-17T14:45:46+00:00","mainEntityOfPage":{"@id":"https:\/\/texei.com\/en\/conseils\/from-visualforce-to-lightning-development\/"},"wordCount":1941,"publisher":{"@id":"https:\/\/texei.com\/#organization"},"image":{"@id":"https:\/\/texei.com\/en\/conseils\/from-visualforce-to-lightning-development\/#primaryimage"},"thumbnailUrl":"https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/Feedback_form_2.png","articleSection":["Conseils"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/texei.com\/en\/conseils\/from-visualforce-to-lightning-development\/","url":"https:\/\/texei.com\/en\/conseils\/from-visualforce-to-lightning-development\/","name":"From Visualforce to Lightning Development - Texe\u00ef","isPartOf":{"@id":"https:\/\/texei.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/texei.com\/en\/conseils\/from-visualforce-to-lightning-development\/#primaryimage"},"image":{"@id":"https:\/\/texei.com\/en\/conseils\/from-visualforce-to-lightning-development\/#primaryimage"},"thumbnailUrl":"https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/Feedback_form_2.png","datePublished":"2017-03-20T13:07:43+00:00","dateModified":"2024-04-17T14:45:46+00:00","description":"Discover the seamless transition to Lightning Experience and enhance your Salesforce development. Learn the benefits and tips!","breadcrumb":{"@id":"https:\/\/texei.com\/en\/conseils\/from-visualforce-to-lightning-development\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/texei.com\/en\/conseils\/from-visualforce-to-lightning-development\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/texei.com\/en\/conseils\/from-visualforce-to-lightning-development\/#primaryimage","url":"https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/Feedback_form_2.png","contentUrl":"https:\/\/texei.com\/dev\/wp-content\/uploads\/2017\/03\/Feedback_form_2.png","width":1440,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/texei.com\/en\/conseils\/from-visualforce-to-lightning-development\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/texei.com\/"},{"@type":"ListItem","position":2,"name":"Advices","item":"https:\/\/texei.com\/en\/category\/advices\/"},{"@type":"ListItem","position":3,"name":"From Visualforce to Lightning Development"}]},{"@type":"WebSite","@id":"https:\/\/texei.com\/#website","url":"https:\/\/texei.com\/","name":"Texe\u00ef","description":"Turn your IT into Business","publisher":{"@id":"https:\/\/texei.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/texei.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/texei.com\/#organization","name":"Texe\u00ef","url":"https:\/\/texei.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/texei.com\/#\/schema\/logo\/image\/","url":"https:\/\/texei.com\/dev\/wp-content\/uploads\/2021\/03\/logo-essai-1.jpg","contentUrl":"https:\/\/texei.com\/dev\/wp-content\/uploads\/2021\/03\/logo-essai-1.jpg","width":2560,"height":1102,"caption":"Texe\u00ef"},"image":{"@id":"https:\/\/texei.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/texei.com\/#\/schema\/person\/082ce6d13635571cae4161f1d4f5a9a7","name":"Fabien Taillon","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/texei.com\/#\/schema\/person\/image\/","url":"https:\/\/texei.com\/dev\/wp-content\/uploads\/2025\/12\/avatar_user_5_1766076207-96x96.png","contentUrl":"https:\/\/texei.com\/dev\/wp-content\/uploads\/2025\/12\/avatar_user_5_1766076207-96x96.png","caption":"Fabien Taillon"},"url":"https:\/\/texei.com\/en\/author\/fabient\/"}]}},"_links":{"self":[{"href":"https:\/\/texei.com\/en\/wp-json\/wp\/v2\/posts\/113","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/texei.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/texei.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/texei.com\/en\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/texei.com\/en\/wp-json\/wp\/v2\/comments?post=113"}],"version-history":[{"count":0,"href":"https:\/\/texei.com\/en\/wp-json\/wp\/v2\/posts\/113\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/texei.com\/en\/wp-json\/wp\/v2\/media\/5244"}],"wp:attachment":[{"href":"https:\/\/texei.com\/en\/wp-json\/wp\/v2\/media?parent=113"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/texei.com\/en\/wp-json\/wp\/v2\/categories?post=113"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/texei.com\/en\/wp-json\/wp\/v2\/tags?post=113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}