I was introduced to Lightning components at the developers keynote at Dreamforce. There they also announced the lightning.topcoder.com competition where developers could both dive into lightning component development and potentially win a some cash, a win win in my book. The first component I built was for the
Lightning App – Fix My Sick Doggie! — Redux competition. Find the resulting component and apex code in my VetTopCoder github repository.
Third Party Dependancies
For example I ended up using JQuery in my application (angular uses the url for routing to different views in an application and I hadn't figured how to get around that in a lightning component at the time) so I downloaded JQuery and created a zip file that contained the following files:
After this was uploaded I was able to verify I could access the js file by hitting it in my browser at
- https://na17.salesforce.com – My salesforce instance
- Gordonk66 – My package name
- jquery – The static resource name
- jquery.js – The file inside my zip achieve
Excellent so now I have the third party resources that I require for my application. But there is still an issue where the resource isn't loaded by the time the application renders. Lightning components are loaded differently then a standard web application so there has to be some addition wiring in order to load the dependancies. After struggling for a bit I happened upon this excellent blog post that describes using requirejs to load dependancies for lightning components:
Essentially it adds a lightning component dependency to your component that will load requirejs then fire a lightning event that will trigger a controller function in your code that calls a helper function where you specify third party dependancies. I've used this on all of my lightning components and it has worked perfectly. See the blog post for the details of getting it working, but the at a high level you add the following to your component
(note you must your the installed pages or your own package)
This results in calling the controller initScripts function that calls the Helper initScripts function. In the helper you specify your dependancies in a requirejs config object
After the scripts have loaded the function is called again in the afterRender function of your component renderer and any follow on setup, like binding to DOM elements, can occur. See one of the Helpers in the VetTopCoder repository for a working example.
Useful Lightning/Aura Element Attributes
While you are able to use standard web application tools to build the lightning component there are several useful aura/lightning element attributes that can enable your application to wire together the lightning component. Note there are many more then I've listed here, but these are the ones I've found most useful.
The id tag enables you to assign a unique id to elements in your lightning component. This is useful because you are able to do DOM lookups using the component.get('myId') function that will ensure a unique id for your component. Keep in mind you could have multiple instances of you lightning component in a single application and using this tag will ensure there are no duplication id attributes on your DOM elements.
The attribute tag is how you can define salesforce data to be stored for the component. It has been very useful to use the lightning infrastructure to call an apex controller that will populate an aura attribute. Then firing a lightning event enables me to continue processing the data in my application with the third party library handlers.
This tag wires a handler function in your lightning controller to lightning events. This is useful because it enables you to do data lookups and have access to a current component object when processing data returned from a salesforce apex controller.
One thing I struggled with initially was doing all my development in the browser via the Salesforce developer console. I prefer a more configurable IDE when doing development. Luckily I happened upon the Sublime text plugin for lighting development:
It enables login to salesforce inside the sublime text and creates or edits lightning components. It will then sync changes back to salesforce on save. It displays an error message if there is a syntax or formatting problem when syncing with Salesforce.
This was a huge development boost for me and I have nothing but good things to say about it. You will need to do your apex code development in the developer console, but with the automatic validation and apex being a fairly small portion of your code base for lightning components it isn't bad.