Program Interface only once

Question

I would like to program the interface of my software only once and through some tool generate the screens for Android, IOS and Web Browser. Some technology today would allow me?

I know that Xamarim, for example can generate for Android and IOS.

Answer 1

It would be really cool and practical, right?!

I don’t know any stable ones in use, unfortunately, and I don’t think - at least in the short and medium term - is an idea that will guarantee you a high productivity (I’m betting that’s the goal) without charging you a high price in maintainability. And this considering that the proposal is limited to serving Web apps, and not websites.

However, recently, Nventive has a project called Uno Platform (details below) who proposes to do this and Behind the Cositas but. But it’s still not a tool you’ll want in the production environment, but it promises.

Without wishing to confront advantages and disadvantages, my intention is to address some details specifically about these two platforms - mobile and web.

What are the difficulties of this tool?

Between platforms Mobile and Desktop nowadays there is no longer so much difference of visual and usability, these two platforms have come very close in recent years. Already between esses dois and the WEB there is still a subtle (but powerful) difference in some aspects such as the profile and the expectation of the user, the events made available, to navigability, the focus the user’s own platform and so on.

- User profile and user expectations

In this context of systems, users and technologies, the Generation X saw a lot of concept and technology 'come out of nowhere'. We of Generation Y we have already gone through some waves of these (r)conceptual and technological developments. And Gen Z were born in a scenario that can hardly conceive the possibility of life without what technology offers us today.

Not all these waves of concepts and technologies died, some follow different paths and take with them their shares of enthusiasts and others arise in a growing rhythm.

The fact is that the perception of technologies, their use and their applications are quite different between these generations and this directly impacts the expectations that these actors, in the role of users, create on the system.

Until a few years ago system was desktop (or similar) and website era web. One was to produce ('computerize processes', increase productivity, reduce errors in operations...) and another was to consume (browse, teach, learn, save, recover, remember, descrobrir...).

Today everything is everything, but when we are using an app on mobile we expect more agility - rang, left next step, no carry -, we want to be able to share the attention with other apps - receive a message on Whatsapp or listen to the GPS guidance-.

Not infrequently, by putting a small latency perception into an app’s feature, we uninstall it after very few changes. We don’t want to [and we usually don’t need to] go through that experience there. Already on a website we are more tolerant of this type of situation.

- Events and features

Among the platforms has events, features and functionalities that were born thought of in one or the other but are very useful for what is intended. There are those who raise the flag of 'adapting' the functionality to another platform but it comes to mind no pleasant experiences in these attempts.

For example, the pincer movement when we want to enlarge that instagram photo, it loses meaning on a site that, in turn, is able to respond with something by hovering over or toward a particular element, (have seen some interesting implementations in this sense, mainly on sales site) or when changing the orientation of the device being used.

These are things that we will eventually want/need to deal with and we will end up adding complexity to the code that only makes sense in Scenario X, and penalizing everything else for this.

- Focus

Speaking again of expectation, we usually devote more attention but for a shorter time interval when using apps. Experience in a web application or website is reversed.

- Platform

Navigation features between these platforms are quite plural. This is the case with GPS, accelerometer, gyroscope, microphone, camera and sensors. Some of these features are even available on the web, but are commonly different experiences and applications.

Not to mention the architecture of the solution. Generally speaking, the App is a system that you 'load' into the device, often offering features offline, the web app/site is something that 'is there' for you to consume. This in itself already opens a huge range of positive and negative possibilities.

Multi-platform Development - A Xamarin Experiment

As you said, Xamarin provides this possibility of cross-Platform interface development, but the path it has been taking has not always been a rose flower and there is still room for improvement, even when it comes to platforms so close together.

He even offers the possibility (and it really is a necessity) of building in shared code, snippets of code that are specific to a platform. It is from there that code maintenance problems can begin to arise.

Today the Xamarin.Forms is enormously stable and efficient and continues to improve, but even following this line, the path to web development is still long.

The Project Uno Platform

Returning to Uno, it touches precisely on the development of interface for multiple platforms using one with shared code, an extension of Xamarin, as you can see in the architecture diagram of the solution:

^{Source: http://platform.uno/#Architecture}

Your slogam also reinforces this objective:

Build Native apps for Mobile and Web using XAML and C#. Uno is a free UWP Bridge for iOS, Android and Webassembly.

In free translation:

Create native apps for mobile and web devices using XAML and C#. Uno is a free UWP bridge for iOS, Android and Webassembly.

In this video is a presentation of Angelo Belchior about the resources and with some statements. It is also possible to access the Playgound of them and have their own experience.

I think it’s something like this you’re looking for.

I hope I’ve helped.

Note: I think that kind of question should not be here. But since the gates are open, I leave here my (dis)contribution =).

Answer 2

Today our technologies don’t yet supply this comprehensively, but there are already consistent ways to do this...

Application lifecycle

The main libs and frameworks have already adapted to a componentization system or MVC standard, IE, fit very well in the application lifecycle.

Hybrids

Hybrid applications start from HTML, CSS, and Javascript code for various systems. The main tools used for hybrid development are...

• Angular

1 - Hybrid applications

2 - SPA (single-page applications)

3 - PWA (Progressive web apps)

This coupled to the Cordova for the web view and the Angular Material for the UI

• Vue

1 - Hybrid applications

2 - SPA

3 - PWA

4 - Desktop applications

This linked to the Cordova for web view and the Quasar for the UI

---

I cannot say that in a single code you will be able to emulate for all the systems above, because each type of application has its particularities, but surely, a good part of the code can be reused...

---

Natives

Native applications are those that communicate directly with the operating system, IE, for Android we have Java, for IOS temo Swift, and yes, with HTML, CSS and Javascript we can emulate native applications, because the tool that we will use, will compile the code, they are...

• React

1 - Native apps

2 - WEB applications

React uses the React Native for mobile applications, and is being widely used nowadays, unfortunately I have no knowledge if the entire application can be compiled for the web, but there is a lib that maps most of the APIS and Components of React React Native web, then I thought it valid to put...

• Angular

1 - Native apps

2 - WEB applications

Using the Native Script is possible today with the angular develop natively, follows a example

---

Finally, this war of libs still has no winners, each one has its quality and defects.

Answer 3

I believe that one way to do this would be to use a webapp.

Take a look at this one tutorial from Google Developers to see if he’ll see you.