Can you run JavaScript in Flutter?

today's video is going to be about running JavaScript code in flatter it's a short one to the point I'm going to explain why I need it and how I did it you see I have an app called only in one calculator it's been on the store for years now only on Android I need to move it to iOS 2 that's why I started and I'm rewriting my app in flut I have a video about it you can check it in the description below right now in my app rewriting process I'm at a point where I fin finished the calculator layout I finished the input I finished everything the only thing I need to finish right now is the calculator logic that will solve the formula entered by the user now in Dart there are three libraries that are able to do that math expressions expressions and I think uh function tree all these libraries work in Dart work with flut but they are let's put it like this incomplete they don't have all the functionality I need for my calculator for example they don't have a percentage sign you can do 100us 5% no the percentage sign it's the modulus I don't need a modulus for my calculator they don't have factorization but that's easy to solve and they have some weird ways of writing math expressions and that will involve more work on my side to parse the formula and give it to this libraries so I was pretty let down by this of course on my legacy app I have the I think it's called aity Java library that does everything and does it good and does it well and I was this close of writing my own expression parsel or at least improving one that's already out there but to be honest I don't think I have the technical expertise to write that kind of parsel it would take me ages I mean a month or two just to figure things out and uh it's not guaranteed that it will work let me flip the page over here this is my script so of course I looked over the fence on JavaScript I discovered a nice Library called matte JS it had everything I needed it had big integer support matte expression parser and evaluator even a unit converter Library bundle into it it's not that small of a library but it has everything everything I need it's right there into it I really needed this library to work with flatter so I did some digging and I found out about flatter JS this Library uses I think flatter ffi to give you a JavaScript routine appropriate to your platform on Android it gives you quickjs and on iOS I think it gives you JavaScript core or something like that the point I want to make here is that I was able to run my own JavaScript code into flatter and this was huge for me this was so big so I got to work I downloaded this library and I added it to my assets folder for me it's called resources because I come from Android and on Android everything it's a resource after that I made sure to add this line into my pop speec yaml yaml yaml yaml so far so good now how do I access this JavaScript in code as you can see I'm made a class called math this has a JavaScript routine future called instance this instance gets initialized the first time I access this class in code how is this runtime initialized in the first line I'm calling root bundle load string which loads the JavaScript library as a string in memory after that I'm getting the JavaScript runtime and I'm calling evaluate a sync with the library string on this runtime what this does is it loads the library in the runtime so I'm going to be able to use the methods in this library with the run time and after that I'm returning the run time the first time I call math. evaluate with whatever formula I have there the method will wait for the instance initialization to complete then we'll call evaluate a sync with a little bit of JavaScript code that will evaluate my function and it will return the raw result this in my experience with the mat JS it's going to be an INT it's going to be a double or it's going to be a string or it's going to be an error I'm going to deal with the result later my only concern right now is using the JavaScript library why go through all this Hassle and initialize the runtime like this well in my measurements it takes about 500 milliseconds to read the JavaScript library from the and evaluate it in the runtime why because it's pretty big it has about 800 kiloby so uh it's not instant the evaluation takes a while so how I fix this well I'm calling math evaluate the first time I open the app this will initialize everything we'll read the library from dis we evaluate the library into the runtime and by the time the user uses the calculator it's going to be there initialized and it will just work the user will never know about this in my code in my calculator Notifier because I'm using River pod I just have to call a wait math. evaluate and the formula pretty easy pretty pretty easy ignore this part this is just temporary code it's not going to look like this in the yet it's going to look way nicer now what are the caveats the inconveniences of this method there's only one from all the platforms it doesn't work on web this is a little bit of a bummer but it's easily fixable you can use I think a JS interlop package and bypass this flatter J Library I might be talking nonsense right now uh I'm pretty new with flatter so if I'm saying something wrong something bad forgive me yeah flat is nice it's a nice development experience for me I'm enjoying it I'm getting closer to my goal of releasing this app this year look it works it's not stupid if it works right it works and it's fast it's pretty fast let me know what you think let me know if this looks like a hack if this looks stupid also let me know if you like this format it's a bit less formal I don't have to time to write scripts do retention editing and uh worry about YouTube right now but I still need to share the things I find and I find in YouTube a nice platform to do this okay this video ends here thank you for watching hope you learned something I surely did and until the next one I leave you with my chickens bye

Channel: Andrei Lupsa

Views: 8,437

Keywords: application, library, flutter, javascript, android, ios

Id: ZNpgOkDMJJM

Length: 7min 30sec (450 seconds)

Published: Sat May 18 2024