In this article I’m gonna answer What it means to do Mobile First Development Approach. I’ll quote some personal experiences, projects and points of view.
Responsive Design
Responsive design idea has taken over the world thanks to several frameworks and platforms:
- Bootstrap,
- Material Design, and their integration in
- WordPress, React.JS, Angular and even the native platforms and frameworks – Android, iOS, Flutter.
Few are the cases where the laptop and desktop views require entirely new user interface. The most common way is – to visualize on the bigger screen – 2 or 3 phone size sections that are displayed separately or stocked on the bottom – on smaller form factor.
Offline First Logic
One of the approaches when coding the logic is to execute maximum amount of work offline and return to the user – the control to continue. Obviously this cannot be used 100 % of the time because of business requirements. But, whenever possible, do it like that, otherwise, you will be requested to refactor. You could use libraries like
- Google Firebase or
- Amazon Amplify software stack
They will handle synchronization and have many features for all kinds of functionalities. Of course they come with a second level price and less fine tuned control. You could use them – if you target United States, or you have the money, or you are short of time.
Background Work
When you program heavy work on a mobile device, you must prevent the task to not get interrupted. This is essential for so it does not lose progress and data integrity and consistency by some external event. Any meaningful job you must put inside a component that is not bound to the current screen. The bigger percentage of users are on Mobile Devices. He or she may go to the home screen, receive a call, lose power (low battery), on a laptop – he or she may put it to sleep (close the screen).
Here you have some guidelines from the sources:
- Android: https://developer.android.com/guide/background
- iOS: https://developer.apple.com/documentation/backgroundtasks
- Web (Draft): https://developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API
- Flutter (for Android and iOS): https://pub.dev/packages/workmanager