we are working on new project using Reactjs. We drop all oldschool libs like jquery and keep just simple React with some polyfills and small 3rd party libs. It works like a charm, it is small and fast.
But now we want to integrate some logic around backend models. I am not sure how to handle that.
First question:
What is currently "best" or most using ajax library? I check some like fetch, superagent and I am not sure if they are verified and production ready.
Send one:
For example model represent User entity. I want to cover basic REST ajax calls and custom ones find, findAll, create, update, destroy, or custom toggleFollow. And it should know about model logic like fullName = function() {return firstName + " " + lastName}. It is not hard to write by myself, but there is so many catches to handle. And it should be flux or flux-like compatible :)
Any suggestions, what is today popular and "in"?
Thanks
Related
Let's say I want to build a web app which would use templates in the form similar to the following:
<h1>
{ status_text[step] }
</h1>
<progress max="10" value="{ value[step] }">
</progress>
In other words, let's say that I have lists value[] and status_text[], change only the variable step over time and want the form to reflect these changes in the real-time (ideally, even without sending a notification from the code that changes step, so that I can use current_time instead of some artificial step). What technology should I use to implement such behaviour in the most elegant way? (for the main language, I'd prefer using Python but JS/PHP would also work if there's no Python-related solution)
Thanks in advance for any advice.
These kinds of task are always accomplished in the client side, In other words in JavaScript.
No matter you use PHP or Python for your backend logic, you need JavaScript to do that.
That said, if you want to use pure JavaScript or a library like jQuery, you will have to trigger an event on every change of the progress and update the value of the h1 Element. I don't think this is the best solution for you.
So I suggest you using AngularJs. it's one of the leading web development technologies. AngularJs data binding allows you to accomplish this very easily. No need to trigger events or any extra work. if you're interested in AngularJs, here is a link to get started.
I have a Model called : Federation.
In my View, I load a Select Combo via AJAX from a API Call.
I share the same controller for the API and for the view dispatcher --> FederationController, I don't have a separed architecture between Front end and Back end ( like Full Angular or Full VueJS architecture), it's mixed.
So, basically, my Controller says:
if (Request::ajax()){ // This is an API call from JS
return json;
else
return view;
And it works well ( I may have a problem when I will include an Android app...)
Thing is in some case, I don't want the full json model, but just the info tu fill the Select input, in general, I do
federations->lists('name','id'), or with pluck, as lists has been deprecated.
Thing is I don't really know how to organize it, because my API is based on returning Full Models, this is OK, but this kind of transformation is quite frequent.
So, I should create a kind of transformToSelect($model) Method or use great lib like Fractal to transform it, but I don't really know how to invoke without losing my endpoint.
In my routes.php, I have a group of routes like:
Route::group(['prefix' => 'api/v1'], function () {
Route::get("federations", 'FederationController#index');
// All my APIs
});
And I'm glad with it, because it sticks with REST.
I could get a solution having my route like:
Route::get("federations", 'FederationController#getForCombo');
But soon, I will have a mess, so, I wish there were a simple an elegant solution to my problem...
Any idea how to solve it?
I'm looking for a simple example of a Node/Express/Jade page being updated using an Ajax call with both the client and server side code.
I'm having a bit of trouble putting it all together in my head.
There are great many ways this could be done and it's not immediately apparent which approach you want to take.
I suppose the simplest scenario would be to add some client-side logic to fetch pieces of html from the server and update the client. This is easily achieved using jQuery (put it inside a document ready block to wire up the event):
$('#button').click(function() {
$.get('/some/url', {foo: 42}, function(result) {
$('#target').html(result);
}
}
This way all your html is generated on the server and you simply fetch and insert it into the page as needed.
You could also fetch json from the server and render the html on the client, but that is one of the alternative approaches. I highly recommend giving TodoMVC a look - it's a todo-list application with many different implementations (each using a different framework) and therefore a great learning resource for the various approaches and helper libraries.
I'd also recommend the Hands-on Node.js book. It will help you understand routing and how to get started with Node.
I'm making a pretty standard AJAXy (well, no XML actually) web page. The browser makes a bunch of API queries that return JSON to run the site. The problem is, I need to add to the API interface each time the page needs to do something new. The new API interface is usually little more than a database query followed by mapping the returned objects to JSON.
What I'd like to do is to get rid of all that server-side duplication and just have the page make database requests itself (using the model interface), but in a way that is safe (i.e. just read only ones). I think this would amount to an interface for constructing Q objects using JSON or something like that, and then send that up to the server, run the query, and return the results. Before I go making my own half-broken architecture for this, I'm wondering if this has already been done well. Also, is this even the best way to go about eliminating this duplication?
Thanks
Search multiple fields of django model without 3rd party app
Django SQL OR via filter() & Q(): Dynamic?
Generate a django queryset based on dict keys
Just replace with operator.and_ where appropriate.
I want to use Wicket to build an application, but I have some designers that would like to write/maintain the javascript, and they basically expect 1 JS-segment per page, and a global JS-file.
I think the most natural way to add javascript in wicket is to add it per component (not per page), which would create problems for those designers (fractioned javascript, and having to write it in java-files). Is there a better way to solve this?
(of course, I expect things to work after a partial refresh.)
And a second (related) thing they'd like (and I'd like actually) is the possibility to request information in JSON-format through a static link , is this possible in Wicket?
I started with JSON by making my wicket pages return the JSON, but quickly realized there are better tools for the job, especially if you will have a full web services layer. If you just need a little JSON here and there, always via a GET, then sure, just make a Wicket page.
I ended up using Jersey with Jackson alongside of Wicket. Jersey simplifies the configuration of URLs that can do different things with different http methods (GET/POST/PUT/DELETE), as well as easily parsing query strings, etc. I'd consider going this route for heavier JSON needs.
You can easily run both Wicket and Jersey in the same web application with a little web.xml configuration.
Wicket's built in AJAX support is always stateful and thus accessed with changing URLs. If your designers aren't planning to use Wicket's JS library, it's pretty straightforward to mount a JSON page:
public class JsonReturningPage extends WebPage {
public JsonReturningPage(PageParameters params) {
String json = "{foo: 4711}";
IRequestTarget t = new StringRequestTarget("application/json", "UTF-8", json);
getRequestCycle().setRequestTarget(t);
}
}
Alternatively, you could also implement your own AbstractRequestTargetUrlCodingStrategy to directly return an IRequestTarget from IRequestTarget decode(RequestParameters params) and mount it in your application.
Regarding JS files, I'd try to educate them to use one file per component. This certainly has the advantage of less copy-paste code and simpler maitenance. Additionally, I'd certainly discourage JS in Java code. It's normally only needed to pass data or config to JS , either as variable definitions or method calls. As this data is typically in Java and JS is written by designers, it's time for designers and programmers to team up.
Quick answer to your second question is yes it is possible. Use bookmarkable links to access a resource that returns JSON data.
You can easily use the following code to dynamically communicate with Wicket:
AbstractDefaultAjaxBehavior callme = new AbstractDefaultAjaxBehavior(){
#Override
protected void respond(AjaxRequestTarget target) {
}
};
page.add(callme);
//From any ajaxrequesttarget you can simply append the following code:
target.appendJavascript("wicketAjaxGet('"+callme.getCallbackUrl()+");");
This way you can have an ajaxlink etc... that will transfer the ajaxrequest to the Wicket side. If you want to pass data (though a static link doesn't sound like that) do the following:
"wicketAjaxGet('"+callme.getCallbackUrl()+"&x='+value_to_pass_back''";
//to Read the value in the respond:
String x = RequestCycle.get().getRequest().getParameter("x");
So the url to the callback is dynamically generated (as the callback url is specific to the session) but it is formed like any other url....
To me this is 10 times simpler than building a JSON system on top of wicket instead of using the one built into it.... I use this all the time and it works great for me at least. If your solution is different/better I would like to know why perhaps.