Best way to build a mini-app in JS with simple API calls -- send/retrieve data

Long story short. I am working on a simple app that will send/retrieve data to an API and return the proper information based on a users location (how im gonna get that is a different story).

I am looking to find the best way to build this. I know I will have my HTML file with a JS file say:

on click -> send this data -> print on the screen from an API.

But as this grows and gets larger, is there a more appropriate way of doing this over than a JS full of events and functions calling an API

Any suggestions or tips to do this "correctly" -  I guess I dont know if having a HTML file with events/ and functions calling an API is "messy" or a framework to do it all.

Ryan
LVL 1
catonthecouchproductionsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

COBOLdinosaurCommented:
Well the primary functions of the javascript will be doing ajax calls and then parsing the response into appropriate HTML containers.  I don't know that I would call it messy unless the data coming back from the calls is messy.  If it is xml files coming back it is pretty straight forward, if it is html coming back it could be a messy parser, but still not difficult.

Without details of the data, and the structure of the HTML it is not possible to say much more than that.


Cd&
0
catonthecouchproductionsAuthor Commented:
i was looking at backbone.js for this. I know at first it would be simple, but I have a list of items/features I would add on to it.

But at first it would be:

1. get users location
2. send that data (location) to the API
3 return and display the results on the screen

I know I would have some simple functions with events, but I would have a search, a single view, home with simple functions.

I didnt know if it would get too messy and slow once i started adding on.

0
catonthecouchproductionsAuthor Commented:
I guess I was looking ahead and not just right now.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

COBOLdinosaurCommented:
It depends on what you add.  If you later add special effects that use javascript you will run slower, and you might get interference to the point of braking the page.  If you add video or flash which are cpu intensive, it will be slow and the browser might even hang. If you add something that must also use ajax it will create a conflict.

If you run adds on the page they should be static.  Animations and rotation of ads will kill the page.

If all you add is a lot of static stuff it may make the initial page load take a little longer but it won't affect the operation of the fetch and display.

So it really comes down to what else you put on the page.  My advice for this kind of app is to keep the page minimalist because from the user perception the important part is the information display, and that is what they are going to come to the page for.


Cd&
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
catonthecouchproductionsAuthor Commented:
I hear ya on adding extra effects, and all that jazz. I guess I just wanted to do it right from the get go. I was looking at:

backbone.js MVC to get me started, then I can add on in a bit.

I know how I would work out the basics right now with a JS file and a HTML file, but not sure if there was a faster/scalable approach, say if it did take off. Not sure if basic jQuery AJAX calls would crash if they got hit by too many users at once.

I guess backbone.js seemed more organized. As far as what I would add most of it would be coming from the API, and down the line other features that I would add in for users to collaborate.

0
catonthecouchproductionsAuthor Commented:
I would have these screens:

Home - a user could input a ski resort or use location to grab it (use google map or simplegeo is get locaiton -> send data -> and return output on screen

Single screen - shows data for that single ski resort (where all information is shown - new snow, trails, lifts)

A listing page showing - still up on the air on this, need to tweak the UI and see what works best for UX

But all in all, its a super simple UI, not crazy header/footer/sidebars - its b & w - large type and big icons to represent lifts/weather/new snow.
0
catonthecouchproductionsAuthor Commented:
I would have these screens:

Home - a user could input a ski resort or use location to grab it (use google map or simplegeo is get locaiton -> send data -> and return output on screen

Single screen - shows data for that single ski resort (where all information is shown - new snow, trails, lifts)

A listing page showing - still up on the air on this, need to tweak the UI and see what works best for UX

But all in all, its a super simple UI, not crazy header/footer/sidebars - its b & w - large type and big icons to represent lifts/weather/new snow.
0
catonthecouchproductionsAuthor Commented:
I know I can organize my code really well with functions - re use where possible and I will be coding this in jQuery.

But I guess i would love to do it right from the get go - stability, scalability, handle large amount of users (once it gets known of course)
0
COBOLdinosaurCommented:
Whether or not a lot of users are a problem is strictly a backend problem.  If there are more request then the server can handle the responses will slow down and time outs are possible.  However if it starts to slow down it then it just means additional resources are needed on the backend.  More bandwidth, more threads, a bigger slice of server cpu are all things that start to increase over time and can be dealt with.


Cd&
0
catonthecouchproductionsAuthor Commented:
Thats a good point. And it would be hitting the API service all the time and not necessarily my server. Would it help if I had a cron job to dump the API results in a DB and then query the DB instead of the API each time? Almost like a cache?
0
catonthecouchproductionsAuthor Commented:
Or is there an easier way to cache results besides dumping in a DB every 45 minutes.

I also think it would be neat to store them for down the line I can chart them to show resort conditions and how they change over X days/months.
0
COBOLdinosaurCommented:
Caching makes sense, it is far more efficient, and you will get consistent response times.  That is how I do news headlines.  I pre process and cache the feeds and the users don't end up with long response times when the remote server is busy.

Cd&
0
catonthecouchproductionsAuthor Commented:
Ok cool, do you know an easy sway to do that on the client side or doing it via PHP/MySQl would be easiest?

0
COBOLdinosaurCommented:
You need to cach server side, there is no way to directly access databases from the client.


Cd&
0
catonthecouchproductionsAuthor Commented:
Ok coo,. I will keep that in mind. So a cron job to run every X minutes, take the latest API -> dump in to the database and work off the database everytime someone wants to hit it. Or could I load it somewhere on the page or using jQuery.data?

0
COBOLdinosaurCommented:
I am assuming that the information for each user will be a subset of the total information, so using a database makes sense.  Also if you are using a database you can use it to maintain counts so you have some stats on the requests you are getting.  

Cd&
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.