Given the rapid journey Skuid has been on in recent years, now with a unified page composer, Skuid Platform and a host of other features, I want to understand the very latest recommended approach for mobile.
I want to build a killer mobile app designed for high frequency use on a smartphone. It will:
- use a top navigation with a few icons and search.
- use a single page app concept to render pages and contextual side navigation (I expect this to be fully custom, as it is in our browser-based UX). The pages are largely a combination of tables and field editors.
- be visually polished, high performance and feel as close to a full native mobile app as possible.
- be architected to work for Skuid on Salesforce and Skuid Platform.
What’s the ideal approach? Are there recent examples of amazing apps that people have built? Do we take Skuid and wrap it inside something like PhoneGap or React Native?
Would love any guidance!
Forgot to mention, my mystical app needs to be deployed by the respective app marketplaces (App Store, Google Play, etc.).
This deserves to be bumped daily.
2018 is fast approaching and in my opinion, I don’t believe Skuid offers a robust mobile-optimized experience. I’d love to be proved wrong, but as of late I’ve hit wall after wall trying to build such an experience.
What is Skuid’s guidance on the topic?
I built a mobile text messaging app that I like. I used: 1) Deck components 2) Responsive grids 3) wrappers 4) font greater than 16px to prevent auto zoom on mobile browsers 5) a single page with conditionally rendered components with rendering tied to a UI only model that has a field updated by buttons. This gives the feel of multiple pages but from a single skuid page. Using a combination of these components, you can build a “ web app” that reformats depending on screen size, behaves mostly like a native application and doesn’t require page reload. For example, in my text messaging app, on page load it displays a search bar where you can enter a contact’s name. Selecting a contact triggers the update of the UI only field which triggers the search bar to hide and a deck component inside a responsive grid to display. The deck component goes in the center grid and the right and left grids are just for variable padding for display purposes depending on the size of the screen. If the contact doesn’t have a mobile number, a wrapper with a rich text appears at the top warning the user they need to enter a mobile number and below that is a field editor that captures that number. Entering that number requeries that model Triggering the warning message to hide. There are a couple other components that show and hide based on user input. It really feels like a multipage site, but it is all one skuid page with conditionally rendered components. You just have to be careful to maximize page load speed by deferring model queries until they are needed. Special tip: if you have a responsive grid panel set to be the size of the content in the grid panel and then you hide the content using rendering, the responsive grid panel collapses. You can use this to create pop up menues like in the mobile builder.
