Get Struck By Lightning
2 likes292 views
This document is a detailed overview of the Jaipur Dev Fest presentation by Mustafa Jhabuawala, focusing on Salesforce Lightning, its components, and development practices. It covers prerequisites for learning Lightning, differences between Visualforce and Lightning, as well as tools, frameworks, data binding, and event-driven programming. The presentation emphasizes the benefits of using Lightning for developing dynamic web applications across devices, including mobile and desktop.
Get Struck By Lightning
- 1. Jaipur Dev Fest www.jaipurdevfest.com @jaipurdevfest Get Struck by Lightning Mustafa Jhabuawala Sr. Salesforce Developer Mustafa.jhabuawala@zen4orce.com @MustafaJhabua #JDF17
- 2. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Hello!I am Mustafa Jhabuawala I work @Zen4orce as a Sr. Salesforce Developer I always strive to work with cutting edge technologies. 5 years exp | PD-1 Certified | Microsoft Certified | Crazy for Salesforce Lightning | UI designing & development | .NET | Sharepoint | JavaScript | jQuery | jQueryUI | BootStrap | HTML | CSS #JDF17 | 2 Tweet me @MustafaJhabua
- 3. #JDF17 | 3 Getting Started… ▪ Prerequisites ▪ How to start with Lightning ▪ Framework Basics ▪ Lightning Components ▪ Lightning Events ▪ Lightning Locker Service
- 4. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Javascript Basic knowledge of javascript and its working. Prerequisites DOM Understanding on DOM creation and manipulation. #JDF17 | 4 HTML & CSS Basic understanding on HTML & CSS. Salesforce Ecosystem Apex Development.
- 5. How to start with lightning ?..... ▪ Lightning Components ▪ Lightning Events ▪ Lightning App Builder ▪ Lightning Connect ▪ Lightning Out ▪ Lightning Extension ▪ Lightning Dataservice ▪ Base Lightning Components ▪ Aura Framework ▪ Javascript ▪ SLDS #JDF17 | 5
- 7. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Visualforce ▪ Page-Centric model ▪ More server side ▪ Built for Web ▪ Native visualforce page tags ▪ Monolithic ▪ Building SPA can be tedious Visualforce & Lightning Lightning ▪ App- Centric model ▪ More Client Side ▪ Built for Mobile ▪ HTML & CSS ▪ Component driven ▪ Building SPA can be fun #JDF17 | 7
- 8. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Why Lightning ? Lightning ? ▪ Business ready components ▪ Ready to use in S1,Lightning Experience & Communities ▪ Faster performance ▪ Increase in application efficiency ▪ Rich component ecosystem ▪ Event-driven architecture ▪ Device-aware and cross browser compatibility #JDF17 | 8
- 9. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com What is Lightning ?is Lightning ? ▪ Combination of : ▫ JavaScript framework ▫ CSS framework ▫ Series of UI components ▪ Used for developing dynamic web apps for : ▫ Mobile ▫ Desktop devices #JDF17 | 9
- 10. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Tools▪ Developer Console ▪ MavensMate + Sublime ▪ Welkins Suite ▪ Force.com IDE #JDF17 | 10
- 12. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Aura Framework #JDF17 | 12
- 13. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com XML Component Definition Lightning Component Bundle XML #JDF17 | 13
- 14. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com XML Component Definition Lightning Component Bundle XML #JDF17 | 14 JS JS Controller, Helper, Renderer, etc..
- 15. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com XML Component Definition Lightning Component Bundle XML #JDF17 | 15 JS CSS JS Controller, Helper, Renderer, etc.. Styling
- 16. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com XML Component Definition Lightning Component Bundle XML #JDF17 | 16 JS CSS Apex JS Controller, Helper, Renderer, etc.. Styling Apex Controller
- 18. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Component Based Development #JDF17 | 18 Application
- 19. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Component Based Development #JDF17 | 19 Component Thor Application
- 20. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Component Based Development #JDF17 | 20 Component Thor Application Component Iron Man
- 21. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Component Based Development #JDF17 | 21 Component Thor Application Component Iron Man Component Batman
- 22. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Component Based Development #JDF17 | 22 Component Thor Application Component Iron Man Component Hulk Component Batman
- 23. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Component Based Development #JDF17 | 23 Component Thor Application Component Iron Man Component Hulk Component Batman A B
- 24. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Component Based Development #JDF17 | 24 Component Thor Application Component Iron Man Component Hulk Component Batman A B C D E
- 25. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Event Driven Programming #JDF17 | 25 Application
- 26. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Event Driven Programming #JDF17 | 26 Component Thor Application Component Iron Man A B
- 27. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Event Driven Programming #JDF17 | 27 Component Thor Application Component Iron Man A B
- 28. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Event Driven Programming #JDF17 | 28 Component Thor Application Component Iron Man A B
- 29. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Event Driven Programming #JDF17 | 29 Component Thor Application Component Iron Man A B
- 30. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Event Driven Programming #JDF17 | 30 Component Thor Application Component Iron Man A B
- 31. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Event Driven Programming #JDF17 | 31 Component Thor Application Component Iron Man A B
- 32. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Event Driven Programming #JDF17 | 32 Component Thor Application Component Iron Man A B
- 33. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Event Driven Programming #JDF17 | 33 Component Thor Application Component Iron Man A B
- 34. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Event Driven Programming #JDF17 | 34 Component Thor Application Component Iron Man A B
- 35. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Event Driven Programming #JDF17 | 35 Component Thor Application Component Iron Man A B
- 37. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com ▪ Self-contained + Reusable units. ▪ Rich-set of prebuilt components. ▪ Rendered to produce HTML DOM elements. ▪ Can contain other ▫Components ▫HTML ▫CSS ▫JavaScript ▫Any other Web-enabled code. ▪ Enables you to build apps with sophisticated UIs. #JDF17 | 37 Lightning Components
- 38. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Lightning Components #JDF17 | 38
- 40. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Component Bundle #JDF17 | 40
- 41. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Component Markup #JDF17 | 41
- 42. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Component IDs ▪ A component has two types of IDs: ▫ Local ID ▫Global ID #JDF17 | 42
- 43. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com CSS in Component #JDF17 | 43
- 44. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Component Attributes ▪ Similar to member variables in Apex Class ▪ Make components more dynamic ▪ Attributes have: ▫ Name ▫ Type ▫ Required ▫ Default #JDF17 | 44
- 45. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Data Binding Between Components ▪ Passing attribute from parent to child component results in data binding also known as value binding ▪ Expression types – ▫ Bound Expressions ▫ Unbound Expressions #JDF17 | 45
- 46. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Bound Expression ▪ Syntax – {!v.data} ▪Data updates in either component are reflected through bidirectional data binding in both components. #JDF17 | 46
- 47. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Unbound Expression ▪ Syntax – {#v.data} ▪ Data updates in a component is NOT reflected in other component #JDF17 | 47
- 48. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Lightning Events ▪ There are two types of events : ▫ Component events ▫ Application events #JDF17 | 48
- 49. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Component Events ▪ Fired from an instance of a component ▪ Handled ▫ Component that fired the event ▫ Component in the containment hierarchy that receives the event. #JDF17 | 49
- 50. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Component Events #JDF17 | 50 Component Thor Application
- 51. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Component Events #JDF17 | 51 Component Thor Application
- 52. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Component Events #JDF17 | 52 Component Thor Application
- 53. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Component Events #JDF17 | 53 Component Thor Application Component Iron Man A B
- 54. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Component Events #JDF17 | 54 Component Thor Application Component Iron Man A B
- 55. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Component Events #JDF17 | 55 Component Thor Application Component Iron Man A B
- 56. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Component Events #JDF17 | 56 Component Thor Application Component Iron Man A B
- 57. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Application Events ▪ Fired from an instance of a component ▪ Components that provide a handler for the event are notified #JDF17 | 57
- 58. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Application Events #JDF17 | 58 Component Thor Application Component Iron Man A B
- 59. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Application Events #JDF17 | 59 Component Thor Application Component Iron Man A B
- 60. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Application Events #JDF17 | 60 Component Thor Application Component Iron Man A B
- 61. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Application Events #JDF17 | 61 Component Thor Application Component Iron Man A B
- 62. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Application Events #JDF17 | 62 Component Thor Application Component Iron Man A B
- 63. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Application Events #JDF17 | 63 Component Thor Application Component Iron Man A B
- 65. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Locker Service ▪ Enforces security into SPA built using lightning components ▪ It prevents from ▫ Causing XSS and similar security issues ▫ Reading other component’s rendered data ▫ From calling undocumented/private APIs ▪ Resulting In - ▫ Faster security review ▫ Better and more secure JS development practices ▫ And many more…. #JDF17 | 65
- 66. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com #JDF17 | 66 Any Questions ?
- 67. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Resources #JDF17 | 67 ▪ Trailhead ▪ Lightning Developer Guide ▪ And our awesome community members
- 68. Jaipur Dev Fest www.jaipurdevfest.com @jaipurdevfest Thanks!! You can find me at @MustafaJhabua & mustafa.jhabuawala@zen4orce.com #JDF17
- 69. www.jaipurdevfest.com @jaipurdevfest jaipurdevfest@googlegroups.com Credits Special thanks to : ▪ Jina Chetia ▪ Jaipur Dev Fest (Gaurav Kheterpal, Abhinv Gupta & team) #JDF17 |