[Discussion] Single page app organization tips

Questions
1

Let’s learn from each other!

What are everyone’s top tips and tricks for organizing large scale single page apps?

I’ll start :blush:

  1. Emoji’s! This is a must for me. I use specific emojis for specific elements/data. It helps keep my element tree extremely simple and quick to sift through.

For example

:gem: Options data
:pushpin: Pages
:arrow_up: Popups
(If you want my whole list just ask!)

  1. On custom states of tabs I use numbers rather than words. This allows you to do +1 or -1 for navigation and easily organize

Let’s say I have a 5 page popup my tree will look like this

— :arrow_up: Create a user
+ [1] contact info
+ [2] company info
+ [3] social info
+ [4] example 4
+ [5] example 5

Also every popup I have has a loading group under the “[1] contact info” type of groups

I standardly use state #
100 for loading
200 for success
400 for error
500 current user plan doesn’t have access
600 no current ______ created ( ____ = leads, appointments, or whatever for your user case)

So for user experience it’ll go ->

On popup initiation If current plan level < 2 state = 500 this will show user doesn’t have access

Or for if they do have access.

[1] page 1 next button clicked

Set state of popup to 100

The loading group shows and page 1 hides and collapses.

Wait 2.5 seconds

Set state to 2.

This makes duplicating and using this single popup for almost any use case incredibly easy.

  1. I use navigation as option sets and shown using repeating groups rather than hard coded. Why?

This makes adding future pages or menu items incredibly easy and rather than dealing with the possibility of things looking funky with spacing if I’m moving quick the repeating group makes it incredibly quick.

The options have data points for things such as page title, menu title, menu icon, and menu position.

This also allows you to reorganize your menus in seconds rather than focusing on UI adjustments.

This also cuts down on navigation workflows and clutter.

YOUR TURN! what are your tips and tricks when building single page apps or complex large pages!?

5 Likes
3

@alexreed92 Agreed in most cases. Except for certain use cases.

For my specific use case on the app I’m referring to it’s actually a much cleaner feel since tons of data is being pulled from multiple databases, the initial load time is slow but covered by a initialization/loading screen. Once all data is pulled it allows it to run flawlessly rather than have gaps where a user is waiting 4-7 seconds for data to show from an external server because of the amount of data when they are used to everything being near instant.

I’d rather keep the slow initial load for the consistency of speed of use once logged in.

If you have alternative idea to this I’d love to hear!