10 ms·
Valdi – A cross-platform UI framework that delivers native performance
- digianarchist 11mo ago> Valdi is a cross-platform UI framework that delivers native performance without sacrificing developer velocity. Write your UI once in declarative TypeScript, and it compiles directly to native views on iOS, Android, and macOS—no web views, no JavaScript bridges.
- justin66 11mo ago“We’ve got both kinds. Country and western!”
- jakobloekke 11mo agoFavourite Blues Brothers quote!
- joenot443 11mo agoI was at Snap during this project’s early days (Screenshop!) and spent a bit of time debugging some stuff directly with Simon. He’s a wonderful engineer and I’m thrilled to see this project out in the open. Congratulations Snap team! Well deserved.
- IgorPartola 11mo agoWould you use this framework for a project today?
- hummusFiend 11mo agoDefinitely one of the cooler projects to watch while I was there. I recall the goal was to open-source it from early on, so I'm glad to see it come to fruition!
- daveidol 11mo ago“Composer” ;)
- stuckinaloop 11mo agoSame! I've worked with Simon on this and tried (and failed) to port it to web. Truly a smart guy - and congratulations to the rest of the team!
- xmprt 11mo agoI'm surprised Snap of all companies invested in a cross-platform UI framework given how simple their app seems in comparison to more complex ones out there. And more importantly, Snapchat seems like an app which could highly benefit from tight integration with native features (eg. camera, AR features, notifications, screenshot detection, etc.)
- ingenieros 11mo agoPerhaps for the same reason we got Airbnb of all companies to create Lottie. https://lottie.airbnb.tech/#/ https://lottie.airbnb.tech/#/ These companies have super talented engineers and can afford to invest in skunkworks projects like these when they can’t find any suitable options in the market.
- pols45 11mo agoMore like "super talented engineers" will keep increasing cost of such projects until they get told this stuff doesn't generate revenue/cost cutting is happening, so work more on ad tech, leave or find external free labor("community") to maintain it.
- ramraj07 11mo agoAs far as Im concerned, Snapchat is onw of the most complicated apps thats routinely used by hundreds of millions of people. You yourself listed all the features they have. And every one of them is pixel perfect, with insane amounts of time spent perfecting the user experience of every single ome of those features. In fact, the success of Snap could be attributed to how pixel perfect the app is. And then you call it simple?
- Alifatisk 11mo agoI share your opinion, but I think of the comment above like this. If something thinks your ui "just makes sense" and is dead simple to use, then you know you've perfected it. That is the best compliment you can get.
- 11mo ago
- mholm 11mo agoI’m not sure I trust snap of all companies to make a good cross platform framework after how terrible their android app has been.
- buffet_overflow 11mo agoI think it’s been changed since, but wow was it weird finding out that instead of taking photos, the Android app used to essentially take a screenshot of the camera view.
- kridsdale1 11mo agoI worked on the camera in Instagram iOS for a while. There at least, there could be a 5,000ms latency delta between the “screen preview” and the actual full quality image asset from the camera DSP in the SOC. I don’t know a thing about Android camera SDK but I can easily see how this choice was the right balance for performance and quality at the time on old hardware (I’m thinking 2013 or so). Users didn’t want the full quality at all, they’d never zoom. Zero latency would be far more important for fueling the viral flywheel.
- cosmic_cheese 11mo agoThings have improved since then, but as I understand it, the technical reason behind that is that it used to be that only the camera viewfinder API was universal between devices. Every manufacturer implemented their cameras differently, and so developers had to write per-model camera handling to take high quality photos and video.
- IgorPartola 11mo agoThis looks promising. I would love to see more examples of what this can do along with screenshots. As is, there is a single Hello World and the components library is “coming soon”. But if it can deliver what it promises that would be pretty cool. React Native is I think the main popular framework in this space.
- yieldcrv 11mo agoSo this is like all those other frameworks that compile to native components, except this one is natively Typescript? I’ll take it
- internetter 11mo agoI think? there isn't a typescript runtime? just a build time? I'm not positive how business logic gets executed but: > it compiles directly to native views
- rFlex 11mo agoOne of the Valdi's authors here. It's using native views under the hood, like React Native, and there are 3 modes of compilation/execution for the TS source. It can be interpreted from JS (TS compiled to minified JS source), interpreted from JS bytecode (TS compiled to JS source, minified, then compiled to JS bytecode ahead of time), or compiled to native code directly (TS compiled to C ahead of time).
- mappu 11mo agoAn AOT TS -> C compiler is fantastic - how much of the language is supported, what are the limitations on TS support? I assume highly dynamic stuff and eval is out-of-scope?
- rFlex 11mo agoMost of the TS language is supported, things that are not can be considered bugs that we need to fix. Eval is supported but it won't be able to capture variables outside of the eval string itself. We took a reverse approach than most other TS to native compiler projects: we wanted the compiler to be as compatible with JS as possible, at the expense of reducing performance initially, to make it possible to adopt the native compiler incrementally at scale. There are significant trade-offs with this compiler at the moment: it uses much more binary size than minified JS or JS bytecode, and performance improvements goes from 2x to sometimes zero. It's a work-in-progress, it's pretty far along in what it supports, but its value-proposition is not yet where it needs to be.
- maxdo 11mo agoNot to troll , Do you need such shims in the era of llm ?
- internetter 11mo agoYes? Dear lord I want determinism
- prmoustache 11mo agoby llm you surely mean tech debt generators right?
- Y-bar 11mo agoNot every user interface need to become a LLM chat app.
- sans_souse 11mo agoSo now I can finally implement the most god-awful, ugly, cumbersome and unintuitive GUI methodology ever to face a large population of users into my own apps? This abomination that started the whole user-experience decline by making this kind of yuck the gold standard for apps today is finally open source? Color me yellow.
- Neywiny 11mo agoI hope it has "load spam ads directly into the list the user was about to touch somehow the millisecond before they touch it using magical force field technology so they click the wrong thing every time" functionality. I've been missing that in my apps
- sans_souse 11mo agoNow offering 4 swipe directions!
- sgc 11mo agoWith instant, subpixel precision!
- hippo22 11mo agoGod forbid someone try something different. The app isn’t really made for people that only know how to doom scroll.
- ramraj07 11mo agoSnap is the greatest innovator of user experiences in this generation. This is evidenced by the fact that literally every other social media app is just a hodgepodge copycat of sorts of what snap invented. For people who introduced themselves to tech with snap as one of their first apps, its the most intuitive thing ever. When they first introduced video calls, schools had to close for a day. Imagine then you come here and see someone calls it awful. Can't help but think its just an instance of "old man yelling at clouds".
- instagary 11mo agoI wish the native iOS part was written in Swift rather than Objective-C like RN.
- samtheprogram 11mo agoWhy though? You aren’t interacting with it. What difference does it make?
- adastra22 11mo agoHow are you not interacting with it? It’s a UI library, no?
- littlecranky67 11mo agoYou are using the components, not interacting with that 3rd party code. Unless you are debugging/contributing back
- Julien_r2 11mo agoIf the framework is used, eventually there will be 3rd party lib adding new features (from the top of my mind, maps), and someone will need to write the bridging with the native SDK. It means the bridge will most likely need to be written in objective-C instead of Swift
- bearjaws 11mo agoWorking at a company that uses react-native I wish nothing more than for the end of app stores and differing platform languages. We're heavily considering just having a website next year with a mobile app using webview, and then native code for the native notifications, GPS and healthkit / health connect. I feel like AI is changing the equation, its nearly better to write your business UI 3 times one for each platform.
- FlamingMoe 11mo agoWholeheartedly agree.
- DecoPerson 11mo agoI did this and never looked back. It’s called a “WebView app” and you can get a really good experience on all platforms using them. Just: - don’t make any crazy decisions on your fundamental UI components, like breadcrumbs, select dropdowns, etc - add a few platform-specific specialisations to those same components, to make them feel a bit more familiar, such as button styling, or using a self-simplifying back-stack on Android - test to make sure your webview matches the native browser’s behaviour where it matters. For example, sliding up the view when the keyboard is opened on mobile, navigating back & forth with edge-swipes on iOS, etc I also went the extra step and got service workers working, for a basic offline experience, and added a native auto network diagnostic tool that runs on app startup and checks “Can reach local network” “Can reach internet (1.1.1.1)” “Can resolve our app’s domain” etc etc, so users can share where it failed to get quicker support. But this is an app for small-to-medium businesses, not consumer-facing, and the HTML5 part is served from the server and cached. I haven’t thought much about what you might need to do additionally for a consumer app, or a local-first app.
- arcanemachiner 11mo agoI made a (hobby) project that utilized this strategy (Flutter + wrapped webview app), and it honestly seems like the way to go for my needs.
- sebmellen 11mo ago
- sreekanth850 11mo agoNot related to this, but abandoning Key DB was the worst thing they could do.
- topherPedersen 11mo agoThis is so cool! I'm a React-Native developer, and I'm glad to see more options like this coming into existence.
- topherPedersen 11mo agoRename it Snapp
- skeptrune 11mo agoIts hard to imagine not going fully native in the modern day with coding agents. Most of the code can just be clanked out.
- ramraj07 11mo agoIf your entire company is all about making a single good app, I doubt having AI changes the architecture much. Its still an architectural decision of whether you're going to have a single codebase for your app and focus on a framework to transpile it. Either way you need actual teams of experts on iOS android etc, no single person is going to master all of them.
- bigstrat2003 11mo agoYeah, with coding agents you can turn out a buggy mess 10 times as fast!
- maxloh 11mo agoIf you are curious how components' state is handled, they employed the React class components method: // Import the StatefulComponent import { StatefulComponent } from 'valdi_core/src/Component'; // ViewModel + State interfaces for component export interface TimerViewModel { loop: number } interface TimerState { elapsed: number } // Component class export class Timer extends StatefulComponent<TimerViewModel, TimerState> { // Initialize the state state = { elapsed: 0 }; // When creating the component, start a periodic logic private interval?: number; // Initialize the setInterval that will update state once a second incrementing // the `elapsed` state value. onCreate() { this.interval = setInterval(() => { // Increment the state to trigger a re-render periodically const elapsed = this.state.elapsed; const loop = this.viewModel.loop; this.setState({ elapsed: (elapsed + 1) % loop }); }, 1000); } // When component is removed, make sure to cleanup interval logic onDestroy() { if (this.interval) clearInterval(this.interval); } // Render visuals will depend both on the state and the view model onRender() { <view padding={30} backgroundColor='lightblue'> <label value={`Time Elapsed: ${this.state.elapsed} seconds`} />; <label value={`Time Looping every: ${this.viewModel.loop} seconds`} />; </view>; } } https://github.com/Snapchat/Valdi/blob/main/docs/docs/core-states.md#state https://github.com/Snapchat/Valdi/blob/main/docs/docs/core-s...
- Liquidor 11mo agoI miss the React class components. No need for 30 different and error prone useFunctions
- simianwords 11mo agoI often wonder how the economics are justified in making in house frameworks. What is it about Snapchat that requires a new framework but not other apps?
- barnabee 11mo agoGiven the user hostility of Google and Apple (and the rest) and the rate at which they emulate competitors and try to crush them, I’d start at a small library or framework and not stop until I had a whole OS.
- austin-cheney 11mo agoAs opposed to what? As opposed to not using a framework or using some other framework? Using frameworks is expensive by orders of magnitude. It’s additional code which greatly increases tech debt and slows the execution time of the given product pretty significantly. Think about it like this: a business with high confidence developers can ship a new SPA in a tenth of the time just using vanilla JavaScript that fully renders to screen with complete state restoration across the internet in less than a quarter second. That also means the business saves boat loads of cash by shipping faster, experimenting against its user’s behavior, and needing only a quarter of the headcount. So, where do you find these people and how do you retain them? The economics are pretty simple and completely offensive/hostile to the developers. It’s ultimately about hiring and firing. Developers are a cost center to the business so the goal is to always eliminate training and turn them into a replaceable commodity. That’s it. That developers believe this is somehow a great empowerment is a double win for the employer. The reason a company might introduce a new framework is because they encounter a problem not immediately solved by existing frameworks. The more frequently that same problem occurs the more a new framework pays for itself.
- jeremyjh 11mo agoSo developing a project with a framework takes 100x longer than using "vanilla javascript"? That is not my experience.
- 11mo ago
- GaryBluto 11mo agoI cannot possibly think of something I would want to use less. A Snapchat-developed UI framework where communication is done via Discord sounds like something carefully designed to repulse me.
- noitpmeder 11mo agoTons of software projects have moved their communities to discord. Not saying it's a great thing, but you're self selecting out of the future.
- GaryBluto 11mo agoIf the future is unable to think critically, I'll stay in the past.
- nomdep 11mo agoWhat would you use instead?
- GaryBluto 11mo agoSelf-hosted forums, github's built-in forums, IRC; Practically anything but Discord.
- antonvs 11mo agoHaving never used Discord myself, please convince me that I should never bother. I.e. what’s so bad about it?
- nicce 11mo agoThink it as software which is designed for chatting NOW. Threads, pins and whatever are just treating the symptoms instead of fixing the actual problem, where you need organised and searchable knowledge library instead of platform which was designed for interaction with memes.
- FridgeSeal 11mo agoAh yes, Snapchat, an app famous for its high performance, efficient apps, which definitely never made your phone hot and drained your battery. Seriously, if there’s an app that sticks in my head for being noticeably laggy, you couldn’t pick a better example than Snapchat.
- hulitu 11mo ago> Valdi – A cross-platform UI framework I presume this is a Text UI. How does it compares with ncurses and termcap ? /s
- a2800276 11mo agoUnfortunately no Linux, Windows or even HTML targets?
- JaggerJo 11mo agoJust write 2 native UIs in the 2 platform native languages and share a common core written in any language that offers a C like FFI. How hard could it be?
- imiric 11mo agoI agree, this is the way. To be clear: I'm not a mobile developer, and have only dabbled with it over the years, but I'm generally familiar with the stacks. If you want to simplify development of a cross-platform app, your work should start by architecting the software in a way that the core business logic is agnostic to the user interfaces. Then your web, mobile, and desktop GUIs, CLI, TUI, API, and any other way a user interacts with your program are simply thin abstractions that call your core components. The complexity of each UI will inevitably vary, and it might not be possible to offer a consistent experience across platforms or to leverage unique features of each platform without making your core a tangled mess, so this is certainly not "easy" to do in practice, but this approach should avoid the bulk of the work of targetting individual platforms than if you had done it any other way. It should also avoid depending on a 3rd-party framework that may or may not exist a few years down the line.
- JaggerJo 11mo agoAgreed. One extra clarification: If the quality of your app is business critical you should really use the native UI toolkit to offer the best platform integration and user experience. If your app is not business critical (you just have to offer it - example: dishwasher app, ..) you might get away with using a cross platform toolkit like flutter or react native. But even then this adds a 3rd party dependency as you mentioned which adds risk. Writing an App in Swift on iOS is boring. The same thing is true for writing an Android app using Kotlin/Java. This is a good thing. Now your developers can concentrate on shipping great features.
- pedalpete 11mo agoThis is the direction we are going, but at the moment we are doing iOS only, but with the plan of learning the users UX needs in iOS before investing in Android, which is a bit strange because most of our team are on Android, but our users are on iOS. Every time I see a new project like Valdi, I am hoping for something that is truly magical and cross platform, but I'm always steered away by comments like yours and people saying "you have to do native". For context, I am a dev, and I've done RN apps in the past.
- potato-peeler 11mo agoWhat does using native view mean? Do they invoke native ui controls instead of drawing their own? Seems similar to boden - https://www.boden.io/ https://www.boden.io/
- pzo 11mo agoLooks in concept very similar to React Native. So now we have React Native, Lynx.js (ByteDance/Tiktok) and Valdi all based on React. I think competition is good for devs. But not sure if any of those will create ecosystem and community big enough and fast enough to React Native. React Native grew a lot this year and a lot of things got or will be improved and copied from Lynx or Valid: - 3 modes of compilation (AOT, JIT) from Valdi will be in static hermes (RN) in coming months. - native binding generation -> RN already have such official generator and also nitro/nitrogen, they also working on Node-API - executing animation and JS code in different thread (Lynx.js) -> worklet library in RN from swmansion - tailwindcss support (Lynx) -> uniwind in RN land. I think Lynx.js maybe have better shot at React Native since they want to support other frameworks instead of only React.
- pzo 11mo agoafter small digging they have Full VSCode debugging [0] which is nice. RN have Radon IDE but it's a paid sub. What's interesting Valdi using Hermes (the one from RN) so maybe there is a way to retrofit this to work for RN. Wondering if they did AOT and JIT by themselve or they using static hermes branch or using only hermes in dev mode. [0] https://github.com/Snapchat/Valdi/blob/main/docs/docs/workflow-hermes-debugger.md https://github.com/Snapchat/Valdi/blob/main/docs/docs/workfl...
- xngbuilds 11mo agoIs there an AI agent that excels that translating UI codes between SwiftUI, Jetpack Compose and web?
- deleted 11mo ago[deleted]
- sheepscreek 11mo agoI looked at the source code (as an amateur application developer) and boy, is it over-engineered and complex! Then I remember having built a complex Cordova app more than a decade ago, where I had to make C++, JNI and Javascript interop all play nice and this project feels a lot like that. Lots of moving parts. I suppose this is just the way things are when you are targetting such different ecosystems as Android and iOS _natively_, at the lowest level. As a solo-dev, I realize well that this project isn't for me. This could be a great tool for experienced folks who know what they are doing. I will stick to Tauri and React Native, it does 80% of what I care about with 20% of the effort. Or until someone builds a nice wrapper around this to make it easy to use (and also add targets for x86_64/aarch64 builds).
- 0manrho 11mo agoThis is a persistent and pervasive problem that I have with nearly any of BigTech's framework/tooling flavor-of-the-month. Not only are they often overengineered (at least, for the vast majority of people's usecases), but adopting them means you're adopting a consistently moving target who's priorities are chasing whatever trend BigTech has convinced itself is The Next Big Thing(TM) - often reinventing the wheel yet again in the process - whether you're on board or not. Not to mention possibly getting caught up in change-of-licensing issues (eg Terraform switching to BSL/BUSL) or cult-of-personality drama by the maintainers (Wordpress) There is a place for these frameworks, even beyond their use in the house they were built at and for, but for the vast majority of usecases, they're not merely overcomplicated, but continually changing in their complexity to boot.
- hippo22 11mo agoAs an amateur, how can you tell that's it's overly complex? Do you understand what you're even looking at? Or do you feel that you should be able to understand it and anything above your ability to understand is "over engineered?" This seems like the Dunning-Kruger effect more than anything else.
- hu3 11mo agoA rule of thumb I like to use for measuring complecity for interactive visual stuff is to count how many layers there are between an action and the reaction. For example, when a user clicks a button, how many calls and moving pieces are involved between the click and something happening on the screen as a reaction to that click. Often it's a good indicator of how deep the rabbit hole goes.
- isaachinman 11mo agoI've worked and researched heavily in this field. If you want to write one codebase that hits all platforms with _actual native performance_ your only option at the moment is RN/Expo.
- wvlia5 11mo agoFlutter performs better than RN in my experience (mobile)
- isaachinman 11mo agoAnd how up-to-date is that experience? Have you deployed Flutter to web?
- wvlia5 11mo agoHaven't tried web. On mobile, it produces great results.
- isaachinman 11mo agoYeah. Try it on web.
- VerifiedReports 11mo ago"A C++, Objective-C or Kotlin object or function exposed to TypeScript is called a Native Reference within the runtime. A TypeScript function exposed to C++, Objective-C or Kotlin is called a JS Value Reference." Concerning that there's no mention of Swift there. Or SwiftUI.
- easeout 11mo agoNative performance doesn't earn that much user goodwill without native layout and behavior. You can't make a single design for many platforms and please everyone who chose each platform for what it is. Unless perhaps you are Snap and having a _unique_ UI is part of the appeal for your young-leaning audience.
- kbody 11mo agoI imagine unpopular opinion, but I don't like the React design or syntax, its adoption was one of the reasons it made me move away from front-end. I'd rather Valdi and other efforts have a different opinionated design and syntax, less over-engineering and more fun.
- toiladoong 11mo ago[dead]
- michaell22 11mo agoI built an app in capacitor react which usea webview. It's called Snap Tap Relax its on android and app store. I think it is good for webview. Mind letting me know what you think? Is it slow or good? Notice that it's not native?
- Kailhus 11mo agoChecked it out out of curiosity and it feels very much close to native
- vmsp 11mo agoSnapchat also maintains Djinni, used to generate type-safe bindings for C++ code. With Valdi, it seems like they chose to go another route. https://github.com/Snapchat/djinni https://github.com/Snapchat/djinni