Can you run JavaScript in Flutter?

I didn't find a good Dart library able to parse math expressions, so I jumped the fence and borrowed one from JavaScript. Is this good or bad?
Why am I switching to Flutter in 2024
• Why am I switching to ...
Download my app here:
www.allinonecalculator.com
00:00 - Introduction
00:25 - Why I need it
02:37 - How I did it
05:50 - What are the caveats
06:23 - Conclusion
Thank you for watching!

[@LukePighetti]

not stupid, very smart and pragmatic. you have a high quality math engine with a few lines of code that will last forever and continue improving and evolving until the end of time

[@andreiIupsa]

Building on this. Imagine having snippets of business logic that you can use inside your app and update instantly through a web service. Can't really think of a valid use case but it's possible.. 😁

[@HazhanJalal]

​@@andreiIupsa Building the app (AAB/APK) with shorebird can help you do that with pure Flutter as-well (the push updates directly part). Super easy too. You do your edits normally, change any codes you have, and with a single line from the terminal the app is updated on user's device next time they open it without requiring them to install any updates through any store. But it does have some limitations. For example Adding new resources Always requires sending new App package (AAB/APK), can't send those through patches. And also costs abit for large users-base apps. For smaller userbase (maybe a company's private own app) super useful and won't cost a dime.

[@ISKLEMMI]

You had a problem and you solved it in a manner that allows you to keep making progress. I count this as a victory. I'm fairly new to Flutter and had no idea you could do this. Thanks for sharing!

[@wraith3108]

Man this is how you are supposed to tell about your journey of the framework. Every tech has their ups and downs and how you are supposed to tackle the downs in a tech is what is needed. Rather than just complaining about it. Seriously, I loved your video and your way of delivery.

[@andreiIupsa]

Thank you!

[@TahiruAgbanwa]

This is really smart to think about. I have never used a JS package in flutter. This unlocks a lot of possibilities

[@andreiIupsa]

Think about having snippets of code that you can change on the fly in your app. Can't think of a specific use case, but it's possible!

[@BooleanDev]

@@andreiIupsasome apps do that for website parsers so that they can update it quickly if it breaks

[@jointtask4047]

I recommend you do the evaluation on a diff tread using the compute or isolate function in dart, that will increase performance and reduce jank when evaluating large expressions

[@listendream2792]

Thank you for your sharing, love your videos and inspire me alot. Keep up the good work!!🧡🧡

[@AbdulHaseeb-sy7uo]

You made my day, letting me know what is possible with flutter! thank you so much Andrei . I have subbed your channel!

[@theskyblockman]

This is good for your app but shows a massive problem for the Dart ecosystem (and many others): If people look over the fence too much, no development in Dart would be made and we would all go to JS. I am also not a fan of creating another entire runtime when the app starts. I am mainly against just using other languages like that because I ported 2 giant decompilers from Python to Dart and I want other people to suffer with me. This looks like a fun project for my next vacation though!

[@rodrodrigues1729]

being creative is essential for programming, nicely done. the end of the video is really cool as well.

[@gofullstack]

To initialise this ones on start-up I'll prefer to do this instead class Math { static JavascriptRuntime? _instance; static void initialize() async => _instance ??= await _initialize(); static Future _initialize() async { final library = await rootBundle.loadString("res/libraries/math.js"); final runtime = getJavascriptRuntime(); await runtime.evaluateAsync(library); return runtime; } static Future evaluate(String text) async { final result = await _instance?.evaluateAsync("math.evaluate('$text')"); return result?.rawResult; } } This means you don't need to call evaluate for any reason again unless required because "Math.evaluate("1+1");" becomes "Math.initialize();" and you’ll have your JS Runtime initialised before your user needs it.

[@mycloudvip]

awesome work. for me getting the job done is worth more than the approach you take. Kudos!

[@alexamatobi3769]

Amazing... I'll be trying this out

[@felix_arg984]

This is quite pragmatic and smart🙌 Another language that you could try out would possible be rust, there is a crate called meval which should do the same and with the flutter rust bridge you should be able to easily run it on all platforms quite performantly :) But if it works in JS, that‘s the important thing that matters.

[@harishprasadrajeurs2771]

very informative

[@thelastbit8154]

Thanks, I have some ideas for this 👌

[@programingtales7514]

Thats really cool

[@memoriasIT]

I don't know how to feel about this, but cool stuff :D

[@trungbui7518]

Can you show me how to parse json with worker in flutter web?

[@matthieupernelle8074]

Can you translate a Js or Java library to dart with ChatGPT ?

[@gauravjoshi747]

can you open source it so that we can learn and contribute to it

[@alaaabdalqader9718]

can u make a video how to extract images from pdf file in flutter ?

[@YayoArellano]

This is a great video and a very smart approach to solving your problem. I would like to know how you record and edit your videos. They look great.

[@andreiIupsa]

Hmm.. I'm a geek when it comes to cameras and photography so this won't be a short answer. First, lighting is important. I have a single Elgato Key Light set to 100% 5500k right in front of me. I use a Sony A7IV camera, a 16-35 F2.8 GM lens with a Nisi True Color 1-5 stops variable ND. I film in 4k 30p 4:2:2 10-bit S-Log XAVC-S 1/60. Camera WB is set to manual 5500k. I overexpose the log footage with 1 stop and I don't use in camera sharpening. I use the Phantom Luts Eastman lut and I add some sharpening in post. For audio I switched from the Shure SM7B to the Sennheiser MKE 400. 😁

[@YayoArellano]

@@andreiIupsa lol. I still have many things to learn. Thanks for ur answer

[@michaelchiz8055]

Nice

[@thecigaroman]

If you had a working java library I think you could try to run that via Dart FFI and JNIGen. At least it's worth prototyping I think.

[@mikopiko]

5:11 any specific reason why you didn't just stick to a function and had to wrap it in a class?

[@ebitdaddyca3676]

Nice format, nice editing, nice app

[@andreiIupsa]

Thank you 😃

[@leoingson]

+1, stole my comment :)

[@cristiancosneanu]

This is quite a nice solution. I never used the flutter_js lib... I think it is hilarious that it doesn't work on web. Code wise: You could separate the initial loading and the evaluation, and put the inital loading in a Isolate, might improve the loading time. LMK if you need an example. Cheers.

[@andreiIupsa]

I tried to run everything inside Isolate.run() but for some reason the JS execution fails there. Will look into it when I have the time.

[@cristiancosneanu]

@@andreiIupsa Interesting... Only the loading? or the evaluation also?

[@BinaryBridgeHQ]

I like the solution, I love flutter, I develop applications using flutter on daily basis and I can't go back, No matter what I try, I just want to stick to flutter.

[@nonefvnfvnjnjnjevjenjvonej3384]

would react native be a better choice here? for easier js interop?

[@TahiruAgbanwa]

JS interop is only needed for flutter web and not mobile or desktop. But to answer ur question, react native uses js so why do you need a js interop package. just install the package an use it. There is no better choice here, if it works it works except in RN it would have been more straight forward.

[@user-cz5cy8ud8m]

Hi! could I ask you why you did choose Flutter instead of KMP though you already were using Android native? :)

[@mibi2007]

because Flutter views more than KMP I think 😁

[@TheAbhidugar]

from where did you learn to use riverpod?

[@andreiIupsa]

The getting started documentation they provide is all you need.

[@prabalverma334]

good

[@momshaddinury]

This is amazing, genius. By any chance is it possible to render math equation like calculus natively without using webview?

[@andreiIupsa]

The runtime runs natively and doesn't use a webview, as far as I know.

[@momshaddinury]

@@andreiIupsa Do you need to render complex LaTeX formatted equations?

[@Snggle]

Nice, can't wait until you try large TS packages that are sdks lmao.

[@scratchindonuts7903]

Messi teaching Flutter now? Nice.

[@flutter-fm1kl]

Bro, please use a dark theme because the eye is important.

[@andreiIupsa]

Can't stand it, unfortunately..

[@gaxkiller]

@@andreiIupsa I can't stand bright theme but I understand some people prefer it, and since it SUPER easy to make dark + bright theme and switch between theme in flutter, I do this all the time :) Since you use riverpod, just define all your theme data in providers. How I do: - themeProvider -> returns a theme data, then other providers returning part of the theme. For the colorScheme: final colorSchemeProvider = Provider((ref) { final brightness = ref.watch(brightnessProvider); final colorSchemeSeed = ref.watch(colorSchemeSeedProvider); return ColorScheme.fromSeed( seedColor: colorSchemeSeed, primary: colorSchemeSeed, brightness: brightness, ).copyWith( surfaceTint: Colors.transparent, ); }); The brightness provider is super simple: final brightnessProvider = StateProvider((ref) => Brightness.light); Then from anywhere in the app, you can use the brightnessProvider to swtich between dark and bright. Of course, you have to use the colorSchemeProvider inside you theme provider to set the colorScheme for this to work

[@asandax6]

​@@andreiIupsa Use it only when recording.

[@mikopiko]

Does white theme hurt the eyes?

[@flutter-fm1kl]

@@mikopiko yeah for me

[@derismekentz1]

most underated ending ever

[@andreiIupsa]

Chickens! 😁

[@ahmadjz8144]

Since you're already using FFI for running other languages in Flutter, why did you choose JS? why not Python for example

[@s.bamahfoodh]

Wait, do u mean that we can use libraries from different languages in flutter and it will just work???

[@saiphaneeshk.h.5482]

​@@s.bamahfoodhwondering the same.

[@ahmadjz8144]

Yeah you can say that, it's called FFI (Foreign Function Interface), it supports multiple languages even C

[@ShivamJha00]

Every language that has a C interop will work. I've seen some libraries using rust as well

[@KlawaJunior]

Codict app uses this library

[@ransomecode]

kids are going to run xss on your app bro if you put the input directly into evaluate()

[@andreiIupsa]

Good point! Gotta do some sanitization first. Edit: On second tought.. can they?

[@AshishBeck]

​@@andreiIupsa you're wrapping your evaluation inside the hard-coded "math.evaluate(...)" so I think you're good to go. Doesn't matter now if you let the user input whatever shenanigans they want to as they are restricted by the function.

[@user-lj4lo7cx7m]

​@AshishBeck what about );console.log(1

[@AshishBeck]

@@user-lj4lo7cx7m how will you get outside of the enclosing paranthesis (...) but?

[@AshishBeck]

@@user-lj4lo7cx7m you cannot escape the paranthesis around math.evaluate() though, right?

[@agoshxyz]

All you need is React Native

[@kevinmore2012]

I mean, you could have put those advanced calculations into a backend and only let paid members to access it.

[@koteelok2014]

lazy