DEV Community

Cover image for How to use JavaScript libraries in your Dart applications

How to use JavaScript libraries in your Dart applications

Jermaine on August 22, 2018

Ever experienced the fear of leaving your favourite JS libraries behind should you include Dart with your dev stack? Well fear no more, because the...
Collapse
 
silvapheeha profile image
Silva

Hi, How can i implement this in angularDart, Tried following your approach but nothing is happening in my component.

Collapse
 
creativ_bracket profile image
Jermaine

Could you shed a bit more light on what you wish to achieve? You don't need interop if using AngularDart itself.

Collapse
 
silvapheeha profile image
Silva

I am trying to use jQuery With AngularDart, to animate some components. Angular has a BrowserAnimationsModule but couldn't find something similar in AngularDart so decided to use jQuery.

Thread Thread
 
creativ_bracket profile image
Jermaine

May investigate this as part of my video series on AngularDart. In the meantime, have you tried with CSS animations?

Thread Thread
 
silvapheeha profile image
Silva

Css animations was my last resort, i will try and use css. Thank you.

Thread Thread
 
creativ_bracket profile image
Jermaine

You're welcome. Just released a video today demonstrating interop with Toastr.js in an AngularDart web app → youtu.be/xegpncRwqGw Let me know what you think.

Thread Thread
 
silvapheeha profile image
Silva

Thanks, your tutorial helped me lot.

Thread Thread
 
hoanganhhhhh profile image
HoangAnhhhhh

but I couldn't build the app when using external js library. :(

Thread Thread
 
creativ_bracket profile image
Jermaine

Any errors? Could you share the code you have in a GitHub gist?

Collapse
 
thinkdigitalsoftware profile image
ThinkDigitalSoftware

Do you, by chance, know if this works with Flutter?

Collapse
 
creativ_bracket profile image
Jermaine

This only works with browser-based packages. The only way I see this useful in a Flutter app is if rendering content in a web view.

Collapse
 
thinkdigitalsoftware profile image
ThinkDigitalSoftware

Well there are tons of JS libraries that aren't ui related where we wouldn't have to reinvent the wheel

Thread Thread
 
creativ_bracket profile image
Jermaine

Sorry, not sure I follow what you mean here. Could you expand on this?

Thread Thread
 
thinkdigitalsoftware profile image

Let's say I want to use the moments.js library in my flutter application. Since it's already written, could I include this in my Flutter application and then call the functions in the moments library, or does it only work for interacting with the JS Window object?

Thread Thread
 
creativ_bracket profile image
Jermaine

Ahhh, thanks for clarifying. Only works with packages that are accessible via the window object, which will cover most browser-based JS packages. This is by design.

Out of interest, do you have a particular use case that warrants using a JS package in Flutter?

Thread Thread
 
thinkdigitalsoftware profile image
ThinkDigitalSoftware

well there was an IMEI/credit card validator that was written in JS that I needed in one of my apps. I ended up converting it to dart code and then used it, but it would have been nice if I didn't need to. JS is so mature already I don't want to reinvent wheels I don't need to.

Thread Thread
 
creativ_bracket profile image
Jermaine

Oh right, got you. I tried a quick search on Pub that brought me across these two:

Haven't tried it myself, but would those have worked for your use case?

Thread Thread
 
thinkdigitalsoftware profile image
ThinkDigitalSoftware

imei_validator is the one I ported over :D

Thread Thread
 
creativ_bracket profile image
Jermaine

Awesome Jonathan! I'm glad you contributed in this way. I count this a victory. This also has the added benefit of not needing any JS interop, which helps with performance. Now I know where to look should I need credit card validation ;)

Collapse
 
alfinbi profile image
Alfin Bakhtiar Ilhami

could you explain how to user nodejs 'require' in dart js interop ?

Collapse
 
creativ_bracket profile image
Jermaine

Hey Alfin, have you seen the node_interop package?

Collapse
 
mandui profile image
mandui

Hi, I'm new in web dev, and your aqueduct videos really help me, thx:)

I wanna ask is there a way to use javascript file in aqueduct project? I mean there's no index.html in project...

Collapse
 
creativ_bracket profile image
Jermaine

Hi Mandui, not in an Aqueduct project. Aqueduct is used to build serverside backends. You could serve index.html and js files with Aqueduct, but I'm assuming that ain't what you're asking.

Could you expand on what you wish to do?