SwiftWebUI
alwaysrightinstitute.com
alwaysrightinstitute.com
It has excited me and invigorated my creativity in a way that I had not felt since Microsoft's WPF/XAML, but unlike WPF+XAML you don't have to work in 2 different languages for the logic versus the declarative UI, and unlike Microsoft I don't have to worry about it being museum'ed and forgotten after a couple short years.
See "What's New in Swift 5.1" [0] around 31:15 where they show an example of how you might use full-featured Swift to output HTML. You can immediately tell that it's a hint of something huge and possibly disruptive to come.
SwiftUI and its live previews and device-agnosticism are already insanely powerful. There's no reason why that tech shouldn't be applied to web dev as well, and hopefully even ported to Windows/Linux/Android to output their native GUIs.
I would be surprised if Apple isn't working on SwiftUI for web themselves. They have web versions of all of their major apps already – Photos, Numbers, Keynote, etc. I'm sure they'd prefer to not have a completely separate implementation for those. SwiftUI currently supports all the platforms those apps... except the web.
Also it makes a ton of sense to have an Apple-supported way of writing web backends in Swift... after all, they have a lot of those too.
I don't know if they'd support Windows and Linux because they could just support web instead and that would be good enough. Maybe Android is worth it though? The main reason is I'd imagine they might want to unify the codebase of Apple Music and Apple TV apps, but I'm sure they'd worry about bringing too many good apps to their competitor's OSes. That's probably too scary so they'll probably prefer to just build two apps like they already do.
Also, this reminds me, is there any way to listen to Apple Music or watch Apple TV on Windows, Linux, or Chrome OS? I don't think so. I'd have to imagine that's in the works.
There are also plans to bring the Apple TV app to Smart TV platforms as well, so a similar framework may be on the way for TV too.
(If they get there first, this has a side benefit of preventing Windows, Linux and Chrome OS from doing the same thing as easily.)
But seriously: app store revenue is a rounding error. It's more likely that Apple perceives web apps as a threat to their bottom line the same way they view ripped MP3s as a threat to their iTunes revenue.
“Apple’s apps economy: Bigger than Hollywood”
https://fortune.com/2015/01/22/apples-apps-economy-bigger-th...
$14b (app store napkin estimate), out of $265b (2018), is ~5%.
So, your "rounding error" is in reality 17.5% of Apple's entire revenue. It's "only" twice bigger than the entire Mac portion of Apple's business which is $25 billion [3]
[1] https://www.cultofmac.com/601492/app-store-google-play-reven...
[2] https://www.statista.com/statistics/265125/total-net-sales-o...
This technique has been here for a while with Kotlin and its kotlinx.html library: https://github.com/Kotlin/kotlinx.html#dom
I used it recently on a small project (server-side on the JVM) and might use it the client-side as well (compiled to JS) – you can implement adapters to integrate with your JS framework of choice.
Java definitely can't (reasonably, sensibly, practically) do that. GWT seems to be using XML from what I can tell: http://www.gwtproject.org/doc/latest/polymer-tutorial/widget...
1. Separate stacks, native widgets
2. Shared stack, native widgets
3. Separate stacks, custom widgets
4. Shared stack, custom widgets
React Native uses methods 1 and 2. They have unified components that can be used across platforms, but they lack features, so most complex apps use the second approach. The big wins are a more known language (JS) and sharing a bunch of the "backend of the frontend".
The big downside happens when you add more systems (eg, web, OSX, Windows, Linux, etc). When you do this, the intersection shrinks and the potential for bugs in the shared widget increase dramatically.
Flutter uses methods 3 and 4. Rather than using the native widgets, they carry along Skia to do the rendering for them. This neatly skips most of the UI intersection issues because if the native widget for X lacks a certain feature, you can add it yourself in your custom widget. When dramatically different looks are desired, you can still use separate widgets for different systems. Adding additional systems is usually less difficult because rather than writing hooks into everything on the system, you only need more basic system hooks and the effort to get the renderer working.
The big downside here is development time and little inconsistencies. Instead of leveraging the work already done by the native developers (who probably know their system much better than the library's devs), everything must be built from scratch. Getting 90% there is easy, but getting every little detail working so it feels native is much harder. In addition, you must keep up with native widget changes which generally adds a lag time between their release and your catchup (but on the plus side, you may have already implemented some features they were missing). It should also be added that some UI features may not be available on some platforms (despite the shared widget) simply because the underlying OS does not support them, so multiple components may still be necessary for some things.
Both approaches have been tried in the past. Qt is probably the most successful at cross-platform design and they use the 3rd and 4th methods. I'm inclined to think its a better solution in the end even if it is more costly.
There are so few times when one should want to use a plain button in iOS anyway. Most times when a user needs to make a choice or start a task, they pick it from a UITableView, UIAlertController presented as an action sheet, or press a UINavigationItem.
> often rewrite UI elements because the builtins are not very flexible (hello UITabBar)
What's specifically missing here? You have items, each has an icon and text, they can also have badges. Tapping on items changes the currently shown content view. What's a tab bar supposed to do besides that?
A lot of the times I see these sorts of basic UI paradigms recreated, or the typical iOS HIG ignored by recreating an Android-style UI, the app can sometimes break when iOS has a major (or even minor) update or ignore accessibility guidelines. They're usually not significantly different in function, usually just aesthetics, and not usually sufficiently so to justify the cost.
Almost every first-party app starts with a "Data & Privacy"/"What's New" dialog that uses a blue pill button, and almost every third-party app has a big fat "log in" button. Or look at Apple's redesigned Maps app. I don't know if I've ever worked on an app that didn't have its own ad-hoc button class.
> What's a tab bar supposed to do besides that?
Facebook, Instagram, Tweetbot etc. seem to have their own implementations because they want to hide the labels. Spotify has one to animate the icons when tapped. Audible has one to show the album art in the middle item. I'm going through my third-party apps right now, and only WhatsApp seems to use UITabBar as it was intended.
> the app can sometimes break when iOS has a major (or even minor) update
So did UITabBar earlier this year: https://stackoverflow.com/q/53084806
I nudge my clients towards stock UIKit components as much as possible, for all the reasons you mentioned, but I don't think UIKit is that much better than e.g. Flutter in the way that AppKit is many times better than Electron.
All one has to do, to hide the labels, is set the labels to "" and adjust the image insets to account for the empty space.
> Audible has one to show the album art in the middle item
That's possible with stock UITabBar. Just set the appropriate image for the UITabBarItem and, again, adjust the image insets.
> and only WhatsApp seems to use UITabBar as it was intended
That's surprising. I don't use WhatsApp anymore, but most of it seemed custom. Well, that scores WA one point, I guess.
> I don't think UIKit is that much better than e.g. Flutter in the way that AppKit is many times better than Electron
Until you want to use iOS' built-in accessibility features, and you are disappointed to see that third party apps needlessly reimplemented widgets and didn't do the extra work to make them accessible.
Sadly, accessibility is always seen as an optional extra, not a fundamental feature. It's been a fundamental feature of AppKit and UIKit since time immemorial.
When some of these apps make it to macOS via Project Catalyst, this issue might become exacerbated to some extent.
You are right about the Audible use case, it might actually be using using a stock UITabBar. And in my experience WhatsApp has always been a pretty good platform citizen. It's one the very few icons on my home screen that tries to match Apple's style.
Agreed about a11y, I'm glad that Apple keeps bringing it up as a core feature.
I wouldn't necessarily get my hopes up.
I still harbor frustrations from the indecisive flip-flopping that occurred in the Windows ecosystem from Vista -> 7 -> 8 -> 10. It's still not easy to tell at a glance what Microsoft's primary APIs/frameworks currently are, what they're supposed to be called, or what their long term strategy is (besides masquerading as the new champion of open-source), and that doesn't inspire confidence.
One thing I'll credit Microsoft over Apple though, is the quality of their documentation.
I could still make an application with MFC, if I felt particularly masochistic. Carbon on the other hand…
Or the "Metro" versus "Classic Desktop" duality, where you had two versions of each builtin app. Some documents/links inexplicably opened in one version and other things in the other. Some dialogs used the classic UI while others used Metro. Some system preferences used the new fullscreen UI subsystem while others opened in the legacy Windows 95'ish panels..and they linked to each other! (like desktop resolution/monitor settings.)
I recall an instance where I could not copy/paste a password for a VPN service, because the password field appeared in a Metro-based sidebar overlay on the "classic" desktop, that collapsed itself when I clicked on a classic window.... Of course Metro was thankfully disowned by subsequent Windows releases as well, but it's still a cautionary tale of Microsoft's indecisiveness and Lovecraftian UI horrors.
Or earlier situations like when they cannibalized DirectInput in favor of the dumbed-down XInput API, dropping advanced features for force-feedback joysticks.
Or when you could not get great DirectX performance or access all of its features from within .NET for quite a while.
WPF was not used by Microsoft themselves in their own products as much as its adopters hoped, either.
Whereas on the other side of the fence, Apple has already been using Swift in quite a few user-facing areas of their products, and their latest graphics tech was fully usable from their latest language since Day 1.
While C++ is the language to go for device drivers and Metal shaders.
So there are still a couple of Swift free zones as of today.
I can list similar stuff being left behing by Apple, or even link that Java ONE video with Steve Job talking about Java going to be Mac OS X "Swift".
This at least should receive some improvement in the form of the new Swift-based Accelerate APIs:
The WinUI team started to publish publicly about their roadmap, you can see some information here: https://github.com/microsoft/microsoft-ui-xaml/blob/master/d...
So, I'm not a windows developer and I'm not familiar with their APIs and technologies, but they seem describe a clear strategy for "WinUI 3.0" as far as I can tell.
https://developer.apple.com/videos/play/wwdc2019/722/ (Introducing Combine)
https://developer.apple.com/videos/play/wwdc2019/721/ (Combine in Practice)
Whether you have any business in the Apple ecosystem or not, I think you'll agree they made some good moves on several fronts this year.
And as is the case with most Apple announcements, there's a lot of comments here saying that they weren't the first, about how SwiftUI is actually based on something we unearthed from the Mesozoic. Well of course, but very few are actually comparing these similar technologies. I personally prefer SwiftUI+Combine's way of doing X, even if it's clearly not the first tech to do X.
For example, at first glance, Dart+Flutter code seems full of clutter, whereas SwiftUI's
Thing {
ForEach(model) { data in
Child(from: data)
}
}
.modifier(y)
.animator(z)
feels a lot more readable, although I think I dislike the $binding syntax, and the gradual creep of other stuff that looks like "magic" until you look it up. I guess they had to trade the semicolons for something.I am extremely curious whether Combine will turn out to be a good move for the ecosystem. It's not like competent Swift developers grow on trees right now, and having to grok reactive programming seems like yet another barrier to entry.
Due to all the overlapping transitions, iOS developers soon need to know some Objective-C (and by extension C), Swift, UIKit, SwiftUI, XIBs/storyboards/classic MVC, Combine, the pointless code signing mess, and some web technologies for hybrid screens. I wouldn't be surprised if that's when Apple loses the mobile toolkit wars just like they've already lost on the desktop.
The difference with MS is that they at least somewhat acknowledge mistakes and announce shifts. Apple silently edits history and points to the next shiny.
How so?
Even better as far as I can tell, WPF, WinForms, and WinUI are open source since 2018: https://www.hanselman.com/blog/AnnouncingWPFWinFormsAndWinUI...
Repositories:
- WPF: https://github.com/dotnet/wpf
- WinForms: https://github.com/dotnet/winformsblog-scottha
- WinUI: https://github.com/Microsoft/microsoft-ui-xaml
Now, I'm not familiar with those technologies, and don't use them, so I may be missing some things.
Not trying to sound facetious, but does WPF need any other significant work? It's a UI framework for Windows desktop apps (narrow and specific scope), it's stable and "just works", it's well-documented, it's officially supported, etc. Does there need to be anything else, or are we looking at it from the POV of more "modern" UI frameworks, where no active churn == languishing on the wayside?
SwiftUI is an internal DSL implemented in Swift and thus allowing the full power of Swift’s rich type system to tag along.
See https://martinfowler.com/books/dsl.html for more discourse on the difference between internal and external DSLs.
In fact, "TSX" is an official built-in part of TypeScript.
Edit: I forgot, they were one of the first YC companies. Looks like the parent company got acquired by Motorola and somewhat shutdown their 280slides/Atlas projects. One founder also later started RunKit which was bought by Stripe. https://en.wikipedia.org/wiki/280_North,_Inc.
Ugly: it looks like a bad imitation of the appearance of Mac OS X from a mixture of 2002 and 2007, regardless of the fact that I’m on Windows in 2019; and due to pervasive use of 1× raster images instead of vector graphics, gradients, &c. is even more ugly on a high-DPI display. (This use of raster images without complete preload causes rendering issues when a control state is achieved for the first time, too, just like the rollover effects of the era, long since obsolete.)
Unusable: it implements scrolling from scratch, which I have never seen work well, or even almost well—it’s just something that you should never under any circumstances do; in this case, I can only get their demos to scroll at about 1% of normal speed on my Surface Book’s touchpad, and touch-based scrolling doesn’t work at all.
It tried to be Cocoa on a platform that is not Cocoa at all, with what was even a mediocre implementation a decade ago, let alone now. (I remember being excited about it when it was first announced, until I actually tried using it.)
Also: it would be really nice if SwiftWebUI used actual HTML elements rather than styled divs.
SwiftUI is basically React implemented in Apple's proprietary language rather than a preprocessed JavaScript-XML hybrid [1]. More options is a good thing, but it hardly seems revolutionary.
[1] This works much better than it sounds like. I'm a long-term C/C++/Obj-C programmer and was very sceptical of JSX, but React is actually very nice to use. The toolchain is kind of byzantine but seems to be settling slowly on reasonable defaults.
This is completely false. Not one shred of truth in it. The similarities between React and SwiftUI end at both being component-based UI libraries, just like plenty of others (Cocoa, Vue, Ember, Ext JS, Svelte, Qt, do I need to go on?—some of which provide various components out of the box, others of which don’t). Beyond that, they work in radically different ways and the way you will achieve things is radically different too. Just look at the avocado toast example and see how true this is.
AFAICT the way SwiftUI works is basically the same as React.
The way all of these frameworks differ from each other is both very slight in superficial details (think two-way binding or slots) and very, very strong in the basic implementation (i.e. the diffing or reconciliation algorithm).
So, yes, a lot of these look similar these days. But saying that they work the same is oversimplification in my opinion.
While it is heavily funded and used by Apple, I would never call it "proprietary". It's open source.
By that definition, C#, Go, Java are all proprietary.
https://github.com/ClojureTO/JS-Workshop
https://www.freecodecamp.org/news/a-realworld-comparison-of-...
Sounds like Phoenix LiveView, and IMO it’s a very good approach. We need more things like it.
This is a really neat adaptation of the SwiftUI API to the web but it seems like the guts of it needs to run in the browser to be practical.
Perhaps we'll eventually see the Swift compiler support a WASM target?
[edit] Like Qt is doing? https://doc.qt.io/qt-5/wasm.html
Is there a way to join this institute? I would love to have this on my CV and professional profile.
SwiftWebUI currently seems to rely on normal rendering:
> SwiftWebUI tries to replicate common SwiftUI layouts, but doesn’t fully succeed yet. After all it has to deal with the layout system the browser provides. Help wanted, flexbox experts welcome!
Does this mean that Flutter on the web is really Flutter on Chrome? Or does is support other web browsers well?