Lightning Components Introduction


Published on

Introducing Lightning Component Architecture, Component Driven Development Approach and their benefits. Places where Lightning Components can run, Tools used for Lightning Component Development & Debugging

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Lightning Components Introduction

  1. 1. Lightning Components Introduction, Benefits & Architecture Durgesh Dhoot @ddurgesh28
  2. 2. Durgesh Dhoot Technical Consultant @ Appirio 6x Certified Salesforce Developer
  3. 3. Forward-Looking Statements Statement under the Private Securities Litigation Reform Act of 1995: This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of the assumptions proves incorrect, the results of, inc. could differ materially from the results expressed or implied by the forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections of product or service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or technology developments and customer contracts or use of our services. The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our service, new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth, interruptions or delays in our Web hosting, breach of our security measures, the outcome of any litigation, risks associated with completed and any possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of, inc. is included in our annual report on Form 10-K for the most recent fiscal year and in our quarterly report on Form 10-Q for the most recent fiscal quarter. These documents and others containing important disclosures are available on the SEC Filings section of the Investor Information section of our Web site. Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available., inc. assumes no obligation and does not intend to update these forward-looking statements.
  4. 4. Agenda ● What are Lightning Components ● Benefits of Component Driven Approach ● Lightning Components & Aura ● Architecture & Lifecycle ● Artifacts ● Where Do They Run ? ● Tools For Development ● Logging & Debugging
  5. 5. Everything revolves around Components All leading platform companies are investing in component frameworks Google Polymer Facebook React Salesforce Lightning Twitter Flight Mozilla Brick
  6. 6. What are Lightning Components? ● Part of the Salesforce Lightning framework ● Are Self-contained and reusable functional units of an app o Reusable section of the UI o Rendered as HTML DOM elements in browsers ● Exposes their Definitions o Attributes passing ● Has a Encapsulated Implementation o Component Bundle o HTML,CSS & Javascript ● Communicate with Events ● Based on Open source Aura Framework
  7. 7. Car Tire Braking Pads Mirror Ltng App Ltng Components Analogy
  8. 8. Analogy (Code)
  9. 9. Benefits 9 1. Quick, Easy & Independent Replacement No need to wait till next Service Day No need to worry or interfere your engine or car seat etc.
  10. 10. Benefits 10 1. Quick, Easy & Independent Replacement 2. Parallel development (Divide-and-conquer) Brake Pads can be built independently of tires, so you can divide the teams easily
  11. 11. Benefits 11 1. Quick, Easy & Independent Replacement 2. Parallel development (Divide-and-conquer) 3. Built for Specifications Brand A Brand B But Consistent Interface & Specs
  12. 12. Benefits 12 1. Quick, Easy & Independent Replacement 2. Parallel development (Divide-and-conquer) 3. Built for Specifications 4. Customize it like never before (Serious Customization)
  13. 13. Benefits 13 1. Quick, Easy & Independent Replacement 2. Parallel development (Divide-and-conquer) 3. Built for Specifications 4. Customize it like never before (Serious Customization) 5. So many Ready Made Choices (Appexchange, Github...)
  14. 14. Benefits 14 1. Quick, Easy & Independent Replacement 2. Parallel development (Divide-and-conquer) 3. Built for Specifications 4. Customize it like never before (Serious Customization) 5. So many Ready Made Choices (Appexchange, Github...) 6. Use same set of components but build different things
  15. 15. One Big Benefit of Lightning Component Is <iframes/>
  16. 16. 16 Aura Lightning Components Lightning Component & Aura Built on top of Aura Salesforce-specific extensions Open Source framework Vendor agnostic
  17. 17. 17 …… Aura is the ArcFor SF Lightning Man
  18. 18. Bridges both the worlds 18 … partitioned multi-tier component development Client Side Server Side AppCache Cache Manifest Request Design + Data
  19. 19. Component Request Life Cycle 16
  20. 20. Component Request Life Cycle 1 Client Sends the request 17
  21. 21. Component Request Life Cycle Parse Request, Load Registries, Locate Component Definition 2 Build / Retrieve Component Definition 3 4 Create New Instance From Definition 5 Serialize and Send 21
  22. 22. Component Request Life Cycle 5 Receive the Response 6 Deserialize Traverse Response Tree 7 8 Render App 19
  23. 23. Renderer : js Definition : html APP or COMPONENT BUNDLE Helper : jsStyle : css Cmp1 Cmp3 Cmp2 App1 App1 App2 Cmp2 Cmp2 Package 1 Package 2 Controller : js Documentation Artifacts of Lightning Component 20
  24. 24. Artifacts of Lightning Component Resource Resource Name Usage Component or Application sample.cmp or The only required resource in a bundle. Contains markup for the component or app. Each bundle contains only one component or app resource. CSS Styles sample.css Styles for the component. Controller sampleController.js Client-side controller methods to handle events in the component. Design Required for components used in the Lightning App Builder or Lightning Pages. Helper sampleHelper.js JavaScript functions that can be called from any JavaScript code in a component’s bundle. Documentation sample.auradoc A description, sample code, and one or multiple references to example components. Renderer sampleRenderer.js Client-side renderer to override default rendering for a component. SVG sample.svg Custom icon resource for components used in the Lightning App Builder. 21
  25. 25. 25 Where do they run ?
  26. 26. First Thing First - Enable Lightning Component Enable My Domain. After you successfully register it you must then come back to the My Domain setup and click to Deploy to Users. Also, make sure you are logged in through the My Domain URL. WHY ??? Security, your components run inside your domain
  27. 27. Where do they run?
  28. 28. Tools For Development
  29. 29. Tools For Development 1. Salesforce Developer Console 2. 3rd Party IDEs: Mavensmate, The Welkin Suite IDE, BrainEngine 3. Chrome Extension: Salesforce Lightning Inspector 29
  30. 30. Salesforce Lightning Inspector 30 Building Lightning Components is now even easier! ● Easily inspect and navigate the structure of your components ● Identify performance bottlenecks by looking at a graph of component creation time ● Debug server interactions faster by monitoring and modifying responses ● Navigate the component tree, inspect components and their associated DOM elements ● Track event firing and handling sequences
  31. 31. Logging & Debugging 31 ● Native JS Log functions, console.log();, debugger; ● Use Aura methods, $A.log(string[, error]); ● To log messages in PROD or PROD-DEBUG modes, write a custom logging function, subscribe using $A.logger.subscribe(String level, function callback); and then call $A.log(string); ● Level: ASSERT, INFO, ERROR, WARNING ● Use the $A.warning(string); method to write a warning message ● Server side exceptions can also be handled using response.getErrors(); we will see this while Calling Server Side Apex Code.
  32. 32. Learn More about Lightning Components ●Trailhead Module: Lightning Component ●Trailhead Project: Quick Start: Lightning Components ●Trailhead Project: Build an Account Geolocation App ●Lightning Components Developer's Guide
  33. 33. References ●Lightning Component Developer Guide ●Slideshare: Salesforce Developer Group ●Lightning Everywhere By Peter Knolle ●Lightning Components: Creating a Carousel Component
  34. 34. thank y u