Introducing MobileUI

Henrik Wirth — Wed, 27 May 2020 16:58:06 +0000

After almost 10 years of research and 1.5 years of development, our team is proud to announce our first public release of MobileUI (0.4.1), a new software framework for cross-platform app development. 🍾🍾🍾

At NeverNull, we have more than 20 years experience as app developers, software engineers, consultants, software lecturers and trainers. During this time, we have learned a lot about the good and the bad parts of cross-platform app development with a huge variety of frameworks and programming languages.

We think, the time has come to take these findings and build a product that combines the good parts leaving out the bad ones. Our vision for MobileUI is to become the number one solution for cross-platform app development with Java and/or Kotlin. One codebase, a unique developer experience, a great toolchain and the full native app experience.

We are very excited about the outcome - and hope you are too! The following article gives you some details about the product. Get your own copy here: www.mobileui.dev

What is MobileUI?

Java-Based Cross-Platform Apps with Native Experience

MobileUI is a Java-based cross-platform framework that offers a native UI component library and unique layout system for iOS and Android.

MobileUI allows you to write fully native apps in Java and Kotlin, without touching languages like Objective-C or Swift. Why Java? Java is a great way to combine easy development and a huge ecosystem of libraries and tools with fulfilling maybe the number one requirements on mobile: Performance. With MobileUI's system, all Java code is ahead-of-time compiled which brings huge benefits in regard to execution time and memory consumption.

While you can rely on Java's cross-platform APIs, you can also access all native SDKs for Android and iOS from the same codebase. This is thanks to the availability of the Android Runtime SDK and the RoboVM Native Bridge (Bro). It is great for all cases, where our cross-platform framework does not (yet) contain an abstraction or plugin for a platform-specific function. You don't have to switch IDEs, tools or programming language to add a new feature. In our experience, the latter happens a lot with cross-platform frameworks like React Native, Flutter or Ionic, that only give you SDK access through native plugins.

Layouting and Styling with Ease

MobileUI uses Android's Layout System to arrange platform-native widgets on the screen. We have ported Android Views to iOS from Android's original source code (Following a hint by Chuck Norris, who already ran Android apps on iOS in 2005. Thanks Chuck! 💪). And with a big smile, we recognized that this approach is amazingly 🚀fast 🚀! Because Android layouts have been optimized to support devices with many different form factors, building iOS apps with it works like a charm.

Have you ever understood Android's style system in depth? No? We neither 😬! That's why

MobileUI XML layout files are styled with CSS. Just as in HTML, you can include .css files or write style directly to the layout. Checkout this code snippet. It should be very familiar to everyone who has ever built an HTML page:

<Layout xmlns="urn:nevernull:mobileui:layout">
    <style href="style.css"/>
    <style>
        .CustomButton {
            textColor: white;
            backgroundColor: #6111B1;
        }
    </style>
    <LinearLayout width="fill_parent"
                  height="fill_parent"
                  orientation="vertical">
        <Button class="CustomButton"
                onClick="#{onOpenUrlClicked()}"
                text="Yeah, take me to the candy shop"
        />
    </LinearLayout>
</Layout>

There is also the possibility of using dynamic CSS and variables through MobileUI's super-fast template engine. You can implement rich design systems and custom themes - from dark to light to super-awesome!

And did we mention MobileUI's Data Binding? Glue Java code and layout together with expressions #{justLikeThis}. Or simply start with your layout and later add the bindings. With this separation of concerns when building your apps, you can present high-fidelity prototypes early in the development process. This is super-valuable when talking to customers and product owners 😎.

Extensibility is key

Since you have access to all native SDKs, you are not constrained to the components we offer. Build, share and reuse your own abstractions and improve your developer experience.

We know that it is a good idea to use component systems as soon as your apps become more complex. That is, why we ship MobileUI's Purple Edition with a dependency injection framework that is a perfect fit for mobile. It is based on Micronaut and makes extending your app with platform-specific components super-easy. MobileUI Inject is used as the basis for our Plugin System which allows you to integrate plugins into your app with a few lines of code. Read more on this in coming blog posts.

Instant Live Preview

Let's face it: Slow build cycles thwart you when developing your apps ⌛. One of the most stressful things is restarting the whole app only to see a few pixels more padding in your layout or the UI being rendered on a second device.

While we cannot completely eliminate build cycles – especially for Java compilation on iOS – we do our best to make them unnecessary or much faster.

That is why we provide you with the Live Preview feature that comes with the MobileUI Plugin for Android Studio. The Live Preview pushes layout changes to your app in real-time. With this approach, you can modify the layout while the app is running (and keeping state). This allows fast iteration cycles, increases productivity and safes a lot of time. Don't believe it works? Watch and try!

Extensive Documentation & Support

Diving into app development with a new framework is difficult without an excellent documentation. One of our main goals is to bring you high quality tutorials, how-tos and references for all MobileUI features on docs.mobileui.dev. And if you are stuck, we assist you on our Spectrum Channel.

It is great that MobileUI apps are actually native apps with full SDK access. You find a huge amount of examples for solutions on Android and iOS on the Internet. You can easily apply them in your MobileUI apps without reinventing wheels. We help you, if something should not work out as expected.

Try it out with our MobileUI Gallery

That's it for now. Are you curious, if this works? Try MobileUI today and find out! Get MobileUI Free at

www.mobileui.dev

... and let us know what you think! We appreciate your feedback!

Forem: MobileUI