while building with Laravel probably you may have faced the same situation where you have a RESTful service with JSON replies and, at the same time, you need to have a frontend able to consume those APIs to offer a web interface.
Now, the most obvious solution would be to use Laravel Blade template engine and to diversify routes according to the address (/resource or /api/resource). However, this approach brings in an additional burden, directly reflected in controllers, where are you have to consider not only the reply itself but also whether it comes from a device or from the web interface and reply accordingly.
I have also seen a lot of frontends actually detached from the backend and built using serverless technologies such as Angular or React, so that both the web interface and the mobile app consume the same APIs and the backend can be much simplified.
Let's take as an example a "Uber for..." service consisting of a native app, a PWA and an admin interface (web), which approach would be the most advisable and why?
Related
I want to develop my own single page web application (SPA) to get to grips with the modern and highly fluid world of web development. At the same time, I would like to use the page rendering technology (SSR) with built in data into html. However, there is an authorization problem.
Suppose that the user has already logged into the account before, as I imagine re-opening the site:
First request: the client makes a request to the frontend server along with identification and authorization data (for example, user id and token; the only option is to save them in cookies), the frontend server makes a request to the api server, transferring these service data, then the api server gives the information about the user and the content of the current page (in the same json), the frontend server renders this into a finished page and delivers it to the client.
Subsequent requests: the client directly addresses the api server, transferring the same (or updated after the first request) authorization data, receives json and processes it independently.
Actually, I want to move on to the question. Do I understand this interaction correctly? Can you do it differently / better? Are there tools that allow, for example, to use the components of the frontend framework as components of the MVC backend framework, so that one server does the rendering without unnecessary requests? Or a unified tool that includes the same coding for the frontend and backend to solve these problems? I will say right away that I would not like to write a backend in JS.
I can roughly imagine how you can get by with one request when using AngularJS (with a module for single page applications) and any backend MVC framework; although there will not be a full-fledged render, but search robots will not have to wait for my first fetch, since the data will be delivered initially, for example, through the data attribute. But in this case, I plan to choose Svelte (Sapper) and Ruby on Rails as the stack, although I think this is not important.
Thank you for your attention to the question!
Are there tools that allow, for example, to use the components of the frontend framework as components of the MVC backend framework, so that one server does the rendering without unnecessary requests?
If that's what you want you can install a frontend framework in Rails using webpacker. After that you will have a folder in your rails project that will contain your Svelte components. Then you import Svelte components in erb templates and pass data as props.
I have tried that approach but personally I prefer a separate frontend and backend talking through API calls. Then in your frontend you need something like Sapper if you need SSR. With webpacker you don't(assuming you mostly use Rails for routing).
If you are worried about authorization it's not really hard to implement. And after login you can store user info on local storage for instance for subsequent requests. But of course if you install with webpacker it's all done within Rails hence it's easier.
From my experience, using webpacker it's easy and quick in the beginning but you are more likely to get headaches in the future. With separate backend and frontend takes a bit more work, especially in the beginning, but it's smoother in the long run.
This helped me set the authentication between rails api and vue frontend.
So, if you wish to separate them, just install Rails as API only and I suggest you to use Jbuilder to build your jsons and serve them to the frontend as you need them.
I have managed to make run Laravel 5.4 and implemented the API Authentication (Passport).
What I would try to achieve is to make this as my API server and build React applications that would interact on this API.
Does this mean I have to make routes on routes\api.php?
Let's say I have a React app name requestform on development and running on http://127.0.0.1:8080. How will I consume an api route with axios or jquery?
I can't seem to make the correct keyword to search on google and all the samples I can get are the ones that the API and the javascript application is on the same domain.
This post may have been answered by now. But if not then...
I think you are in the right track..
Does this mean I have to make routes on routes\api.php?
Yes. Your API routes will depend on this file.
Let's say I have a React app name requestform on development and running on http://127.0.0.1:8080. How will I consume an api route with axios or jquery?
Make sure your API Server is running, say it's on http://server.dev, you can consume the API in another app by http://server.dev/api/[your-routes].
I can't seem to make the correct keyword to search on google and all the samples I can get are the ones that the API and the javascript application is on the same domain.
This is a matter of what front-end programming you know. You can use any javascript knowledge to consume your own API with the same domain. There is already a Vue integration packaged in Laravel 5.4+ or just plain vanilla javascript or jQuery.
I am to start designing & architecting a fairly big database business application (data entry, notifications, reporting, data export and usual security restrictions for data). Multiple clients - mobile apps & multiple websites will be there. Plan to use Asp.net MVC5 & Sql server for the development. Phonegap will be used to create mobile apps.
I plan to create an API. All interactions to the Database will be through the API (a REST API). This REST API will be created using Asp.Net MVC5. The front end will be developed as an HTML5 App which calls this API using AJAX. All interactions with the API will be through AJAX calls. Need to expose some of these services (5%) to third parties also.
For e.g. for a supplier management feature, there will be services like SupplierAdd, SupplierEdit, SupplierDelete, SupplierList etc. in the API. HTML5 App will call them through AJAX and do required. Necessary security will be imposed for these services using a login and token based security system.
Plan to use some Javascript frameworks like Angular JS for front end.
The entire application is one with around 200 DB tables and lot of relationships between DB tables. Business logic is only moderately complex. This is mainly a data storage & reporting application.
Is there any problem with this full API based approach ?
Another approach suggested is to avoid AJAX and Javascript and use ASP.Net MVC itself. No separate API will be there for each operation. .cshtml will submit to the controller method and this method will call the Business Layer and do operation. Services which are needed for mobile apps and third parties alone are exposed as API. Is this a better solution ?
The issue which I see for the second approach is that when more and more mobile applications or websites come in future, it does not offer needed flexibility. Also, exposure of some of the services to third parties will be difficult.
I request experienced architects to comment.
So, I'm starting out building a social network web app. I'm looking into how to fit the parts of my stack together and I'm looking for some guidance about what various frameworks will allow me to do. My current stack idea is to have:
Firebase JSON API: serving user, post, comment, and all the other data
EmberFire: to plug that API into EmberJS
EmberJS: my front-end MVC (because I'm new to MVC and Ember seems the most accessible)
What I'm stumbling on at the moment is how I'm going to implement users with this stack. I've looked at basic authentication stuff but I haven't found anything that would allow me to allow certain actions and views for certain users and not others - the basics of a social network really.
Is it sensible to be doing this stuff in front-end MVC? If so what should I be using to do authentication/personalisation? If not, should I just be doing a PHP/SQL setup? I'd rather avoid that because my skills are all front-end.
If you are just getting started, Firebase is a great service to learn on due to their 'back end as a service' model - you will spend more time building/modeling your data and less time running/installing. Not that you won't want to learn more about that later, but it lets you focus on one piece at a time.
From an access perspective, JS/NoSQL vs PHP/MySQL isn't going to be the issue. They each have their own security requirements - it's more that PHP/MySQL has had more time to establish those rules. Additionally, Firebase being a hosted service has it's own set of requirements.
Firebase security rules are a little weird when you first look at them, but they begin to make some sense after you sit with them for a bit. The Firebase docs are actually a pretty great resource. https://www.firebase.com/docs/security/
Basically, if you use a Firebase 'login provider' it makes Firebase act as both a database and a authentication manager, and the combo helps keep users 'fenced' to where you want them. You can use data from other paths, variables, validation rules, etc. You can even make a 'custom login provider' if you need to integrate with an existing one.
Finally, on the client end, your view can respond to whatever Firebase returns - if a user does 'hack' their way through to a page they shouldn't be on client side, no data is returned anyways and no submitted information would be allowed because of the rules.
I'm working on a web application that need to expose Json API for external apps and I'm planning to do an API centric architecture.
So basicly, the app will juste contains view/controllers for the web interface. the controllers will use Route::dispatch to create a request to the api part of the site (another controller in a package, but in the same laravel installation), then parse the result, and create view accordingly.
So I'm wondering what are the drawbacks, performance wise, of using this sort of architecture?
If each controller is writing the logic to internally dispatch another request then I'd consider abstracting that away from the controller and in to your own dispatcher. I doubt there would be a huge performance overhead. The application (as far as I know) doesn't get booted twice so you don't have to worry about that.
The only thing you need to be aware of is the input for the main request being used. Something you should take into account inside your dispatcher. Refer to this answer for more information.
You can also read more on consuming your own API.