I'm in the early stages of planning a web app built around consuming a content-management API. I have really taken a liking to Backbone.js after finding its ability to easily parse collections and models from REST end points.
I would like to have a full client-side routing solution with pretty URL's via pushState and browser history. Backbone has a router but I am not sure how to structure my React views and Backbone logic to make this all happen. Any pointers?
Also limelights mentioned React Router. Is this a better way to go while still interfacing with Backbone models, collections, and events?
Related
I know what angular.js is and I even had a question about it #Why use AngularJs in frontend if Laravel is already used as backend?.
but recently I started to read about React.js and from its site (its the V in the MVC) which is exactly what am after "handling the view and nothing else".
for me, I think Angular.js as an MVC framework was made to be used with something that is built with JavaScript from start to end like Node.js
and it seems like an overkill when used with something like Larval, where I simply need something to handle the frontend and nothing else + Angular have 2 main drawbacks
with the latest news about a new version that won't have back compatibility with the current version makes me even feared to start learning it just to find that more or less every project out there is using the old version which mostly is true.
angular renders the whole dom if anything got changed which again is an issue for big projects.
so based on the above, plz note that I want to learn/use JS solely to enhance the user experience not to build another Gmail or Facebook and so my question is,
could React.js be used with Laravel to handle the view and do everything Angular was going to give, or I have to use Angular liked or not?
could React.js be used with Laravel to handle the view and do everything Angular was going to give?
No
React is just for views. React components are stateful components with some really clever rendering stuff happening behind the scenes. To build a fully functional front-end app, you'd need to tie in some other code (or write it yourself).
React works well with Facebook's Flux architecture. I would suggest looking into that to learn how to manage the state of your react components.
What's key to understand here is that Flux and React are not parts of a large front-end framework. React is a library and Flux (as provided by Facebook) only provides a Dispatcher. The rest is up to you to implement. There are some pre-existing implementations you can look at if you need some help to get started.
What I like about flux is that it allows me implement things the way that fits my application best. React takes care of the heavy DOM lifting and is very easy to learn. Compared to Angular, I don't have to learn arbitrary conventions and gigantic APIs of a huge framework.
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.
I'm currently working on a complex single page web app. It's something like a charting program: you can select or add objects on a white page. There's many types of objects. If you select some of type A objects, then it will add/remove B/C/D objects based on a complex logic. I'm currently using Backbone.Model for these objects. And Backbone.View for displaying. It's a pretty standard MVC structure, with models for objects data, controllers for managing models and views, and views for displaying. It's all using DOM elements. The views are added, removed or updated (with CSS) based on model data.
It works great and now I'm trying to add server side to save and load all data to/from the server. I planned to write a REST API server with restify for all the models.
Then I find meteor.js, the 'realtime', 'reactivity' and 'database everywhere' features intrigue me. So it will greatly simplify my app if I can save and load my models directly and let meteor to do the sync. And the real time feature can be a great plus for my future features, such as adding realtime collaboration.
But it seems meteor has a very different idea from Backbone on how a web app is structured. How can I combine meteor with my current Backbone code? Do you have any great suggestions?
Thanks.
Uh, don't. Do meteor all the way, or do backbone, but meteor is pretty much a combined full-stack solution not really intended for use with something like backbone. Meteor already provides deeply-integrated components that address all the areas that backbone addresses (data sync, DOM updates, etc).
So I am planning out an app of moderate complexity using Angular for the frontend and Lithium for the backend. I'm full of questions at this point, but for this post I would like some ideas on templating. Both lithium and Angular have the capacity to handle the entire view layer, but I'd rather treat it like a single page app, so Angular will handle this.
Now how would I handle routes? Would Lithium basically be dumb of the current routes beyond the index? Should API endpoints have a special url scheme separate from the view URLs?
This is how I am thinking now::
theapp.com/dashboard/calendar/event/eventID :: for a view handled by Angular
&
theapp.com/api/event/eventID :: for an API endpoint
I'm quite new to building something this complex so please forgive me if this is a simple question. :)
Am I totally off the mark?
This presentation should be helpful: http://li3-angular.lithium-framework.com/
What you're planning is the way to go: Li3 expose a json api, and Angular handles your routes and views. Your URL scheme should follow REST principles.
li3_resources will help you to build a RESTful api: https://github.com/nateabele/li3_resources
Angular UI router should help you with your routes: https://github.com/angular-ui/ui-router
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?