Best Practices
- Know your hardware limits, it’s not a spaceship you’re running the code on
- Know your external libraries, they provide you with easy to use APIs, but they might come with the cost of performance when not used correctly -> jQuery:
$() is expensive, cache your selectors, chain your action/methods
- Don’t use setTimeout for JS animations and don’t over use JS animations, either use CSS animations (preferable 3d, so the GPU takes over the calculations, not the CPU) or use requestAnimationFrame.
- Keep your DOM as lean as possible. Hide/remove elements you are not using.
- Preloading assets is only interesting when they are coming from the network, not when they are stored on the device, also don’t keep them in your DOM and make sure they have the right cache headers (or you won’t be doing any preloading at all)
- Test inside Showpad
- Don’t develop for a fixed viewport, not all devices are 1024*768 and devices can be rotated. If the app you’re developing needs to be user landscape or portrait, be sure to add a message when used incorrectly, but preferable use a responsive design
- When sharing html content to a client (collection viewer), the html content will be shown in an iframe, make sure your viewport dimensions and overflow is set up correctly. Be aware that you application state will not be shared.
- When implementing a button that does a location.reload(), using a click handler in JS, this will not work on the Web App. From inside the iframe try setting ‘document.location.href = ‘ instead of window.location.reload()
- Be aware that ShowpadLib functions with the same payload are debounced when repeated quickly. Always check the returned response to verify if a call came through or not.
Testing on iOS
- If you encounter problems running your HTML content in the iOS app, the first thing to test is whether it works in Mobile Safari, since this allows you to debug using familiar tools:
- Enable Web Inspector on iOS
- Open your HTML content in the Showpad webapp on Mobile Safari.
- Debug and test using the Safari Web Inspector
- When everything works as expected on Mobile Safari, things should work just as fine in the Showpad app. If not, let us know.
