10 ms·
Write in JavaScript, Render in Flutter
- bengold14 5y agoI can't tell if this is a joke or we've actually done a full circle
- jack_pp 5y agoThe idea seems neat. If you don't want to rely on react native but still write react this might be a good option to have
- deepsun 5y agoThe point is that Flutter compiles back to Javascript.
- beaunative 5y agoIt doesn't. To clarify, you can compile dart to javascript, albeit more commonly to machine code.
- justmedep 5y agoIt does if you target browsers with your flutter app.
- satvikpendem 5y agoI believe it actually targets WASM and renders as a canvas element.
- SpaghettiX 5y agoNo. Where did you get that from? Compiling dart into WASM is a highly requested, but unimplemented feature (it's not really necessary for most cases you'd think). https://github.com/dart-lang/sdk/issues/32894 https://github.com/dart-lang/sdk/issues/32894
- deleted 5y ago[deleted]
- satvikpendem 5y agoThe CanvasKit renderer, which at the time of this GitHub comment [0] was experimental but is now the default one (the other being a HTML renderer rather than a canvas renderer, but that had some problems and was not as fast as the canvas implementation, so it was overridden by canvas), uses WASM and WebGL. [0] https://github.com/flutter/flutter/issues/41062#issuecomment-533952994 https://github.com/flutter/flutter/issues/41062#issuecomment... [1] https://flutter.dev/docs/development/tools/web-renderers https://flutter.dev/docs/development/tools/web-renderers
- deepsun 5y agohttps://flutter.dev/web https://flutter.dev/web > Adding web support to Flutter involved implementing Flutter’s core drawing layer on top of standard browser APIs, in addition to compiling Dart to JavaScript, instead of the ARM machine code that is used for mobile applications. Using a combination of DOM, Canvas, and WebAssembly, Flutter can provide a portable, high-quality, and performant user experience across modern browsers.
- deleted 5y ago[deleted]
- jack_pp 5y agoInstallation instructions only for osx and when I go to the try on Android I'm redirected to a GitHub readme that tells me to build something with node. Seems the docs need a little bit of attention
- exikyut 5y agoGrab the APK from the releases section
- nsonha 5y agoThis is how I would be interested in using Flutter. Honestly the thing that has been stopping me from doing it is Dart. It's not that it's a terrible language, it's just a very mediocre one. At this point in my career, I detest that and will not learn anything that simply exists for the sake of being difference instead of offering any actual merit.
- deleted 5y ago[deleted]
- GeorgeTirebiter 5y agoIt would be helpful if you would explain/teach us why Dart is a mediocre language. With examples if you can. What would you suggest instead?
- nsonha 5y agoI could explain it as Dart not having any features other than what any of the mainstream language has but that would not be much of an explanation would it? What is special about Dart? I'm aware we have plenty of mediocre mainstream languages existing right now, but they all exist for historical reason and have rather useful ecosystems. However, to go out of the way to just make a new lame ass syntax, with zero ecosystem, and no distinguishable characteristic (which is why Flutter is always involved in selling it) why would you do that? I'm all for new new paradigms, languages that are different like haskell or scala to flourish and teach us new ways of thinking, this is not it.
- plorntus 5y agoWhen Dart was launched Javascript (Typescript) was not really a enjoyable language to use. For me at least it filled that void as a strongly typed language I could use on the web and server side that was easy to pick up. I thjnk that was the niche it was trying to fill and wasnt just made for the sake of it.
- nsonha 5y ago
- Dig1t 5y agoThe link to the Chinese government website in the footer is a little weird. What is that? Is this project affiliated with beian.gov.cn? Honestly just curious.
- beaunative 5y agoYeah. All public websites need to be registered with the the government and are assigned a BeiAn code. It's a link to the registry where you can find who owns and operate the website with the code listed.
- exikyut 5y agoWow, so a bit like the Impressum thing Germany requires where you provide your address? Huh, ok.
- arnvald 5y agoI worked for a company where we hosted some stuff in China (on Alibaba Cloud) and we had to register there and get an ICP number (it stands for Internet Content Provider). It's obligatory to display it somewhere on the page. Looking at Kraken contributors, they work for Alibaba, so it seems they host that website in China.
- faizshah 5y agoTheres a lot of good info on this on the aws-cn faq: https://www.amazonaws.cn/en/support/icp/ https://www.amazonaws.cn/en/support/icp/
- deleted 5y ago[deleted]
- sandGorgon 5y agoCan I write an entire iOS app using Javascript and compile via flutter? Is there an example - I'm not able to find one. That could be killer!
- lucas_codes 5y agoIs this a joke? It's 100 <div> tags with inline styles!
- eh9 5y agoYeah. Modern web dev. Or old web dev. Everything old is new.
- mhoad 5y agoI feel like maybe it has been a long time since people took a real serious look at Dart but you couldn’t possibly convince me to switch it out with JavaScript in most contexts let alone when trying to build a UI. I spent a year looking for a new language in the pandemic and went from Ruby to Typescript, JavaScript, Java, and even a little C# but by such a long margin Dart was my favourite.
- The_rationalist 5y agodart is just a subpar kotlin, let's not glorify it
- rlp 5y agoAny particular reason you like Dart so much? I tried it briefly, and it felt like a watered-down mashup of Java and C# with somewhat worse performance.
- refulgentis 5y agoExactly. I can't tell you how refreshing that is after 5 years on of Kotlin and Swift. One way to do everything, terse syntax that assumes memory managements, and functional. Amazing stuff.
- cutler 5y agoIn practice how is Dart functional? All I see in Flutter is classes all over the place. It's like no-one learned anything from the evolution of React and the decline of Angular.
- Zababa 5y agoMostly because it has first-class functions and that's about it. Future might be used as a monad, but I'm not sure. Currently it has no ADTs, no pattern matching, Java-like immutability, null safety seems to be a special compiler feature rather than an option type or monad. Right now it's less functional than Java, about as much as JavaScript (though in JS classes are less idiomatic so maybe it's a bit more functional in practice). Considering what people are asking to add to the language (https://github.com/dart-lang/language/blob/master/working/0546-patterns/patterns-feature-specification.md https://github.com/dart-lang/language/blob/master/working/05...), I wish people would start with a minimal functional language (Caml/SML without the modules, so functions, pattern matching and ADTs mostly) and then add things from there. It's a strong basis for a language, and people are going to ask for that stuff later anyways.
- cutler 5y agoNot to be confused with Kraken JS https://krakenjs.com https://krakenjs.com .
- exikyut 5y agoMy acid test for all things "super-modern" is to try firing them up on older devices. Y'know, to combat the old "fast enough to reach production but quadratic once it gets there" thing. Take 1: Galaxy Note 3 with Android 5 E/AndroidRuntime(25964): java.lang.RuntimeException: Unable to start activity ComponentInfo{com.example.kraken_gallery/com.example.kraken_gallery.MainActivity}: android.content.res.Resources$NotFoundException: File res/drawable-v21/launch_background.xml from drawable resource ID #0x7f040000 Hokay then. Moving on I guess? Take 2: Galaxy Note 4 with Android 6 ...Yep this is definitely running at about 19-20fps, maybe 23fps. It's not smooth. It's... responsive... I guess? But NOT smooth. I experience the same effect when in websites that have long scrollable areas inside position:fixed divs or position:absolute divs anchored to the viewport edges. Chrome seems to be able to special-case "scroll the root/body of the page" in such a way that it can run at like ~45fps on the Note 3 and pretty much the same on the '4. Random divs don't get that special-casing, and scroll rather choppily... exactly like this app. I tried a Flutter API demo a while back and experienced identical behavior. My reference case for rendering speed is the Drive PDF viewer (!), which on my Note 3 runs at easily 55-60fps and has just about the lowest latency I can recall of any app I've tried on that device. So I know the hardware can actually update very quickly... if you aren't reconstructing Mt Everest on every frame in the fast path ;) "BuT DeVeLoPeR PrOdUcTiViTy" Well, hot take: industrial/brutalist design can be a great fit for the "look" parts of apps... but not the "feel" parts. That always needs to be the result of a feat of integration engineering, for the UX to, well, feel good. All these toolkits break the "look" down into nice little manageable components... by applying isolation principles that also break down the cohesion of the "feel" as well in the process. In the name of progress. Or something.
- 5ersi 5y agoGalaxy Note 5 - released 2013 Galaxy Note 4 - released 2014 Seriously dude...
- flutterwascrap 5y ago3GB RAM, 2.7GHz quad core cpu/1.9GHzX4 + 1.3GHzX4 (oct core). This device is more powerful than my current phone.
- mindfulplay 5y agoNot sure I follow this. Flutter uses Skia as the rendering engine - albeit with a different layout engine. JS on Chromium uses Skia. If you are using JS to talk to Flutter to then talk to Skia, what's the value add? Is it the multithreaded layout engine?
- rk06 5y agoIf you write js (without kraken), you are limited to web browsers. If you are using flutter directly, then you write code in dart (which react and vue do not support). But you can target native app platforms like Mac, windows, iOS, andi etc If you use kraken, you write code in JavaScript, and can leverage react & Vue and target all flutter supported platforms like iOS, android, windows and Mac OS
- beebeepka 5y agoGuess it's time for me to finly try out kraken.
- gavinray 5y agoI think the easiest way to explain this is: "It's a frontend in JS with a rendering engine in Dart/Flutter." So in goes JS/TS code, writing the familiar frameworks you know, and what does the interpretation/rendering of that code is Flutter and Dart. This is similar to how React Native works. It consumes a dialect of React and HTML-esque elements, and the renderer turns them into native UI widgets. --- As far as "Why would I use this?" If you think that Flutter is a better platform for cross-device UI development than React Native or NativeScript, but you don't actually want to write Flutter/Dart itself. (IE you want to stay in JS-land). Or you want to build the rest of your codebase in Flutter and Dart code/use it's FFI and interop facilities. Those are a few reasons I can think of. It's good to have a choice like this available IMO, I won't complain of it.
- chgibb 5y agohttps://hydro-sdk.io/ https://hydro-sdk.io/ enables this approach as well.
- SpaghettiX 5y agoAs a Flutter developer, "Write in JavaScript, Render in Flutter" is vague. "Write Flutter apps in Javascript" would make more sense. Flutter is not a "renderer", Flutter is a framework + engine. "Kraken" literally builds widgets for you when you write Javascript code, Flutter is doing a lot more than "rendering". "Kraken" is like React Native, but instead of talking to the host platform, it uses Flutter. Flutter is already cross platform, so the only benefit here is to write in Javascript. However, you would probably inherit some costs similar to React Native: communication between a Javascript Engine/ interpreter and a AOT compiled application. This time, you don't get to use the react-native-plugin NPM packages, because you'd need kraken-flutter-plugins. The biggest concern I have is usability. How will I use popular Flutter packages, from Javascript? The "Kraken" community is very small. Even worse, the community seems purely based in China. It's very difficult to understand the health of the codebase with all these github issues written in Mandarin Chinese: https://github.com/openkraken/kraken/issues?q=is%3Aissue+is%3Aclosed+label%3Abug https://github.com/openkraken/kraken/issues?q=is%3Aissue+is%...
- Kiro 5y agoI'm confused. The first sentence on the page is "High-performance web rendering engine", which doesn't sound like "Write Flutter apps in Javascript" at all.
- SpaghettiX 5y agoExactly, the website is misleading. It's not a rendering engine in any way. That slogan already contradicts the title: "Render in flutter". Is it "rendering using Flutter" or is "rendering it itself"? The answer is you don't render with Flutter at all, Flutter uses Skia for Native (everything except web), and "Kraken" does that again, but purely because it builds a Flutter app. It also seems not to be high performance either, judging by exikyut's comment.
- jdmg94 5y agoAll flutter devs I’ve come across have the mentality that RN is still using the js async bridge to communicate with the native platform, but that’s no longer the case since 2019
- SpaghettiX 5y agoIf you build a Flutter app through Javascript, how can the AOT Dart compiler work its magic? Won't "Kraken" forever have the performance of JIT, even for production releases?