Backbone.js and CakePHP - javascript

I'm interested in implementing Backbone.js for some of the more repetitive in-page CRUD structures in our application (which is built on the CakePHP framework). I've been trying to get a hold on Backbone while figuring out how it would work in conjunction with Cake, and I"m a bit lost when it comes to separating the duties of the two sides.
Am I trying to jimmy something into my site that doesn't need to be there? Is there precedence for this kind of stack structure? I'm all ears at this point.

I'm actually working through the same situation right now (though with Python/Flask, but the same concepts should apply to any serverside language). Here is how the workflow for a page goes in my application. Just a note that I do NOT follow the single page application format; in my app, each major page is a full reload.
User requests a page, say a list of companies, /companies/listing/
Server does the routing, loading the correct controller
Controller loads first X companies from DB
Companies are encoded as JSON
Other meta data is loaded (such as total number of companies) and turned into JSON
The list page template is loaded and the JSON popped into a <script> tag within the template. Note here I do not fill in the listing table or anything along those lines, I let Backbone do all of that. I fill in the JSON here so the client doesn't have to make a second request for the initial set of companies
The list page is sent to the client. The server is done for now
The client has all the data it needs to start, so I take the JSON and pass it to my Backbone.View for the listing page
The view creates a collection for the models and manages a set of sub-views that represent the entries in the list
Any other processing/view creation happens such as the creation of pages, prev/next buttons, etc.
If the user clicks to the next page of companies, I fire an AJAX query to the server (/companies/listing/page/1 or something) which returns a new JSON string with a new set of models
Send the new set of models to my Backbone.View which refreshes everything
So really, the server is used for nothing but the actual loading of data, and the initial send of the template. I like this because it'll allow me to easily hook up new frontends (say, an iPad app or something).
For a form, in really broad strokes, I do something like this:
User requests form, /companies/edit/1
Server does permissions checking, loads entry, sends template/JSON to client. Server does not fill out the form with the data
Client uses JSON to fill out the form
Client modifies form, hits submit
All of their changes are applied to the model, the model is turned into JSON and sent to the server using AJAX
Server does validation and either sends error messages (in JSON) to client or updates the database and sends a success message
So, again, those are really broad strokes on how I've done it. In general, I use the server to grab data from the database, do server side validation (can't trust the client heh), and update the database.
If you have some specific questions, I'd be happy to try to share what I've learned so far.

Related

Better performance between frontend JS and backend JS

I am a frontend guy, but I am working on a project in which I need to process lots of data in my nodeJS backend (my front is reactJS).
But once the data that needed to be processed in the backend is processed, I have the choice of either reprocessing this data in node or in react (knowing that in the end, I need this data in frontend).
Example: An array of links has been created in my backend, but I need to extract a single link from this array, in order to display it in React. I have the choice, pass the array to react and process the data there, or do it directly in node.
Is there a common fashion to fix this dilemma? What should I take into account to make a decision?
It's not good to send excessive information from your backend to your frontend. If you're going to send data to your frontend from your back-end and a lot of it isn't going to be used, then it's probably best to adjust your backend so that it only returns information that's going to be actually used by your frontend.
Alternatively, if your frontend isn't going to use all the the information sent by your backend right away, but potentially might use it later (based on user input), then it's better to send all the data from your backend and process it on the front end as needed to avoid making future requests to your backend.
Taking an array of links as an example:
If the user requests to see a link based on certain criteria, and that's the only link that they are going to see (based on the design of your application), then your backend should process that request and return only the link that your user wants to see to be displayed on the front end.
If the user can request to see a link, but could potentially request to see another link later, then your backend should send a full array of links that might need to be displayed at some point. Then your frontend can display the links at the appropriate time without having to make a request to your backend each time the user wants to see a new link.
In my opinion, if the logic doesn’t need to be done by the browser, then do it on the server. It will help you with reducing the size of your app in the long run. You want your final, bundled .js file to be as small as possible. That’s just one small step you can take to contribute to that.
The short answer is that it all depends on your business logic. Regarding how best to handle an array of items to be sent from backend to front-end, if a user will only ever need to see this one item, for example, then by all means, have the backend parse the array of data on its end and send that single item to the client front-end. If, on the other hand, you anticipate that you'll need to work with an array of items to be presented to the user at some point in the app, it would be reasonable to simply have the backend send the array of items. Furthermore, that array of items could be, for instance, a filtered version of the items that would be relevant to this particular user.

Why can I not see newly inserted JSON documents?

Why can I not see newly inserted JSON documents?????
Couchbase 4.5
JavaScript
AngularJS
Node.JS
Express Server
I have a web application, which performances data maintenance. The user will select from a menu, which data to manipulate. The user has the option of inserting, updating, or deleting once the web application retrieves the data. I ran several tests of the application and discovered an issue.
Background to the Issue:
Couchbase server resides on Local Computer
Application written using JavaScript, AngularJS, NodeJS running Express Server
User enters new data into the web application. Once completed, the user will depress an update button, which determines if the user wants to insert or update a JSON document. The web application determines the user is adding new data to the database. The web application formats the data into the appropriate JSON document format. The web application sends the data to the database using the REST paradigm. The database returns a success status back to the web application. Upon recognizing the successful database update occurred, the web application retrieves the data in order to display the must current data.
Issue:
After reviewing the new retrieval of the data, the record just inserted does not display. After waiting a few minutes, I re-retrieved the data again. The newly inserted data appears. I ran the process several times. Each time I could not immediately retrieve the newly inserted data.
Questions:
Can someone explain to me why a JSON document of less than 1000 characters will not retrieve after insertion?
Will I need to insert the new inserted data into my existing result set? If so, why when the data resides in the database?
TIA
I guess you are talking about N1QL or views querying, if so, you probably operating on default consistency levels, which trades immediate update for performance. If that is critical at point in your application, you should pick different consistency level.
Overview of the feature: http://developer.couchbase.com/documentation/server/4.5/architecture/querying-data-with-n1ql.html
Blog post with video demo: http://blog.couchbase.com/2016/july/n1ql-scan-consistency-including-new-atplus-video
N1QL API to change consistency: https://github.com/couchbase/couchnode/blob/771ebf78f82b437999e13b05e4699c88a02dc8d3/lib/n1qlquery.js#L71

How do you send payload data with initial request?

Lets say, for example, we have a page that has a table with list of users. I could render the HTML with the table of users, but that isn't very friendly with Angular. I can also AJAX back to the server for the data, but then I have to wait for the initial page to render and make an additional HTTP request, which adds additional delay.
Is there a way to send my payload data along with my initial request so I don't have to AJAX for the data and I can still use angular binding (e.g. ng-repeat)?
The only way to access server data without executing Javascript is to have the server include that data in the initial request for the web page. This would require using a server side language such as PHP, Ruby, or ASP.NET that can query the data, add it to your web page, and send the updated web page in it's inital http resonse.
However, this concept completely undermines the purpose of using a client side framework such as AngularJS. Angular wants to be in charge of your data access, and I would recommend letting it be. Angular doesn't know about Data that it didn't retrieve, so you are going to have to also dynamically modify your page scripts to tell Angular about the data that the server retrieved. This is all going down a dark road that you do not want to go down. you will simply be doing double work.
If your concern is that your users will be see a brief delay between the page load and the initial data loading, you even have the option to keep the screen blank until the initial data loads using things directives like ng-cloak and ng-bind. If you are concerned about the delays in retrieving data after the initial page load, remember that a full-page HTTP request and full page reload takes much longer than an ajax call that only updates a single part of your page.
If you don't want to be using Ajax calls, you don't want to be using AngularJS.

Collecting data from how visitors interact (client-side) with a javascripted form

I'm doing educational research about how students use a web quiz as a study tool. I've set up a web quiz that shows photos of plants and asks students to type in the correct scientific name.
http://www.plantsciences.ucdavis.edu/courses/enh6/quiz/quiz_sn.html
Using something like Google Analytics I can see the number of photos students look at (because each new photo involves a request from the server). But I'd also like to know how many times students type in a correct answer and how many times they type in a wrong answer. The form is all checked client-side using javascript, so giving a right or wrong answer doesn't start any communication with the server.
Is there a way to collect this data using cookies or something? Or can I have the form request a certain single-pixel gif with each right or wrong answer, so the server can record what's happening? Or do I need to reprogram everything and have the form get processed on the server to collect this data?
If you only want to record correct/incorrect answers, the simplest thing to do from what you've already got would be to expose an API on your server where you can send the information you want to store. Then, you can make an AJAX request to it after receiving an answer and your client side application will be nicely decoupled from the server side storage.
At this stage though, your application won't know if an error occurs on the server side of things. This may be what you want to happen if such errors shouldn't affect your application's primary behavior, but you may wish to respond with a success/error (most likely using JSON) to allow your application to react accordingly.

Statistics gathering in Rails 3.1 (Analytics)

I am building an analytics system for my rails application and I want to monitor every time I pull a certain object from the database, and I'd like to put the in the model file. I have objects that are being displayed on the page and I need to see the amount of views and clicks that they get. I assume the views can be handled by just figuring out when the object is pulled from the database (if someone could tell me how to do that) and I figured javascript to monitor the clicks. Would you all agree with this? Or is there a better way. I am using Rails 3.1 with MongoMapper and MongoDB
To store the data simply send an ajax request from the browser with the information you want to store in a POST request to a rails resource like :click#create. Be sure to include the relevant data attributes within the request.
You may want to collect the requests and then send them all in a batch based on time or a use clicking a "done" button or something of that sort.
Recording the fact that someone clicked (from javascript) is different than recording when an object is retrieved from the database. You could write a before filter for each of the methods in the class or possibly implement an active record callback for something of that sort.

Categories