8

I read a lot about Locker Service becomes more and more powerful, restricting what we do (or hack) in Lightning Components.

Will the 3rd party library jQuery be unusable after Summer'17?

I'am aware that it will be jailed into the DOM of the component loading it - or it will have only access to the DOM elements where a $(...) is invoked. But within that limitation: will it work or not at all?

Improve this question
3
  • 1
    I think I recall Doug Chasman saying at the dev breakfast during Dreamforce that they're working on compatibility with jQuery and some of the other popular libraries out there.
    – Adrian Larson ♦
    Commented Dec 17, 2016 at 19:08
  • See @TrevorBliss comments below my answer to a question here regarding support for jQuery libraries and locker service. I think that may provide you with additional insight and perhaps an answer to your question.
    – crmprogdev
    Commented Dec 17, 2016 at 19:50
  • There are currently no known issues with LockerService and jQuery 2.2.4 that I'm aware of. Some may still be pending release, but none that have been reported that haven't been investigated and resolved in the main codeline. Obviously the whole jQuery API + DOM + all supported browsers is a large surface area so we may have missed a spot. If you think you've found a bug please provide repro steps and we'll investigate.
    – TrevorBliss
    Commented Dec 17, 2016 at 23:44

2 Answers 2

Reset to default
5

There are two things with Jquery now:-

It will work with your components if, carefully DOM selectors are used.

  • Only basic one like changing css, attribute etc. Don't register Events.

  • Second thing is, it will break any point of time because Jquery is stable but Lightning is not.

It is said that Locker Service allows you to manipulate DOM in scope or in other words we can access DOM elements inside the components elements and perform javascript operations. Actually, the full truth is, we can access DOM element with in the scope and perform a limited set of operation allowed by Locker service. A large set of functions Locker service disable for DOM elements within scope. So, there are ample chances of Jquery break.

Improve this answer
6
  • Thanks @Ashwani - You said that Lightning Components are not stable. Are Lightning Componets and Lightning Experience still BETA or GA? I was not able to dig this out of the documentation. At least what I can say both feel pretty BETA, but that's a gut feeling only...
    – Uwe Heim
    Commented Dec 19, 2016 at 9:34
  • Lightning is more and more stable, but LockerService is not perfect yet (still lots of bugs/limitations to solve) ... but it will be one day probably :)
    – Nicolas Vuillamy
    Commented Dec 19, 2016 at 15:59
  • 1
    @NicolasVuillamy Lighting framework is better than before but once we go in advanced level we start getting GACK errors. Locker Service is a real issue. I agree.
    – Ashwani
    Commented Dec 19, 2016 at 18:35
  • 1
    @TrevorBliss it depends on how you define "issue". I think it works "as designed". However the consequences of the design are real-live issues. See comments from Praveen at my answer.
    – Uwe Heim
    Commented Dec 21, 2016 at 10:07
  • 1
    @UweHeim I completely agree with you. Here's one such issue. Unable to add custom scroll due to “component/namespace encapsulation” when Locker Service is active Also, TrevorBliss has told that there's no update on this yet here
    – SE_User
    Commented Dec 21, 2016 at 12:10
1

Basically jquery seems to work, but what puzzled me first, is that it was not able to select DOM-Elemets inside my own components. It turned out not to work selecting sub-components if they belong to their own namespace like e.g. force:inputField.

Currently due to a bug force:inputField bound to a multiselect picklist-field renders in HTML as a disabled select.

So I have a <select disabled="" ... > somewhere in my components sub-DOM - and I know that for sure.

Now I put console.log( $("select:disabled") ); in afterRerender().

Having the critical update disabled, I get the expected result, like: Object[select#60:575;a.select]

After enabling the critical update, I get only Object[ ] - so jQuery could not see into the DOM created by force:inputField. This is caused by Locker Service and as far as I understood a feature and by design.

Improve this answer
7
  • 1
    Try scoping the selector to make sure you are searching only the DOM you are supposed to see.
    – Praveen
    Commented Dec 17, 2016 at 19:13
  • 1
    I tried using jquery v2.2.4 in my component to alter DOM of disabled select in rerender and it works fine.
    – Praveen
    Commented Dec 17, 2016 at 19:22
  • 2
    @UweHeim Since <force:inputField /> belongs to force namespace you cannnot access the DOM due to Locker Service. With locker in place, you can only access the DOM that belong to your own namespace (default is c).
    – Praveen
    Commented Dec 19, 2016 at 9:44
  • 2
    @Praveen Thanks, that clarified everything. So fixing bugs of others who should but don't fix them now strictly belongs to those others (the authors) - no matter what. And even for small glitches of others, we need to prepare for full waiting times and fall in love with IdeaExchange and Gogot. But I understand now how strictly this separation concept is designed.
    – Uwe Heim
    Commented Dec 19, 2016 at 10:15
  • 1
    @Praveen Can you please see if you've got to suggest a workaround for Unable to add custom scroll due to “component/namespace encapsulation” when Locker Service is active ?
    – SE_User
    Commented Dec 21, 2016 at 12:12

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .