Alex T⚜️

Most users of popular social media platforms, such as Facebook, Instagram, Snapchat, TikTok, Twitter, LinkedIn, and Pinterest, use their mobile apps. The majority of users across each platform access it via a mobile device, ranging from 80% to 98%. At least 70% of active users in professional networks use native apps, while at least 85% of activity in casual networks comes from native apps as well.

Simply put, four out of five users prefer native apps over desktop or even mobile web apps. The native app experience is generally more seamless, intuitive, and fast.

It is only natural to assume that a network that does not offer native apps would struggle to maintain engagement. Often, good content or intriguing ideas may convince someone to join, but to keep them coming back, a social media site needs native apps.

Mobile Apps Options

Generally there are a few ways you can target mobile. All come with pros and cons:

• Responsive Website. Traditional HTML / CSS pages with some JS sprinkles for interactivity. This approach is simple, SEO-friendly and easy to maintain. On the flip side, pages have to reload full when URLs change and even with aggressive caching browsing exprience can feel “choppy”. Users can instantly tell that it’s a website. Another downside is limited access to device features. The site is confined within a browser. *UNA produces responsive HTML pages dynamically, rendered on server.
• Single Page Application (SPA). Instead of loading entire new pages from the server every time a user navigates, an SPA loads data in the background and displays it in specific sections of the page without refreshing the whole page. This can make the web app feel more fluid and faster, more like a native desktop or mobile app. Standard SPA rendered within same URL is not SEO-friendly, however and may not be able to handle links sharing very well. An SPA is also confined within a browser. *Out of the box UNA doesn’t work as an SPA.
• Single Page Application (SPA) with Server-Side Rendering (SSR). Now we have the best of both worlds - the speed and usability of SPAs with the improved initial load time and SEO friendliness of server-rendered applications. With SSR, the initial rendering of the SPA happens on the server. That means when a user first requests the page, the server generates the full HTML for the page and sends that to the browser, just like in a traditional multi-page application. As a result, the page loads faster initially and is more SEO-friendly because search engine bots can see the fully rendered HTML. After this initial load, the SPA takes over and subsequent navigation and interaction happen entirely on the client side without full page reloads. In other words, once the initially server-rendered page has loaded in the client's browser, it becomes an SPA.
• Progressive Web App (PWA) based on SPA with SSR. PWAs can be loaded in a web browser like any other website but also offer features typically associated with native apps. PWAs can work without an internet connection, or on low-quality networks, by caching important resources and using service workers – scripts that your browser runs in the background separate from a web page. Users can "install" PWAs on their device's home screen, making it easy to access and launch. This does not involve a traditional app store download and installation process but instead is more like creating a bookmark to the web app. PWAs load quickly and provide smooth, app-like interactions. Twitter and Pinterest, for example, offer PWAs as alternatives to their native apps, allowing users to have a full app experience right in their browsers without needing to install anything from an app store. *While you can ship standard UNA website with manifest file to make it PWA-like, it would need a proper SPA/SSR interface to qualify as a proper Progressive Web App.
• Hybrid Apps. Hybrid applications are essentially web applications packaged into a native wrapper. They are built using HTML, CSS, and JavaScript, then wrapped in a native application using platforms like Cordova or Ionic. This wrapper acts like a bridge between the web application and the native functionalities of the device. Despite being built with web technologies, hybrid apps can still access and use the device's native features like the camera, accelerometer, or push notifications. Unfortunately, Hybrid apps typically don't perform as well as native apps because they need to go through an extra layer (the webview in the native wrapper) to access the device's features. The difference is subtle, but in the very competitive world of social apps a slight lag in interactions may create that dreaded “sluggish” feel and detract users. Simply put, they might not feel as smooth or "native" as apps built with platform-specific languages and UI components. *Currently UNA comes with a simple React-Native wrapper, effectively allowing you to compile a native app that displays content within web-view.
• Native Apps - Swift / Kotlin. Native apps are written in languages that the platform they are being built for accepts. For instance, Swift and Objective-C for native iOS apps, Java or Kotlin for native Android apps. Native apps are very fast and responsive, providing the best user experience because they are specifically designed and optimized for a single platform. The layout, interactions, and gestures will all follow the standards of the platform, making the app intuitive for users. Native apps can be distributed through the platform’s app store (like the Apple App Store or Google Play Store), which provides a trusted environment for users to find and install apps. The main downside is that developing native apps can be more time-consuming and expensive than other types of apps because you need to create separate apps for each platform (for example, an iOS version and an Android version) as well as your web version if you want to build a social network where people shoudl be able to open links even if they don’t have an app installed, or if you rely on organic search engine traffic. Typical cost of development of native iOS and Android apps for preconfigured UNA backend is in the range of $150,000-250,000 and any significant changes in backend configuration would likely require relatively large updates.
• Native Apps - React Native. Unlike traditional mobile development where you would need to write separate code in different languages, React Native allows you to write your code once in JavaScript and it runs on both Android and iOS. Despite being written in JavaScript, React Native applications use native components. This is a departure from other methods of cross-platform development that create "hybrid" apps, which are essentially web apps running inside a native web view container. Because React Native apps use actual native components, they have the look, feel, and performance characteristics of a native app. Examples of apps built with React Native include Facebook, Instagram, Airbnb, and many others.

The Best Choice for Web App

If you want to provide the best possible experience on the web without any compromises, then the optimal choice is a Progressive Web App (PWA) based on a Single Page Application (SPA) with Server-Side Rendering (SSR). This is the pinnacle of web development. Direct access through a browser would lead to a fast, yet SEO-friendly website that can be added to a mobile or desktop device as a progressive app.

There are many frameworks for building SPAs, and some of them support SSR. However, React is by far the most widely used, with a strong community, an extensive ecosystem of components, and a consistent track record in production. For SSR, SSG, and routing, Next.js is a meta-framework that is not only the most popular within the React world but also highly regarded as a fast, well-funded, and production-tested solution.

The Winner: PWA (React.js + Next.js/SSR/SSG)

The Best Choice for Native App

Hybrid apps once had a decent chance due to their ease of updating - simply update the site and the app does the same thing. However, Apple has become more selective with hybrid apps, often refusing to approve them due to lack of added value compared to a website. Moreover, hybrid apps never lived up to user experience expectations - native apps are just smoother.

Now, choosing between React Native and Swift/Kotlin-native is a bit harder. Development in dedicated native languages may potentially produce better-performing apps, but the cost of such an undertaking is at least double that of doing it in React Native. Not only does it require engineers with different skill sets for each app, but you would likely need to consider design and login differences across both iOS and Android native UI elements.

On the other hand, using React Native allows some of the code from your React PWA to be reused, and the app is written in JavaScript (or TypeScript). Maintaining design language across web and native is also much more consistent.

With the Expo framework, React Native really shines - over 600K projects in production, a stable router, support for 120fps animations, and regular feature updates make Expo the natural choice for developing React Native apps.

The Winner: Native (React Native + Expo)

UNA + React PWA + React Native Apps

The core UNA framework is a full-stack solution that handles the database, business logic, and HTML frontend. In addition, we offer a simple React Native wrapper app that embeds the main UNA UI in a webview. UNA also provides API endpoints that can be used to create alternative UIs, integrate 3rd-party services, and incorporate UNA functionality into other apps.

However, until recently, UNA did not provide a Single-Page-App UI or a fully native app.

Earlier this year, we took on our biggest development challenge yet. Knowing what our customers ultimately need, and regardless of the complexity and effort required, we decided to build a "no compromise" frontend app for UNA: a Universal App that shares one codebase and compiles to a NextJS web app, as well as to iOS and Android native apps. We named it NEO.

There is so much we want to share about NEO and the new chapter for UNA. It will take several posts to cover the technology, structure, and ideas for using NEO for your network. So stay tuned and buckle up. The next post will come with a demo!