I've built a simple REST API using the Play Framework 2.1 (just controllers that expects different kind of calls on different routes)
The API is already working fine but now I am trying to add a front end app using mostly JavaScript and for this purpose I want to use Backbone.js. I've started with a simple router trying to render some views but when I try to open for example the following URL:
http://somehost.com:9000/projects
It seems that it is the Play Framework router the one that is trying to resolve the URL and not the Backbone.js Router.
Is it actually possible to mix this behavior...I mean have the REST API routes to be handled by the Play Framework and have other set of routes that will be handled by the Backbone.js Router?
Related
I have an ASP.NET MVC Framework project. It's time to move the client part to modern React. The project is very big. How to organize all this correctly or can you share the project on the GitHub?
Foundation task. Do it together with ASP.NET MVC. What would both fronts work together on the same site. What would create the React routing and not break the current ASP.NET MVC routing?
If you want to use React or any SPA framework it means that you need to use SPA(Single Page Application) approach of building WEB application.
Please see more about this here:
https://developer.mozilla.org/en-US/docs/Glossary/SPA
Here are general advices:
Backend: Since you use ASP.NET MVC it would be flexible and easy to migrate your backend part to ASP .NET WEB API ( build REST endpoints). As contrary to MVC Razor pages approach, WEB API Controllers will return data, not a view.
Of course you need to revise you logic at backend side and transfer from Razor pages required pieces of code that related to handling data etc.
Frontend: Create a simple React application(here you can see the guide):
https://reactjs.org/docs/getting-started.html
You React application will send requests to the new WEB API Controllers not to MVC Controllers. Once you receive data from the backend side, store it and handle it at your Client-side.
For storing your data I highly recommend you to use Redux Store:
https://redux.js.org/api/store
Routing: React has router https://v5.reactrouter.com/web/guides/quick-start using this router you will render and manipulate you pages on client side without page-refreshing according to the SPA conception, hence, no need to worry about your MVC routing.
Example of application you can find at official page here:
https://reactjs.org/community/examples.html . But I think once you complete the guide, this question is going to be skipped.
I want to move app and I am looking to new technologies. I have no experience with Laravel, but I wonder if I want to create a Laravel + React web app do I also need to look at Inertia, or I can do Laravel + React without Inertia?
NO. You can build an app with Laravel and React as your front-end without Inertia.
HOWEVER, if you're looking into building an SPA, I'd recommend looking into Inertia, since it makes the process of integrating the back-end and front-end a lot easier and you won't need to write an API to get them talking to each other.
Backing up a bit #Matheus 's answer.
The purpose of Inertia is to be able to create an SPA application using the laravel routing system.
You can create your routes in your web.php, that would point to a Controller's function and that function would return a React component with your data as props.
This takes away a lot of work on both sides. Without inertia you would need a frontend application made in this case with React, then useEffect would be responsible for calling an api in your laravel application to then retrieve just the data so you can use it on your frontend application.
Either way is possible, although if you are a fullstack taking care of both, the frontend and backend I recommend Inertia to save yourself some time and CSRF token pain :)
I am trying to integrate Angular with Django. I have 2 approaches which one is the best way:
Build a separate angular app and serve it's static files to django to render. In this way the routing and rendering everything will be handled by Angular.
Or to build templates in django using Angular directly and use MVT architecture of Django only.
Which is the correct way from architecture point of view? If not these two please suggest any good approach.
I'm not using AngularJS (actually I'm using VueJS but it's kinda the same) but here is what is usually done :
You do your models as usual, using Django. It defines your database structure.
You build an API that exposes your datas. For that you can use DRF (Django Rest Framework) for a REST API or graphene-django to build a GraphQL API)
You code components to build pages. And you retrieve your datas to display from the API.
For my project, I personnally use :
Django
graphene-django for a GraphQL API
Apollo Client to fetch data from the GraphQL API
VueJS for the frontend components
There are lots of tutorials on how to combine all of these so I guess there are some for AngularJS too.
You should be able to do something similar with AngularJS.
Finally, it is more like the first approach that you described. You'll have some build step that will create a bundle of files with a index.html or similar. The thing to do is to tell Django : "Hey, for any URL, point to that file".
Note that the thing I'm describing is for building a SPA (Single Page Application).
I am building an app built using ASP.Net MVC and AngularJS. I use MVCSiteMapProvider for building the site map and building Breadcrumb. I use Hybrid-SPA approach where part of the routing is handled by MVC and part by AngularJS. Switching between each module is handled by MVC and navigating with in the Module is handled by AngularJS (Similar to but with some modifications http://www.codemag.com/article/1605081).
My problem is with the Breadcrumb.
1) When I reload the page when in a route that is handled by Angular, the Breadcrumb is not built since the URL is not handled by MVC.
2) Is it possible to update the breadcrumb with the inner pages links when navigating through SPA handled by AngularJS.
I got rid of MVCSiteMapProvider and I use ng-breadcrumb (https://github.com/ncuillery/angular-breadcrumb)
Since you should always have a route defined at the angular level but the info at the MVC level is incomplete this is the only way to handle a complete breadcrumb.
I am working on a Laravel project with Backbone.js and I am stuck with router issues. I want my Laravel project to be a Single Page App (SPA), so at Backbone.js side, I am using hash fragments for links, but Laravel's Route is not recognise my Backbone's hash signs.
I understand that there is also pushState alternative for this purpose.
How can I use routers for a Single Page App, for both server and client side?
When you use Backbone.js you communicate the server through its API. In your Laravel project just create a RESTful API, so you can GET and POST data from/for it. In Laravel you use only models representing the resource and controllers handling the API requests. The routes for these API controllers don't have to care about hashtags, they are just regular routes. In the Backbone client all you have to do is to set the API URLs in your models to your resources in your Laravel back end, then you can fetch and use them.