Monday, September 17, 2018

JTD-DesignerSeries-7-LightningComponents-101


Let's set some context
I am a developer but not a salesforce classic developer, not even a Front End Developer but most developers a feeling a bit of change. In my college days, we just talked about software developers, but then in industry, I started hearing .Net Developer, Java Developer, Web Developer, Middleware Developer, Database Developer etc, and quite a few like me started working as skill oriented consultant. These days, I would say that learning curve is quite steep, as you are expected to be a Full-Stack Developer, and every application being browser & mobile based, there is no escape from learning. So, Lightning Component is modern UI framework for Salesforce Applications, just like Angular incubated by Google & React by Facebook. It is mentioned in trail modules, & I must say as well, that it is quite important to improve your Javascript , if you are developing with lightning components.


Let's talk some Javascript
a) Javascript Engine, which is single threaded runtime, is standardized on ECMAScript and is part of browser application. JS Engine interprets Javascript code and it is essential to develop basic understanding of concepts like Execution Context, Lexical Environment Hoisting, Execution Stack, Callbacks etc.
b) Saying goes like this that everything in JS is Objects, and with Functions & advance pattern application, savvy Javascript developers have developed frameworks & libraries like JQuery and realize the power of Javascript programming, but it may be quite difficult to master Javascript as it is quite complex & weird. For eg: Global Execution Context creates Global Object (Window) & this variable by default.
c) Execution of a function creates a new execution context, and nested function calls are placed on the execution stack. Javascript engine runs a single execution context at a time, and scope chains are used by JS Engine to determine variable value by looking at outer reference when variable is not defined in the function context.
d) Asynchronous behavior in JE engine, which by the way is synchronous, is enabled with event queue and engine picks the event when the execution stack is empty.
e) I would say that keep learning how JS works under the hood along with using established lightning component patterns while developing on lightning platform.

A brief on Lightning Components
We should say that Lightning is like a branding as would have been with Classic, with Lightning keyword attached with Lightning Experience, Lightning Apps, Lightning Pages, Lightning Components, Lightning Data Service and so on.
Lightning Components, in its definition, is a UI framework for building dynamic responsive pages & apps on lightning platform. It is a modern framework like Angular that builds application as SPA rather than multiple pages like with Visualforce, and navigation is managed as state change rather than navigating to another page. Developers design Lightning Components by bundling component markup xml (sample.cmp), client side controller functions (sampleController.js), common functions as helper (sampleHelper.js), custom styles for component (sample.css), configurable design attributes (sample.design).
Designers usually create multiple fine grained components to build a reusable features that can be published as coarse-grained lightning components which can used in Lightning Experience, Lightning Apps and so on, an example may be Standard components like Path, Page Header, Record Detail.
Lightning components are client side framework technology which fetches data from the server by initiating a request from the browser using http stateless protocol to the server side apex controller classes annotated with @AuraEnabled and coupling is established with controller attribute in the component definition (aura:component controller="serverSideContollerClass"). Components communicate with each other using attributes & lightning events. Generally parents can pass the data to the child components using attributes & other communication is usually established by registering for an event & handler functions.
Generally, development shops are focused on building and customizing component libraries which is quite similar to SOA governance initiatives in large implementations with large Services Registries.

A brief on Lightning Design System (SLDS)
Enterprise Applications care a lot about standard look & feel, and Lightning Experience enables it for both Desktop & Mobile Apps with SLDS and provide consistent development experience for a many designers & developers in salesforce community. Four core tenants of Lightning Design System are clarity, efficiency, consistency & beauty.SLDS acts as a central repository of components, patterns & guidelines. As developers, the more you work with SLDS, the better you get at picking components, but they are categorized as simple components like buttons, complex components like dropdown menu, structure components like Button Groups, feature or experience components like Sales Path. SLDS eases layout design by providing gird based FlexBox Containers like slds-grid. SLDS grids offers features like automatic sizing on different device sizes, utility sizing classes, support for edge scenarios with single purpose utility classes like slds-has-flexi-truncate.

A brief on Lightning Data Service (LDS)
By now, we understood that Lightning Platform supports component based UI layer, with multiple, nested components in a single view. In Lightning component basics, we learned that components communicate with each other through events & attributes. Though as each component is developed separately & can exists on its own, it makes its own copy of data & changes made in one component is not reflected in other components.
LDS address these problems by allowing component developers with simple configuration (force:recordData) and let platform create a unifying layer to control data access for all these components with configuration. Some of the advantages of this integration layer is improved performance with cacheing, data security by proxying component access to server data & other platform services & validations.
In my opinion, LDS is evolving along with User Interface API and developers should push for prototyping before accepting solution & stories on projects.

A brief on Lightning App Builder (LAB)
Lightning Experience is usually build from experience lightning components, but in a single view you are looking at multiple components on a lightning page and Org can have multiple applications which are accessed & switched using the navigation menu. Lightning Components as such is not accessible in production orgs by itself.
Lightning App Builder is point & click tool, that helps create custom pages for Lightning Apps, Lightning Experience & Salesforce Mobile Apps.
App Builder helps admins customize App branding & settings, drag & drop lightning components on canvas to configure page layouts for different page types like Home Page, App Page & Record Pages. It allows you to configure components to implement dynamic by allowing admins to create component visibility filters with ease while having coffee discussions with the app users.

Links & Reference
a) https://trailhead.salesforce.com/modules/javascript-essentials-salesforce-developers
b) https://trailhead.salesforce.com/modules/lex_dev_lc_basics
c) https://trailhead.salesforce.com/modules/lightning_design_system
d) https://trailhead.salesforce.com/modules/lightning_data_service
e) https://trailhead.salesforce.com/modules/lightning_app_builder

No comments:

Post a Comment