Regarding of what backend you use to power the API behind a React app (Ruby on Rails, Node.js/Express, Java, etc), what are the consequences of making the frontend React app separate repository?
I like the idea of having my ReactJS app separated from my backend API code, just want to understand the pros/cons of going with this approach.
pros
front-end devs doesnt have to get familiar with backend
You can choose not to show your secret recipe.
can upgrade and deploy one without the other
Code Reusablity
Lazy loading for better UX
I actually dont have any cons to tell about this. it's just that i feel right developing apps like this. installing npm packages in RoR felt so wrong.
more Pros -
You new separate UI can link to more backends than 1 - think centralized UI for disparate components
Like Angular more, bang you got it
Like React more than Angular, bang you got it
Cons -
Needs added work to setup CORs
You will probably have to cookup secret sauce for pagination, serialization (i.e tied together even though separate) - not a problem if you follow a standard anyway
Need to have a long deep thought on behaviour when the backkend is down
Need to wrap brain around pull vs push
You now have 2 diff OS stacks & TCP stacks in the picture to increase your work on sys admin patching & understanding latency between the components
wrap brain around state & its management
IMHO separating the UI is worth all the cons given the pros outlined here & by Shan
Related
I recently started playing around with preact and am intrigued by the ease of use and the performance. I have also been eyeing react's new context api (preact has a library preact-context to operate the same way).
Are there any examples or applications someone can share/reference using preact that leverage combining socket.io and preact-context?
I am specifically looking to compare the "preact+preact-context" way as opposed to the "react+redux+router+thunk+saga+..." way especially as it relates to a SPA desktop-style application
The SPA application I am looking to build will be an MDI (multiple document interface) so not a content serving app where the state can all be held in redux. We are finding also that doing things the "Redux" way is adding a lot of overhead and complexity to our code, so I am trying to see if there is a better method.
What I am hoping to understand from some provided examples:
What would a SPA-type application look like without redux using context api? (I guess this is the same for react & preact)
What are the pros and cons of doing a SPA using context api?
Can socket.io be used in a context api provider in some way?
I am still quite confused about REST API, Angular and so on.
I would like to build simple web app which allows users to book events and I would like to do it in Symfony 3 + Angular.
In future, I could make it work on mobile phones as well.
The reason I want to do it is to learn symphony 3, REST API and Angular better and to increase chance I will get hired.
I have few questions:
1) Apart of the fact I am going to learn Angular what is the real benefit of using Angular rather than twig templates and HTML for the front end ?
2) As far I have seen people usually suggesting light weight frameworks to build REST API. Why would not they suggest symphony ?
3) What would you suggest to build to show you have got good skill set to get hired ?
1) Angular a complete framework. In your case, you would use angular as front end. This would be two options.
First one is completely using Angular, Symfony serves the RESTful API. Then twig is not involved anymore.
The other is used Angular within twig, acting like a server side rendering Angular. This way is not very common right now, rather less examples could be found.
In any case, Angular could provide single-page application, which could give your users better user experience, faster load speed, move the html view part completely to browser(make server less tasks regarding rendering the view). You could also achieve this by using twig+javascript, but it would be a bit more complex depends on your skills.
But in my opinion, the best benefits would be separate the frontend and backend from architecture perspective.
2) Symfony is a very complete PHP framework. Building a REST API is only an example of using Symfony. And in this way, some features from Symfony could not be used. I would say some lightweight framework would deliver the same result as using Symfony. It would also be easier using some lightweight framework(less code, less configuration, etc.). However, the performance of Symfony and large community might also need to take into consideration when you choose the right framework.
3) Always a good protfolio by showing your experience and skills.
I have an app based on the create-react-app starter kit and need to switch to universal/server rendering due to SEO issues.
Is there an easy way or example of taking the create-react-app teamplate and adding or modifying it to support universal rendering?
A lot of the examples I see for universal are overly complex for my needs and I prefer to keep it very clean and simple, if possible.
Thanks.
EDIT: FYI,
I found this medium post which points at this repository.
Seems simple enough, but since I'm a newbie on all webpack/react/node related stuff, if anyone thinks it's the wrong approach, would love to know...
There was a proof of concept of adding server rendering in this PR.
I can’t speak to how good it is but it’s something you could start with.
You may also look at some of the alternatives.
A few of them provide server rendering out of the box.
I've just created react universal (server-side rendering) starter used recommendations from redux and react-router v4. Fill free for feedback
https://github.com/gzoreslav/react-redux-saga-universal-application
You can take your app (bootstrapped with Create React App) to the next level by replacing react-scripts with a slightly altered version - react-app-tools, which allows adding server-side code to your project (e.g. for server-side rendering purposes and/or implementing an API endpoint). It will allow compiling and running your app using normal Create React App pipeline, using a single instance of Webpack, on the same HTTP port.
You can find more info by visiting React App SDK.
Hi I am attempting to build a largish website for my company & love to get some feedback on whether I am crazy or its a great idea. I am basically got the ok to go free rein, I guess as long as its going to have benefits (e.g performance, maintainability, scalability, re usability & SEO)
The way I am thinking of going about it.
Wordpress multisite (company has a handful of branches worldwide) e.g China, South Africa, US etc, so content needs to be tailored. Plan to use subdomains?
WP REST API - ability for reusable data across the websites and other blogging sites (scalability and performance) also the capability of browsing offline? http://themeshaper.com/tag/react/
AngularJS for routing/views/get-post requests or possibly React-router?
ReactJS for the view (performance and reusable components across all sites)
Most importantly - good for SEO (site is crawlable) which I believe ReactJS has that covered? ref: http://en.blog.altima.fr/seo/reactjs-seo/ but also whether I need prerender.io or other because of the routing?
Wondering how this will all work together and if theres any issues with the combination of these? Still also getting my head around if this needs to be setup as "Isomorphic" with a node server? (some more insight into this would be great also)
I have been inspired by the theme https://github.com/royboy789/angular-react-wordpress-theme
Thanks!
Not sure that mix of cool buzzwords (WP, Angular, React) is the good way to choose you technology stack. May be good ideas is to use Angular+Laravel, React+Laravel, Wp+HTML.
Considering SEO if you use Angular or React you just have AJAX-site. You can use prerender technique for your site. But recently Google stated that AJAX-crawl scheme is deprecated: http://googlewebmastercentral.blogspot.com/2015/10/deprecating-our-ajax-crawling-scheme.html . So may be there is no need to prerender your pages only for crawlers.
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.