Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Jenny Swift
Jenny Swift
21,999 Points
Posted by Jenny Swift
Jenny Swift
21,999 Points

Best approach for making apps that work both online and offline, keeping data in sync?

Hi. I have previously built web applications using PHP and Laravel. I am now interested in improving my skills. Specifically, I would like:

  1. to know how to make my apps work when the user is offline.
  2. my apps to run faster. (In particular, when I have a lot of items to fetch from the database and display on the page, it can be slow.)

So I started learning Java. I figured if I stored data locally on the user’s computer, the app would run faster than it does on the web.

But what’s the best approach to keeping the local data and the remote data in sync? I’m not really sure how to do this.

Am I supposed to somehow create a database on the user’s computer?

So I want the user to be able to use the app offline if they want, but then if they connect to the internet, their offline changes will go to the remote database so that if they then use the app on another device, their data is up-to-date. Or vice versa-if they are using my app online, then go to another device that is offline, to eventually have the data synced when they are back online with that device.

Am I on the right track? I don’t really know what I’m doing. I’m not sure if rewriting my apps in Java is the best approach, or if there’s a better way. A bit of Googling tells me there may a way of making web apps work offline, but doing it that way might not solve the speed. (Or maybe using caching for my online apps would solve the speed issue?)

Where do I go from here to learn what I want to do, please, since Treehouse doesn’t seem to cover it?

1 Answer

Greg Kaleka
Greg Kaleka
39,021 Points
Greg Kaleka
Greg Kaleka
39,021 Points

Hi Jenny,

Offline Use

Disclaimer: this is a big undertaking!

If you want offline, you can't really make a web app that also works offline. Web apps run in the browser, which unless a user has a local web development environment set up (unlikely!) they can't use unless they're online.

Instead, think of your project as a service. Your database and logic live on your server, and different client apps can present data to the user. You'll have to write different apps (front-ends) for different clients. Offline apps will need to be native apps for the user's platform (iOS, Windows, Mac, Android), and will need to tie into your server via an API.

You can set up an API fairly easily in Laravel. You'd set up a route like:

Route::get('/api/users', function(){
    return User::all();  // This will return a JSON object with all users in your database
});

And your client app would hit that API to download that data, and present it. You could also store it in a local database on the user's device, so they could use the app offline. How the online/offline syncing is handled depends on the client platform. Data sync is a huge topic, and even huge companies like Apple have trouble getting it to work reliably.

More Speed, Please

Server-side caching will help if you're doing lots of database querying, and client-side caching will help if you have lots of static assets like images.

More importantly, you'll want to make sure you're optimizing your DB queries. Only pull the data you need, rather than using Class::all and then filtering the results after. Add an index to fields you're commonly searching / querying. If you do need lots of results, can you paginate them? Laravel has a great pagination interface. Here's a video showing how easy it is to use in Laravel 5.3+.

There are also lots of front-end things you can do to increase load speed of a website like optimizing image sizes and minifying your css and javascript. Check out Google PageSpeed Insights to see what you can do specifically for your webpages.

Hope this is helpful!

Cheers :beers:

-Greg

Jenny Swift
Jenny Swift
21,999 Points
Jenny Swift
Jenny Swift
21,999 Points

Hi Greg, and thanks for the detailed response!

Greg Kaleka
Greg Kaleka
39,021 Points
Greg Kaleka
Greg Kaleka
39,021 Points

No problem! BTW, you may want to check out the REST API Basics course to get familiar with the concepts.