How to architect a killer mobile app in Skuid in 2017

Forgot to mention, my mystical app needs to be deployed by the respective app marketplaces (App Store, Google Play, etc.).

Yes, yes and yes!

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.