This content originally appeared on Level Up Coding - Medium and was authored by Attila Vágó
I have been scolded by the internet. By amazing, passionate tech enthusiasts and software engineering professionals. I made the “capital mistake” of omitting something that is inarguably at the very core of my latest software development mistress — Flutter’s — identity. I have been “accused” of forgetting to mention Skia, the graphics engine that makes Google’s new framework the cool new kid on the app development block.
Except it was neither forgetfulness or ignorance that led me to conveniently gloss over Skia in my last Flutter article. I had a few genuine reasons for doing so, and in this one I shall attempt to unpack those, one by one, and hopefully give you a more in-depth, and real-word view on Skia, at least from my perspective. I think it’s important for designers and developers to understand the drawbacks and benefits of this engine and translate the technical jargon to something useful and actionable.
I also think that now, after about a year’s worth of independent Flutter development, it is high time and absolutely worth having a more detailed conversation about Skia. I shall try of course to stay impartial and true to my mission of being objective.
I am quite certain, that by now anyone who has built at least a website or a native app has had their fair share of frustrations either with the browser or the operating system. Some suffer in silence, others take to StackOverflow, while those like me, throw rubber ducks at the wall, try and figure things out, then blog about their findings and maybe, just maybe, shed some additional light on whether Google’s new rendering engine results or not in truly cross-platform UIs.
Is it really Skia that makes Flutter cool?
Absolutely not. If we have learned anything from the likes of Apple, Guinness and Nike, is that a good ad is rarely or ever about specs and technical jargon, even if that’s a UI framework. The first and biggest selling-point of Flutter was, is and will remain its unparalleled developer experience and shallow learning-curve. When I first sat behind the wheel of a Mustang, I couldn’t care less about the size of its engine and the circumference of its pistons. It was all about how that car made me feel and the sweet-sweet purring sound it made as I turned the key in the ignition. Surely, the engine delivers that, but ultimately it comes down to experience. My great developer experience and the buttery-smooth UX in the released app.
All of the above of course doesn’t take away from Skia’s tremendous value, but it’s by no means the cool-factor of the framework. In fact, at first look, some might even find it off-putting, so it sort of makes sense that Google’s marketing of Flutter doesn’t have Skia left, right and center. And understandably so. Starting the sell of a new cross-platform framework with “it’s a Canvas powered by OpenGL” would be almost as irresponsible as selling a hypothetical new generation Porsche’s engine with “it’s a hydrogen balloon, powered by a spark plug and a tank of nitrous oxide” as the opening line. Doesn’t instil a lot of confidence and the first image that comes to my mind is the Hindenburg crash, not speed or anything amazing! Tell app developers, especially web developers, that they’re going to build apps in Canvas and the first thing that flashes into their mind is … guess what? Pun intended — Flash!
So, how robust is Flutter’s Skia approach?
Right after the first 15 minutes of raving Flutter enthusiasm, and uncontrolled flood of tweets about your new discovery, I think it’s very important to take a step back and ask the honest question, whether this — a Canvas app powered by OpenGL — is in fact a good idea or not, whether that’s for you, your organisation, or in general. I am not encouraging anyone to be a skeptic, but those of us who built “cross-platform” apps in the past know already how the promises and the sales-pitch are often way beyond the true capabilities and features of the framework. Overselling technologies is unfortunately a trend in tech, so digging a little deeper is always worth the effort, especially if you’re trying to make money with your application.
Updates. A risk, or not?
One of the first considerations when choosing the right framework in cross-platform app development is not only how cross-platform it really is, but whether OS updates will break or not the app. Low or negligible need for maintenance over the life of the app can be a huge selling point, as every non-business-logic related update is $$$ cost a company would ideally want to spend on new features instead. It also makes it a much safer bet in the long run, because there is a much lesser risk in having to suddenly shift to a new framework, or even go native.
As mentioned, Skia makes use of Canvas, powered by OpenGL. Or, at least, that’s the first impression you’d get after a superficial Google search. It appears that Flutter really wants a solid piece of the app development ecosystem, as in mid 2020, with its 1.17 release, it also introduced support for iOS’ Metal — Apple’s more modern graphics API. This means that Flutter applications can now opt intelligently which api to rely on, resulting in a combined optimal GPU support for Apple chips as old as A7 and iOS as old as v.8! That is nothing to sneeze at. Compared to hybrid app development where you’re always hindered in one way or another by webkit features and compatibility on older devices, this is excellent news for both designers, developers and businesses.
Why has this not been done before?
It is an excellent question, and while I don’t feel knowledgeable enough to provide a definitive answer, I do have some educated guesses as to why that would be the case. I’d love to hear your additional thoughts or even counterarguments in the comments!
Evolution.
With every new technology one has to take into account time, which more often than not, results evolution, and in tech so far that has always been the case without failure. I’d be lying if I said I didn’t recognise the major contributions, projects such as Xamarin (MAUI), Ionic and React Native had in the app development space. Those all, pushed app development to new heights and exposed both what worked and what didn’t. That kind of learning is key in technology and engineering. Just the three aforementioned projects result in a combined two decades worth of experience! Skia and Flutter appears to be the next step in that evolution, attempting — and mostly succeeding so far — in learning lessons from previous mistakes by not only addressing, but improving upon them.
Hardware.
In 2020 we all have without a doubt exponentially more powerful devices in our pockets and on our desks than we had 5 or 10 years ago. Our applications tend to be more complex and rely more on being connected to the web and to other devices. All of what today is called a budget phone, 5 and 10 years ago either did not exist or was considered flagship hardware. Proposing a library like Flutter with a rendering engine like Skia back then would have made little to no sense in a world where both iOS and Android were still maturing. That and the scarcity of optimal hardware out in the wild would have not made it a good business case.
Community.
And I feel this is one of the more important reasons. You can attempt launching the greatest frameworks or libraries of all times, if you don’t have the developer community on your side; you’re either dead in the water or not very popular, aka catering for a very small niche. Looking at the app development trends over the last decade, software engineers and developers building apps have been distracted by a host of trends. Some jumped on the Android or iOS bandwagon, some invested heavily in hybrid while others just stuck to the web and prayed that one day it will provide them everything a native development experience would. Combine this with my first point, and it becomes fairly obvious that the climate wouldn’t have been right for launching Flutter or anything Skia-based.
Today though, the sentiment has changed somewhat. For starters, app stores are a bit pickier in terms of accepting just any app, generated by any kind of source-code. The requirements are more stringent, and user expectations of apps are a lot higher, so hybrid solutions while still work can either fall behind or require cumbersome workarounds to achieve the app-store required and user expected results. This in turn can generate developer frustration and subsequently companies that want to pivot away and look for more robust solutions.
Industry.
As I have highlighted this in my Apple M1 Accessibility article, there seems to be a trend in closing the gap between mobile and desktop applications. One way to do that is to radically change the hardware, like Apple did, and create a CPU and OS that is capable of running both desktop and mobile apps.
Another way — and arguably the more frictionless way — is to create a framework that can cater to all operating systems and — why not — even the web. While app universality 10 years ago was considered nearly ludicrous, 5 years ago a developer’s wet dream, today we start seeing it as general software industry expectation, creating the most opportune time for Skia to become popular through Flutter. Since the launch of Flutter 2, this is even more true, as it now runs on MacOS, Windows, Linux, ChromeOS, iOS, Android, and the web. Heck, even embedded hardware! You know that universal shoe you can wear pretty much everywhere? That’s basically what Flutter is now, since its version 2 release.
What About Accessibility?
Robust, in 2020 has a whole new meaning compared to 10 or even 5 years ago. While engineers, developers and companies are still quite slow in adopting accessibility as a core pillar of their app design and development, it is getting traction and this is only going to improve. It is therefore very important for companies to chose a framework that is able to deliver accessibility-compliant apps.
The moment I heard “Canvas” in the context of Flutter and Skia, I panicked a bit. Canvas on its own, on the web, is a well-documented pain in the neck for accessibility, so naturally I went “Oh no…” and quickly searched to see if Flutter itself has an accessibility dedicated page or not. It does. Reading through it, and then watching the below video, it’s clear that Google has put serious thought into accessibility and that proved true in my experience as well.
All the components that come out of the box with Flutter are accessible. If you decide those are not good enough for you though, that’s not a problem, as it provides a semantics widget that allows you to mark up your custom widget with the necessary information. Think of it like ARIA on the web. With Flutter 2 accessibility has gotten even better, on which note…
Meet Flutter 2 and Skia on Steroids!
Those of you who watched the Flutter keynote event earlier this year, will have quite likely noticed that one of the important updates was again to Skia, this time supercharged with WASM. It’s important to note though, that again, Google didn’t spend too much time — in fact, almost no time at all — focusing on Skia, but rather what WASM was capable to achieve in combination with it. I for one think this was quite deliberate and goes back to my “Skia is a hard sell on its own” argument. Focusing on the end result, running four browser windows with high computational load smoothly in parallel felt like a better use of marketing effort, and I would have to agree. No better way to illustrate than to watch the performance specific segment from the keynote:
Truth is, most app developers just want to build apps that run on as many operating systems as possible. Very few are tech-heads who want to not only look at the pistons of the engine, but analyse the material these are made of. As long as Skia does not create practical limitations for UX, nobody cares, other than a few select hard-core enthusiasts or nay-sayers. This has always been the case, and it’s true for most — if not all — UI frameworks.
Can We Get to the Verdict Already?
I am very happy to finally address the Skia question, and do so not by reading other people’s articles and regurgitating them, but through first-hand experience with Flutter to understand and test its capabilities and evolution from version 1 to version 2. Based on my experience and findings, the Flutter docs are honest about what Skia and thus Flutter can achieve in terms of rendering apps. Most 2D apps and games will do just fine and can run buttery-smooth, even on the web. What Skia cannot do, and thus would be a pain to achieve in Dart and Flutter, is 3D. While there are long-term plans to add this capability, I wouldn’t hold my breath or plan a 3D app around Flutter in the near future.
I think Flutter has a great future and Skia helps achieve that, but it’s by no means the star of the show, but merely an important cog in the Flutter wheel. I would go as far as stating, just ignore Skia and the fact that you are building apps running on Canvas technology. The benefits far outweigh the “weirdness” some might feel when thinking of “drawing” apps, rather than “building” them. At the end of the day, cost, developer experience, and user experience are the things that really matter, and Skia delivers on all three fronts.
Stay safe, and happy coding!
Attila Vago — Sr. Software Engineer building amazing ed-tech software. Cool nerd since forever, writer of codes and blogs. Web accessibility advocate, Lego fan, vinyl record collector. Loves craft beer!
Flutter’s Skia Engine Takes Cross-Platform App Development To a New Level was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Attila Vágó
Attila Vágó | Sciencx (2021-03-17T23:41:56+00:00) Flutter’s Skia Engine Takes Cross-Platform App Development To a New Level. Retrieved from https://www.scien.cx/2021/03/17/flutters-skia-engine-takes-cross-platform-app-development-to-a-new-level/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.