The Lightning Component framework from Salesforce is an amazing add-on to the platform. To build Single Page Applications there are lot of modern  frameworks like Angular, Backbone, Ember, Meteor, ReactJs and many more. Every framework comes with its own advantages and disadvantages. Salesforce Lightning is one among them which is fast maturing.

Here is a quick Lightning SPA project that shows the functionality listed below:

Quick Add, Edit, and Delete Account records in Salesforce from a standalone Lightning App or Salesforce1:

  1. Using Bootstrap library for UI
  2. How to achieve simple navigation using CSS toggle
  3. How to display error messages from server by dynamically creating Lightning Component markups
  4. Effective use of Events to communicate between components .

Let’s view this demo of the application before deep dive into some of the awesome stuff we have:

</p>
<div class="video-container"><iframe width="500" height="281" src="//www.youtube.com/embed/TJVaTiYGUFI" frameborder="0" allowfullscreen=""></iframe></div>
<p>

Some of the key points we noted while doing this SPA Project are as below:

Events:

Events are really cool. If you are not familiar with event driven patterns then it something you should research and become familiar with. Lightning Components use Events to communicate with each other. There is a Subscriber component and a Publisher component. The Publisher component will publish events using the <aura:register> tag.  The events needs to be fired on action from button click or through any events.  A simple example in my application is when I create New Account, my edit component fires an Event and the main Lightning SPA component listens to the Event and performs necessary actions needed .

The below code demonstrates the principle of firing events and then handling the event callback:

Routing:

I miss Angular routing here, where is easy to navigate between templates. If your application is not running as a standalone app and you only want it for the Salesforce1 mobile client, there is a lot of navigation support provided.

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/events_one.htm If we need for both standalone and SF1 I recommend using the code below:

For my app, I prefer the old  school approach of toggling via CSS as it makes it incredibly fast.

Displaying Error Messages:

Error handling at client side is easier if we dynamically create alert messages.  One approach is coded below (It’s one use case so the design a generic one).

Key things that would be needed if you are submitting your Lightning app for security review:

  1. Make sure FLS is handled in backend code for Apex
  2. Make sure you do DML access check at backend Apex
  3. As much as possible, avoid use of third party libraries. Many 3rd party libraries like jQuery can’t be totally avoided, but I recommend use of the framework specified tags.
  4. Namespace your Bootstrap. There is an online tool that can help you do this (https://bootstrap-namespacer.herokuapp.com/).
  5. Avoid usage of <aura:unescapedHtml>
  6. Avoid DML on page load init handlers.

More documentation on Lightning security: https://developer.salesforce.com/page/Lightning_Security To dig deeper, please see the whole project code in my GitHub repository: https://github.com/msrivastav13/Lightning-SPA-App Feel free to fork and improve, suggest changes, and tweet to us @codescience.